Simple WordPress Snippets to Enhance Your Secondary Navigation

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 the 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.

1. 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.

2. 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>' . '&nbsp;<span  class="title-arrow">&#8250;</span>&nbsp; ';
}
// 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).

3. 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.

For example, a project I worked on used tags to filter posts by a relevant geographic region (of which there were dozens). This dropdown menu utilizes JavaScript to direct the user to whichever tag they choose instantly. You can also do something similar with categories.

4. Post Archive Pagination

<?php
the_posts_pagination(  array(
'mid_size' => 5, // The number of pages displayed in the menu.
'prev_text' => __( '&laquo; Go Back', 'textdomain' ), // Previous  Posts text.
'next_text' => __( 'Move Forward &raquo;', '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 gives the user a sense of your content depth.

Note the 'mid_size' argument in the code above. The number placed there will determine the number 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 every subpage. Adding 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 allows you to add your own custom functionality and look. In many ways, you’re limited only by your own imagination.