WordPress Breadcrumbs Built Into Template Without Plugins

Here is a simple 3 level WordPress breadcrumb system that uses Page Templates to print breadcrumbs on your WordPress website.

WordPress Breadcrumbs

While you can use plugins to achieve the same result, this tutorial is for WordPress Theme Designers that do not want to use plugins for their custom WordPress themes.

Create The Breadcrumbs

We will use conditional formatting to output the breadcrumbs using standard WordPress template tags. You can copy and paste this code into any place you would like your breadcrumbs to display.

<?php // create the breadcrumbs

    if ( is_page_template('frontpage.php') ) {
    // Returns true when front page is being used.
    echo get_the_title($ID);

    } elseif (is_page_template('top-page.php') ) {
    // Returns true when top level page is being used.
    echo "Home&nbsp;&raquo;&nbsp;";
    echo get_the_title($ID);

    } elseif (is_page_template('sub-page.php') ) {
    // Returns true when sub page being used.
    echo "Home&nbsp;&raquo;&nbsp;";
    echo get_the_title($post->post_parent);
    echo "&nbsp;&raquo;&nbsp;";
    echo get_the_title($ID);

   } else
   // Returns true when page.php or
   // default template is being used.
   echo get_the_title($ID);
?>

The first if statement checks to see if the home page template in this case it’s frontpage.php. If the home page template is being used then only the title of the page using the home page template will be displayed. Replace the file names with your own template file names to get this to work.

if ( is_page_template('frontpage.php') ) {

Here is the code that outputs the home page title on the first if statement.

echo get_the_title($ID);

Now that we have assigned the home page template a breadcrumb we can go on the the top level pages of our template.

} elseif (is_page_template('top-page.php') ) {

The elseif statement checks to see if the top-page.php template is being used. If so then it displays two breadcrumbs using the following code.

echo "Home&nbsp;&raquo;&nbsp;";
echo get_the_title($ID);

The first echo displays static HTML or plain text. In this example we are just putting the word “Home” followed by a “non breaking space character “and a » symbol” followed by another “non breaking space character”.

The second echo outputs the current page’s title by querying the page’s ID.

The 2nd elsif statement checks to see if the sub page template is being used and outputs the Home Page » Top Page » Sub Page, page titles. It does this by calling the current static HTML call, the current page’s Parent Page page title and calls the current page title to display three levels of breadcrumbs.

To call the current page’s parent page title we use this code.

echo get_the_title($post->post_parent);

The last else statement is intended for pages that use the default page template and or other page templates that do not require breadcrumbs.

} else
        // Returns true when page.php or
        // other template are being used.
        echo get_the_title($ID);

Getting It To Work.

All you have to do to get these breadcrumbs working is log into your WordPress admin, go to the Pages screen and assign the pages that you want breadcrumbs for a parent page unless it’s the home page or default page.

And that’s it. You can add as many elseif statements that you want for as many templates that you want.

Known Bugs

  1. This code currently supports three levels of breadcrumbs. I did not have enough time while writing this code to explore the possibilities of printing grandparent and great grandparent breadcrumbs.
  2. If your sub page template’s breadcrumbs look funny, then you have not assigned your page a parent and will result in redundant breadcrumbs.

I Welcome Your Improvements

If anyone has a better way of adding breadcrumbs or has a way of adding grandparent, great-grandparent and so on to this code please post it here. This is just something that I had to code real quick for a client’s last moment changes.

About Matthew Shuey

I focus on internet marketing, front end web development and social media services for entrepreneurs and startups in the United States. I'm an avid Google+ user and I am easily accessible there. For more information please visit my Google+ Profile

Loading Facebook Comments ...
Loading Disqus Comments ...

2 Responses to WordPress Breadcrumbs Built Into Template Without Plugins

  1. These breadcrumbs are easy to setup if you know HTML and PHP coding. Is there any WordPress Plugins that do the same thing?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>