What are WordPress Breadcrumb?

bygiludi

1.3K followers

Updated 10 years ago

Wikipedia defines a breadcrumb as follows:

The graphical control element Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

Unfortunately plugins for simple functions within a WordPress installation are too often used. To answer to control this shortcoming, or perhaps rather the laziness a bit, I'm just doing my blogs to extract the juice a little and make plug-in free. In the following you’ll find a code that you can copy in your theme’s functions.php, that will generate a breadcrumb very simple and that you can use on any page (single.php, archiv.php etc.).

Modify your theme files only when you have some experience in Html and css coding, otherwise choose a theme with integrated breadcrumbs or use the below recommended plug in.

To integrate our new breadcrumb feature in our WordPress theme, you proceed as follows:

Modify the first functions.php

You go to appareance>Editor and open the functions.php and just copy the following code to the file:

<?php

function the_breadcrumb() {

global $post;

echo '<ul id="breadcrumbs">';

if (!is_home()) {

echo '<li><a href="';

echo get_option('home');

echo '">';

echo 'Home';

echo '</a></li><li class="separator"> / </li>';

if (is_category() || is_single()) {

echo '<li>';

the_category(' </li><li class="separator"> / </li><li> ');

if (is_single()) {

echo '</li><li class="separator"> / </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="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a></li> <li class="separator">/</li>';

}

echo $output;

echo '<strong title="'.$title.'"> '.$title.'</strong>';

} else {

echo '<li><strong> '.get_the_title().'</strong></li>';

}

}

}

elseif (is_tag()) {single_tag_title();}

elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}

elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}

elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}

elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}

elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}

elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}

echo '</ul>';

}

?>

Then add to your header.php following code :

<?php the_breadcrumb(); ?>

Then add this to your Stysheet.css

#breadcrumbs{

list-style:none;

margin:10px 0;

overflow:hidden;

}

#breadcrumbs li{

float:left;

margin-right:15px;

}

#breadcrumbs .separator{

font-weight:700;

font-size:20px;

color:#999;

}

But for those of you who prefer not to go and change the files of your thème, there are some very good plugins like:

Breadcrumb NavXT -

https://wordpress.org/plugins/breadcrumb-navxt/