BobbyeM71hxwHow to Add Breadcrumbs without Plugin and Best Practice

Breadcrumb is a navigation aid used in user interfaces. It gives users a way to keep track of their locations. 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 find ability of website sections and pages.

Benefits of Using Breadcrumbs-

  • Convenient for users– Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.
  • Reduces clicks or actions to return to higher-level pages– Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.
  • Doesn’t usually hog screen space– Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.
  • Reduces bounce rates– Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

When we don’t need to use the breadcrumb
A common mistake in implementing breadcrumbs is using them when there is no benefit.

In the above example. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (”Music”) takes you back to the first tab (”Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (”Search” and “Artist hall of fame”).

Add breadcrumb-


You can easily add them via several good plugins (ex. Yoast Breadcrumbs), but sometimes you want to build breadcrumbs into a theme without using a plugin.

Step: 1. Created a php file called breadcrumbs.php and inserted the following code…

/*Breadcrumbs*/
function the_breadcrumb() {
echo ‘You are here: ‘;
if (!is_home()) {
echo ‘
‘;
echo ‘Home’;
echo “
» “;
if (is_category() || is_single()) {
if (is_single()) {
echo the_title();
}
} elseif (is_page()) {
echo the_title();
}
elseif (is_tag()) {
single_tag_title();
}
elseif (is_day()) {
echo “Archive for “; the_time(‘F jS, Y’);
}
elseif (is_month()) {
echo “Archive for “; the_time(‘F, Y’);
}
elseif (is_year()) {
echo “Archive for “; the_time(‘Y’);
}
elseif (is_author()) {
echo “Author Archive”;
}
elseif (isset($_GET[‘paged’]) && !empty($_GET[‘paged’])) {
echo “Blog Archives”;
}
elseif (is_search()) {
echo “Search Results”;
}
elseif (is_404()) {
echo “404 Error”;
}
}else{
echo ‘
‘;
echo ‘Home’;
echo “
“;
}
}
?>
/*End of Breadcrumbs*/

2. Add this line…whereever you want to include the breadcrumb in your website

<?php the_breadcrumb(); ?>

http://get-a-designer.com

http://www.all1sourcetech.com

Tags: , , , ,