[Resolved] Display Post Path

[Ashish]

Hi Tom,
Please excuse for a simple question like this, but I am sort of new to CSS and need some assistance. I’ve gone through some of the posts in this forum where Categories and Tags are displayed below the title.

I have a slightly different requirement

I would like to have a path shown above the Single Post title, categories, archive and search page.

Example: Home >> Beverages >> Current Recipe

1. In the above, only Home and Beverages should be hyperlinked to their respective pages. Basically Nested categories.
2. In the search page, the search string should appear like this –> Home >> You searched for [search string]
Also, this should be enclosed in a gray block.

Kindly assist.

Ashish

GP Premium
WP Show Posts Pro

[David]

Hi there,

1. you will need to add a plugin that provides a breadcrumb. Most SEO plugins like Yoast and RankMath provide them.

If not you can use a dedicated plugin:

https://en-gb.wordpress.org/plugins/breadcrumb-navxt/

2. You would need to check if the plugin supports this feature

[Ashish]

Thank you David.

Breadcrumbs did the trick.

I added a hook to before_entry_title with the following code:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>
This shows exactly what I want. i.e.: Home » Breakfast » Cereal Pancakes

Now, I wish to Color the “Home” and “Breakfast” part of the breadcrumb to Blue, and the “Cereal Pancake” (that’s the current blog page) to Black. Also, I want this breadcrumb to be in a gray block with some left and right padding. Id really appreciate if you can provide me the code for that, and where to insert that code.

[David]

Try this CSS:

#breadcrumbs a {
    color: #0000FF !important;
}

[Ashish]

Thanks David.
That has done the trick for the coloring of the breadcrumb.

Now I need this entire breadcrumb in a gray box padded left and right. Thats the last bit.

[David]

Try this CSS:

#breadcrumbs {
    padding: 5px 15px;
    background-color: #eaeaea;
    border-radius: 2px;
}

[Ashish]

Perfect. Thank you so much David for the quick responses.

[David]

Glad to be of help

[Author]

Posts