Home > Software > How to Implement Breadcrumbs in GeneratePress: A Step-by-Step Guide

How to Implement Breadcrumbs in GeneratePress: A Step-by-Step Guide

Anastasios Antoniadis

Share on X (Twitter) Share on Facebook Share on Pinterest Share on LinkedInBreadcrumbs are a crucial navigational aid on websites, offering users a way to trace their path from the page they are currently viewing back to the homepage. Not only do they enhance user experience by providing clear site navigation, but they also contribute …

GeneratePress

Breadcrumbs are a crucial navigational aid on websites, offering users a way to trace their path from the page they are currently viewing back to the homepage. Not only do they enhance user experience by providing clear site navigation, but they also contribute to SEO by enabling search engines to understand the structure of your website more efficiently. GeneratePress, known for its lightweight and performance-oriented design, offers seamless integration with various breadcrumb solutions. This article delves into how you can implement breadcrumbs in your GeneratePress theme, enhancing both user navigation and site structure clarity.

Note: If you own GeneratePress Premium, this post includes a full example of how to display breadcrumbs using GeneratePress elements and Breadcrumb NavXT. It also includes the CSS I use on How to Hmm to display the breadcrumbs you see on the site. You can customize the CSS code to your liking (I know mine is a bit kitch).

Understanding Breadcrumbs in GeneratePress

GeneratePress is a versatile WordPress theme that emphasizes speed, stability, and accessibility. While it doesn’t include a built-in breadcrumb feature, it is highly compatible with popular SEO plugins and breadcrumb generators that can easily introduce this functionality to your site.

Choosing a Breadcrumb Solution

Before adding breadcrumbs to GeneratePress, you need to decide on the method. Common approaches include:

  1. SEO Plugins: Many SEO plugins like Yoast SEO and Rank Math offer built-in breadcrumb functionality. These plugins not only display breadcrumbs but also ensure they are SEO-friendly by structuring them correctly for search engines.
  2. Breadcrumb NavXT: A dedicated breadcrumb plugin that provides customizable breadcrumb trails tailored to your website’s structure.
  3. GeneratePress Elements: A great solution for those who own GeneratePress Premium.
  4. Manual Code: For those who prefer a hands-on approach or need a highly customized breadcrumb solution.

Method 1: Using SEO Plugins

Yoast SEO

  1. Install and Activate Yoast SEO: Navigate to “Plugins” > “Add New” in your WordPress dashboard, search for “Yoast SEO,” install, and activate it.
  2. Enable Breadcrumbs: Go to “SEO” > “Search Appearance” > “Breadcrumbs” and enable breadcrumbs by toggling the switch.
  3. Configure Settings: Yoast SEO allows you to customize breadcrumb settings, including separators and prefixes. Adjust these settings according to your preferences.
  4. Insert Breadcrumb Code: To display breadcrumbs, you may need to add the following code snippet to your theme where you want the breadcrumbs to appear, often in the header.php or single.php file:
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}

For GeneratePress, a child theme is recommended for direct code modifications to prevent losing changes on theme updates.

Rank Math

  1. Install Rank Math: Similar to Yoast, install and activate Rank Math from the “Plugins” > “Add New” section.
  2. Enable Breadcrumbs: In Rank Math, navigate to “Rank Math” > “General Settings” > “Breadcrumbs” and enable them.
  3. Customize and Insert Code: Customize the breadcrumb settings as needed and use the Rank Math provided code snippet in your theme files where you want the breadcrumbs to appear.

Method 2: Using Breadcrumb NavXT

Note: This option still requires to use a plugin like WPCode to create a code snippet and a shortcode to display the breadcrumbs, either with manual insertion or with a method like GeneratePress’ Hooks.

Breadcrumb NavXT Settings
  1. Install Breadcrumb NavXT: Install and activate it from the “Plugins” > “Add New” section by searching for “Breadcrumb NavXT.”
  2. Configuration: Navigate to “Settings” > “Breadcrumb NavXT” to configure your breadcrumb settings.
  3. Integration: Use the provided shortcode or function to add breadcrumbs to your pages. The shortcode can be added directly to posts or widgets, while the function might be added to your theme files:
if ( function_exists('bcn_display') ) {
  bcn_display();
}

Method 3: GeneratePress Elements

Implementing breadcrumbs in GeneratePress using its Elements module is an efficient and flexible method that doesn’t require direct editing of theme files or advanced coding knowledge. This approach is particularly beneficial for those with GeneratePress Premium, as Elements is a premium feature offering extensive customization capabilities. Here’s a step-by-step guide on how to implement breadcrumbs using GeneratePress Elements:

