This function requires the Advanced Custom Fields plugin!
I wanted to display breadcrumbs on my pages, but I didn’t want to add yet another plugin–especially one I didn’t have complete control over. It was important to me to be able to control how the titles of the pages were displayed, since some of my page titles are pretty long!
So the first thing I did was use the Advanced Custom Fields plugin, which I already use for other purposes, to create a custom field for pages and posts, called “Short Title” — even though I only wanted to display the breadcrumbs on pages, I figured I might want that functionality later for posts. Then I went through all my pages and added short titles, if I felt like it was necessary. This script works if that field is blank by automatically using the existing title field, so actually filling that field out isn’t necessary to jump in and get to the meat of things, but this script WILL.NOT.WORK if you don’t have Advanced Custom Fields installed (you can modify it to do so, however, if that’s your thing).
Add the following to your theme’s function file:
function display_breadcrumbs() {
// Get the post information and the query
global $post,$wp_query;
// Define a separator character.
$separator = ' > ';
// What is the title & URL of the Home Page that you want to display?
$home_title = 'Home';
$home_url = get_home_url();
// You probably don't want to display this on your home page.
if (!is_front_page()) {
// Start the div and the unordered list
echo "<div class='breadcrumbs'>\n<ul>\n";
// Add the home page and a separator
echo "<li><a href='$home_url'>$home_title</a></li>\n";
echo "<li class='separator'>$separator</li>\n";
// Check to see if the post has parents
if ($post->post_parent) {
// Get the ancestors
$ancArray = array_reverse(get_post_ancestors($post->ID));
// Set the parents to null, if necessary
$parents = (!isset($parents)) ? null : $parents;
// Loop through the ancestors
foreach ( $ancArray as $ancestor ) {
$anc_permalink = get_permalink($ancestor);
$anc_title = get_the_title($ancestor);
// This uses a custom field called "short_title" created
// with the Advanced Custom Fields plugin!
$anc_short = get_field('short_title', $ancestor);
$anc_title = ($anc_short) ? $anc_short : $anc_title;
$parents .= "<li><a href='$anc_permalink'>$anc_title</a></li>\n";
$parents .= "<li class='separator'>$separator</li>\n";
}
// Display the partial list we've created.
echo "$parents";
// Get information for the current page
$short_title = get_field('short_title');
$curr_title = ($short_title) ? $short_title : get_the_title();
// Display it
echo "<li><b>$curr_title</b></li>\n";
} else {
// If there are no parents, then just display the current page
$short_title = get_field('short_title');
$curr_title = ($short_title) ? $short_title : get_the_title();
echo "<li><b>$curr_title</b></li>\n";
}
}
echo "</ul>\n</div>\n";
}
Use (or adapt) the following CSS:
div.breadcrumbs {
width: 100%;
background-color: #f2f2f2;
padding: 0px 4px;
}
.breadcrumbs ul {
list-style: none;
margin: 0px;
padding-left: 0px;
font-size: 80%;
}
.breadcrumbs ul li {
display: inline-block;
vertical-align: middle;
margin-right: 0px;
}
.breadcrumbs li.separator {
font-size: 150%; }
And insert the following into your page.php file (or other appropriate page template file).
<?php
$the_title = get_the_title();
echo (!is_front_page()) ? "<h1>$the_title</h1>\n" : '';
display_breadcrumbs();
?>