How to Truncate Post Titles in WordPress Breadcrumbs for Astra Theme

Breadcrumb navigation is an essential part of a well-structured WordPress website, improving both SEO and user experience. However, long post titles in breadcrumbs can make navigation cluttered and overwhelming. In this guide, we’ll show you how to automatically truncate post titles in Astra theme breadcrumbs without breaking the breadcrumb structure.

Why Truncate Breadcrumb Titles?

Long post titles can negatively impact breadcrumb readability, especially on smaller screens. A well-truncated title maintains usability while keeping breadcrumbs concise and visually appealing. It can look strange if there’s a long title that causes everything to shift to the next line, leaving a large and unwanted white space.

Benefits of Truncating Breadcrumb Titles:

• Improves Readability: Shorter titles are easier to scan.
• Enhances Mobile Experience: Avoids wrapping or breaking layout on mobile screens.
• SEO-Friendly: A cleaner breadcrumb trail can help search engines understand your content hierarchy better.

How to Truncate Breadcrumb Titles in Astra Theme

Astra provides a filter called astra_breadcrumb_trail that allows customization of the breadcrumb output. We’ll use this filter to modify the last breadcrumb item (typically the post title) and limit its length.

Step-by-Step Implementation

To achieve this, add the following PHP function to your WordPress functions.php file:

// Truncate Post Title in Breadcrumbs 
function custom_truncate_breadcrumb_title($breadcrumb) {
    $max_length = 52; // Set character limit for truncation
    // Load the breadcrumb as HTML
    $dom = new DOMDocument();
    libxml_use_internal_errors(true); // Prevent errors due to malformed HTML
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $breadcrumb);
    libxml_clear_errors();
    $xpath = new DOMXPath($dom);
    $breadcrumb_items = $xpath->query('//nav//a | //nav//span'); // Get all breadcrumb items
    if ($breadcrumb_items->length > 0) {
        $last_item = $breadcrumb_items->item($breadcrumb_items->length - 1); // Get last breadcrumb
        if ($last_item) {
            $title = $last_item->nodeValue;
            
            // Truncate title if it exceeds the limit
            if (mb_strlen($title) > $max_length) {
                $last_item->nodeValue = mb_substr($title, 0, $max_length) . '...';
            }
        }
    }
    return $dom->saveHTML();
}
add_filter('astra_breadcrumb_trail', 'custom_truncate_breadcrumb_title');

How The Code Works

1. Loads the Breadcrumb HTML
   Uses DOMDocument to parse the breadcrumb structure.
2. Finds the Last Breadcrumb Item
   Uses XPath to locate the last <a> or <span> element inside <nav>.
3. Truncates the Title
   If the defined character limit is exceeded, it’s shortened and appended with ....
4. Returns the Updated Breadcrumb
   The modified breadcrumb is returned with its structure intact.

Ensuring SEO-Friendliness

While truncating titles, it’s important to maintain keyword visibility. Consider setting a limit that retains primary keywords while avoiding excessive length.

• Keep the truncation limit above 25 characters for best readability.
• Ensure important keywords appear at the beginning of the title.
• Test on different screen sizes to optimize for responsiveness.

Final Thoughts

Implementing breadcrumb title truncation in Astra can enhance user experience while keeping navigation clean and professional. By using this method, your breadcrumb structure remains intact without affecting SEO rankings. Give it a try on your Astra-powered WordPress site and see the difference in clarity and usability.