[Resolved] Display Post Path

Home Forums Support Display Post Path

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1353500
    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

    #1353547
    David
    Staff
    Customer Support

    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

    #1353655
    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.

    #1353673
    David
    Staff
    Customer Support

    Try this CSS:

    #breadcrumbs a {
        color: #0000FF !important;
    }
    #1353685
    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.

    #1353723
    David
    Staff
    Customer Support

    Try this CSS:

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

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

    #1353798
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.