1. Add Breadcrumb Code to Your Theme's functions.php
Add the following code to the end of your active theme's functions.php file. This code is suitable for newer WordPress versions and includes security improvements and bug fixes.
function cmp_breadcrumbs() {
$delimiter = '»';
$before = '';
$after = '';
if ( !is_home() && !is_front_page() || is_paged() ) {
echo '';
global $post;
$homeLink = home_url();
echo 'Home ' . esc_html($delimiter) . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) {
$cat_code = get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' ');
echo str_replace('' . get_the_time('Y') . ' ' . esc_html($delimiter) . ' ';
echo '' . get_the_time('F') . ' ' . esc_html($delimiter) . ' ';
echo $before . get_the_time('d') . $after;
} elseif ( is_month() ) {
echo '' . get_the_time('Y') . ' ' . esc_html($delimiter) . ' ';
echo $before . get_the_time('F') . $after;
} elseif ( is_year() ) {
echo $before . get_the_time('Y') . $after;
} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '' . $post_type->labels->singular_name . ' ' . esc_html($delimiter) . ' ';
} else {
$cat = get_the_category();
if ($cat) {
$cat = $cat[0];
$cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo str_replace('labels->singular_name . $after;
} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID);
if ($cat) {
$cat = $cat[0];
echo '' . $parent->post_title . ' ' . esc_html($delimiter) . ' ';
}
echo $before . get_the_title() . $after;
} elseif ( is_page() && !$post->post_parent ) {
echo $before . get_the_title() . $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '' . get_the_title($page->ID) . '';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . esc_html($delimiter) . ' ';
echo $before . get_the_title() . $after;
} elseif ( is_search() ) {
echo $before;
printf('Search results for "%s"', get_search_query());
echo $after;
} elseif ( is_tag() ) {
echo $before;
printf('Posts tagged "%s"', single_tag_title('', false));
echo $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before;
printf('Posts by %s', $userdata->display_name);
echo $after;
} elseif ( is_404() ) {
echo $before;
_e('Page not found', 'cmp');
echo $after;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() )
echo sprintf( __(' (Page %s)', 'cmp'), get_query_var('paged') );
}
echo '';
}
}
Key Improvements:
- Fixed URL concatenation syntax errors.
- Added security escaping functions like
esc_url()andesc_html(). - Added conditional checks to prevent undefined variable errors.
- Translated text strings to English for broader compatibility.
2. Call the Breadcrumbs in Your Theme Templates
In your theme template files (e.g., header.php, single.php, page.php), insert the following code where you want the breadcrumbs to appear (typically above the title):
<?php if (function_exists('cmp_breadcrumbs')) cmp_breadcrumbs(); ?>
The breadcrumb trail will be generated dynamically based on the page type (home, post, page, category, etc.).
Custom Styling
The HTML output is wrapped in a <div id="nowplace">. You can style it by adding CSS rules to your theme's style.css file. Example:
#nowplace {
font-size: 14px;
margin: 15px 0;
color: #666;
}
#nowplace a {
color: #0073aa;
text-decoration: none;
}
#nowplace a:hover {
text-decoration: underline;
}
#nowplace .current {
color: #333;
font-weight: bold;
}
By following these steps, you can add a fully functional, customizable breadcrumb navigation to your WordPress site without using a plugin.