How to hide parts of your WordPress site with CSS (Beginner-Friendly Guide)

In WordPress, you may come across sections on your site that you’d prefer not to display — such as unnecessary forms, theme banners, comment boxes, and so on. When the theme or plugin doesn’t offer a setting to disable these sections, a very practical solution is to hide them using CSS.

This method is quick, reversible, and doesn’t require advanced coding skills. In this beginner-friendly guide, you’ll learn:

1. How to identify the element you want to hide using Chrome’s developer tools.
2. How to write the correct CSS code.
3. Where to place that CSS in your WordPress site.

Step 1: Identify the Element’s Class or ID

First, you need to find the name of the element you want to hide. We’ll use Google Chrome’s developer tools for this:

1. Open your site in Chrome.
2. Right-click on the element you want to hide and select “Inspect”.
3. A split view will appear showing the HTML code. As you move your cursor over elements in the inspector, you’ll see corresponding parts of the page highlight.
4. Identify whether the element has an ID (id="something") or a class (class="something").

Which is better: ID or class?

• ID (#something): It’s unique on the page. This is the most precise and reliable method because the ID won’t be repeated elsewhere.
• Class (.something): It can be shared by multiple elements. Use this carefully — you might end up hiding more content than intended.

<div id="promo-banner" class="ad highlight">

In this case, using #promo-banneris safer than .ad, since the ID is unique.

Step 2: Write the CSS code

Now that you know the selector (ID or class), you can write the CSS rule to hide the element.

#promo-banner {
    display: none;
}

Or using a class:

.ad {
    display: none;
}

If the style isn’t applying correctly, you can force it with !important:

.ad {
    display: none !important;
}

Alternative:

There’s another CSS property called visibility: hidden, but it’s not recommended for this purpose. While it hides the content visually, it still occupies space on the page.

#promo-banner {
    visibility: hidden;
}

This can leave gaps or affect the site layout. That’s why display: noneis usually the better option.

Step 3: Where to place the CSS?

You have several options for adding this CSS to your WordPress site, depending on your experience level. Here are the most common ones:

Option A: use the WordPress customizer

Perfect if you want a quick solution without installing anything extra.

1. Go to Appearance > Customize.
2. Open the Additional CSS section.
3. Paste your code.
4. Click Publish.

Option B: use a Snippet plugin

If you prefer to keep your customizations organized without editing theme files, you can use a plugin like WPCode.

1. Install WPCode – Insert Headers and Footers + Custom Code Snippets.
2. In the WordPress dashboard, go to Code Snippets > Add New.
3. Choose the CSS code type.
4. Paste your code and activate the snippet.

Option C: add it to the style.cssfile of your child theme

If you’re using a child theme, you can add the CSS directly to its style.cssfile.

1. Go to Appearance > Theme File Editor.
2. Select the child theme’s style.css.
3. Paste your CSS code at the bottom and save.

Option D: use a mu-plugin with wp_head.

If you want a more technical and reusable solution, you can create a mu-plugin (must-use plugin) to insert your CSS via PHP using the wp_headhook.

1. Create the folder wp-content/mu-plugins/ if it doesn’t exist.
2. Inside it, create a file called custom-css.php.
3. Paste the following content:

   • <?php
     add_action( 'wp_head', function () {
         echo '<style>
             #promo-banner {
                 display: none !important;
             }
         </style>';
     } );
     

      

4. Save the file. WordPress will load it automatically.

Hiding sections with CSS is a great way to gain visual control over your site without diving deep into code. All you need is:

• To identify the element’s ID or class.
• Write a simple display: none.
• Add it in the right place inside WordPress.

This simple trick can help you solve many common layout issues — no developer required.