Breadcrumbs are essential for enhancing user navigation on your website. They provide a clear path for visitors to understand their location within your site’s hierarchy. While there are several plugins available for adding breadcrumbs in WordPress, using custom code can be more efficient and lightweight. In this guide, I’ll show you how to create custom breadcrumbs without relying on additional plugins.
Table of Contents
Step 1: Add Custom Code to Your Theme’s Functions.php File
First, open your WordPress theme’s functions.php file. You can find this file in your theme directory. Add the following custom code snippet to the file:
// Start SV Breadcrumbs
function sv_custom_breadcrumbs()
{
ob_start();
// Settings
$separator = '>';
$breadcrums_id = 'sv_custom_breadcrumbs';
$breadcrums_class = 'sv_custom_breadcrumbs';
$home_title = 'Home';
// If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
$custom_taxonomy = 'product_cat';
// Get the query & post information
global $post, $wp_query;
// Do not display on the homepage
if (!is_front_page()) {
// Build the breadcrums
echo '';
if (is_search()) {
echo '' . get_search_query() . '
';
} else {
echo '' . get_the_title() . '
';
}
echo '';
// Home page
echo '- ' . $home_title . '
';
// echo '- ' . $separator . '
';
if (is_archive() && !is_tax() && !is_category() && !is_tag()) {
echo '' . post_type_archive_title('', false) . '
- ' . $post_type_object->labels->name . '
';
// echo '- ' . $separator . '
';
}
$custom_tax_name = get_queried_object()->name;
echo '' . $custom_tax_name . '
- ' . $post_type_object->labels->name . '
';
// echo '- ' . $separator . '
';
}
// If it's a custom post type within a custom taxonomy
$taxonomy_exists = taxonomy_exists($custom_taxonomy);
if (empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {
$taxonomy_terms = get_the_terms($post->ID, $custom_taxonomy);
$cat_id = $taxonomy_terms[0]->term_id;
$cat_nicename = $taxonomy_terms[0]->slug;
$cat_link = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
$cat_name = $taxonomy_terms[0]->name;
}
// Check if the post is in a category
if (!empty($last_category)) {
// echo $cat_display;
echo '' . get_the_title() . '
- ' . $cat_name . '
';
// echo '- ' . $separator . '
';
echo '' . get_the_title() . '
' . get_the_title() . '
' . single_cat_title('', false) . '
- ' . get_the_title($ancestor) . '
';
// $parents .= '- ' . $separator . '
';
}
// Display parent pages
echo $parents;
// Current page
echo ' ' . get_the_title() . '
' . get_the_title() . '
' . $get_term_name . '
- ' . get_the_time('Y') . ' Archives
';
// echo '- ' . $separator . '
';
// Month link
echo '- ' . get_the_time('M') . ' Archives
';
// echo '- ' . $separator . '
';
// Day display
echo ' ' . get_the_time('jS') . ' ' . get_the_time('M') . ' Archives
- ' . get_the_time('Y') . ' Archives
';
// echo '- ' . $separator . '
';
// Month display
echo '' . get_the_time('M') . ' Archives
' . get_the_time('Y') . ' Archives
' . 'Author: ' . $userdata->display_name . '
' . __('Page') . ' ' . get_query_var('paged') . '
Search results for: ' . get_search_query() . '
- ' . 'Error 404' . '
';
}
echo '
';
echo '';
}
$breadcrums = ob_get_clean();
return $breadcrums;
}
add_shortcode('sv-breadcrumbs', 'sv_custom_breadcrumbs');
// End SV Breadcrumbs
Step 2: Add Custom CSS code in to Your Theme’s style.css File
.custom_breadcrumbs {
list-style: none;
padding: 0;
margin: 0;
}
.custom_breadcrumbs li {
display: inline-block;
}
.custom_breadcrumbs li a {
text-decoration: none;
color: #333;
padding: 5px 10px;
}
.custom_breadcrumbs li a:hover {
color: #000;
}
.custom_breadcrumbs li:after {
content: ">";
padding: 0 5px;
color: #ccc;
}
.custom_breadcrumbs li:last-child:after {
content: "";
}Step 3: Display Breadcrumbs on the Frontend
Now that you’ve added the custom code, you can display the breadcrumbs on your website. There are two methods to achieve this:
Method 1: Using Shortcode
If you want to display breadcrumbs within your posts or pages, use the [sv-breadcrumbs] shortcode. Simply insert this shortcode where you want the breadcrumb trail to appear.
Method 2: Using PHP
For more flexibility, you can directly call the sv_custom_breadcrumbs() function in your theme files. For instance, add the following code snippet to your template files (e.g., header.php, single.php, etc.):
echo sv_custom_breadcrumbs();
Conclusion
By following these steps, you can create custom breadcrumbs tailored to your website’s structure. Remember that well-implemented breadcrumbs not only improve user experience but also enhance your site’s SEO. Happy coding!
Feel free to customize the code further based on your specific requirements. If you have any questions or need additional assistance, feel free to ask! 😊
