If you are dealing with empty tags in WordPress you have come to the right place. I have a very simple solution for you to carry out. Thanks to CSS3 we have a selector that will look for anything that is empty in your website and put a "display:none" commend to those empty tags.
Dealing With Empty Tags In WordPress that are Paragraphs
WordPress by default creates a paragraph tag on everything. So as soon as you start writing your post or page WordPress will dynamically add<p>to everything with a closing
</p>tag. However if you have ever been in your editor in your dashboard and writing you will sometimes hit the return or enter button a couple of times to give it some space. This is not the way to handle new paragraphs or spacing in WordPress. The real problem comes in when you try to go to text view and see the extra "p" tags but you cannot see them because WordPress hides the "p" tags.
Empty "p" Tags
You could have several empty "p" tags that you are not aware of. If you have blogged for quite sometime you more than likely have thousands of empty p tags that you are not aware of. I know that I have had several empty "p" tags in our WordPress here at a1websitepro but we were able to remedy that problem with the solution below.How to deal with Empty "p" tags In WordPress
- Install a custom CSS plugin OR,
- Edit your child theme style sheet.
- Go to Appearance
- Themes
- Edit Stylesheet
- Then you want to put this code in the bottom of the style sheet.
p:empty {
display: none;
}
Dealing With All Empty Tags in WordPress
So this method does good when you want to take care of all the empty paragraph tags but what about other empty tags? There are image tags, heading tags and more. There is a solution for this as well in CSS. If you want to make sure that there are NO empty tags in your WordPress CMS us the code below. This will get rid of all empty tags on your website. You can use this code in any website or any CMS to deal with the empty tags.Drawback to using this code for all Empty Tags
One of the drawbacks for using this code for all empty tags is the fact that form items with empty elements will not be shown. So if you have a contact form with an input type that has no value this code will remove it altogether.*:empty {
display: none;
}