• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

How to Customize the Genesis Breadcrumbs

Last Updated on July 16, 2019 Favorited: 0 times

Breadcrumbs are the path for the current page to the front page which indicates where you are, from where. It is a great way to provide the structured content and can be useful in various cases.

A well-structured Breadcrumbs shows in SERP result like this.

This feature is added by default in the Genesis framework and comes with the various customizations.

How to add Breadcrumbs?

Go to Genesis > Theme Settings > Breadcrumbs section and check the box to enable the breadcrumbs.

You can enable Breadcrumbs on all pages or specific pages. Save Changes.

Customize Breadcrumbs in Genesis

Any Genesis child theme outputs the default framework breadcrumbs customization found in /genesis/lib/classes/class-genesis-breadcrumb.php until we have not overwritten this.

Here are the default arguments function filtered within the class Genesis_Breadcrumb found in the /genesis/lib/classes/class-genesis-breadcrumb.php

	/**
	 * Constructor. Set up cacheable values and settings.
	 *
	 * @since 1.5.0
	 */
	public function __construct() {

		// Default arguments.
		$this->args = array(
			'home'                    => __( 'Home', 'genesis' ),
			'sep'                     => __( ' <span aria-label="breadcrumb separator">/</span> ', 'genesis' ),
			'list_sep'                => ', ',
			'prefix'                  => genesis_markup(
				array(
					'open'    => '<div %s>',
					'context' => 'breadcrumb',
					'echo'    => false,
				)
			),
			'suffix'                  => genesis_markup(
				array(
					'close' => '</div>',
					'echo'  => false,
				)
			),
			'heirarchial_attachments' => true,
			'heirarchial_categories'  => true,
			'labels'                  => array(
				'prefix'    => __( 'You are here: ', 'genesis' ),
				'author'    => __( 'Archives for ', 'genesis' ),
				'category'  => __( 'Archives for ', 'genesis' ),
				'tag'       => __( 'Archives for ', 'genesis' ),
				'date'      => __( 'Archives for ', 'genesis' ),
				'search'    => __( 'Search for ', 'genesis' ),
				'tax'       => __( 'Archives for ', 'genesis' ),
				'post_type' => __( 'Archives for ', 'genesis' ),
				'404'       => __( 'Not found: ', 'genesis' ),
			),
		);

    }

 

Modify the Breadcrumbs Display

You can modify the breadcrumbs using this in functions.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

//* Modify breadcrumb arguments.
add_filter( 'genesis_breadcrumb_args', 'genesiskit_breadcrumb_args' );
function genesiskit_breadcrumb_args( $args ) {
    $args['home'] = 'Home';
    $args['sep'] = ' / ';
    $args['list_sep'] = ', '; // Genesis 1.5 and later
    $args['prefix'] = '<div class="breadcrumb">';
    $args['suffix'] = '</div>';
    $args['heirarchial_attachments'] = true; // Genesis 1.5 and later
    $args['heirarchial_categories'] = true; // Genesis 1.5 and later
    $args['display'] = true;
    $args['labels']['prefix'] = 'You are here: ';
    $args['labels']['author'] = 'Archives for ';
    $args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later
    $args['labels']['tag'] = 'Archives for ';
    $args['labels']['date'] = 'Archives for ';
    $args['labels']['search'] = 'Search for ';
    $args['labels']['tax'] = 'Archives for ';
    $args['labels']['post_type'] = 'Archives for ';
    $args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later
return $args;
}

Customize Genesis Breadcrumbs

You can individually customize them if you do not want to add the above snippet.

We will use the same $args in a custom function to customize them. Each snippet mentioned below go on functions.php until no file name is added.

Remove → You are Here

//* Remove 'You are here' on the front of breadcrumb trail
add_filter( 'genesis_breadcrumb_args', 'gk_prefix_breadcrumb' );
function gk_prefix_breadcrumb( $args ) {
    $args['labels']['prefix'] = ''; 
    return $args;
}

Change → Home Text

//* Change the text at the front of breadcrumb trail
add_filter( 'genesis_breadcrumb_args', 'gk_home_text_breadcrumb' );
function gk_home_text_breadcrumb( $args ) { 
    $args['home'] = 'ICON_or_Text'; 
    return $args;
}

Change → Home Link URL

//* Modify Home breadcrumb link.
add_filter ( 'genesis_home_crumb', 'gk_breadcrumb_home_link' ); // Genesis >= 1.5
add_filter ( 'genesis_breadcrumb_homelink', 'genesiskit_breadcrumb_home_link' ); // Genesis =< 1.4.1
function gk_breadcrumb_home_link( $crumb ) {
	return preg_replace('/href="[^"]*"/', 'href="http://example.com/home"', $crumb);
}

Change → Breadcrumb Separator

//* Change the breadcrumb separator.
add_filter( 'genesis_breadcrumb_args', 'gk_change_breadcrumb_separator' );
function gk_change_breadcrumb_separator( $args ) {
    $args['sep'] = ' &rsaquo; ';
    return $args;
}

You can find more HTML number for symbols here.

Change → Breadcrumb Labels

