Following on from the previous blog post on breadcrumbs, this is Ultimatum Theme for your Self-Hosted WordPress Site – Part 6 – Bootstrap Breadcrumbs. In the previous post we set up Yoast SEO Breadcrumbs and got them to look like the Bootswatch 3. One advantage of the Yoast Breadcrumbs not covered in the previous post was that it attaches rdf microdata tags you the breadcrumbs, meaning Google is happy. The exemplar pages offered by Bootswatch include no such microdata tags, and may indeed not be ideal for that purpose. Now I will take the final step and make Yoast Breadcrumbs output in Bootswatch html. We are going to need to edit two files on our web server; custom-style.css and functions.php. We will also need to modify some settings in your admin pages. Let’s edit functions.php first.

As before, as I showed in this post, you will find functions.php in the child theme folder on your web server. Edit the copy of functions.php that you should have on your local PC by opening it in whichever editor you prefer to use. So, add a few lines of code at the end, namely this:

These lines of code use the hooks in WordPress SEO to alter the HTML it sends to your web pages. By doing it this way, it shouldn’t be affected by any updates to the Yoast SEO fro WordPress plugin. Save the file and synchronize your PC to the server. Next we address the CSS styling of the breadcrumbs. You will need to edit the copy of custom-style.css that you have on your local PC. In the previous post about breadcrumbs, we added three css rules, but we now only need one, so delete the ones shown striked out here:

Again, save the custom-style.css file and synchronize that file with the one on the server.

Next, we need to tell the Yoast SEO for Windows plugin to not put a divider between the breadcrumbs, as Bootstrap does this by way of an :after css rule. I think this is a preferable way of treating what is, after all, a piece of style and not content. In the main admin menu go to SEO => Internal Links. Delete this content:

of the ‘Separator between breadcrumbs’ text filed so that it is now empty (blank) and save these settings.

The final change is to alter the way the breadcrumbs are inserted, so we need to make a small change to the [[yoast-breadcrumb]] shortcode’s php. k at it in more detail. So, we need to re-visit the Post Snippets plugin. In the main left hand admin menu, go to Settings => Post Snippets. Edit the php code for the yoast-breadcrumbs snippet by deleting all the code inside the brackets on the third line. I have shown this by a strikethrough here: