{"id":1571,"date":"2019-09-13T15:00:15","date_gmt":"2019-09-13T13:00:15","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=1571"},"modified":"2022-01-11T10:49:19","modified_gmt":"2022-01-11T09:49:19","slug":"add-wordpress-breadcrumbs","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-wordpress-breadcrumbs\/","title":{"rendered":"How to Add Breadcrumbs to Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]WordPress breadcrumbs are a great tool for improving the usability of your WordPress site<\/strong>, especially if it has a complex structure with multiple page levels. Moreover, breadcrumbs can help boost your SEO rankings<\/a>, since they give search engines a quick way of viewing how the various pages on your site are interconnected. But what are breadcrumbs exactly, and what\u2019s the best way to add them to your WordPress website?[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Essentially, a breadcrumb (or a breadcrumb trail) is a small text path<\/strong> that serves as a secondary type of navigation<\/strong>. It shows your website visitors the steps they took to get to the page they are currently viewing. For example, if a reader came to view your blog post titled \u201cSummer Breeze\u201d, which is located in the \u201cStyle\u201d category of your blog, the breadcrumb to that post would look something like this: Home > Style > Summer Breeze<\/em>. You can see this in action in the image below.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Website <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]By using breadcrumbs in this way, you can give users a sense of location<\/strong>, let them know exactly where they are on your website at any given moment, and let them easily jump between pages<\/strong> to find the content they\u2019re most interested in.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]That being said, we have to note that adding breadcrumbs to your home page doesn\u2019t make much sense, since your front page is the place where everything begins, so, having breadcrumbs there isn\u2019t really necessary in the first place.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Breadcrumbs aren\u2019t only great for your visitors, but they also let search engines get a clearer picture of how your website is arranged. In fact, Google has started showing breadcrumbs in the search results, right below the site title. This means the possibility of an increased click-through rate<\/strong> and higher visibility for your site. Taking all this into account, we highly recommend adding WordPress breadcrumbs to your website. Here\u2019s how to do it.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Breadcrumb Settings on Qode Interactive Themes<\/h2>\n

[\/vc_column_text][vc_column_text]The process of setting up breadcrumbs in Qode Interactive WordPress themes<\/a> is extremely simple thanks to the specific options that have been created by our developers. If you have one of our themes installed on your WordPress website, you can enable breadcrumbs for a specific page or post in the Title Area Type<\/em> field<\/strong> from the backend of that page or post. The exact options in the dropdown may vary depending on the theme you are using, but to enable breadcrumbs, simply choose one of the title area types that has \u201cwith breadcrumbs\u201d<\/strong> in its description. Because this option is page specific, it lets you set a different title area type for each page\/post.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Breadcrumb <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can also set every Title Area<\/a> on your website to have the same type. This setting can be found in the theme\u2019s options under the Title<\/em> tab<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Title <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Again, simply choose the type of title area you\u2019d like in the Title Area Type<\/em> field. Once you choose a setting, it will become the default setting for your entire website<\/strong>, which means that it will apply to every page or post<\/strong> unless you change it individually, on the page\/post itself.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Title <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding WordPress Breadcrumbs Via a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]Another way to add breadcrumb navigation to your website is by installing a breadcrumb plugin<\/strong>. We\u2019ve selected two different WordPress plugins that you can use to add WordPress breadcrumbs to your web pages.[\/vc_column_text][vc_empty_space height=”72px”][vc_column_text]<\/p>\n

1. Breadcrumb navXT<\/h3>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \"Breadcrumb <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]One of the simplest ways to add breadcrumbs to your website is to use the Breadcrumb navXT plugin<\/a>. After you install and activate the plugin, you should go to Settings > Breadcrumb NavXT<\/em> to configure the settings<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Breadcrumb <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Most websites should work more than fine with general settings, but in case you need more specific settings, feel free to customize them according to your needs.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Breadcrumb <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The General<\/em> tab lets you adjust your overall site settings. Here you can modify the paged link templates<\/strong>. It is immediately visible that these navigation link templates rely on the Schema.org parameter principle.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In the Post Types tab, you can set the breadcrumb links for pages, posts and custom post types<\/strong>. Choosing how to display your post hierarchy is also an option. The default plugin setting will display it as Site Title > Category > Post Title<\/strong>, but you can change categories into tags, dates or post parent<\/strong>.[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”84px”][vc_column_text]<\/p>\n

Showing the Breadcrumb NavXT Plugin on Your Website<\/h3>\n

[\/vc_column_text][vc_column_text]In order for Breadcrumb NavXT to work and your breadcrumbs to be displayed, you will have to edit your theme (or child theme) files<\/strong>. You can do this by adding some code to your theme or child theme\u2019s header.php<\/strong> file. You can find the file in the list after you access Appearance > Theme Editor<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"WordPress <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Theme <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Theme <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Here\u2019s the code you should add:[\/vc_column_text][vc_empty_space height=”50px”][vc_column_text]<\/p>\n
<div class=\"breadcrumbs\" typeof=\"BreadcrumbList\" vocab=\"http:\/\/schema.org\/\">\r\n<?php if(function_exists('bcn_display'))\r\n{\r\nbcn_display();\r\n}?>\r\n<\/div><\/pre>\n
[\/vc_column_text][vc_empty_space height=”62px”][vc_column_text]<\/p>\n
Styling the Breadcrumb NavXT plugin<\/h3>\n
[\/vc_column_text][vc_column_text]We should also note that this plugin has default styling settings that can be easily changed by using your theme\u2019s style.css<\/strong> file (which is located in the same place as the header.php file), or in Appearance > Customize > Additional CSS<\/em> if you wish to monitor the changes as you add the code. You can find more details on styling the plugin\u2019s breadcrumbs in their official documentation<\/a>.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
2. Yoast SEO<\/h3>\n
[\/vc_column_text][vc_column_text]We already mentioned the importance breadcrumbs can have for your website\u2019s SEO. In the WordPress world, the Yoast SEO<\/a> plugin is one of the most popular SEO plugins. As such, it contains a bunch of useful elements and functionalities for optimization of your website, including the ability to add breadcrumbs.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Yoast                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Yoast SEO breadcrumbs work on the principle of outputting JSON-LD data<\/strong> in the source code, which is the most trustworthy method of adding rich snippet breadcrumbs.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After you install and activate the Yoast SEO plugin, you will see a new option for setting up the plugin in your admin WordPress dashboard<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Yoast                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To set up your breadcrumbs, go to SEO > Search Appearance<\/em>, and then select the Breadcrumbs tab<\/strong>. Once there, you can configure the settings to your preference. Make sure to save your changes once you\u2019re done.[\/vc_column_text][vc_empty_space height=”38px”]
\n    
\n                                    \"Yoast                        <\/div>\n<\/div>[vc_empty_space height=”82px”][vc_column_text]<\/p>\n
Implementing Breadcrumbs in Yoast SEO<\/h3>\n
[\/vc_column_text][vc_column_text]As with the previous plugin, you will have to edit the theme files<\/strong> to implement Yoast SEO breadcrumbs. To do this, insert the following code into your header.php<\/strong> file:[\/vc_column_text][vc_empty_space height=”50px”][vc_column_text]<\/p>\n
<div class=\"breadcrumbs\">\r\n<?php if ( function_exists('yoast_breadcrumb') )\r\n{yoast_breadcrumb('<p id=\"breadcrumbs\">','<\/p>');} ?>\r\n<\/div><\/pre>\n
[\/vc_column_text][vc_empty_space height=”20px”][vc_column_text]The default breadcrumb class name is .breadcrumbs<\/strong>, and just like with the plugin above, you can style it in any way you want by adding custom CSS in the style.css<\/strong> file (or by going to Appearance > Customize > Additional CSS<\/em>).[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Conclusion<\/h2>\n
[\/vc_column_text][vc_column_text]Essentially, adding WordPress breadcrumbs to your site can benefit you in many ways. Not only can they improve the user experience<\/strong> in general by making the navigation easier, but they can also encourage people to visit more pages on your website<\/strong>, thus making the bounce rate lower, and they help boost your SEO rankings. All these benefits make breadcrumbs an important component of every website. And with our guide, implementing them should be a piece of cake.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Breadcrumbs are a great tool for improving the usability of your website, especially if it has a complex structure with multiple page levels. Moreover, breadcrumbs can help boost your SEO rankings, since they give search engines a quick way of viewing how the various pages on your site are interconnected.<\/p>\n","protected":false},"author":2,"featured_media":1857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-1571","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/1571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=1571"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/1571\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/1857"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=1571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=1571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=1571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}