//* Prefix author breadcrumb trail with the text 'Authored By'
add_filter( 'genesis_breadcrumb_args', 'gk_prefix_author_breadcrumb' );
function gk_prefix_author_breadcrumb( $args ) {
    $args['labels']['author'] = 'Authored By ';
    return $args;
}

Remove → Category

//* Remove Category from breadcrumb
add_filter ( 'genesis_post_crumb', 'gk_breadcrumb_category_post' ); 
function gk_breadcrumb_category_post( $crumb ) {
    $crumb = single_post_title( '', false );
    return $crumb;
}

It is recommended to add “Blog” Link to the breadcrumb so this snippet became more useful. Snippet is mentioned at the end.

Remove → Breadcrumbs

//* Remove Breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

Remove → Breadcrumb from Specific Page

//* Remove the breadcrumbs on a specific page
add_action( 'genesis_before', 'genesiskit_remove_breadcrumbs' );
function genesiskit_remove_breadcrumbs() {
	// if we are not on front page, abort.
	if ( ! is_front_page() ) {
		return;
	}
    remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
}

Re-position → Genesis Breadcrumbs

//* Reposition the breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );

Find Genesis hooks using Visual Hook Guide.

Re-position → Genesis Breadcrumb on Specific Page

//* Reposition the breadcrumbs on a specific page
add_action( 'genesis_before', 'genesiskit_resposition_breadcrumbs' );
function genesiskit_resposition_breadcrumbs() {
	// if we are not on front page, abort.
	if ( ! is_front_page() ) {
		return;
	}
    remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
    add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );
}

Find Genesis hooks using Visual Hook Guide.

Add font Icon before Home

//* Use Font icon for Home breadcrumb
add_filter ( 'genesis_home_crumb', 'gk_breadcrumb_home_icon' ); 
function gk_breadcrumb_home_icon( $crumb ) {
     $crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="ionicons ion-home"></i> Home</a>';
     return $crumb;
}

Make sure you are loading the ionicons or change the class to your icon class.

Add “Blog” to Genesis Single Post Breadcrumbs

By default, it is You are here: Home / CATEGORY / SINGLE POST


We can change like this You are here: Home / Blog / CATEGORY / SINGLE POST

Bill Erickson wrote a snippet to do this. Add the following in functions.php

add_filter( 'genesis_single_crumb', 'be_add_blog_crumb', 10, 2 );
add_filter( 'genesis_archive_crumb', 'be_add_blog_crumb', 10, 2 );
/**
 * Add Blog to Breadcrumbs
 * @author Bill Erickson
 * @link http://www.billerickson.net/adding-blog-to-genesis-breadcrumbs/
 *
 * @param string original breadcrumb
 * @return string modified breadcrumb
 */
function be_add_blog_crumb( $crumb, $args ) {
	if ( is_singular( 'post' ) || is_category() )
		return '<a href="' . get_permalink( get_option( 'page_for_posts' ) ) . '">' . get_the_title( get_option( 'page_for_posts' ) ) .'</a> ' . $args['sep'] . ' ' . $crumb;
	else
		return $crumb;
}

Breadcrumbs are Good but are not for everyone. That totally depends on the site design and niche and the requirements.

Related Posts

  • Customize Breadcrumbs in Genesis

Categories: Free Content, Genesis Tutorials Tags: Breadcrumbs

Reader Interactions

Comments

  1. Marcos says

    July 16, 2019 at 2:28 pm

    Hi,

    I would like to know how to HIDE category label instead of adding “blog” to the breadcrumbs. Could you please provide the code?

    Thank you very much, this content is sooo good 😉

    • Aryan Raj says

      July 16, 2019 at 3:22 pm

      Hi,

      It is recommended to add “blog” in breadcrumb if you want to remove category. Here is the snippet to remove category from breadcrumb.

      //* Remove Category from breadcrumb
      add_filter ( 'genesis_post_crumb', 'gk_breadcrumb_category_post' ); 
      function gk_breadcrumb_category_post( $crumb ) {
          $crumb = single_post_title( '', false );
          return $crumb;
      }
  2. christoph says

    April 23, 2020 at 1:34 pm

    Hi,
    is it possible to show the url permalink instead of the title?
    eg.
    u here: /product/product-abc/

    and in breadcrumbs should it looks like that:
    home > product > pagetitle (not product-abc)

  3. Ramanand mehta says

    January 30, 2021 at 2:34 am

    Hi, Aryan thank you for this useful article, In this post, you have shared everything about customizing genesis breadcrumbs. I want to ask, how can I set a span class to my post title in breadcrumb? Is this possible?

    • Aryan Raj says

      January 30, 2021 at 11:20 am

      might possible with re-writing the function. I work on code for registered users when requested.

  4. Marc says

    May 21, 2021 at 11:31 am

    Hello,
    Thanks for this, very useful to me !

    I had to remove category in certains posts from a certain category only and I complete the code like this :
    https://pastebin.com/ZSxhGRAH

    Now I would like to add in the trail some menu elements not showing up which are personal links without url.

    example :
    home > top menu title (custom link without URL) > some page (link to a page)

    Thanks for any tip.

    Cheers

    • Aryan Raj says

      May 31, 2021 at 9:26 am

      Please share the Website URL so i look into this.

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service