One of the great things about WordPress is the ability to reuse snippets of code over and over again within your themes. With that, you can build in ways to make websites easier to use.
In this article, we’re going to explore ways to enhance secondary navigation. In other words, navigation that is in addition to your site’s main menu. Adding these extra elements can further help users get where they need to go and discover content they may have otherwise missed.
Here are four such snippets you can use in your WordPress themes. While they’ll work as-is, it’s a good idea to add your own custom styles to ensure a perfect fit with your site.
Where to Place Code Snippets: The snippets below can be placed directly into your theme’s template files. The exact file may depend on your particular theme (check the Template Hierarchy for ideas). And, to some degree, it’s a matter of personal preference. Use them where you think they’ll best serve your users.
It may also be a good idea to use conditional statements so that snippets are only displayed when certain conditions are met. For example, you might not want a particular snippet to run on your site’s home page.
۱٫ Easily Navigate Within a Section of Pages
<?php if ( $post->post_parent ) $children = wp_list_pages( array( 'title_li' => '', 'child_of' => $post->post_parent, 'echo' => 0 ) ); else $children = wp_list_pages( array( 'title_li' => '', 'child_of' => $post->ID, 'echo' => 0 ) ); if ( $children ) : ?> <ul> <?php echo $children; ?> </ul> <?php endif; ?>
Source: WordPress Code Reference
This code makes for a great secondary navigation menu that could be used, for example, within a sidebar. It automatically displays the pages within the current section you’re browsing.
As an example, let’s say your site has an About Us page, with subpages for History, Mission Statement and Staff. Users will be able to more easily navigate between the various pages within this section as a bulleted list of links.
۲٫ Breadcrumb Style Page Titles
<h1 class="entry-title"> <?php // Conditional Statement to Check for a Parent Post if($post->post_parent) $parent_title = get_the_title($post->post_parent); $parent_link = get_page_link($post->post_parent); // Display Parent Post Link, Title and Separator echo '<span class="parent-title"><a target="_blank" href="' . $parent_link . '">' . $parent_title . '</a></span>' . ' <span class="title-arrow">›</span> '; // Display the Current Page Title the_title(); ?> </h1>
This snippet will check to see if the current page has a parent. If so, the parent page’s link and title are displayed within the
H1 tag at the top of the page. An arrow character is also displayed between the parent and current page title to complete the breadcrumb look.
Note that this breadcrumb effect only goes one level deep. So you’ll have to adjust the code if you want to link to multiple levels (Parent » Level 1 » Level 2).
۳٫ JS Dropdown Menu of Tags
<?php // Show a Drop Down Menu of Tags echo "<select onChange="document.location.href=this.options[this.selectedIndex].value;">"; echo "<option>Choose a Tag:</option>n"; foreach (get_tags() as $tag) echo '<option value="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</option>n'; echo "</select>"; ?>
If your site takes advantage of WordPress post tags, it may be useful to provide a simple way for users to navigate between them. This is particularly effective for sites with a lot of tags.
۴٫ Post Archive Pagination
<?php the_posts_pagination( array( 'mid_size' => 5, // The number of pages displayed in the menu. 'prev_text' => __( '« Go Back', 'textdomain' ), // Previous Posts text. 'next_text' => __( 'Move Forward »', 'textdomain' ), // Next Posts text. ) ); ?>
Source: WordPress Code Reference
While many WordPress themes have a simple back and forth navigation for post archives, it’s a nice touch to add individual page numbers to the mix. It allows for navigating to a specific page and also gives the user a sense of your content depth.
'mid_size' argument in the code above. The number placed there will determine the amount of pages seen between the Next and Previous text links.
Give Users a Helping Hand
Each of the snippets above can bring some measure of organization to how users access your content. This is especially important on sites that have a lot of subpages or blog posts. In the case of subpages, primary navigation can become overwhelming if you try to display each and every subpage. Adding some basic secondary navigation elements provide a more straightforward way for users to find what they’re looking for.
It’s also worth noting that these snippets are meant to be used as starting points. The flexibility of PHP and CSS allow you to add your own custom functionality and look. In many ways, you’re limited only by your own imagination.