WordPress Breadcrumb Navigation on Pages & Meta Title - Code-Tips.com - Web Development, Programming, SEO

Monday, June 13, 2011

WordPress Breadcrumb Navigation on Pages & Meta Title

Today I needed to include page breadcrumbs on a WordPress blog site.  I only wanted the breadcrumb navigation to be visible on pages, and to not display at all on the homepage (static).

The following solution by Dimox was perfect for what I needed:
WordPress Breadcrumbs Without a Plugin

The solution was easy to implement and satisfied more than my initial requirements, so it gives me great pleasure to make a mention on my blog here.

By default, the solution does not display the breadcrumb on the homepage, although this is easy to amend if required (see early comments).  I placed the "short code" for the main function in only the page template so that the breadcrumb would not display on posts or category/search pages.

As the solution worked so well, I decided to use to display a breadcrumb title.  To do this, I first adjusted the dimox_breadcrums() function to include one parameter: ($meta_title = false)

I then adjusted each part of the function that builds the breadcrumb to only include HTML output before and after each item in the breadcrumb ($before / $after) if the $meta_title variable is true. This meant that only the page title text and delimiter were included in the breadcrumb when $meta_title is true, allowing me to include in the title tag in the page meta data.

To incorporate the breadcrumb into the title, I modified the header template for the theme that I was using, to include the following for the meta title:


<title><?php bloginfo('name'); ?> » <?php if(is_page()) dimox_breadcrumbs(true); else wp_title(); ?> </title>

This meant that if a page, it would include the breadcrumb in the title overriding the default title, and include the default title when another type of page (post, search, category/tag, etc).

2 comments:

  1. Do you have an example of this or perhaps the finished code so that I may try it out too ?

    ReplyDelete
  2. @globaltimoto,

    The boolean value passed is a modification to the original Dimox code that only includes the link to home if false is passed. If true is passed, the home link is ignored, and the breadcrumb is outputted as text only.

    I have wrapped each of the examples below in comment lines to help destinguish my notes from each snippet from the modified function.

    Below is the top of the modified function, where the $before and $after variables are set to a blank string if true is passed:

    //start of example snippet ------------
    function dimox_breadcrumbs($meta_title = false) {

    $delimiter = '&raquo;';
    $home = 'Home'; // text for the 'Home' link
    $before = '<span class="current">'; // tag before the current crumb
    $after = '</span>'; // tag after the current crumb

    if(!$meta_title)
    {
    $before = '<span class="current">'; // tag before the current crumb
    $after = '</span>'; // tag after the current crumb
    }
    else
    {
    $before = ''; // tag before the current crumb
    $after = ''; // tag after the current crumb
    }
    //end of snippet ------------

    There are further minor tweaks throughout the function to only include html tags when false is passed to the function and also to include the home link only when true is passed. (Note: I haven't included the entire function, only modified sections)

    Only show home link if false:

    //start of example snippet ------------
    if(!$meta_title)
    echo '<div id="crumbs">';

    global $post;
    $homeLink = get_bloginfo('url');
    if(!$meta_title)
    echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
    //end of snippet ------------


    Render as text if $meta_title is true:

    //start of example snippet ------------
    if(!$meta_title)
    $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
    else
    $breadcrumbs[] = get_the_title($page->ID);
    //end of snippet ------------

    Ignore html tags if $meta_title is true (bottom of function):

    //start of example snippet ------------
    if(!$meta_title)
    echo '</div>';

    }
    //end of snippet ------------

    The example code in the post above is the modified title tag, which includes the breadcrumb.

    The other page from the template I included the breadcrumb is the "Page Template" (page.php in my case):

    Close to the top of the page content, I included the following:

    //start of example snippet ------------
    <?php dimox_breadcrumbs(); ?>
    //end of snippet ------------

    Inlcluding only on the page template meant that the breadcrumb would display when pages on the site were being viewed, but not posts and other content types.

    Please let me know if this helps. I have avoided re-posting the entire modified function, but can provide further explanation if required, but can provide further explanation if required. This was implemented on the Php FeedWriter Website.

    ReplyDelete