Tutorial: WordPress Breadcrumb Function

WordPress Breadcrumb Function Tutorial

Tutorial: WordPress Breadcrumb Function

Frustratingly, WordPress does not have a built in breadcrumb function!

So while looking around for solutions I decided to combine what I’ve found and add my own twist, in the hopes of creating a fully comprehensive WordPress breadcrumb function of my own.

This will produce a breadcrumb that looks something like this:

Your Blog Name > Your Post Category > Your Post Title

Here’s the function

Paste this into your functions file (functions.php) within you theme directory (www.yousite.com/wp-content/themes/your_theme/functions.php)

function the_breadcrumb() {

    $sep = ' » ';

    if (!is_front_page()) {

        echo '<div class="breadcrumbs">';
        echo '<a href="';
        echo get_option('home');
        echo '">';
        bloginfo('name');
        echo '</a>' . $sep;

        if (is_category() || is_single() ){
            the_category('title_li=');
        } elseif (is_archive() || is_single()){
            if ( is_day() ) {
                printf( __( '%s', 'text_domain' ), get_the_date() );
            } elseif ( is_month() ) {
                printf( __( '%s', 'text_domain' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'text_domain' ) ) );
            } elseif ( is_year() ) {
                printf( __( '%s', 'text_domain' ), get_the_date( _x( 'Y', 'yearly archives date format', 'text_domain' ) ) );
            } else {
                _e( 'Blog Archives', 'text_domain' );
            }
        }

        if (is_single()) {
            echo $sep;
            the_title();
        }

        if (is_page()) {
            echo the_title();
        }

        if (is_home()){
            global $post;
            $page_for_posts_id = get_option('page_for_posts');
            if ( $page_for_posts_id ) { 
                $post = get_page($page_for_posts_id);
                setup_postdata($post);
                the_title();
                rewind_posts();
            }
        }

        echo '</div>';
    }
}

And here’s how it’s called

Place this code where you would like it to appear. In most of my sites I place it in the header.php file (www.yousite.com/wp-content/themes/your_theme/header.php), that way it appears on every page.

<?php the_breadcrumb() ?>

And that’s all you need to know…. unless your curious as to how it works….

How it works

This is the separator you would like to appear between the levels of the breadcrumb

$sep = ' » ';

This checks if the current page is NOT the homepage, therefor only showing the breadcrumbs on the inner pages of your site

if (!is_front_page()) {

Start the breadcrumb with a link to your homepage

echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo '</a>' . $sep;

Check if the current page is a category, an archive or a single page. If so show the category or archive name.

if (is_category() || is_single() ){             
    the_category('title_li=');         
} elseif (is_archive() || is_single()){             
    if ( is_day() ) {                 
        printf( __( '%s', 'text_domain' ), get_the_date() );             
    } elseif ( is_month() ) {                 
        printf( __( '%s', 'text_domain' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'text_domain' ) ) );             
    } elseif ( is_year() ) {                 
        printf( __( '%s', 'text_domain' ), get_the_date( _x( 'Y', 'yearly archives date format', 'text_domain' ) ) );             
    } else {                 
        _e( 'Blog Archives', 'text_domain' );             
    }         
}

If the current page is a single post, show its title with the separator before as the single posts category/archive would have been echo’d before this.

if (is_single()) {             
    echo $sep;             
    the_title();         
}

If the current page is a static page, show its title.

if (is_page()) {             
    echo the_title();         
}

This last section is added for if you have a static page assigned to be you posts list page. It will find the title of the static page and display it. i.e Home >> Blog

if (is_home()){             
    global $post;             
    $page_for_posts_id = get_option('page_for_posts');             
    if ( $page_for_posts_id ) {                 
        $post = get_page($page_for_posts_id);                 
        setup_postdata($post);                 
        the_title();                 
        rewind_posts();             
    }         
}

That’s it!

And that’s it. Any questions please leave a comment and i’ll be happy to answer

7 Comments
  • Dan
    Posted at 10:48h, 22 April Reply

    Thanks for the function. Unfortunately it is missing a lot of basic requirements. For example if you have a Page X and and Page Y. Page X is the parent of Page Y. This function will show Home >> Page Y not Home >> Page X >> Page Y which is the true path. Any chance of an update?

  • Christine
    Posted at 11:33h, 17 June Reply

    Thank you that worked perfectly- I’ve been looking for a good simple breadcrumb function and this is great

  • Evandro
    Posted at 04:14h, 06 July Reply

    Hello Congratulations tutorial,
    I wonder, as I put the word Home instead of the blog title?

    Another question, I would like to add before Home, the following sentence:

    You are in:

    I hope congratulations and thanks for listening.

  • damas-xp
    Posted at 21:27h, 29 July Reply

    That’s cool dude. oh yeah, I don’t know about breadcrumbs, so can you explain it?

  • Andy Little
    Posted at 10:20h, 16 April Reply

    Hi All,

    So sorry I’ve not been able to reply. We’ve been snowed under here with work.

    We are currently expanding on this breadcrumb function and will post an update once complete. If you still require help please send us reply.

    Alternatively, if you have any other WordPress or Magento related questions, or would like to see a particular post, please let us know.

    Many Thanks

  • Timothy Jack
    Posted at 08:39h, 22 April Reply

    Super helpful! Thanks =)

  • Buğra Yazar
    Posted at 15:43h, 31 October Reply

    thank you 🙂

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.