[Resolved] How to Create Custom Breadcrumbs for GeneratePress Theme

[epickenyan]

Hi. This is not a support question but it could be shared somewhere to show others how to create custom breadcrumbs for GP theme. This tutorial will use the GP premium elements and code snippet plugin. (Could be modified to apply to GP child themes, but this method is easier).

1. Copy the code provided here and create a snippet using the code snippets plugin http://dimox.net/wordpress-breadcrumbs-without-a-plugin/ . Do not copy the opening <?php tag. (Bookmark that page because the code is updated regularly).
2. To create a shortcode, add this code at the end of the code you copied and pasted above just below “// end of dimox_breadcrumbs()” – add_shortcode( 'breadcrumbs', 'dimox_breadcrumbs' );
3. Create an element in Appearance>Generatepress and paste the shortcode [breadcrumbs] in the element editor. Hook it after_header and then set it to display “entire site” except the front page in the “display rules” section (you can also exclude other areas you want the breadcrumbs not to show. If you want it to show everywhere, even the front page, just select the display rule to the entire site without excluding anything).
4. That’s it. Next is to style the breadcrumbs. You can use the inspect element option in your browser to obtain the breadcrumbs class. Here is the CSS I am using for my site that could be modified to suit the style of your site.

.breadcrumbs{font-size:75%; color:#555;border-bottom:1px dotted #ebebeb;padding:5px 10px;border-top:1px dotted #ebebeb;margin-bottom:-10px;margin-top:15px;background:#fff;padding-left:20px;font-family:inherit;}
.breadcrumbs a{display:inline; border:none; padding:0; text-transform:none;color:#555}
.breadcrumbs a:hover{color:#1151b0!important;}

NB: The author says the code for the breadcrumbs does not support custom taxonomy. Also, it might not pick up multiple categories if the post is assigned multiple categories.

[Leo]

Thanks for sharing!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joe]

This is great! Thanks for sharing.

One tip: I’m using this in a page header following another shortcode. Even though the [breadcrumbs] shortcode appears last, the breadcrumbs are output at the very top of the page header, outside the container.

The fix for that is to add ob_start(); immediately after the opening { in the function and return ob_get_clean(); immediately before the closing }.

[epickenyan]

I created two sets of breadcrumbs using two hooks to address the same issue. The first one I set before_main_content and then set the display rules to only posts and pages. The second one I retained for after_header then set it to display in the entire site except for posts, pages and front page. I saw setting the breadcrumbs before main content did not display well on the blog section (archives, etc).

[Author]

Posts