WordPress mce_bogus in empty div

From the website developers

While developing another website we spent a huge amount of hours recently on coding to hide and show empty divs in WordPress when used as a CMS system with multi editable areas. We thought we would post the code as searching for hours on Google didn’t reveal the answer, only alot of people asking the question!

Lets start with hiding empty divs, the easy bit. Safari, Firefox etc all hide empty divs by default, however ie7 doesn’t, so using the code below ensures they are hidden in ie7 too.
In the footer.php file of WordPress paste the code below

<script>
jQuery(“#your-div-name:empty”).remove();
jQuery(“#your-second-div-name:empty”).remove();
</script>

This removes specified divs when empty, you can also apply this to ALL divs by using just ‘div’ in place of the div id, however if you have any divs with no text, only backgrounds specified in the css code, they will disappear so we advise the above code.

Ok now for the hard bit…if you use TinyMCE editor, you will discover that if you enter something into an area on the page (such as a multiedit region or custom field) when you later delete this, WordPress doesn’t completely empty the div. It looks empty, but it actually still contains the code <p><br mce_bogus=”1″></p>

This causes the div to continue showing on the page, even though it has no visible content, this can leave gaps in the page. We finally found a solution after many many hours.

<script>
if(jQuery(“#your-div-name”).text() == “”) {jQuery(“#your-div-name:not(:has(img))”).remove();}
if(jQuery(“#your-second-div-name”).text() == “”) {jQuery(“#your-second-div-name:not(:has(img))”).remove();}
</script>

This solution means check the div, if there is no text and the div doesn’t have any images in it, remove it. We had previously¬†¬†been trying to use the code without :not(:has(img)) but when we placed an image in the div, it wouldn’t show because there was no text.

This solution works very well with the excellent with the WordPress multi edit and custom fields plugins as if areas contain no content, they will be completely removed from the page, even if they contain the strange code TinyMCE leaves behind after deleting previous content.

We hope this helps others out there as the WordPress community resources and many other websites have definately helped us in the past.

4 Responses to WordPress mce_bogus in empty div

  1. Shahid Mirza says:

    where the code will be place, in the closing head or near the empty div?

    Thanks,

  2. Shahid Mirza says:

    its great code you guys have done wonderful job, excellent GOD BLESS YOU

  3. calls4u says:

    Thank you! And if you guys develop any code which would be useful for us please post here!

  4. calls4u says:

    It needs to be placed in footer.php

Leave a Reply

Your email address will not be published. Required fields are marked *