how to hide an element on a WordPress website?

[Helposoft Staff]

To hide an element on a WordPress website using CSS or JavaScript, you can follow these steps:

Method 1: Using CSS​

1. Identify the Element: First, you need to find the element you want to hide. You can use your browser's developer tools (usually accessed by right-clicking the element and selecting "Inspect") to get its CSS class or ID.
2. Add Custom CSS: You can add custom CSS in your WordPress dashboard.
   • Go to Appearance > Customize.
   • Click on Additional CSS.
   • Add the following code, replacing .your-class or #your-id with the actual class or ID of the element you want to hide:
     
     

   • .your-class {
     display: none;
     }
     
     /* OR if you are using an ID */
     #your-id {
     display: none;
     }

3. Publish Changes: Click Publish to save your changes.

Method 2: Using JavaScript​

If you prefer to use JavaScript (for example, if you want to hide the element conditionally), you can do so by adding a small script. Here’s how:

1. Identify the Element: As before, identify the element using your browser’s developer tools.
2. Add Custom JavaScript: You can add custom JavaScript in your theme or a custom plugin.
   • Go to Appearance > Theme Editor or use a plugin like Custom CSS & JS.
   • Add the following code, replacing .your-class or #your-id with the appropriate selector:
     

     [*]document.addEventListener("DOMContentLoaded", function() {var element = document.querySelector('.your-class'); // or '#your-id'
     if (element) {
     element.style.display = 'none';
     }
     });

3. Save Changes: Save your changes.

Example​

If you want to hide an element with the class my-element, your CSS would be:

.my-element {
 display: none;
}

And your JavaScript would be:

document.addEventListener("DOMContentLoaded", function() {
var element = document.querySelector('.my-element');
if (element) {
element.style.display = 'none';
}
});

Notes​

• Caching: If you don’t see the changes immediately, try clearing your browser cache or any caching plugins you might be using on your WordPress site.
• Theme Updates: If you add custom code directly to a theme file, remember that changes may be lost after an update. It’s better to use a child theme or a custom plugin for permanent changes.