How to add breadcrumbs to WordPress theme


In this tutorial I will explain how to add custom breadcrumbs WordPress theme. For testing purposes, we will be using the theme we previously developed. This is actually a continuation of the previous tutorial How to create a WordPress theme from scratch. The breadcrumbs feature is quite useful when it comes to faster navigation and especially SEO. When you have it enabled, you may easily switch the pages, which makes them better linked and the search engine crowlers will be able to index your content faster.

Here is screen shot of the final result:

How to add breadcrumbs to WordPress theme

How to add breadcrumbs to WordPress theme

Custom breadcrumbs to WordPress – development

To explain better the breadcrumbs feature I have added a few categories and posts. All of them contain simple text. I have also created a new file in the root folder of the test theme. Its name is functions.php and at the moment it has only one PHP opening tag:

function the_breadcrumb() {

$separator = ” » “;

if (!is_home()) {

echo ‘’;

bloginfo(‘name’);

echo “ “.$separator;

if (is_category() || is_single()) {

the_category(‘title_li=’);

if (is_single()) {

echo $separator;

the_title();

}

} elseif (is_page()) {

echo the_title();

}

}

}

The idea of this function is to obtain the home URL , the links to the categories or posts. The structure depends on where on the site you are at the moment. If you click on a category page the breadcrumb structure will be similar to :

My Blog » Category 2

Where my blog is the home URL , the arrows are the separator and category 2 is the name of the category. The same way if you visit a post page the structure will be changed to :

My Blog » Category 2 » Where can I get some?

In this case “Where can I get some?” Is the title of my post. If you do not like the separator you may easily change it by updating the string in the double quotes:

$separator = " » ";

You may add dashes, dots or whatever you want.

Custom breadcrumbs modification

By default the custom breadcrumbs come as links which are underlined. To change that and have underlines only upon hover you may add these two lines in your style.css file :

.breadcrumbs a {text-decoration: none;}
 .breadcrumbs a:hover {text-decoration: underline;}

I have also adjusted a bit the main loop I previously added to the theme. The exact line I changed is this one:

<h1><?php the_title(); ?></h1>

Now the line is as follows:

<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

The idea behind this was to make the page title link to the article itself. This way if the article is too long and there is no read more button, you can click the title and review the entire article or post.

So far we updated the main loop and created a function. Now it is time to call that function and check the result. To do so edit header.php file and replace the following line:

with :

<div class="breadcrumbs rounded"><?php the_breadcrumb(); ?></div>

When done, save your file and check the website. During the page generation WordPress will reach our custom function and check the default ones, then it will check our functions.php file and based on the code it finds there, you will see the breadcrumbs on your page.

Summary
Custom breadcrumbs - how to add breadcrumbs to wordpress theme
Article Name
Custom breadcrumbs - how to add breadcrumbs to wordpress theme
Description
How to add custom breadcrumbs to wordpress theme. Development tutorials with code examples and detailed explanation. Main loop modification and customisation. Custom style and adjustments.
Author
Publisher Name
wppotion


Do you want to share your opinion?

Your email address will not be published. Required fields are marked *


*

We are not industry specific. We are WordPress specific. We work with everyone to help them find solutions with their troubles.
If you show us the problem you are experiencing, we will show you how to fix it. It is that simple.


Reported WordPress issues

  1. Wordpress User Login in Android App
  2. Long form upon submit form disappear but page stuck at bottom while confirm message at top
  3. Do you know about WordPress “Portfolio”?
  4. when i try to post to my wordpress site using curl in php, it says that cookies are not supported in my browser
  5. Changing post type slug to '/' breaks all pages
  6. Add multiselect Dropdown as an conditional logic field in WP UserFrontendPro
  7. PHP Fatal error: Uncaught Error: Class 'WP_Theme' not found
  8. How to prevent WordPress theme from removing analytics tracking parameters
  9. Does souncloud offer custom made soundcloud plugins for use by third party websites
  10. Hide html if metabox is empty, using custom post types

WordPress problems we are working on

  1. Home URL with query string not being called correctly - Wordpress
  2. Importing a Wordpress site to MAMP Pro 5
  3. WordPress site using the kale theme - site appears off screen and needs scrolling to appear on mobile devices
  4. Need Help in Implementing Responsive Hexagon Grid in WordPress
  5. How can I change my image src tags from absolute to relative urls on Wordpress?
  6. WordPress plugin create trigger not working
  7. Identifying which item was selected from a dynamically created form in WordPress / PHP
  8. Password Protect wp-login.php page nginx
  9. mysql setup with wordpress
  10. Skewed Letter “B” in Bebas Neue Font on Chrome Windows

Resolved issues

  1. What “route” should I take? Wordpress (as headless CMS) or the MERN way?
  2. Wordpress Themeco Theme X Pro Cornerstone custom sorting element accessing parent variables
  3. Remove unwanted Symbol from Pardot Landing Page using Wordpress Page Code
  4. Gravity Form - Want To Duplicate Sign In Sheet Entries So Names Don't Need To Be Re-Entered Daily
  5. JQMIGRATE and Wordpress Elementor: n.easing[this.easing] is not a function. jquery.js?ver=1.12.4:4
  6. My website's input fields color changing to white on iphone, ipad and mac
  7. Category listing required based on select product tags
  8. Hot to extend a class from child theme in wordpress?
  9. Wordpress SSO with OneLogin
  10. Add custom flow on member registration form in Wordpress website
wppotion - powered by persistence and passion