How to Hide Breadcrumbs From Single Page or Post

How To Add Login Feature in Your WordPress Blog

Breadcrumbs are great for every term they not only improves the user experience of your WordPress blog but also helps you to rank better in search engines but what if you don’t want to show breadcrumbs on a specific page? most of the premium themes already have this feature to disable breadcrumbs in a particular post or page so make sure to check your theme options before reading this article but if not, then in that case you are about to find out how to hide breadcrumbs on a single page or post in this article.

First of all, you need to have a custom CSS editor in your WordPress blog, Jetpack already provides this feature you can find it in the appearance section of the left-hand side menu. If you are using a premium theme then your theme might also provide this feature in “Theme Options” but I would recommend you to use editor provided by jetpack as you may change your theme in future and that will revert the changes you made.

After opening your editor write down this CSS code :

Code Snippet:

.page-id-(your page id) #breadcrumbs 
{
display: none;
}

All you need to do is paste above code in your CSS editor and replace “(your page id)” with the id of the page or post that you want to hide. If this doesn’t work for you then try this :

Code Snippet:

.page-id-(your page id) #crumbs 
{
display: none;
}

Remember to replace the text with your post or page id, after this is done, head back to the page or post to see if the breadcrumbs are hidden or not.

If  it’s still not hidden then your breadcrumbs probably have some different div id, so you need to right click over the breadcrumbs and click on inspect elements.

ice_screenshot_20160708-175856

After that check out which div id that your breadcrumbs are using.

ice_screenshot_20160708-175518

As you can see in our theme breadcrumbs have “crumbs” as their id so whatever your theme’s div id is replaced it with “(your div id)” from the code snippet below, remember to remove the braces () before saving the code.

Code Snippet:

.page-id-(your page id) #(your div id) 
{
display: none;
}

If the problem still persists then drop your comment below, we might help you with the problem.

Click here to find out how to add breadcrumbs in your WordPress blog using Yoast SEO

If you find this article useful, don’t forget to like and follow us on facebook and twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *