How to create breadcrumbs. - WPTRINITY

How to create breadcrumbs.

The “breadcrumbs” refers to an website navigational flow . That is meant to help trace one’s steps back to a website’s homepage). They allow users to see how the current page fits into the whole site structure by providing an inline track of links.

There are Two ways we create breadcrumbs :

  • One with the help of Parent Children Concept of the pages
  • Second With according to the menu structure on the Site.

Breadcrumbs with the help of Parent Children Concept of the pages.

From with the help of parent child concept of breadcrumbs First you need to create parent and
there children pages according to this parent and children page hierarchy breadcrumbs will show on the page

After Creating the parent and there children from the backend you need to add Code in the
your function.php

function breadcrump_page( $post ) {
    $format = '<a href="%s" title="%s">%s</a> >';
    $anc = array_map( 'get_post', array_reverse( (array) get_post_ancestors(                    $post ) ) );

    $links = array_map( 'get_permalink', $anc );

    echo '<div class="breadcrumb-wrap container"><nav aria-label="breadcrumb"><ol class="breadcrumb">';

    foreach ( $anc as $i => $apost ) {
        $title = apply_filters( 'the_title', $apost->post_title );
        printf( $format, $links[$i], esc_attr($title), esc_html($title) );
    }

    echo  ''.apply_filters( 'the_title', $post->post_title );
    echo "</ol> </nav></div>";

}

On page where you want to show the breadcrumbs just call the function on that place:

<?php
breadcrump_page( $post );
?>

Breadcrumbs with according to the menu structure on the Site.

For Breadcrumbs with according to the menu structure on the Site.
First Step we need to add code in your function.php

function my_breadcrumb($theme_location = 'main', $separator = '<span class="sprt">&gt;</span> ') {


$items = wp_get_nav_menu_items($theme_location);
_wp_menu_item_classes_by_context( $items ); // Set up the class variables, including current-classes
$crumbs = array();
$already_exist = array('OverView',"Overview",'OVERVIEW');

echo '<div class="breadcrumb-wrap container"><nav aria-label="breadcrumb"><ol class="breadcrumb">';

$crumbs[] = "<li class='breadcrumb-item active' aria-current='menu'><span><a href='".get_site_url()."' title='home'>Home </a></span> </li>";

foreach($items as $item) {
if ($item->current_item_ancestor && !$item->current && !in_array($item->title,$already_exist)) {
$crumbs[] = "<li class='breadcrumb-item active' aria-current='menu'><span><a href='{$item->url}' title='{$item->title}'>{$item->title}</a></span> </li>";
$already_exist[] = $item->title;
}
elseif ($item->current && !in_array($item->title,$already_exist)){
$crumbs[] = "<li class='breadcrumb-item notactive' aria-current='menu'><span>{$item->title}</span> </li>";
$already_exist[] = $item->title;
}
}

$count_menu = count($crumbs);
if($count_menu > 1 ):
echo implode($separator, $crumbs);
else:
$crumbs = array();
echo implode($separator, $crumbs);
endif;


echo "</ol> </nav></div>";
}

After adding the code in function.php call function my_breadcrum(‘your menu slug here’) in the place where you show breadcrumbs:

<?php
my_breadcrumb('header_menu');
?>



Second step we need to create menu and there submenu according need.
Breadcrumbs will show automatically according to your menu structure of site.

Leave a Comment

Your email address will not be published. Required fields are marked *