How to Hide Anything on WordPress Site

In this tutorial we will learn how to hide any element on WordPress site.

Hide an Element using CSS

We can hide an element using CSS or JavaScript, in this tutorial we will see how to hide it using CSS.

Demo Page

Please visit this demo page http://freewptp.com/tutorials/demo/how-to-hide-anything-on-wordpress-site/ you can see the element “Hide me if you can 1″ on that page as displayed in the following screenshot.

 

Screenshot

Let’s hide the element pointed by the arrow in the above screenshot.

Inspect the Element using Browser Inspector

To do this we have to inspect that element by using the Inspect Element tool provided by the browser. Almost all browsers have this tool and you can also get this by installing browser add-on such as firebug add-on of firefox browser.

You can access the Inspect Element window in several ways as following choose one that you are comfortable with:

Using the mouse (or trackpad): right-click and choose Inspect Element on the drop-down menu.
Using the menu of Chrome: Tools -> Developer Tools
Using the keyboard shortcut keys: In Mac: Cmd + Opt + I; In Windows: Ctrl + Shift + I

A new window will open at the bottom of your current web page as displayed in the following screenshot. This window is usually docked in the bottom position, but you can use the docking icon dock to dock/undock it from the main window.

Screenshot1

Please note there are various ways to access the Inspect Element window but they are different depending on the browser so please refer browser documentation like following to get information about it.

https://developer.chrome.com/devtools#dom-and-styles
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW1
http://www.opera.com/dragonfly/documentation/dom/

You will find more information about how to access Inspect Element tool on the following pages.

http://kb.oboxthemes.com/articles/how-to-get-css-styles-for-elements/
https://developer.chrome.com/devtools#dom-and-styles
http://www.sitepoint.com/inspect-element-troubleshooting-css-browser/
http://testingfreak.com/inspect-element-in-firefox-chrome-or-ie-browsers/
http://www.wikihow.com/Use-the-Inspect-Element-in-Mozilla-Firefox
http://cs.wellesley.edu/~cs110/lectures/chrome-inspect/inspect.html

Find out the Element CSS Selector

Now we have to find out the element CSS selector so for that inspect the element “Hide me if you can 1” in the browser by hovering over that element in the element inspector window or just right click on that element and click on the Inspect Element menu in the displayed drop down context menu as shown in the attached screenshots.

Screenshot2
Hovering over that element in the element inspector window.

 

Screenshot3
Right click on that element and click on the Inspect Element menu.

You can see in the above screenshots that the element has an id called “hide-me”, this is the element CSS selector that we can use to hide it.

Types of CSS Selectors

There are various types of CSS selectors which you have to use based on what element you have to hide. You will find more information about the CSS selectors on the following pages.

http://www.w3schools.com/cssref/css_selectors.asp
http://www.w3.org/TR/CSS21/selector.html
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

Use CSS Display Property to Hide the Element

After finding the CSS selector you can hide the element by using the display property of CSS as following.

#hide-me {
    display: none;
}

Add the Developed Code in the Site

You can use the developed CSS code in your site as described in our following tutorial.

http://freewptp.com/tutorials/how-to-use-custom-css-in-wordpress-site/

After using the code the final output will be as displayed in the following screenshot.

Screenshot (1)

CSS Specificity

Sometime even if you use correct CSS selector though you don’t get the desired output because of CSS specificity. To resolve this situation you have to use higher CSS specificity. You will find more information about it on the following pages.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://css-tricks.com/specifics-on-css-specificity/
http://specificity.keegan.st/

The example of code with more CSS specificity is as following.

#content #hide-me {
    display: none;
}

To resolve the CSS specificity many developers use !important rule as following because it’s easier to use. A property that has the !important rulee will always be applied no matter where that rule appears in the CSS document so the following code will always work except when another !important rule is applied inline to the property.

#hide-me {
    display: none !important;
}

Using !important rule has its own disadvantages so it’s recommended to avoid using it unless you don’t have any other way to do it.

Browser Cache

Sometime due to browser cache your custom added CSS code doesn’t get loaded in the page therefore you don’t see the desired output. To resolve this situation after using the custom CSS code in your site please clear your browser cache as described on the following pages.

http://www.wikihow.com/Clear-Your-Browser’s-Cache
http://www.refreshyourcache.com/en/home/

In the next tutorial we will learn how to hide any element using JavaScript/jQuery.

4 Comments


  1. Hi, I believe your site could possibly be having internet
    browser compatibility problems. When I look at your blog in Safari,
    it looks fine but when opening in Internet Explorer, it’s got some overlapping issues.
    I merely wanted to give you a quick heads up!
    Other than that, fantastic website!

    Reply

    1. The website works on the Internet Explorer browser versions grater than 8 as currently it has made compatible with latest browser versions.

      The Internet Explorer browser version 8 and older than it have lower market share so currently it’s not made compatible with it but in the future if i get more visitors from these browsers then i will do consider making it compatible with these browsers.

      Thanks for posting here and visiting the site :)

      Reply

  2. Hi there to every one, the contents present at this web page are in fact amazing for people knowledge,
    well, keep up the good work fellows.

    Reply

    1. Thanks for motivating me to keep the good work :)

      Reply

Leave a Reply

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