Ultimatum Theme for your Self-Hosted WordPress Site – Part 5 – Breadcrumbs

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

Following on from the previous four blog posts, this is Ultimatum Theme for your Self-Hosted WordPress Site – Part 5 – Breadcrumbs. Ultimatum Theme comes with a built-in breadcrumbs widget, but it is very basic. There are no settings to change. If you use a pre-built Bootswatch theme, it will give you breadcrumbs that look like the Bootswatch ones, but in fact the css is different. So, your options are to make some custom code, use the Yoast Breadcrumbs that is shipped with the Yoast SEO plugin, or use the Ultimatum breadcrumbs widget. One issue with the last choice is that the Ultimatum breadcrumbs widget is written so that, if you have one of certain other breadcrumbs plugins installed and active, you can use the Ultimatum breadcrumbs widget, and it will call up the plugin you have activated.

Let me try to explain. Let’s say you have Yoast Breadcrumbs plugin installed and activated, and you put the Ultimatum breadcrumbs widget into a page layout header, that widget will not call the Ultimatum breadcrumbs code. It will instead call the Yoast breadcrumbs code. But, there is a problem here. Yoast decided to bundle breadcrumbs in the SEO plugin too, as well as it being available as a separate plugin. If you have Yoast SEO plugin installed and activated, as most likely you will, with breadcrumbs switched on in the Yoast SEO plugin, and you use the Ultimatum breadcrumbs widget, you will see on your page the Yoast breadcrumbs. If, however, you have the Yoast SEO breadcrumbs switched off, the Ultimatum breadcrumbs widget still sees the Yoast SEO breadcrumbs as activated, and still calls the Yoast SEO to provide the breadcrumbs. But, as you have them switched off, no breadcrumbs appear.

The only solution for the Ultimatum team is to remove the code in the Ultimatum breadcrumbs widget that calls the external breadcrumbs plugins. The workaround until the Ultimatum Theme team fix this is to delete some code from the widget’s php – something to be avoided if possible. Two other annoying things I noticed when using the Ultimatum Breadcrumbs widget; for category base pages the breadcrumbs would show ‘Archives for categoryname‘ and there was no way to switch off breadcrumbs for the home page. So, my advice? Do NOT use the Ultimatum breadcrumbs widget unless you have to. Instead use an Ultimatum text widget and use a shortcode to insert your breadcrumbs. If you have followed this series, you have already made the shortcode when you read this post, which includes instructions on how to make a PHP shortcode with the Post Snippets plugin..

Ultimatum Theme for your Self-Hosted WordPress Site - Part 5 - Yoast BreadcrumbsUltimatum Theme for your Self-Hosted WordPress Site - Part 5 - Switch Yoast Breadcrumbs OnUltimatum Theme for your Self-Hosted WordPress Site - Part 5 - Breadcrumbs Compared

I am going to show how to do this in Ultimatum theme in the simplest way, and then look at it in more detail. So, we need to re-visit the Child Theme => Templates => Layouts page for the default layout, in my case it is called ‘united-default’. We need to edit the header partial layout and under the Ultimatum Menu widget that is in the second row, drag and drop a Text Widget, which will automatically open up, and type the yoast-breadcrumbs shortcode and click save:

[[yoast-breadcrumbs]]

Now we have to enable and set up the breadcrumbs in Yoast SEO. In the main admin menu go to SEO => Internal Links. Switch the breadcrumbs on at the top, change the ‘Separator between breadcrumbs’ to be:

1
<span class="bc-divider">/</span>

Make the ‘Prefix for Archive breadcrumbs’ blank (null) by deleting the content of the text field, which will have read ‘Archives for’. Now we must make a few changes to the custom css file. You will need your text code editor and ftp software for this. Open the custom-style.css file and add these lines and save and synchronize with your web server.:

1
2
3
4
5
.breadcrumb_last {color: #aea79f;}
.breadcrumb p {margin-bottom: 0px;}
.breadcrumb {
  padding: 7px 15px 9px 15px;
}

The visual appearance, compared to the exemplar Bootswatch 3 United breadcrumbs, is good (see screenshot above). However, the actual HTML that makes the breadcrumbs is vastly different. The Yoast breadcrumbs are not correct syntax html and as such would not be such a good choice for SEO, which is odd considering that it is part of an SEO plugin! I am going to cover this in a separate post. That’s all for this post though. I hope it wasn’t too hard to follow!

Also in this series of posts:

Build a Self-Hosted WordPress Site – Part 1
Build a Self-Hosted WordPress Site – Part 2
Build a Self-Hosted WordPress Site – Part 3
Build a Self-Hosted WordPress Site – Part 4
WordPress SEO by YOAST for Beginners
Ultimatum Theme for your Self-Hosted WordPress Site
Ultimatum Theme for your Self-Hosted WordPress Site – Part 2
Ultimatum Theme for your Self-Hosted WordPress Site – Part 3
Ultimatum Theme for your Self-Hosted WordPress Site – Part 4
Ultimatum Theme for your Self-Hosted WordPress Site – Part 6 – Bootstrap Breadcrumbs
Uploading Images to Your Self-Hosted WordPress Site
Customizing Ultimatum Theme and WordPress
Fix for mysql_get_server_info() bug/error in Ultimatum 2.7.3
Ultimatum Special Offer! Save more than 55% off Pro Version

Categories: Ultimatum.