Site logo

Archived topic

Inserting breadcrumbs after_header_content on new line

11 replies · Started by Jim on June 3, 2022

Viewing posts 1–12 of 12

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>';
    }
}

Hi there,

Can you try using the generate_after_logo hook?

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

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;
}

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;
} );

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

Can you try this CSS:

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

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>';
    }
}

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

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.

Glad it's working now :)

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.

This archived topic is closed to new replies.