Resolving HTML and Special Character Issues in Breadcrumb NavXT Titles
Content
Many users of the Breadcrumb NavXT plugin encounter issues where HTML tags or special characters appear incorrectly in their breadcrumb trails. This guide explains why this happens and provides the most effective solutions to clean up your breadcrumb titles.
Why This Happens
Breadcrumb NavXT offers different template tags to handle titles. The primary issue arises from the difference between these tags:
- %htitle%: Outputs the title with HTML formatting preserved.
- %title%: Outputs the title with HTML tags stripped out.
- %ftitle%: A less common tag that avoids the trimming function and can sometimes handle HTML entities differently.
When your post or page titles contain HTML (like <br>, <em>, or <strong> tags) or special characters (like apostrophes, ampersands &, or the ® symbol), choosing the wrong tag can lead to these elements displaying as raw code or being converted into HTML entities (e.g., <em>).
How to Fix It: Choose the Right Template Tag
The most straightforward solution is to change the template tag used in your breadcrumb settings.
Solution 1: Strip All HTML (Recommended for Clean Breadcrumbs)
- Navigate to Settings > Breadcrumb NavXT in your WordPress dashboard.
- Locate the various breadcrumb templates (e.g., Home, Post, Page, Archive templates).
- In each template, find every instance of
%htitle%and replace it with%title%. - Save your changes.
This change will remove all HTML tags from your breadcrumb titles, ensuring they display as plain text on the front end. This is the recommended approach for most users who want a clean, simple breadcrumb trail without any embedded formatting.
Solution 2: Use a Filter for Advanced Control
If you need more granular control—for example, to remove only specific HTML tags while keeping others—you can use the bcn_breadcrumb_title filter. This requires adding a small code snippet to your theme's functions.php file.
Example: The following code uses the PHP strip_tags() function to remove all HTML tags from the breadcrumb title.
function my_breadcrumb_title_filter($title) {
return strip_tags($title);
}
add_filter('bcn_breadcrumb_title', 'my_breadcrumb_title_filter');
You can modify the strip_tags() function to allow certain tags if absolutely necessary, but this is generally not recommended for breadcrumbs.
Troubleshooting Other Related Issues
- Apostrophes Showing with Slashes: This is often caused by using a straight tick (') instead of a proper apostrophe (’). Try using the HTML entity
’in your title fields. - Special Characters Like & or ®: If these characters are being cut off or displayed incorrectly when title trimming is enabled, it may be due to a known issue with how HTML entities are handled. A potential workaround is to use the
%ftitle%tag, which bypasses the trim function. The Breadcrumb NavXT team has acknowledged this issue and may address it in a future update. - RTL Text Direction: If you need right-to-left text alignment in your breadcrumbs, ensure you are using a
<span>element with inline CSS for styling (direction: rtl;) instead of a heading tag like<h1>.
Important Note on Heading Tags
As of Breadcrumb NavXT version 4.3, heading tags (like <h1>, <h2>) are no longer allowed within the breadcrumb templates for semantic reasons. Breadcrumbs are considered a navigation aid, not a primary page heading. If you were previously using an <h1> tag in a template, you will need to remove it. Your theme should be responsible for providing the main heading for the page content.
By understanding the difference between the %htitle% and %title% tags, you can effectively control how your breadcrumbs are displayed and ensure a clean, professional-looking trail for your users.
Related Support Threads Support
-
[Plugin: Breadcrumb NavXT] Problem with maximum title lengthhttps://wordpress.org/support/topic/plugin-breadcrumb-navxt-problem-with-maximum-title-length/
-
Whole page is now a hyperlinkhttps://wordpress.org/support/topic/whole-page-is-now-a-hyperlink/
-
Max Tilte Length retain full length tooltipshttps://wordpress.org/support/topic/max-tilte-length-retain-full-length-tooltips/
-
Wrap current page in tags (h2)https://wordpress.org/support/topic/wrap-current-page-in/
-
wrap breadcrumb html output in another taghttps://wordpress.org/support/topic/wrap-breadcrumb-html-output-in-another-tag/
-
Include PHP in Taxonomies Category Templatehttps://wordpress.org/support/topic/include-php-in-taxonomies-category-template/
-
Is it possible to use/create a different dynamic tag ?https://wordpress.org/support/topic/is-it-possible-to-usecreate-a-different-dynamic-tag/
-
title vs htitlehttps://wordpress.org/support/topic/title-vs-htitle/
-
navxt show RTL titles as LTRhttps://wordpress.org/support/topic/navxt-show-rtl-titles-as-ltr/
-
Non UTF8 in page title causing parsing errorshttps://wordpress.org/support/topic/non-utf8-in-page-title-causing-parsing-errors/
-
Split titles in breadcrump trailhttps://wordpress.org/support/topic/split-titles-in-breadcrump-trail/
-
[Plugin: Breadcrumb NavXT] Slashes added to apostrophes in General > Home Title fieldhttps://wordpress.org/support/topic/plugin-breadcrumb-navxt-slashes-added-to-apostrophes-in-general-home-title-field/
-
NavTX inherit post title codehttps://wordpress.org/support/topic/navtx-inherit-post-title-code/
-
Adding Author and Date to 'Attachment Template'https://wordpress.org/support/topic/adding-author-and-date-to-attachment-template/
-
Page titles have added spacing?https://wordpress.org/support/topic/page-titles-have-added-spacing/
-
[Plugin: Breadcrumb NavXT] Limit number of tags displayedhttps://wordpress.org/support/topic/plugin-breadcrumb-navxt-limit-number-of-tags-displayed/
-
<em> in titlehttps://wordpress.org/support/topic/in-title/
-
how to strip out html tags from post titleshttps://wordpress.org/support/topic/how-to-strip-out-html-tags-from-post-titles/
-
“ tag in titlehttps://wordpress.org/support/topic/tag-in-title/
-
Variables Requesthttps://wordpress.org/support/topic/variables-request/
-
HTML tags display in title if length is limitedhttps://wordpress.org/support/topic/html-tags-display-in-title-if-length-is-limited/
-
Untitled on single events from The Events Calendarhttps://wordpress.org/support/topic/untitled-on-single-events-from-the-events-calendar/
-
Problem with special charactershttps://wordpress.org/support/topic/problem-with-special-characters-11/
-
The plugin does not work on tag pages!https://wordpress.org/support/topic/the-plugin-does-not-work-on-tag-pages/
-
[Plugin: Breadcrumb NavXT] Limiting title length and special characters (ampersand)https://wordpress.org/support/topic/plugin-breadcrumb-navxt-limiting-title-length-and-special-characters-ampersand/
-
I wish date breadcrumbs were fully localizedhttps://wordpress.org/support/topic/i-wish-date-breadcrumbs-were-fully-localized/
-
max title length not working for visitorhttps://wordpress.org/support/topic/max-title-length-not-working-for-visitor/
-
Max Tilte Length Not Workinghttps://wordpress.org/support/topic/max-tilte-length-not-working/
-
Can I create a %slug% dynamic tag?https://wordpress.org/support/topic/can-i-create-a-slug-dynamic-tag/
-
Version 4.3. Post Template (Unlinked): h1https://wordpress.org/support/topic/version-43-post-template-unlinked-h1/
-
HTML post and page title tagshttps://wordpress.org/support/topic/html-post-and-page-title-tags/
-
Use in Title Tags?https://wordpress.org/support/topic/use-in-tags/