How to add a breadcrumb to WordPress header?

Question

I would like to display the other paths/pages which are before the current site, plus the current site as you can see here.

I searched the web and I couldn't found something. It may also be that I do not know what I should look for.

Answer 1

I always like the non-plugin solution, even if it's a hard one. To create a breadcrumb, you will need to functions.

One, will create a chain of items ( such as categories ) for you. This will be used to form the breadcrumb later:

function get_category_parents( $id, $link = false, $separator = '/', $nicename = false, $visited = array(), $iscrumb=false ) {
    $chain = '';
    $parent = get_term( $id, 'category' );
    if ( is_wp_error( $parent ) ) {
        return $parent;
    }
    if ( $nicename ) {
        $name = $parent->slug;
    } else {
        $name = $parent->name;
    }
    if ( $parent->parent && ( $parent->parent != $parent->term_id ) && !in_array( $parent->parent, $visited ) ) {
        $visited[] = $parent->parent;
        $chain .= get_category_parents( $parent->parent, $link, $separator, $nicename, $visited , $iscrumb);
    }
    if ($iscrumb){
        $chain .= '<li><span class="sep">/</span><a href="' . esc_url( get_category_link( $parent->term_id ) ) . '"><span>'.$name.'</span></a></li>' . $separator ;
    } elseif ( $link && !$iscrumb) {
        $chain .= '<a href="' . esc_url( get_category_link( $parent->term_id ) ) . '">'.$name.'</a>' . $separator ;
    } else {
        $chain .= $name.$separator;
    }
    return $chain;
}

Now that we have our chain, let's form the breadcrumbs:

function get_breadcrumbs() {
    global $wp_query;?>
    <ul><?php 
        // Adding the Home Page  ?>
        <li><a href="<?php echo esc_url( home_url() ); ?>"> <span> <?php bloginfo('name'); ?></span></a></li><?php
        if ( ! is_front_page() ) {
            // Check for categories, archives, search page, single posts, pages, the 404 page, and attachments 
            if ( is_category() ) {
                $cat_obj     = $wp_query->get_queried_object();
                $thisCat     = get_category( $cat_obj->term_id );
                $parentCat   = get_category( $thisCat->parent );
                if($thisCat->parent != 0) {
                    $cat_parents = get_category_parents( $parentCat, true, '', false, array(), true );
                }
                if ( $thisCat->parent != 0 && ! is_wp_error( $cat_parents ) ) {
                    echo $cat_parents;
                }
                echo '<li><span class="sep">/</span><a href="'.get_category_link($thisCat).'"><span>'.single_cat_title( '', false ).'</span></a></li>';
            } elseif ( is_archive() && ! is_category() ) { ?>
                <li><?php _e( '<span class="sep">/</span> Archives' , 'text-domain' ); ?></li><?php 
            } elseif ( is_search() ) { ?>
                <li><?php _e( '<span class="sep">/</span> Search Results' , 'text-domain' ); ?></li><?php 
            } elseif ( is_404() ) { ?>
                <li><?php _e( '<span class="sep">/</span> 404 Not Found' , 'text-domain'); ?></li><?php
            } elseif ( is_singular( 'post' ) ) {
                $category    = get_the_category();
                $category_id = get_cat_ID( $category[0]->cat_name );
                $cat_parents = get_category_parents( $category_id, true, '',false, array(), true );
                if ( ! is_wp_error( $cat_parents ) ) {
                    echo $cat_parents; 
                } 
            } elseif ( is_singular( 'attachment' ) ) { ?>
                <li>
                    <?php _e( '<span class="sep">/</span>', 'text-domain' ); the_title(); ?>
                </li><?php 
            } elseif ( is_page() ) {
                $post = $wp_query->get_queried_object();
                if ( $post->post_parent == 0 ) { ?>
                    <li><?php _e( '<span class="sep">/</span>', 'text-domain' ); the_title(); ?></li><?php
                } else {
                    $title = the_title( '','', false );
                    $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
                    array_push( $ancestors, $post->ID );
                    foreach ( $ancestors as $ancestor ) {
                        if ( $ancestor != end( $ancestors ) ) { ?>
                            <li>
                                <?php _e( '<span class="sep">/</span>', 'text-domain' ); ?><a href="<?php echo esc_url( get_permalink( $ancestor ) ); ?>"> <span><?php echo strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ); ?></span></a>
                            </li><?php 
                        } else { ?>
                            <li>
                                <?php _e( '<span class="sep">/</span>', 'text-domain' ); ?><?php echo strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ); ?>
                            </li><?php 
                        }
                    }
                }
            }
        } ?>
    </ul><?php 
}

And now, simply calling get_breadcrumbs(); in the theme's header.php will output a nice navigation to your website, without installing any plugins.

I would use a conditional too, to hide the breadcrumbs on the homepage:

if (!is_home()) {
    get_breadcrumbs();
}

Answer 2

If I understand you correctly, you are looking for breadcrumbs. The best I know is the breadcrumb in Yoast's SEO Suite.

You just need to install it, and add the following code to your theme.

yoast_breadcrumb('', '', false);