edit breadcrumbs in wordpress - featured image

How to Edit Breadcrumbs in WordPress

Are you looking for the easiest way to customize your breadcrumbs? You’ve come to just the right place. In this guide, we’ll see how to easily edit breadcrumbs in WordPress. Whether you want to replace the home text or change the separators, we’ve got you covered!

What are breadcrumbs and why do you need them?

Breadcrumbs are navigational links displayed usually on the top of your pages/posts that help users explore the trails of links throughout your website. This way, they can figure out what part of your site they’re currently viewing and go back to the branch off pages or even the home page in a few clicks. If you’re running a WooCommerce store or a large blog, setting up breadcrumbs is crucial for your navigational needs.

The good news is that you can easily incorporate these breadcrumbs in various ways based on your website’s demands. Usually, most users set up breadcrumbs based on hierarchy, so breadcrumbs show the categories and subcategories based on the website’s structure. This includes showing what category of products or pages users are going through or what sub-content they’re viewing so they can go back to the higher hierarchy whenever they want in one click.

Alternatively, you can set up breadcrumbs based on attributes so breadcrumbs are displayed according to the attributes the viewer is searching for. You can also use the history path and display breadcrumbs based on the past pages users have gone through on your site.

Of course, that’s not all when it comes to customizing your breadcrumbs. You can add custom breadcrumbs to different pages such as:

  • Heading archive
  • Tag Archive
  • Page/Posts under the website
  • Page navigation from the home page
  • Search results
  • 404 error page
  • And more

As you can see, there’s a huge range of customization for breadcrumbs to ensure that they are displayed in a way that makes sense for your website’s structure and how you want your customers to navigate through your site.

If you use dedicated breadcrumbs plugins, chances are that they come with their own options to customize your breadcrumbs as much as you want. However, if you’re using Yoast SEO or WooCommerce’s breadcrumbs option then you might have to use a bit of coding to customize them further.

In the next section, we’ll show you how you can edit breadcrumbs in WordPress and enable various navigation elements.

How to Edit BreadCrumbs in WordPress

First, we need to clarify that the process to customize your breadcrumbs might be different depending on whether you use Yoast SEO, a dedicated WordPress plugin, or WooCommerce breadcrumbs.

Before you start, we also recommend you have a look at this guide to make sure you’ve set up your breadcrumbs properly from scratch.

In this section, you will learn different methods to edit breadcrumbs in WordPress.

  1. Customize breadcrumbs using Yoast SEO
  2. Edit WooCommerce breadcrumbs programmatically

Let’s have a look at each method.

1) How to Edit BreadCrumbs in WooCommerce with Yoast SEO

Once you have enabled breadcrumbs on Yoast SEO, you can configure them using its dedicated settings. For this, in your WordPress admin dashboard go to Yoast SEO > Search Appearance and head to the Breadcrumbs tab.

edit breadcrumbs in wordpress - Yoast SEO settings

Here you’ll be able to edit your breadcrumbs. Let’s start with the main steps:

Changing the separator

Using the Separator between breadcrumbs option, you can change your breadcrumbs separator.

Simply type in the separator you want to use. The most common ones are “|” or “/”.

Editing Home page text

You can replace the home page text using the Anchor Text for the Homepage option.

Simply type in your new Home page text using that field and it will look like this:

edit-breadcrumbs-in-wordpress-demo-yoast-seo-2

Changing prefixes for Archive, Search page, and 404 pages

With Yoast SEO, you can also edit breadcrumbs by individually changing Prefixes for your archive, search page results, and error 404 pages.

Simply add the required text on the corresponding fields and save the changes.

You can learn more about additional options to taxonomies for content types and taxonomies as well as additional Yoast SEO options here.

Adding Shop Page Breadcrumbs to your WooCommerce Shop in Yoast SEO

Another interesting alternative is to edit the functions.php file and add a Shop link to your breadcrumbs. This link will appear when your customers are browsing your WooCommerce Shop pages, so if you have an online store, we highly recommend you try it out.

To open your functions.php file, go to Appearance > Theme Editor on your sidebar and press functions.php on the right sidebar showing your theme files.

edit breadcrumbs in wordpress - functions file

Then, simply copy and paste this script:

add_filter( 'wpseo_breadcrumb_links', 'wpseo_breadcrumb_add_woo_shop_link' );

function wpseo_breadcrumb_add_woo_shop_link( $links ) {
global $post;

if ( is_woocommerce() ) {
$breadcrumb[] = array(
'url' => get_permalink( woocommerce_get_page_id( 'shop' ) ),
'text' => 'Shop',
);

array_splice( $links, 1, -2, $breadcrumb );
}

return $links;
}

Then, press Update and that’s it. As you can see, we’ve added a link to a product to the breadcrumbs.

Additionally, if you can use filters and functions, you can use the wpseo_breadcrumb_single_link filter to customize the breadcrumb pathways even more. You can learn more about this here.

2) How to Edit WooCommerce breadcrumbs programmatically

If you’re running a WooCommerce store, you can also enable and edit breadcrumbs designed specifically for WooCommerce sites. These breadcrumbs will only be enabled on your WooCommerce pages so it’s the perfect option for any eCommerce store.

Let’s start with the basics and enable the breadcrumbs in WooCommerce. To do that, we will use a basic WooCommerce breadcrumbs code snippet.

Simply paste the following PHP code in your theme files (we personally recommend adding it to your Header file). In your dashboard, go to Appearance > Theme Editor and select Header.php on the right sidebar to open the file in the Theme Editor.

Then, simply paste the following snippet:

<?php if (class_exists('WooCommerce') && is_woocommerce()) : ?>

<?php woocommerce_breadcrumb(); ?>

<?php endif; ?>

