WordPress Breadcrumb Function

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

Hide DIV onClick on Outside

<script type="text/javascript">
    $(document).ready(function(){
    $('.form-container').click(function(event){
    console.log('click - form');
    //we want all click events in the form to stop at the form-container element, so that the event does not reach the body element
    event.stopPropagation();
    });
  
    $('html').click(function(event){
      console.log('click - body');
      //hide the form if the body is clicked
      $('.form-container').css('display','none');
    });
 
    $('button').click(function(event){
    $('.form-container').css('display','block');
    event.stopPropagation();
    });
    });
    </script>