WordPress has made life easier for all aspiring bloggers, business people, and anyone, for that matter, who are looking to communicate a message online, or gain & spread awareness. However, sometimes, there might be things that may bother you; an itch that you really want to get rid of.
For instance, almost everyone knows what WordPress categories are. As an example, https://feedthecuriosity.com/seo/ is a category on my site. What bothered me a ton about it is the presence of the word “category” before my topic name. Essentially, all my topic URLs are by definition, a category. I have fixed it now, but see the screenshot below for reference.
Here’s another example. For my homepage, my title tag happens to be –> “Feed The Curiosity | A Knowledge Hungry Initiative”. The second part you see after the pipe is called the “tagline” in WordPress. It’s part of WordPress’ Site Identity. (screenshot below for reference).
While that’s cool and all, what ends up happening is that the tagline gets displayed on your header. (I’ve obviously hidden it now because I felt it didn’t look good), but see the screenshot that follows right below for reference.
How to Hide Things in WordPress You Don’t Want?
Typically, there are two methods to hide WordPress visual elements from the front-end. Method 1 is to make actual changes to your .php files, or global settings, or core files. Usually, that’s fine, but if you make mistakes, you can end up breaking your site.
Method 2 is relatively way easier, and faster! All you need to do is use the “Additional CSS” feature that comes with WordPress. To leverage this feature, follow the steps below.
Step 1: Find Out the CSS “Class” of the Element You Want to Hide
This step is sort of a prerequisite to using the Additional CSS feature. The quickest way, in my opinion, to find out the class of the element is to use your Browser’s inspect element feature. For visuals, I’ll be using chrome.
Once you find out the class name, take note of it and proceed to step 2.
Step 2: Use “Additional CSS” Feature
In CSS, class names are referenced with a period(.) at the beginning. As you can see from the screenshot in step 1, the class name is called “color-accent”.
Now when I try to hide this element, I have to prefix it with a period(.). See the image below.
Once you properly invoke the class name, you have to apply the display:none command. That will disable/exclude/hide the element from the front-end/a.k.a will not be visible to your site users.
You May Also Want to Check Out:
PRO-TIP
If you’re not sure what you’re doing, you can first play around (without making actual changes) either directly in WordPress or better yet, using Chrome’s inspect element feature.
For instance, I played around with the element.style first to see if applying display none indeed removes the code or not. See the image that follows.
Take note: Because my changes are live, it shows up separately for its own class name. But imagine if I am testing this out, I would apply the display none command at the element.style. Making changes there should show you the live changes. And once you confirm it’s working correctly, you can now finally apply that in the “Additional CSS.”
Conclusion
As said, there are two methods. The first one involves making tweaks to the core files, which is not recommended. Another drawback for it is you can’t test it unless you make your changes live.
With Method 2, that is, using “Additional CSS,” not only you can safely make tweaks and hide WordPress visual elements, without worrying about breaking your site, but you can also test things before pushing the changes live.