Common breadcrumb systems include location and category. Location breadcrumbs show where the reader is in the hierarchy of your content. Category breadcrumbs show the context of the content. For example, a location breadcrumb trail may look like this:
Image may be NSFW.
Clik here to view.
Where the category page may be an archive of topics or articles, but not necessarily a content-specific page.
Whatever your specific breadcrumb needs, built-in functionality in WordPress can be used to create a customized breadcrumb trail for your users.
In this article I will walk you through where to place your breadcrumb code in posts and pages, as well as how to change the breadcrumb based upon the type of post/page currently being viewed.
Before We Begin
In many instances, the code for breadcrumbs would be placed in a plugin, may be included in a theme framework, or be included in a separate file, such as breadcrumb.php, and it may be considered better practice to do it this way depending on who you talk to.
In this tutorial, we’ll be writing code directly into functions.php, however, if you would prefer to, you can write it into breadcrumb.php and use the following include in functions.php
include('breadcrumb.php');
Your theme now “knows” about this file and will integrate our functionality.
Step 1: Create the “Home” of the Breadcrumb
We’re going to start building out our basic functionality now, here’s where to start:
<?php
function wppro_breadcrumbs() {
global $wpbd;
?>
<ul class="breadcrumb">
<li><a href="<?php bloginfo('url') ?>">Home</a> <span class="divider">/</span></li>
</ul><!-- END BREADCRUMBS -->
<?php } // end my_breadcrumbs function ?>
Let’s slow down a bit and look at what we just did. First, we created our function wppro_breadcrumbs that we will call later. Next, we made sure that we have access to the $wpdb variable which we’ll be using later as well.
After that we get into basic formatting. If you’re familiar with the Flatstrap Breadcrumbs you’ll know there’s already some classes that are complimentary to our job today.
Image may be NSFW.
Clik here to view.
Step 2: See it in Action
To call our function, open up the page.php or single.php file in your theme. Right below the opening section of the content, place our wppro_breadcrumbs() function. Using the page.php file from our theme, it would look like this:
<?php get_header(); ?> <div class="container"> <?php get_sidebar(); ?> <div class="span9"> <?php while ( have_posts() ) : the_post(); ?> <section <?php post_class(); ?>> <?php wppro_breadcrumbs(); ?> ....
Save it and navigate to a page:
Image may be NSFW.
Clik here to view.
Step 3: Passing the Post or Page ID
We need to be able to determine whether or not the current location of the breadcrumbs is on a page or post.
Pages have parents that can be assigned to them, making it easy to “map” a page to a parent. Posts, on the other hand, have tags, categories, or other custom taxonomies. This is where things can get interesting, but we’ll get to that later…
The first thing we have to do is get our wppro_breadcrumbs function to pass the post or page ID. This is done by modifying our single.php and/or page.php file with the following:
wppro_breadcrumbs( get_the_ID() );
This finds the id of the post or page and passes it to our function so we can start doing our magic.
Step 4: Detecting Pages or Posts
Now that we have the post/page ID in our function, we can start working with that ID to detect whether the url is a post, page, and associated information with it.
We’ll need to upgrade our breadcrumb function a bit first, update the function name like this:
wppro_breadcrumbs( $b_id );
You can give the variable whatever name you want, I just like to make sure it’s unique, so this stands for breadcrumb ID = $b_id. Clever, I know.
What this means is that anywhere we use the $b_id variable, we have our post/page ID. So let’s add some functionality:
function wppro_breadcrumbs( $b_id ) {
global $wpbd;
?>
<ul class="breadcrumb">
<li><a href="<?php bloginfo('url') ?>">Home</a> <span class="divider">/</span></li>
<?php
if (is_single( $b_id )){
//Code for posts
}
else {
//Code for pages
?>
</ul><!-- END BREADCRUMBS -->
<?php } //end of wppro_breadcrumbs
What we’ve done here is put to use the is_single() functionality to test whether the ID is a post or page. The result of the function is boolean (true or false). Using the IF/ELSE combo, we can apply code to either posts or pages.
Step 5: Page Parents
Instead of jumping into posts, let’s focus on pages first since they’re a bit less complicated. For our next step we want to see if the current page has a parent assigned. If so, we want that in our breadcrumb trail, too.
Here’s what our code looks like now:
function wppro_breadcrumbs( $b_id ) {
global $wpbd;
?>
<ul class="breadcrumb">
<li><a href="<?php bloginfo('url') ?>">Home</a> <span class="divider">/</span></li>
<?php
if (is_single( $b_id )){
//Code for posts
else {
//Code for pages
$current_post = get_post( $b_id );
if (!empty($current_post->post_parent)){ ?>
<li><a href="<?php echo get_permalink( $current_post->post_parent ); ?>"><?php echo get_the_title( $current_post->post_parent ); ?></a> <span class="divider">/</span></li>
<?php } //end if has a parent
?>
<li><?php echo get_the_title($b_id); ?></li>
<?php }
?>
</ul><!-- END BREADCRUMBS -->
<?php } //end of wppro_breadcrumbs
In the “Code for pages” IF statement we have a bit of intense code, so bear with me – we’ll get through this together. First, we grab the post data object which has all kinds of information in it using the get_post() functionality within WordPress. We assign this data object to the $current_post variable. Now we can run some tests to see if there is a parent.
That’s where our next IF statement comes into play. In pseudocode, we would say, “If the page parent is not empty, then display it.” So we use the get_permalink() and get_the_title() functions to build out our link.
Next, whether or not there is a parent page, we display the current page title and link. Too easy, right? Right?!
Step 6: Working with Post Categories
Posts are a bit different simply because you have to deal with categories instead of a parent. Because you can assign multiple categories to a post, you can run into difficulties selecting which category to choose. The best way to approach this issue is to only select a single category for a post and use tags for additional descriptors
.
With that in mind, here’s what you need in your “Code for Posts” section:
if (is_single( $b_id )){
//Code for posts
$current_post = get_post( $b_id );
$category = get_the_category( $b_id );
?>
<li><a href="<?php bloginfo('url') ?>/category/<?php echo $category[0]->slug; ?>" alt="<?php echo $category[0]->category_nicename; ?>"><?php echo $category[0]->cat_name; ?></a> <span class="divider">/</span></li>
<li><?php echo get_the_title($b_id); ?></li>
<?php
} // end if is_single
Like the code for pages, we first want to assign the $current_post the data object for the post. Then we get the category assigned using the get_the_category WP functionality.
Then we build out our link on the page. By including the ‘category’ in the URL, WordPress automatically uses a template to build out a list of all posts with that category name. This makes it very easy for your site visitors to find all articles within a particular category.
Step 7: Putting it All Together
The final code for our breadcrumb function looks as follows
function wppro_breadcrumbs( $b_id ) {
global $wpbd;
?>
<ul class="breadcrumb">
<li><a href="<?php bloginfo('url') ?>">Home</a> <span class="divider">/</span></li>
<?php
if (is_single( $b_id )){
//Code for posts
$current_post = get_post( $b_id );
$category = get_the_category( $b_id );
?>
<li><a href="<?php bloginfo('url') ?>/category/<?php echo $category[0]->slug; ?>" alt="<?php echo $category[0]->category_nicename; ?>"><?php echo $category[0]->cat_name; ?></a> <span class="divider">/</span></li>
<li><?php echo get_the_title($b_id); ?></li>
<?php
}
else {
//Code for pages
$current_post = get_post( $b_id );
if (!empty($current_post->post_parent)){ ?>
<li><a href="<?php echo get_permalink( $current_post->post_parent ); ?>"><?php echo get_the_title( $current_post->post_parent ); ?></a> <span class="divider">/</span></li>
<?php } //end if has a parent
?>
<li><?php echo get_the_title($b_id); ?></li>
<?php }
?>
</ul><!-- END BREADCRUMBS -->
<?php } //end of wppro_breadcrumbs
Anywhere you want the breadcrumbs to show up, just use the wppro_breadcrumbs() function in a WordPress file. You can manipulate the look and feel by writing your own CSS if you’d like, but otherwise Flatstrap handles that for us.
The post Part 5: Creating a Breadcrumb Trail Navigation Element in WordPress appeared first on YinPress.