How to change the Rank Math Breadcrumb HTML Output

Breadcrumbs are an essential part of any website, providing a simple and intuitive way for visitors to navigate your site and understand its structure. In this blog post, we will be discussing how to change the HTML output of the breadcrumbs generated by the Rank Math plugin for WordPress. This technique can help you customize the appearance of your breadcrumbs and make them fit better with the overall design of your website.

We will be diving into the process of how to locate the correct file for editing and how to change the HTML structure for the breadcrumb. Also, we will be discussing the best practices and things to keep in mind to ensure that the modification does not affect the plugin’s core functionality.

Whether you’re a developer looking to improve the aesthetics of your website or a website owner wanting to make your site more user-friendly, this guide will provide you with the knowledge you need to customize the Rank Math breadcrumb HTML output on your WordPress site.

This filter allows you to make any changes to the Breadcrumb HTML on the front-end.

/**
 * Filter to change breadcrumb html.
 *
 * @param  html  $html Breadcrumb html.
 * @param  array $crumbs Breadcrumb items
 * @param  class $class Breadcrumb class
 * @return html  $html.
 */
add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
	// theme_breadcrumb_function();
	return $html;
}, 10, 3);

How to make the Rank Math Breadcrumb last item linked

By default, the last item of the Rank Math breadcrumbs will not be linked. If you want to include a link to the last item, then this filter can be customized as follows:

add_filter( 'rank_math/frontend/breadcrumb/html', function( $html, $crumbs, $class ) {
	$html = str_replace('<span class="last">'.get_the_title().'</span>', '<a href="'.get_the_permalink().'">'.get_the_title().'</a>', $html);
	return $html;
}, 10, 3);

For more Rank Math customization snippets check Rank Math’s official blog post here.