Step 1: Choose Your Breadcrumb Solution

Before proceeding with GeneratePress Elements, decide on the breadcrumb solution you will use. This could be a shortcode provided by an SEO plugin like Yoast SEO, Rank Math, or any plugin offering a breadcrumb shortcode. Alternatively, if you have a PHP snippet for breadcrumbs (like those offered by Breadcrumb NavXT or a custom PHP function), that will work too.

Step 2: Access GeneratePress Elements

  1. From your WordPress dashboard, navigate to Appearance > Elements.
  2. Click on the Add New button at the top of the Elements page to create a new element.
  3. Select Hook as the Element Type. Hooks allow you to insert content in specific locations throughout your site.

Step 3: Insert Your Breadcrumb Code

Note: This step is optional as you don’t have to use a PHP Snippet and generate a Shortcode like I did with WPCode. Instead, you can insert the PHP code directly inside the GeneratePress Hook Element.

  • For Shortcodes: If using a shortcode for breadcrumbs, paste it into the content area of the Hook Element. Make sure to use the WordPress shortcode block or insert it directly if using the text editor.
  • For PHP Snippets: If you’re using a PHP code snippet to generate breadcrumbs (like those from Breadcrumb NavXT or a custom function), you’ll need to wrap your PHP code with opening <?php and closing ?> tags. Ensure that “Execute PHP” is checked if you’re adding PHP code directly.

Breadcrumb NavXT PHP function:

if ( function_exists('bcn_display') ) {
  bcn_display();
}

Custom Breadcrumb function:

function custom_breadcrumbs() {
    
    // Settings
    $separator = ' > ';
    $home_title = 'Home';
    
    // If you have a custom post type, you can add it here
    $custom_post_types = array(); // Example: array('your_custom_post_type' => 'Your Custom Post Type Name')
    
    // Do not edit below this line
    global $post;
    $home_link = get_bloginfo('url');
    
    // Start the breadcrumb with a link to your homepage
    echo '<div id="breadcrumbs">';
    echo '<a href="' . $home_link . '">' . $home_title . '</a>';
    
    if (is_category() || is_single()) {
        echo $separator;
        the_category(', ');
        if (is_single()) {
            echo $separator;
            the_title();
        }
    } elseif (is_page() && !is_front_page()) {
        if ($post->post_parent) {
            // If the page has a parent, display the hierarchy
            $ancestors = get_post_ancestors($post->ID);
            $ancestors = array_reverse($ancestors);
            foreach ($ancestors as $ancestor) {
                echo $separator . '<a href="' . get_permalink($ancestor) . '">' . get_the_title($ancestor) . '</a>';
            }
        }
        echo $separator;
        echo the_title();
    } elseif (is_tag()) {
        echo $separator . single_tag_title('', false);
    } elseif (is_day()) {
        echo $separator . get_the_time('F jS, Y');
    } elseif (is_month()) {
        echo $separator . get_the_time('F, Y');
    } elseif (is_year()) {
        echo $separator . get_the_time('Y');
    } elseif (is_author()) {
        echo $separator . get_the_author();
    } elseif (isset($custom_post_types[get_post_type()])) {
        echo $separator . $custom_post_types[get_post_type()];
    } elseif (is_archive()) {
        echo $separator . post_type_archive_title('', false);
    } elseif (is_search()) {
        echo $separator . 'Search Results';
    }
    
    echo '</div>';
}

As you can see, this is a much lengthier solution.

In this example, I used WPCode to create a custom snippet with the Breadcrumb NavXT PHP function. This allows me to use the shortcode wherever I want on my site.

WPCode - Create Custom Snippet
Screenshot: How to Hmm

Step 4: Set Display Rules

  1. Hook Selection: In the Hook dropdown, choose where you want your breadcrumbs to appear. A common placement is generate_before_entry_title or generate_after_entry_header, but you can select any hook that positions the breadcrumbs where you prefer on your pages.Add New Hook - Breadcrumbs (2)
  2. Display Rules: Under the Display Rules section at the bottom, set where your breadcrumbs should appear. Common settings include:
    • Location: Select “Entire Site” if you want breadcrumbs site-wide or choose specific locations like “All Singular” for posts and pages.
    • Exclude: Optionally, you can specify locations where you don’t want breadcrumbs to appear, such as the homepage or certain pages.Publish New Hook - Breadcrumbs

