Skip to content

Android Tutorial Station

Implement breadcrumbs in WordPress

Today I am going to comment on a very comfortable way of how to implement breadcrumbs in WordPress using Yoast’s WordPress SEO plugin. Of course we will need to have this plugin installed in our WordPress since it is also the one that I recommend to do the SEO On-Page of our blog.

In a previous article we already discussed what breadcrumbs are and when to use them . Thanks to this article we have a visual idea of ??the breadcrumbs and how they affect the way in which the search results of our website are displayed on Google .

Breadcrumbs at the code level are nothing more than a type of microdata from . These microdata were designed to help search engines understand our website and consist of semantic tagging.

To avoid precisely having to program a function or a plugin that allows us to add this type of microdata to WordPress we will use the Yoast WordPress SEO plugin that allows us to add breadcrumbs in less than five minutes . Keep in mind that afterwards you have to add the appropriate CSS code so that the breadcrumbs adapt to our theme and are visually correct.

How to implement breadcrumbs in WordPress with Yoast WordPress SEO

Once we have the plugin installed we go to the plugin menu to the option “Internal Links” (internal links) and the first thing we will do is activate them by checking the option “Enable Breadcrumbs” (activate breadcrumbs) .

Personally I only add breadcrumbs to articles and categories, tags and files . In other words, I only add the code to activate the bredcrumbs in the single.php , page.php and archive.php files since in searches and in 404 page errors not found I don’t see any use.

After activating the breadcrumbs we have to edit the single.php, page.php and archive.php files and add the code:

   <?php if ( function_exists('yoast_breadcrumb') ) {  yoast_breadcrumb('<p id="breadcrumbs">','</p>');  } ?>  

This code should be pasted where we want the breadcrumb to be displayed, usually the breacrumbs appear above the content header of the article, as we see in the following example image:

Once we have added the code in the breadcrumbs menu of the Yoast plugin, we configure the “Separator between breadcrumbs” separator option that will not be more than the character we want to enter between the breadcrumb elements and we can use the one we like the most for example: / , > , ?

This option of the separator can also carry HTML code, which is very useful for modifying the CSS style of the separator and we use in this option something like:


Finally, we configure the “Anchor text for the Homepage” option, which is nothing more than the anchor text of the first breadcrumb element that will always be the start page, so I put it as an anchor text “Start” or “Home” if The blog is in English.

It would only be necessary to give the appropriate style to the breadcrumb with CSS code but that part is no longer the subject of this tutorial but the user is supposed to have a basic knowledge of CSS and HTML.

I hope this step-by-step guide on how to add breadcrumbs in WordPress has been helpful and if you have doubts or want to leave a comment you are welcome.

No comments yet.

Leave a Reply

Your email address will not be published.

Comments (0)