This will enable your WooCommerce breadcrumb on your shop pages. However, you can also choose to customize its elements even more with a few nifty functions.

Remember to add these code snippets to your functions.php file that you can find under Appearance > Theme Editor > functions.php.

Edit WooCommerce BreadCrumbs Home Text

Let’s start with a basic example and see how you can change the Home text of your WooCommerce breadcrumbs. Simply change the text in line $defaults[‘Home’] = ‘Home Page Text’ from ‘Home Page Text’ to your required text.

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
// Change the breadcrumb home text from 'Home' to 'Apartment'
$defaults['home'] = 'Home Page Text';
return $defaults;
}

Edit WooCommerce BreadCrumbs Home Text links

Similarly, you can change the home page link from your WooCommerce breadcrumbs using a similar snippet. Remember to change the URL link after the return text. For example, for your code snippet, you need to replace http://quadlayers.com/blog with your required new link between the two quotation marks “.

add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
return 'http://quadlayers.com/blog';
}

edit breadcrumbs in wordpress - woocommerce home page link

Editing WooCommerce Breadcrumbs separator, before and after text, and more

You can also use the defaults array function to change multiple elements of your WooCommerce breadcrumbs such as separator, before and after text, and more.

In the snippet, simply replace the text between the ‘ ‘ section in the array to your required text in the following snippet:

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
function jk_woocommerce_breadcrumbs() {
return array(
'delimiter' => ' > ',
'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
'wrap_after' => '</nav>',
'before' => ' ',
'after' => ' After Text',
'home' => _x( 'Home text ', 'breadcrumb', 'woocommerce' ),
);
}

edit breadcrumbs in wordpress - woocommerce breadcrumbs array

As a result, the separators and before and after text will change.

You can check out additional code snippets to customize your WooCommerce’s breadcrumbs on their documentation here.

Bonus: Adding your own breadcrumbs and styling them

What if you don’t want to rely on either WooCommerce or Yoast SEO? Are there other ways to edit breadcrumbs in WordPress? Yes, there are! You can create your own custom function for your breadcrumbs. This allows you to create custom breadcrumbs that you can style using custom CSS.

This is the perfect option for more experienced users that know their own way around CSS and PHP. If you’re more of a beginner and you’re unsure about setting up your own codes and functions, we highly recommend you either use one of these breadcrumbs plugins or use the methods we mentioned above to customize your breadcrumbs.

If you are experienced enough to use your own functions, we recommend you create a full backup of your site and install a child theme before starting. After that, you’re ready to start.

First, go to Appearance > Theme Editor and add the following function to your functions.php file.

function get_breadcrumb() {
echo '<a href=’.home_url().’ rel="nofollow">Home</a>';
if (is_category() || is_single()) {
echo "&nbsp;/ &nbsp;";
the_category(' &bull; ');
if (is_single()) {
echo " &nbsp;/ &nbsp; ";
the_title();
}
} elseif (is_page()) {
echo "&nbsp;/ ";
echo the_title();
} elseif (is_search()) {
echo "&nbsp;/ $nbsp Search Results for... ";
echo '"<em>';
echo the_search_query();
echo '</em>"';
}
}

 

Editing your custom breadcrumbs’ code for better customization

Remember, that you can use a specific section of the code to change your Home page text and separator on the top of the function.

For example, you can edit the following line:

echo '<a href=’.home_url().’ rel="nofollow">Home</a>';

To

echo '<a href= https://quadlayers.com/blog rel="nofollow">Home</a>';

Or any URL that you want.

On top of that, you can also change the separator replacing the / on the right echo statements in the code.

For example, you can replace the separator from / to > as follows:

echo "&nbsp; > &nbsp;";

Remember that the &nbsp is only added to include a space between and after the separators.

Then, click Update File to save your function and then press Header.php file on the files sidebar on the right to switch to your Theme Header file. Now, you need to add the function call to your header file by adding this snippet to your Header.php file.

<?php custom_breadcrumbs(); ?>

That’s it! That’s how you can edit breadcrumbs in WordPress using a custom function.

Styling your Custom Breadcrumbs

You can also style your breadcrumbs using the Additional CSS section of your Theme. For this, simply go to Appearances > Customize and head to the Additional CSS section as shown below.

edit breadcrumbs in wordpress - additional CSS

Here you can add the following CSS snippet and change the required values to style and customize your breadcrumbs.

#breadcrumbs{
list-style:none;
margin:10px 0;
overflow:hidden;
}

#breadcrumbs li{
display:inline-block;
vertical-align:middle;
margin-right:15px;
}

#breadcrumbs .separator{
font-size:18px;
font-weight:100;
color:#ccc;
}

edit breadcrumbs in wordpress - add CSS

Of course, you can change all these values and play around to find the ones that best suit your website theme. Once you’re happy with the changes, remember to press Publish.

Conclusion

In summary, breadcrumbs are very useful to help your users navigate your site. This is especially important when you have an online store or a site with many sections.

In this guide, you’ve learned different methods to edit breadcrumbs in WordPress. Before customizing your breadcrumbs, you need to set them up using one of the following methods:

  • With a dedicated breadcrumbs plugin
  • Using Yoast SEO
  • WIth WooCommerce’s dedicated breadcrumbs hook
  • By creating your own breadcrumbs function

Once you’ve configured them, you can customize them. In this guide, we’ve seen two ways to do that:

  • Edit breadcrumbs with Yoast SEO
  • Customize WooCommerce breadcrumbs programmatically

If you use Yoast SEO and don’t have coding skills, the first method is for you. On the other hand, if you have coding skills and want more flexibility you can customize the breadcrumbs programmatically.

If you need any help, let us know in the comments below and we’ll help you as much as we can.

Finally, if you want to learn more about adding more navigational features to your website, we recommend you check out some of these articles: