Using breadcrumbs is an effective method of improving navigation and WordPress SEO<\/a>. WordPress breadcrumbs show the relationship between pages or pieces of content on your site, helping your visitors and search engine crawlers understand the site’s structure.<\/p> You can use breadcrumbs on your site by choosing one of these three methods: manually, using themes, or plugins. You’ll find guides for all three in this article to make the process easier.<\/p> WordPress breadcrumbs refer to navigational links at the top of a page or post. They show site users their present location on the website by displaying the categories leading to the page they are currently on.<\/p> In addition to that, they create a trail that visitors can use to navigate back to the home page.<\/p> However, breadcrumb navigation links are not exclusive to WordPress sites – you can find them on other websites. Take a look at our knowledge base:<\/p> In the example, All Collections > Getting started > How to create a website?<\/strong> are links to the pages that lead to that post.<\/p> Instead of searching for other articles or clicking the back<\/strong> button, website visitors can simply click on Getting Started<\/strong> or other breadcrumbs to find more information about the topic.<\/p> Breadcrumbs are divided into three categories:<\/p> Regardless of the category, adding breadcrumbs to WordPress can enhance user experience, improve SEO, and reduce bounce rate<\/a>.<\/p> Breadcrumbs provide an easy way to navigate your site, which is especially important for first-time users. The navigational links eliminate the need to use the browser’s back button or do several searches.<\/p> Great user experience keeps site visitors happy and increases their dwell time<\/a> on your website, exposing more of your content to them.<\/p> Besides improving navigation, breadcrumbs are also useful for search engine optimization<\/a>. Search engine crawlers use breadcrumb navigation links to understand your site’s structure and index web pages more accurately.<\/p> Google<\/strong> even shows breadcrumbs on its result page to help users understand if the page is relevant to their search:<\/p> Bounce rate refers to the percentage of visitors who access a website and leave right after instead of exploring other content within the site.<\/p> If the web page they access doesn’t provide them with what they need, breadcrumbs guide them to other parts of the website. For example, if users don’t find the blue T-shirt they are looking for, they can easily explore other categories or find a related product.<\/p> Thus, it is less likely that they’ll leave for another website or go back to search engine result pages.<\/p> There are three ways to add WordPress breadcrumbs to your site: manually, using themes, or plugins.<\/p> The manual method is great for people who are comfortable with coding and want more creative control over how the breadcrumbs are displayed on their WordPress site.<\/p> To enable WordPress breadcrumbs manually, you will need to add a function to your functions.php <\/strong>file.<\/p> To access the file, use the File Manager on your web hosting control panel or connect via FTP<\/a>. For this tutorial, we are going to use Hostinger’s File Manager.<\/p> Adding WordPress breadcrumbs by installing a theme<\/a> with breadcrumb functionality is a great method for those starting a new website or doing a website redesign.<\/p> To activate the breadcrumb functionality, you must first install and activate the theme. Several themes already come with a built-in breadcrumb feature, such as Astra<\/strong> and OceanWP<\/strong>.<\/p> Astra<\/a><\/p> Theme Stats:<\/strong><\/p> Astra is a beautiful and lightweight WordPress theme that provides an effortless way to add breadcrumbs to WordPress websites.<\/p> To add breadcrumbs to your site using Astra, follow these steps:<\/p> Other than the breadcrumbs, this theme also offers the following features:<\/p> Astra is available for free<\/strong> with limited features. For more advanced options, it offers three premium plans<\/a>: Astra Pro <\/strong>at $47\/year<\/strong>, Essential Bundle <\/strong>at $137\/year<\/strong>, and Growth Bundle <\/strong>at $187\/year<\/strong>.<\/p> [PREVIEW<\/a> \/ DOWNLOAD<\/a>]<\/p> OceanWP<\/a><\/p> Theme Stats:<\/strong><\/p> OceanWP is a fast-loading WordPress theme with a shortcode to add breadcrumbs<\/a> to WordPress websites.<\/p> Here is a step-by-step guide on how to add breadcrumbs to this WordPress theme:<\/p> As seen in step number four, there are three shortcode parameters:<\/p> In the example above, we have added a custom class with blue color and black hover color. The HEX color code<\/a> for blue is #0003FE, while the color code for black is #000000.<\/p> Besides breadcrumbs, the OceanWP theme also has the following features:<\/p> The free version of OceanWP is available with limited features. Its premium plans<\/a> are Personal<\/strong>, at $39\/year<\/strong> for one site, Business<\/strong>, at $79\/year<\/strong> for three sites, and Agency<\/strong>, at $129\/year<\/strong> for 25 sites.<\/p> [PREVIEW<\/a> \/ DOWNLOAD<\/a>]<\/p> If your theme lacks built-in functionality, use a plugin to add breadcrumbs to the site. There are several options to choose from on the WordPress directory, but we selected the four best WordPress plugins<\/a> for adding breadcrumbs to your website.<\/p> Yoast SEO<\/a><\/p> Plugin Stats:<\/strong><\/p> Yoast SEO is one of the most popular search engine optimization plugins<\/a> for WordPress. In addition to that, this SEO plugin comes with built-in breadcrumb support.<\/p> Enabling breadcrumbs on your site using Yoast SEO is a straightforward process. After you install and activate the plugin, follow these steps:<\/p>![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/12\/WordPress-SEO-Checklist-banner-1024x283.png\")
<\/a><\/figure>What are WordPress breadcrumbs navigation links<\/h2>
![\"Hostinger's](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/knowledge-base-1-1024x506.png\")
<\/a><\/figure><\/div>Why use WordPress breadcrumbs<\/h2>
\n
Enhance user experience<\/h3>
Improve SEO<\/h3>
![\"Google's](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/google-breadcrumbs-1024x354.png\")
<\/a><\/figure><\/div>Reduce bounce rate<\/h3>
How to add breadcrumbs in WordPress<\/h2>
Adding WordPress breadcrumbs manually<\/h3>
\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/07\/hPanel-dashboard-2-1024x433.png\")
<\/a><\/figure><\/div>\n
![\"Hostinger's](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/07\/filemanager-themes-1024x279.png\")
<\/a><\/figure><\/div>\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/07\/filemanager-themes-functions-1024x441.png\")
<\/a><\/figure><\/div>\n
<div class=\"breadcrumb\"><?php get_breadcrumb(); ?><\/div><\/pre>
![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\")
<\/a><\/figure>Adding WordPress breadcrumbs from a theme<\/h3>
![\"WordPress](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/astra-1024x669.png\")
<\/a><\/figure><\/div>\n
\n
![\"Breadcrumb](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/breadcrumbs-wordpress-1024x435.png\")
<\/a><\/figure>\n
![\"Drop-drown](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/none-wordpress-breadcrumbs-1024x420.png\")
<\/a><\/figure>\n
![\"Styling](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/customize-breadcrumbs-1024x613.png\")
<\/a><\/figure>\n
\n
![\"WordPress](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/oceanwp-1024x452.png\")
<\/a><\/figure>\n
\n
![\"Widgets](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/available-widgets-wordpress-1024x463.png\")
<\/a><\/figure>\n
![\"Drop-down](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/add-widget-1024x557.png\")
<\/a><\/figure>\n
![\"Inserting](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/insert-ocean-wp-breadcrumb-1024x629.png\")
<\/a><\/figure>\n
![\"Modifying](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/modify-ocean-wp-breadcrumbs-1024x631.png\")
<\/a><\/figure>\n
\n
\n
Adding WordPress breadcrumbs with a plugin<\/h3>
![\"Yoast](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/yoast-1024x332.png\")
<\/a><\/figure><\/div>\n
\n
<?php<\/code>if ( function_exists( 'yoast_breadcrumb' ) ) {<\/code>yoast_breadcrumb( '<p id=\"breadcrumbs\">','<\/p>' );<\/code>}<\/code>?><\/code><\/li>\n<\/ol>\n
![\"A](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/theme-header-wordpress-1024x536.png\")
<\/a><\/figure>\n
![\"A](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/yoast-breadcrumb-in-code-editor-1024x537.png\")
<\/a><\/figure>\n
![\"Search](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/07\/breadcrumb-settings-yoast-seo.png\")
<\/a><\/figure>\n