#wordpress css

But first of all you must know that this method is not the recommended option. CSS works fine, but it’s not the best solution in anyway.

With CSS you're hiding something, but it’s still there and keep loading even if it’s not seen. And that adds a little and precious time to page load.

So it’s better to eliminate codes that generate that element in the first way. So it will never have to load. But that’s not so easy, and much more difficult if your PHP programming skills are less than average.

So you can hide almost anything using CSS. It’s a fast and easy solution and can save you many hours of hard work getting into codes.

Learn here how to hide almost anything using CSS

Inspect element

The first thing you must do is to grab the CSS selector. We use a developer tool included in every browser.

Open your web page were the element you want to hide is.

Click the right button of your mouse.

Select Inspect Element option.

This is the element inspector were you can see all the html elements of the page shown in the active tab of browser, with its classes and id’s.

Notice when you scroll down the lines of codes how elements are highlighted on web page.

Identify the element

Now you have to identify the element you want to hide. Just move your mouse through the inspector box until you find it. You’ll got it when the element is highlighted.

Sometimes you have to go deep inside into the nested elements<div>, <section> or other to get exactly the CSS selector of the element you want.

Copy CSS selector

Now that you’ve found the element you want to hide, just copy the CSS selector.

Place your mouse cursor over the code of the element you’ve searched before.

Press right button, select copy option and then CSS selector. now you have the CSS selector path.

Edit CSS code

Be sure to hold that CSS copied in the browser, maybe you want to paste it on a notepad before continuing.

Now open your WordPress Dashboard and go to the CSS custom editor box.

If your theme doesn’t support custom CSS you can edit style.CSS file, but that's not good idea since all your modifications to this file would be lost when the theme is updated.

But almost all themes include custom CSS box somewhere. If not, you will have to create a child theme in order to make the customization the right way.

The CSS selector you’ve copied before would look something like this:

#wpbf-inner-footer-left

Now paste it into the custom CSS editor box and following type this:

{display: none:}

So the full thing would be:

#wpbf-inner-footer-left {display: none;}

If you want to follow programming good practices write it this way adding a comment at the top:

/* Hide left footer element */

#wpbf-inner-footer-left {

display: none;

}

Save and exit. Now go to web page. ¿Can you see it now?