How to create and display breadcrumb navigation links in wordpress

If you want to display your custom breadcrumb navigation links in your WordPress website site? than you can display your own breadcrumb links. Do you know breadcrumb navigation is a secondary navigation menu of the website that tell users where they are on a website or active location of user on a website relative to the homepage. In this tutorial, we are going to cover how to create and display breadcrumb navigation links in WordPress.

What is Breadcrumb Navigation

A “breadcrumb” is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

Why We Use Breadcrumb Navigation

The main purpose of breadcrumb navigation is to help users indicate around a website. It helps users understand where they are on a site or active location of user on a website relative to the homepage. It also helps search engines understand the hierarchy of links on a web page.
Search engines like Google have started displaying breadcrumbs below the title of a site in the search results. This gives your website more visibility in the results and increases your click through rate.

How to create and display breadcrumb navigation links in WordPress

For create and display breadcrumb navigation links in WordPress just follow the below code, Here we are creating a function name is my_breadcrumbcode() for create breadcrumb, inside this function we are writing code just you have need copy that code and past into your function.php file.

<?php
/**
 * Breadcrumbs
 */
function my_breadcrumb() {
    global $post;
    echo '<ol class="breadcrumb">';
    if ( !is_home() ) {
        echo '<li><a href="';
        echo esc_url( home_url() );
        echo '">';
        echo __( 'Home', 'phpkida' );
        echo '</a></li> <li> / </li>';
        if ( is_category() || is_single() ) {
            echo '<li>';
            the_category( ' </li><li> / </li><li> ' );
            if ( is_single() ) {
                echo '</li><li> / </li><li>';
                the_title();
                echo '</li>';
            }
        } elseif ( is_page() ) {
            if ( $post->post_parent ){
                $anc = get_post_ancestors( $post->ID );
                $title = get_the_title();
                foreach ( $anc as $ancestor ) {
                    $output = '<li><a href="'. esc_url( get_permalink( $ancestor ) ) .'" title="'. esc_attr( get_the_title( $ancestor ) ) .'">'. esc_attr( get_the_title( $ancestor ) ) .'</a></li> <li> / </li>';
                }
                echo $output;
                echo esc_attr( $title );
            } else {
                '<li>'. the_title_attribute() .'</li>';
            }
        }
    } elseif ( is_tag() ) {
        single_tag_title();
    } elseif ( is_day() ) {
        echo"<li>" . __( 'Archive for', 'phpkida' ); the_time( 'F jS, Y' ); echo'</li>';
    } elseif ( is_month() ) {
        echo"<li>" . __( 'Archive for', 'phpkida' ); the_time( 'F, Y' ); echo'</li>';
    } elseif ( is_year() ) {
        echo"<li>" . __( 'Archive for', 'phpkida' ); the_time( 'Y' ); echo'</li>';
    } elseif ( is_author( ) ) {
        echo"<li>" . __( 'Author Archive', 'phpkida' ); echo'</li>';
    } elseif ( isset( $_GET['paged'] ) && !empty( $_GET['paged'] ) ) {
        echo "<li>" . __( 'Blog Archive', 'phpkida' ); echo'</li>';
    } elseif ( is_search() ) {
        echo"<li>" . __( 'Search Results', 'phpkida' ); echo'</li>';
    }
    echo '</ol>';
}
?>

How display breadcrumb navigation links in WordPress

Your breadcrumb code is ready for use, just call your breadcrumb function whenever you want to display breadcrumb.

<?php my_breadcrumb(); ?>

Styling For Breadcrumbs

This CSS helps to make beautiful style the breadcrumbs links.

<style>
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}
</style>

8 thoughts on “How to create and display breadcrumb navigation links in wordpress”

Leave a Reply

Related Posts: You may like

How to track contact form 7 form in salesforce without plugin

Contact Form 7 Redirect to Thank You Page

How to Validation Business Email in Contact Form 7 WordPress

How to Create and get WordPress Custom Field

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Download Instagram Videos & Photos.

Download Now

CURRENCY CONVERTER

Real Time Currency Converter

Convert Now

ROBOST.TXT GEN.

Robots.txt File Creater

Create Now

HTML MINIFIER

Compress yout HTML Code

Minify Now

CSS MINIFIER

Compress yout CSS Code

Minify Now

JAVASCRIPT MINIFIER

Compress yout JavaScript Code

Minify Now

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.