[Resolved] Inserting breadcrumbs after_header_content on new line

[Jim]

I’m trying to add breadcrumbs using Breadcrumbs NavXT. I want to add the breadcrumbs line to the header, right beneath the main title (and ideally indented beside the logo like the main title).

I don’t understand flex display, but it seems that the flex display applied to div.inside-header prevents using <br> or <p> to start a new line after the main title. See https://staging1.forestpathology.org/canker/beech-bark/

If you look at the front page (https://staging1.forestpathology.org), the red site description is in the position I’m trying to put breadcrumbs on other pages.

Here is the current version of the code I’m trying:

add_action( 'generate_after_header_content', 'fp_add_breadcrumbs' );
function fp_add_breadcrumbs() {
    if( function_exists( 'bcn_display' ) ) {
    	echo '<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">';
    	bcn_display();
    	echo '</div>';
    }
}

[Leo]

Hi there,

Can you try using the generate_after_logo hook?

[Jim]

Thanks Leo. I made that change. Logo, breadcrumbs, and Main title still on one line, just order changed.

[Leo]

Hmm little bit tricky. Can you test to see what happens if you do this?

add_filter( 'generate_site_description_output', function( $output ) {
    if( function_exists( 'bcn_display' ) && is_single() ) {
    	echo '<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">';
    	bcn_display();
    	echo '</div>';
    }
} );

Make sure to remove this CSS to test:

body:not(.home) p.site-description {
    display: none;
}

[Jim]

Sorry for the complexity. I did remove that CSS. The code you sent didn’t cause anything to show, just the logo and main title appeared. I figured, if it is a filter, we have to return the output, so I made some edits.

When I used the code below WITHOUT commenting out the commented lines, the normal site description appeared, just like the front page. I figured for some reason the if statement is false, so . . .

When I commented out the two lines as shown, the breadcrumbs appeared before the title, all on the same line. I’m certainly flummoxed.

add_filter( 'generate_site_description_output', function( $output ) {
//     if( function_exists( 'bcn_display' ) && is_single() ) {
    	$output='<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">' . 
    	bcn_display() .
    	'</div>';
//     }
    return $output;
} );

[Jim]

I now think the generate_after_logo hook is the best place for the breadcrumbs.

All I need to figure out is how to put a new line between breadcrumbs and main site/page title. The flexbox display is preventing that.

PS: the page is currently left in the state suggested by Leo

[Ying]

Can you try this CSS:

.inside-header.grid-container {
    flex-wrap: wrap;
}
.site-branding-container {
    width: 100%;
    order: -1;
}

[Jim]

Thanks Ying. I applied that CSS. I wasn’t sure what context you had in mind, so I did it with the generate_after_logo action hook as follows. Still no line break.
https://staging1.forestpathology.org/canker/beech-bark/

add_action( 'generate_after_logo', 'fp_add_breadcrumbs' );
function fp_add_breadcrumbs() {
    if( function_exists( 'bcn_display' ) ) {
    	echo '<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">';
    	bcn_display();
    	echo '</div><br>';
    }
}

[Ying]

I’m not seeing the CSS has been added to your site, can you clear cache?

[Jim]

I’m sorry; I don’t see cached pages as admin and forget that you would. Fixed.

Edit: actually I already had caching turned off in the staging site, but now I deactivated the caching plugin. It must have been the minified css file.

[Ying]

Glad it’s working now 🙂

[Jim]

Yeah I gave up on the action hook to place it where I wanted – it seemed impossible to create a new line in the flex system for some reason. I finally decided to filter the tagline/site description to replace that with breadcrumbs on appropriate pages.

That puts it below the title. I would prefer breadcrumbs above, but I can’t figure out a way to do that.

It seems the instructions for adding breadcrumbs via function https://docs.generatepress.com/article/adding-breadcrumbs/ are either obsolete since changing the theme’s header layout, or they don’t apply to Breadcrumbs NavXT.

[Author]

Posts