Methods to add breadcrumb navigation to WordPress using Plugins and code

Breadcrumb navigation(English: Breadcrumb Trail) is a navigation aid in the user interface.Breadcrumb navigationTypically located below the title or page header, it provides users with a path back to the website«s homepage or entry page, usually appearing with a greater-than sign (>), although some designs use other symbols (such as »). Most of them look like this: Home > Category Page > Subcategory Page or Home >> Category Page >> Subcategory Page. For example, the current breadcrumb navigation effect on Naibabiji is as shown in the figure below:

The role of breadcrumb navigation

Breadcrumb navigation has two main purposes:

1. Enhance user experience, allowing users to easily know their current location and conveniently jump to the homepage and parent directories.
2. Let search engines clearly understand the website structure, which helpswebsite SEOeffectiveness.

WordPress breadcrumb navigation plugin

Breadcrumb NavXT

ThisWordPress breadcrumb navigation pluginsupports the Chinese language. You can set the breadcrumb separator in the backend, choose whether to display the current page link, and specify which pages or post types show breadcrumb navigation. Breadcrumb navigation can be set to display on all pages supported by WordPress. Breadcrumb NavXT download address:If you need to install Breadcrumb NavXT, simply search for the plugin name from the WP backend or download the installation package from below to install.Download Link Breadcrumb NavXT usage method:After installing and activating Breadcrumb NavXT, find the page file in the website template theme files where you want to display breadcrumb navigation, and insert the following code snippet in the appropriate location.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Flexy Breadcrumb

Compared to the Breadcrumb NavXT above, Flexy Breadcrumb does not have Chinese language support, but its backend settings are relatively simple, allowing you to set the navigation's font color, size, and icon information. Additionally, it supports setting the hierarchy of breadcrumb navigation, distinguishing by category, date, or TAG. The advantage of Flexy Breadcrumb is its support for shortcodes; you can reference it via shortcodes in articles or other places that support shortcodes, or add it to theme templates for reference. Furthermore, Flexy Breadcrumb's default styling is quite attractive. Flexy Breadcrumb download address:You can directly search for the plugin name in the backend to install it, or download the installation package and upload it for installation.Download Link Flexy Breadcrumb usage method:After installing and activating the plugin, you can directly insert the shortcode when publishing an article [flexy_breadcrumb] , or insert the following code snippet in a suitable location within the website's theme template files.

<?php echo do_shortcode( '[flexy_breadcrumb]'); ?>

The above two WordPress breadcrumb navigation plugins are ones that Naiba finds quite useful. If you have better recommendations, feel free to share them with me.

WordPress breadcrumb navigation code

If you prefer not to use a plugin to implement WordPress breadcrumb navigation, you can also use the following code to achieve it.

Multiple conditional code

This multiple conditional code is fromWP UniversityAs seen there, the functionality is quite comprehensive, supporting the theme language pack textdomain attribute (if your website is a single-language version, you don't need to modify the language pack; just modify the code directly.)

/**
 * WordPress 添加面包屑导航 
 * https://blog.naibabiji.com/skill/wordpress-mian-bao-xie-dao-hang.html
 */
function twentytwelve_breadcrumbs() {
	$delimiter = '»'; // 分隔符
	$before = '<span class="current">'; // 在当前链接前插入
	$after = '</span>'; // 在当前链接后插入
	if ( !is_home() && !is_front_page() || is_paged() ) {
		echo '<div itemscope itemtype="http://schema.org/WebPage" id="crumbs">'.__( '当前位置:' , 'twentytwelve' );
		global $post;
		$homeLink = home_url();
		echo ' <a itemprop="breadcrumb" href="' . $homeLink . '">' . __( '首页' , 'twentytwelve' ) . '</a> ' . $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 $cat_code = str_replace ('<a','<a itemprop="breadcrumb"', $cat_code );
			}
			echo $before . '' . single_cat_title('', false) . '' . $after;
		} elseif ( is_day() ) { // 天 存档
			echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
			echo '<a itemprop="breadcrumb"  href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
			echo $before . get_the_time('d') . $after;
		} elseif ( is_month() ) { // 月 存档
			echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $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 '<a itemprop="breadcrumb" href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
				echo $before . get_the_title() . $after;
			} else { // 文章 post
				$cat = get_the_category(); $cat = $cat[0];
				$cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
				echo $cat_code = str_replace ('<a','<a itemprop="breadcrumb"', $cat_code );
				echo $before . get_the_title() . $after;
			}
		} elseif ( !is_single() && !is_page() && get_post_type() != 'post' ) {
			$post_type = get_post_type_object(get_post_type());
			echo $before . $post_type->labels->singular_name . $after;
		} elseif ( is_attachment() ) { // 附件
			$parent = get_post($post->post_parent);
			$cat = get_the_category($parent->ID); $cat = $cat[0];
			echo '<a itemprop="breadcrumb" href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $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[] = '<a itemprop="breadcrumb" href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
				$parent_id  = $page->post_parent;
			}
			$breadcrumbs = array_reverse($breadcrumbs);
			foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
			echo $before . get_the_title() . $after;
		} elseif ( is_search() ) { // 搜索结果
			echo $before ;
			printf( __( 'Search Results for: %s', 'twentytwelve' ),  get_search_query() );
			echo  $after;
		} elseif ( is_tag() ) { //标签 存档
			echo $before ;
			printf( __( 'Tag Archives: %s', 'twentytwelve' ), single_tag_title( '', false ) );
			echo  $after;
		} elseif ( is_author() ) { // 作者存档
			global $author;
			$userdata = get_userdata($author);
			echo $before ;
			printf( __( 'Author Archives: %s', 'twentytwelve' ),  $userdata->display_name );
			echo  $after;
		} elseif ( is_404() ) { // 404 页面
			echo $before;
			_e( 'Not Found', 'twentytwelve' );
			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 )', 'twentytwelve' ), get_query_var('paged') );
		}
		echo '</div>';
	}
}

Actually, this piece of code is similar to the one aboveBreadcrumb NavXT, except the plugin has become a code version. In the code above, Naiba has already changed the default English display to Chinese „Current Location“ and „Home“. If you need to achieve multilingual support with the theme file„s language file, please replace “twentytwelve„ in the code with your own theme“s textdomain (search for textdomain in functions.php to see the result.)Code usage method:Copy the code above and add it to your theme file's functions.php. Beginners are recommended to useSafe Method to Add Code to the functions.php File: Code Snippetsthis plugin to add the code. Then, insert the following piece of code into the page code where you want to display the navigation content:

<?php if(function_exists('twentytwelve_breadcrumbs')) twentytwelve_breadcrumbs();?>

If the effect is not satisfactory, just add a CSS effect to beautify it. Naibabiji uses just the following bit of CSS code.

div#crumbs {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;
}

Simple code

The code above is actually quite complex. The essence of breadcrumb navigation is simply adding a home link, category link, and article title on the current page. We can easily achieve this by directly adding the following piece of code in the theme template.

<a href="/" title="Home">首页</a> » <?php the_category(","); ?>  » <?php the_title(); ?>

The above directly uses WordPress built-in functions to call the category and article title, achieving it in a simple and straightforward way. Alright, all the above content isMethods to add breadcrumb navigation to WordPress using Plugins and code. If you have any questions, feel free to join our group to discuss with us (the group QR code is at the end of the article).