Home » How to Create Custom Breadcrumbs in WordPress Without a Plugin

How to Create Custom Breadcrumbs in WordPress Without a Plugin

by Shubham Verma
0 comments 3.1K views 11 minutes read
How to Create Custom Breadcrumbs in WordPress Without a Plugin

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.

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) . '

  • '; } else if (is_archive() && is_tax() && !is_category() && !is_tag()) { // If post is a custom post type $post_type = get_post_type(); // If it is a custom post type display name and link if ($post_type != 'post') { $post_type_object = get_post_type_object($post_type); $post_type_archive = get_post_type_archive_link($post_type); echo '
  • ' . $post_type_object->labels->name . '
  • '; // echo '
  • ' . $separator . '
  • '; } $custom_tax_name = get_queried_object()->name; echo '
  • ' . $custom_tax_name . '

  • '; } else if (is_single()) { // If post is a custom post type $post_type = get_post_type(); // If it is a custom post type display name and link if ($post_type != 'post') { $post_type_object = get_post_type_object($post_type); $post_type_archive = get_post_type_archive_link($post_type); echo '
  • ' . $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() . '

  • '; // Else if post is in a custom taxonomy } else if (!empty($cat_id)) { echo '
  • ' . $cat_name . '
  • '; // echo '
  • ' . $separator . '
  • '; echo '
  • ' . get_the_title() . '

  • '; } else { echo '
  • ' . get_the_title() . '

  • '; } } else if (is_category()) { // Category page echo '
  • ' . single_cat_title('', false) . '

  • '; } else if (is_page()) { // Standard page if ($post->post_parent) { // If child page, get parents $anc = get_post_ancestors($post->ID); // Get parents in the right order $anc = array_reverse($anc); // Parent page loop if (!isset($parents)) $parents = null; foreach ($anc as $ancestor) { $parents .= '
  • ' . get_the_title($ancestor) . '
  • '; // $parents .= '
  • ' . $separator . '
  • '; } // Display parent pages echo $parents; // Current page echo '
  • ' . get_the_title() . '

  • '; } else { // Just display current page if not parents echo '
  • ' . get_the_title() . '

  • '; } } else if (is_tag()) { // Tag page // Get tag information $term_id = get_query_var('tag_id'); $taxonomy = 'post_tag'; $args = 'include=' . $term_id; $terms = get_terms($taxonomy, $args); $get_term_id = $terms[0]->term_id; $get_term_slug = $terms[0]->slug; $get_term_name = $terms[0]->name; // Display the tag name echo '
  • ' . $get_term_name . '

  • '; } elseif (is_day()) { // Day archive // Year link echo '
  • ' . 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

  • '; } else if (is_month()) { // Month Archive // Year link echo '
  • ' . get_the_time('Y') . ' Archives
  • '; // echo '
  • ' . $separator . '
  • '; // Month display echo '
  • ' . get_the_time('M') . ' Archives

  • '; } else if (is_year()) { // Display year archive echo '
  • ' . get_the_time('Y') . ' Archives

  • '; } else if (is_author()) { // Auhor archive // Get the author information global $author; $userdata = get_userdata($author); // Display author name echo '
  • ' . 'Author: ' . $userdata->display_name . '

  • '; } else if (get_query_var('paged')) { // Paginated archives echo '
  • ' . __('Page') . ' ' . get_query_var('paged') . '

  • '; } else if (is_search()) { // Search results page echo '
  • Search results for: ' . get_search_query() . '

  • '; } elseif (is_404()) { // 404 page echo '
  • ' . '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! 😊

You may also like

Leave a Comment

ShubhamVermma.com: Your one-stop destination for live technical tutorials. Master PHP, Laravel, WordPress, Node.js, and more with our expert instructors.

Subscribe

Subscribe my Newsletter for new Articles. Let's stay updated!

A Technology Media Company – All Right Reserved.