[Resolved] About breadcrumbs

[Dung]

Hi GP team,
I am trying to add breadcrums on my site by using hook. I follow the guide at https://docs.generatepress.com/article/adding-breadcrumbs/ and add shortcode from yoast

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

It shows error on my site (breadcrums display at post and post category, you can check it)
Please help me, thank you so much.
One more thing, I can only check at execute shortcode, can not check at execute PHP (it shows: Unable to execute PHP as DISALLOW_FILE_EDIT is defined)

[David]

Hi there,

in the Hook – check the Execute PHP checkbox.

[Dung]

Thanks David, just got it.
The breadcrumbs is now located at after_header and there are 2 things I need:
1/ The breadcrumbs are displayed like the category heading (which means it has same background color like category heading and I can adjust the margin)
2/ My menu typography is uppercase and sub menu is capitalize, can we let the breadcrumbs show all in capitalize?

[David]

Try this, wrap your breadcrumbs in a div like so:

<div class="grid-container custom-breadcrumb">
<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
</div>

And then add this CSS:

.custom-breadcrumb {
    background-color: #ffffff;
    padding: 20px 20px 0;
    margin-top: 0.5em;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .custom-breadcrumb {
        padding: 10px;
    } 
}
#breadcrumbs {
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 0;
}

[Dung]

Hi David,
The PHP code worked well. There are some problems with the CSS:
1/ Text-transform: it just tranform HOME and submenu to uppercase (I need tranform main menu to capitalize)
2/ Breadcrumb layout is not the same width as category heading layout.
3/ Can we have full padding options (top, bottom, left and right). By the way, the padding on my site are different between desktop and mobile display.
4/ Adjust breadcrumbs font size.

[David]

I adjusted the CSS above to fix the alignment and make the necessary padding changes. The last rule includes a font-size for the breadcrumb.

[Dung]

Hi David,
It seems better now but the breadcrumb padding top and bottom is not equal (now top is higher than bottom, can we make the text align center).
About the text transform: it work fine if we choose uppercase (which mean code will change HOME and SUB MENU to uppercase, MAIN MENU is basically uppercase). What I need is changing to capitalize (my HOME and SUB MENU are basically capitalize, the MAIN MENU is uppercase and I try to change to capitalize). Can we make it work when convert between uppercase and capitalize (uppercase work fine but capitalize can not change the MAIN MENU)
Sorry if my english make you confused.

[Leo]

I adjusted David’s CSS a bit to fix the top and bottom padding issue.

Sorry not quite sure if I understand what you meant with the upper case issue.

Can you explain a bit more? Maybe some actual examples of what it should look like?

[Dung]

Hi Leo,
Text-tranform now is fine for me. Thank you so much.
Can we add a text before the breadcrumbs like this: You are here: Home > Main Menu > ….

[Leo]

You could do this:

p#breadcrumbs:before {
    content: "You are here: ";
    text-transform: none;
}

[Dung]

Very nice, thank you so much Leo.

[Leo]

No problem 🙂

[Author]

Posts