How To Add SEO Breadcrumbs To WordPress Theme
To know about your location during a travel is an important thing for your best experience and browsing website is just like travelling to a new place and exploring it. You can enter a website in any way so you might have different paths to reach a page. A breadcrumb is a series of connected links that gives information where you are while navigating on a website. There are different types of breadcrumbs but in this article we are going to discuss the most useful and recommended type i-e location-based breadcrumbs.
Why use breadcrumbs?
There are multiple benefits of using breadcrumbs on your websites. You can have a look here.
1. Better User Experience: As mentioned above, the information about the location where you are is very important so it is imperative for a better user experience on website to have a breadcrumb available on every page so that user knows how and where to navigate forward and backward.
2. Website Organized Structure: It tells the users about the good organization of content and the real structure of a website that ultimately helps in navigating through other useful pages. If a user lands on a page through any external link then he can see the structure of the website by looking at the breadcrumb on top of the page and quickly navigate to his desired page. This is commonly called as information architecture.
3. SEO: Breadcrumbs are certainly a help with SEO (Search Engine Optimization). To have links present on your webpage helps search engines find your website links more efficiently. A good internal linking structure makes it easier for bots to crawl your website. Also breadcrumbs show up in SERPs so its good to have an efficient page structure and display it in form of breadcrumbs on top of pages. Google likes!
How to create a PHP function to generate breadcrumb in WordPress?
You can follow these simple steps to add WordPress Breadcrumb Function for adding breadcrumb
navigation to theme template files. This function helps defining custom post structure of your
WordPress website.
Step-1: Go to your theme’s functions.php file at this location
“/wp-content/themes/yourtheme/functions.php”
Step-2: Now create the function for generating breadcrumbs in ‘functions.php’. If you already haven’t defined any custom functions before, you can add this in the end of file.
|
1 2 3 4 5 6 7 8 9 10 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 39 40 41 |
// GENERATE BREADCRUMBS function the_breadcrumb() { global $post; echo '<p id="breadcrumbs">'; if (!is_home()) { echo '<a href="'; echo home_url(); echo '" title="Homepage">'; echo 'Home'; echo '</a> > '; if (is_category() || is_single()) { echo ''; the_category(' > '); if (is_single()) { echo ' > '; the_title(); echo ''; } } elseif (is_page()) { if($post->post_parent){ $anc = get_post_ancestors( $post->ID ); $title = get_the_title(); foreach ( $anc as $ancestor ) { $output = '<a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a> >'; } echo $output; echo '<strong title="'.$title.'"> '.$title.'</strong>'; } else { echo '<strong> '.get_the_title().'</strong>'; } } } elseif (is_tag()) {single_tag_title();} elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';} elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';} elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';} elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';} elseif (is_search()) {echo"<li>Search Results"; echo'</li>';} echo '</p>'; } |
This function is creating an HTML output of <p><a>
|
1 2 3 4 5 6 7 8 9 |
function the_breadcrumb() { global $post; echo '<p id="breadcrumbs">'; if (!is_home()) { echo '<a href="'; echo home_url(); echo '" title="Homepage">'; echo 'Home'; echo '</a> > '; |
This set of code is generating the ‘Home’ link in breadcrumb trail that is used to be the first most link.
|
1 |
<p id=”breadcrumbs”><a href=”home_url()” title=”Homepage”>Home</a> |
Now next set of code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
if (is_category() || is_single()) { echo ''; the_category(' > '); if (is_single()) { echo ' > '; the_title(); echo ''; } } elseif (is_page()) { if($post->post_parent){ $anc = get_post_ancestors( $post->ID ); $title = get_the_title(); foreach ( $anc as $ancestor ) { $output = '<a href="'.get_permalink($ancestor).'" title="'.get_the_title($ancestor).'">'.get_the_title($ancestor).'</a> >'; } echo $output; echo '<strong title="'.$title.'"> '.$title.'</strong>'; } else { echo '<strong> '.get_the_title().'</strong>'; } } } |
This code basically checks if current post/page is a category, post or a web page and then generates the link structure accordingly. If a post or page has parent-child hierarchy then it generates breadcrumb having all the ancestors.
|
1 2 3 4 5 6 7 8 9 |
elseif (is_tag()) {single_tag_title();} elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';} elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';} elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';} elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';} elseif (is_search()) {echo"<li>Search Results"; echo'</li>';} echo '</p>'; } |
This set of codes determines the type of current page and generates the breadcrumb accordingly.
Step-3: After generating the breadcrumb, it is time to display this on webpage. To make it visible on front-end we have to call this function in theme’s template file.
|
1 |
<?php the_breadcrumb(); ?> |
Simply add this code line in your template file on top and you are done!