As you can see, after creating a PHP code snippet with the function that retrieves breadcrumbs from NavXT, I then create a new Hook that executes both Shortcodes and PHP, and appears in all singular webpages (this includes both posts and pages, you can use All Posts, to limit breadcrumbs to posts). Additionally, I added a <span class=”generatepress-breadcumbs”></span> element around the Shortcode, to allow me to manipulate the appearance of the breadcrumbs with CSS (more on that below).

Step 5: Publish Your Element

Once you’ve configured your breadcrumb element, click on the Publish button. Your breadcrumbs should now appear on your site based on the display rules you’ve set.

Additional Customization

After implementing breadcrumbs, you may want to style them to match your site’s design. You can add custom CSS in the Customize > Additional CSS section of your WordPress dashboard. For example:

This method works well for users who want to integrate breadcrumbs with specific conditions or across various sections of their site without altering the core theme files.

.generatepress-breadcrumbs {
    font-size: 14px; /* Adjust the font size as needed */
    color: #ffffff; /* Text color */
    background: linear-gradient(145deg, #6e48aa, #9d50bb); /* Gradient background */
    padding: 10px 15px; /* Padding around the text */
    border-radius: 15px; /* Rounded corners for the breadcrumb bar */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    margin-bottom: 20px; /* Space below breadcrumbs */
    display: inline-block; /* Keeps the breadcrumb bar compact */
}

.generatepress-breadcrumbs a {
    color: #ffffff; /* Ensures links are also white */
    text-decoration: none; /* Removes underline from links */
    transition: color 0.3s ease; /* Smooth transition for hover effects */
}

.generatepress-breadcrumbs a:hover {
    color: #ddd; /* Lightens link color on hover for interaction feedback */
    text-decoration: underline; /* Underlines link on hover for clarity */
}

To complete the customization of my breadcrumbs I used the Theme File Editor to add the above CSS code inside style.css.

CSS for breadcrumbs in style.css

Method 4: Utilizing Page Builders

Many WordPress users leverage page builders for designing their sites. Page builders like Elementor, Beaver Builder, and WPBakery often come with their own breadcrumb modules or widgets.

  1. Elementor:
    • If using Elementor, especially with its Theme Builder functionality, you can add breadcrumbs to your header or template parts using the Breadcrumbs widget.
    • Customize the appearance directly within Elementor’s visual editor.
  2. Beaver Builder:
    • Beaver Builder users can utilize the Breadcrumbs module available in the Beaver Themer add-on.
    • Like Elementor, it allows for direct styling and placement in your layouts.

For page builders, ensure that your breadcrumb placement and styling are consistent across all pages for uniformity in user experience.

Method 5: WordPress Breadcrumb Shortcodes

Some plugins or themes provide shortcodes for displaying breadcrumbs. While not specific to GeneratePress, using a shortcode can be a convenient method for users uncomfortable with editing theme files or writing PHP code. After installing the plugin:

  1. Find the Breadcrumb Shortcode: Look for documentation or settings related to the breadcrumb feature within the plugin to find the correct shortcode.
  2. Insert Shortcode: Place the shortcode where you want the breadcrumbs to appear. This could be in a widget, a page, or directly in post content.

Method 6: Child Theme Customization

For those who are comfortable with PHP and have unique requirements not met by plugins or widgets, creating a custom function in a GeneratePress child theme remains a robust solution. This method involves:

  1. Creating a Breadcrumb Function: Write a custom PHP function that generates breadcrumb links based on the site’s structure or certain conditions.
  2. Adding the Function to Your Site: Place your custom breadcrumb function in the functions.php file of your GeneratePress child theme.
  3. Calling Your Breadcrumbs in Templates: Edit the appropriate theme template files to call your breadcrumb function where you want the breadcrumbs to display.

This approach offers maximum flexibility and integration depth but requires a good understanding of PHP and WordPress theme structure.

Final Adjustments and Styling

Regardless of the method chosen, you may want to style your breadcrumbs for a seamless integration with your site’s design. You can do this by adding custom CSS in the “Appearance” > “Customize” > “Additional CSS” section of your WordPress dashboard.

Conclusion

Integrating breadcrumbs into a GeneratePress theme enhances both user experience and SEO. While GeneratePress doesn’t include built-in breadcrumb functionality, its flexibility and compatibility with major SEO and breadcrumb plugins make adding this feature straightforward. By following the steps outlined for each method, you can effectively implement and customize breadcrumbs, ensuring a better navigation experience for your users and improved site structure for search engines.

Anastasios Antoniadis
Follow me
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x