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

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

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.

Ultimatum Theme for your Self-Hosted WordPress Site - Part 6 - Yoast Bootstrap Breadcrumbs functions.phpUltimatum Theme for your Self-Hosted WordPress Site - Part 6 - Yoast Bootstrap Breadcrumbs CSS

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:

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function bootstrap_wpseo_breadcrumb_output( $output ){
  $from   = '<li typeof="v:Breadcrumb"><span class="breadcrumb_last" property="v:title">';
  $to     = '<li typeof="v:Breadcrumb" class="active" property="v:title">';
  $output = str_replace( $from, $to, $output );
  $from   = '</span></li>';
  $to     = '</li>';
  $output = str_replace( $from, $to, $output );
  return $output;
}
add_filter( 'wpseo_breadcrumb_output', 'bootstrap_wpseo_breadcrumb_output', 11, 1 );
 
function bootstrap_breadcrumb_single_link_wrapper( $wrapper ) {
    $wrapper = 'li';
    return $wrapper;
}
add_filter( 'wpseo_breadcrumb_single_link_wrapper', 'bootstrap_breadcrumb_single_link_wrapper', 10, 1 );
 
function bootstrap_breadcrumb_output_wrapper( $wrapper ) {
    $wrapper = 'ul';
    return $wrapper;
}
add_filter( 'wpseo_breadcrumb_output_wrapper', 'bootstrap_breadcrumb_output_wrapper', 10, 1 );
 
function bootstrap_breadcrumb_output_class( $class ) {
    $class = 'breadcrumb';
    return $class;
}
add_filter( 'wpseo_breadcrumb_output_class', 'bootstrap_breadcrumb_output_class', 10, 1 );

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:

1
2
3
4
5
<span style="text-decoration: line-through;">.breadcrumb_last {color: #aea79f;}
.breadcrumb p {margin-bottom: 0px;}</span>
.breadcrumb {
  padding: 7px 15px 9px 15px;
}

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

Ultimatum Theme for your Self-Hosted WordPress Site - Part 6 - Yoast Bootstrap Breadcrumbs SettingsUltimatum Theme for your Self-Hosted WordPress Site - Part 6 - Bootstrap Breadcrumbs Snippet

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:

1
<span style="text-decoration: line-through;"><span class="bc-divider">/</span></span>

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:

1
2
3
4
if (!is_front_page()) {
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb(<span style="text-decoration: line-through;">'<div class="breadcrumb"><p>','</p></div>'</span>);
}}

Save this change by clicking the blue ‘Update Snippets’ button. That’s it. Your breadcrumbs should visually look no different, but should now by styled the Bootstrap way!

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 5 – 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.