| WordPress

How to Hide Elements on Specific WordPress Pages

One of our members was creating a landing page in WordPress and needed to hide some elements of his theme. However, those elements couldn't be hidden from the theme or widget settings.

We recommended he use a quick solution that requires a little CSS.

In this post, I'm going to show you how to hide elements on certain pages of your WordPress site.

Step #1. What element do you want to hide?

In this example, I want to hide the main menu, but only on one specific page.

Use Chrome or Firefox Developer Tools to look for a unique CSS selector. If possible, find an id, although a class may work too. In my example, the selector that wraps the menu is #mainmenu.

Find a CSS class so you can Hide Elements with CSS

Step #2. Get the unique class from the body tag

Look for a unique class printed inside the body tag.

In this context, a unique class is exclusive to this URL, which means that it doesn't exist on other pages.

In my example below I have the .postid-1762 class, which refers to the post id.

Find the Post ID in WordPress

Step #3. Build the final selector

Merge the selectors from step 1 and 2 to build a final selector. The class from body comes first, following this pattern:

.unique-body-class #element-to-hide {
    display: none;

In my example would be:

.postid-1762 #mainmenu {
    display: none;

I set the display property with a value of "none" to make the menu invisible.

Step #4. Add your custom CSS

Add the CSS code in one of the CSS files from your theme, or using a plugin.

Step #5. Check the end result

The element will not be displayed in the URL that prints the unique class from step 2. However, it will remain visible on the rest of your pages.

Hide Elements with CSS

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.