While it’s generally the aim of my blog to appeal to the everyday user, I recently came across an issue with a client’s website, for which I’m the site administrator.  After some troubleshooting, I arrived at a solution.  One that I’m going to share here, in hopes that it will help out someone else who’s blogging with WordPress.

Let’s get right down to it, shall we?

THE ISSUE:
Paragraphs entered into WordPress’ TinyMCE editor do not have proper spacing when viewed on the page.  In fact, they have no spacing.  When you view the source of your output page, you see <div></div> for paragraph line spaces, where you would normally expect to see <p>/<p>.  How very strange!

THE CAUSE:
In the WordPress TinyMCE editor, the format of the text has been changed from its default, Paragraph, to Format (which, I suppose actually denotes a complete lack of formatting!).  This causes the normal <p></p> paragraph tags to be replaced by <div></div> tags.

The Cause
Paragraph Spacing Problems in WordPress: The Cause

How this happens, I don’t know.  In my case, I got a call from my client complaining of this problem.  So it’s possible that the made the change, manually.  What’s important is that the solution is easy as pie.

THE SOLUTION:
In the WordPress TinyMCE editor, select all of the affected text, and change the “Format” menu to say Paragraph and/or Header 2, as needed.  Anything other than the default “Format”, really.

The Solution
Paragraph Spacing Problems, with WordPress’ TinyMCE editor: A solution

 

Now my paragraphs are beautifully spaced again. :)

At first, I couldn’t easily find a solution to this problem, using Google, and reading the forums at wordpress.org.  I think that’s because the solution, in my case, was much simpler than what most people were suggesting (You know that old adage about hoof prints and zebras, right?).
When I was researching this problem, I read a lot from WordPress folk who were scratching their heads, and offering up the default advice, “Disable all plug-ins and see if that helps.  While a plugin conflict is a good guess… in my case, the issue was much simpler.  Deceptively simpler.  So simple, the cause was right under my nose the whole time.

This problem occurred for me in WordPress version 3.7.1.  But, I imagine it could happen in just any every version.
I’m also a big fan of Andrew Ozz’s TinyMCE Advanced plugin, and use it on most of my sites (especially because it stops WordPress from removing double paragraph spaces when I press Enter twice).  For a moment, I suspected it might be a problem with this plugin.  But of course, that wasn’t the case.

Hopefully this little tip helps someone else out.  Now my client up in Markham is happy again, and Wordpres’s oft-attacked good name remains relatively unbesmirched.
Leave a comment if this saved you a whack of time and hair-pulling (because Lord knows enough of that happens in web development, already!).

WordPress issue: <div></div> instead of <p></p> for line spaces


7 thoughts on “WordPress issue: <div></div> instead of <p></p> for line spaces

  • March 7, 2017 at 3:51 pm
    Permalink

    This is perfect. Unfortunately the theme I am using wont let me just switch format to paragraph, its already paragraph so I have to insert the tags manually, but its all good for now :)

    Reply
  • January 1, 2017 at 11:50 pm
    Permalink

    Had the same issue, this article fixed it. Thanks and happy new year.

    Reply
  • October 19, 2016 at 6:56 am
    Permalink

    Ooooh, thanks for that!
    Just like David I had to re-select paragraph for every previously messed up paragraph, but it worked.

    Reply
  • April 6, 2016 at 6:27 am
    Permalink

    Thank you! This was driving me crazy!

    Reply
  • December 23, 2014 at 12:53 am
    Permalink

    Thanks for the useful information. Need to add your blog to bookmarks

    Reply
  • October 20, 2014 at 1:28 am
    Permalink

    This did help me! However, my issue was the paragraphs actually already showing as “Paragraph” and everything was mega tight up against everything else. To solve, I just highlighted those troubled paragraphs and just selected “Paragraph” again (even though it was already selected) and that seemed to do the trick. Very quirky. Thanks for posting about this though, it definitely did help in resolving the issue.

    Reply
    • October 20, 2014 at 10:26 am
      Permalink

      Thanks for the feedback, David!

      Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: