Navigation is a vital part of any website, and there is more than one way to provide it. The main menu on your website is the primary navigation tool that takes users to the content they want. However, it does not tell your customers where they currently are on your website.<\/p>\n\n\n\n
A breadcrumb menu is a secondary navigation system that tells your customers where they are in relation to your home page. This helps them navigate through the pages of your website with ease, and avoid getting lost.<\/p>\n\n\n\n
In this article, we will look into what breadcrumbs are and how they benefit your website. We\u2019ll then show you how to add breadcrumbs to your WordPress website. Let\u2019s get started!<\/p>\n\n\n\n\n\n
Breadcrumbs is the term used to describe a hierarchical navigation menu. This kind of menu involves a trail of links, not unlike the breadcrumb trail left by Hansel and Gretel:<\/p>\n\n\n\n
Since many users do not enter your WordPress site through the home page, breadcrumb navigation helps them understand where they have landed. Search engines also use breadcrumbs<\/a> to better understand the hierarchy of your web pages.<\/p>\n\n\n\n Adding WordPress breadcrumb menus to your website offers several benefits. Google loves breadcrumbs, for example, so this feature can improve your Search Engine Optimization (SEO)<\/a> and bring more visitors to your site. <\/p>\n\n\n\n Breadcrumb menus can also reduce bounce rates<\/a>, because they improve your site\u2019s User Experience (UX). When users can navigate your website easily, they are more likely to spend time on it. <\/p>\n\n\n\n You can add breadcrumbs to your WordPress website in two ways. The easiest method is to use a WordPress plugin, but you can also code breadcrumbs into your site\u2019s header.php<\/em> file. Before you use either method, you should create a backup of your website<\/a> just in case something goes wrong.<\/p>\n\n\n\n The easiest way to add breadcrumbs to WordPress is with a breadcrumb plugin. There are many plugins you can use, including Breadcrumb NavXT<\/a> and Yoast SEO<\/a>:<\/p>\n\n\n\n Yoast SEO is often the best option, because it\u2019s likely a plugin that your website already uses.<\/p>\n\n\n\n Since Yoast is an SEO plugin, it offers a wide range of functionality. That includes the creation and styling of breadcrumb navigation.<\/p>\n\n\n\n To use this plugin, you will need to download it from the WordPress Plugin Directory. You can simply head to your site\u2019s Plugins<\/em> page, search for \u201cYoast SEO\u201d, and install and activate the plugin<\/a> like any other.<\/p>\n\n\n\n After the plugin is activated, you must add a function to your site\u2019s header.php<\/em> file. To access this file, navigate to Appearance<\/em> > Theme Editor<\/em> and select the file to open it. <\/p>\n\n\n\n Then, add the following code<\/a> wherever you\u2019d like your breadcrumb setting menu to appear:<\/p>\n\n\n\n In general, you\u2019ll want to place this code at the end of your header.php<\/em> file. However, you can experiment with the menu\u2019s placement, checking the front end of your site to see how the result looks.<\/p>\n\n\n\n You can even add the above function to your theme\u2019s single.php<\/em> or page.php<\/em> file instead, if you want to enable breadcrumb function to appear elsewhere on the page. Just make sure you only add it in one place.<\/p>\n\n\n\n Finally, you will need to activate breadcrumb support. In Yoast SEO, this means navigating to SEO<\/em> > Search Appearance<\/em> > Breadcrumbs<\/em>: <\/p>\n\n\n\n Simply toggle the switch to \u201cEnabled\u201d, and you\u2019re good to go! Your WordPress breadcrumb menu will be set up and ready to use.<\/p>\n\n\n\n Adding website breadcrumbs can also be done manually through coding. If you do not want to use a breadcrumb plugin, you can add breadcrumbs without one. Before you attempt this, you may want to read up on microdata<\/a>, in order to fully leverage the SEO potential of WordPress breadcrumbs.<\/p>\n\n\n\n To add breadcrumbs to WordPress manually, you\u2019ll need to create a PHP function. The first step in creating this function is to build the skeleton. Your skeleton function will need a unique name, to avoid conflicts with other functions.<\/p>\n\n\n\n The above function is the skeleton, and the rest of the breadcrumbs code will be placed within the curly brackets.<\/p>\n\n\n\n After creating the skeleton, you\u2019ll need to add rules to the function. The rules should be placed in the breadcrumb section:<\/p>\n\n\n\n The above rules generally use variables, so they can be changed later. The first two variables use booleans, where \u201c0\u201d is false and \u201c1\u201d is true.<\/p>\n\n\n\n Below the variables, you need to add an \u2018if else\u2019 statement. This statement will check to see if a user is on your website\u2019s home page or not. Based on this information, the statement will determine if the breadcrumbs are displayed or not:<\/p>\n\n\n\n If this statement is not added to the function, the breadcrumbs settings may or may not appear when you want them to.<\/p>\n\n\n\n Once your breadcrumbs function is complete, you can add it to your website\u2019s header.php<\/em> file. Navigate to Appearance<\/em> > Theme Editor<\/em> to open the file, and add the function to the very end.<\/p>\n\n\n\n Then save your changes, and check out your new website breadcrumbs menu on the front end. You can continue to tweak the function and its placement until the menu looks just right (or disable breadcrumb when necessary).<\/p>\n\n\n\n Breadcrumb navigation menus help your site\u2019s visitors find their way. They also make it easier for search engines to understand the hierarchy of your website. A plugin like Yoast SEO<\/a> is the easiest way to add breadcrumbs to your website, but you can code them in manually as well. <\/p>\n\n\n\nBenefits of Adding Breadcrumbs in WordPress<\/h2>\n\n\n\n
How to Add Breadcrumbs in WordPress<\/h2>\n\n\n\n
Method 1: Using a WordPress Plugin to add Breadcrumbs<\/h3>\n\n\n\n
Step 1: Download the Yoast SEO Plugin<\/h4>\n\n\n\n
Step 2: Add a Function to Your header.php<\/em> File<\/h4>\n\n\n\n
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<\/p><p id=\"breadcrumbs\">','<\/p><p>' );
}
?><\/code><\/p>\n\n\n\nStep 3: Activate Breadcrumb Support<\/h4>\n\n\n\n
Method 2: Coding Your Own Breadcrumbs in WordPress<\/h3>\n\n\n\n
Step 1: Create a Skeleton Function<\/h4>\n\n\n\n
function my_breadcrumbs() {
\/* Breadcrumbs code will go here *\/
}<\/code><\/p>\n\n\n\nStep 2: Add Ground Rules<\/h4>\n\n\n\n
\/* Change according to your needs *\/
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '\u00bb';
$home_url = 'Home';
$before_wrap = '<span clas=\"current\">';
$after_wrap = '<\/span>';
\/* Don't change values below *\/
global $post;
$home_url = get_bloginfo( 'url' );<\/code><\/p>\n\n\n\nStep 3: Add the \u2018if else<\/em>\u2019 Statement<\/h4>\n\n\n\n
\/* Check for homepage first! *\/
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;
\/* Proceed with showing the breadcrumbs *\/
$breadcrumbs = '<ol id=\"crumbs\" itemscope itemtype=\"http:\/\/schema.org\/BreadcrumbList\">';
$breadcrumbs .= '<li itemprop=\"itemListElement\" itemtype=\"http:\/\/schema.org\/ListItem\"><a target=\"_blank\" href=\"' . $home_url . '\">' . $home_url . '<\/a><\/li>';
\/* Build breadcrumbs here *\/
$breadcrumbs .= '<\/ol>';
echo $breadcrumbs;<\/code><\/p>\n\n\n\nStep 4: Add Function to Theme Header<\/h4>\n\n\n\n
Customize Your WordPress Site With WP Engine<\/h2>\n\n\n\n