How to Use Breadcrumbs in WordPress: Simple Guide

To use breadcrumbs in WordPress, you can add a plugin like Yoast SEO or use theme functions such as yoast_breadcrumb(). Insert the breadcrumb function in your theme files where you want the navigation path to appear.

Syntax

Breadcrumbs in WordPress are usually added by calling a function provided by a plugin or theme. For example, Yoast SEO plugin uses yoast_breadcrumb() function.

• yoast_breadcrumb( $before, $after ): Outputs breadcrumb navigation.
• $before: Text or HTML before breadcrumbs (optional).
• $after: Text or HTML after breadcrumbs (optional).

You place this function inside your theme template files where you want breadcrumbs to show, typically in header.php or single.php.

php

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
?>

Output

<p id="breadcrumbs">Home > Blog > Post Title</p>

Example

This example shows how to add breadcrumbs using the Yoast SEO plugin in a WordPress theme. It checks if the function exists and then outputs the breadcrumb trail wrapped in a paragraph with an ID for styling.

php

<?php
// Place this code in your theme file where breadcrumbs should appear
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<nav aria-label="breadcrumb" class="breadcrumb">','</nav>');
}
?>

Output

<nav aria-label="Breadcrumb" class="breadcrumb">Home > Category > Post Title</nav>

Common Pitfalls

Not checking if the breadcrumb function exists: This causes errors if the plugin is disabled or not installed.

Placing breadcrumbs in wrong theme files: Breadcrumbs should be in templates that display content, like single.php or page.php, not in unrelated files.

Not styling breadcrumbs: Breadcrumbs need CSS to look good and be accessible.

php

<?php
// Wrong: No function check, may cause error if plugin missing
// yoast_breadcrumb('<p>','</p>');

// Right: Check function exists before calling
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p>','</p>');
}
?>

Quick Reference

• Use plugins: Yoast SEO, Breadcrumb NavXT for easy breadcrumb setup.
• Function: yoast_breadcrumb() outputs breadcrumbs if Yoast SEO is active.
• Placement: Insert breadcrumb code in theme files where navigation should appear.
• Accessibility: Wrap breadcrumbs in <nav> with aria-label="breadcrumb".
• Styling: Use CSS to make breadcrumbs clear and responsive.

Key Takeaways

Use a plugin like Yoast SEO to easily add breadcrumbs in WordPress.

Always check if the breadcrumb function exists before calling it to avoid errors.

Place breadcrumb code in theme files that display content, such as single.php or page.php.

Wrap breadcrumbs in semantic HTML with ARIA labels for accessibility.

Style breadcrumbs with CSS for clear, user-friendly navigation.