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 Create and get WordPress Custom Field

How to add post from frontend in wordpress without plugin

WordPress Websites Are SEO Friendly Or Not

How to get last insert id in WordPress

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

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.