Line Breaks in Wordpress Text Mode

Wordpress is so cool. Easy to set up, easy to use, easy to teach. Everybody uses it so there’s a solution for everything. Or, if there’s no solution, there’s always a hack for that. We work with quite a few Wordpress installations at my job and one of my duties is to maintain them all. One of the things about Wordpress is that as your Wordpress powered site evolves it somehow manages to grow limbs, get a little chubby, and behave in unexpected ways. Last Friday I got an email about fixing the layout of a list on one of our pages that had been behaving just as we wanted it to for almost two years now. The frustration that ensued is why Wordpress is as much of a pain as it is a painkiller. This is the story of how developing for Wordpress requires a Wordpress mindset, not a PHP mindset.

So we have these sets of unordered lists that hold a variable number of unordered lists and headings to label them. They look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="list-holder">
  <ul>
      <li>
          <a href="/somewheres"><img src="image.png"></a>
          <h4><a href="/somewheres">Company Name Here</a></h4>
      </li>
      <li>
          <a href="/somewhere-else"><img src="image2.png"></a>
          <h4><a href="/somewhere-else">Company Name Here</a></h4>
      </li>
      <!-- ...and so on... -->
  </ul>
  <div class="clear"></div>
</div>

Just a note: I’m not a fan of using empty divs to clear content but this stuff was coded before I got here and there are more important things to do. Just sayin’.

Okay, so far it’s pretty simple right? Well, what we’ve done for some of our pages is put our markup directly in the Wordpress editor in Text mode. Not an uncommon but commonly tricky, sure. We knew this though. So we have a wrapper div and within it there’s an unordered list with a variable number of logos with heading text beneath them. All images are the same size and perfectly sized so that when the list items reach the end of their wrapper they just start a new line and should all be left aligned. Here’s what the styling looks like (not complete, just an idea):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.list-holder {
  display: block;
  width: 100%; /* 100% of its parent container */
  margin: auto;
}

.list-holder ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.list-holder ul li {
  display: inline;
  margin-right: 0.5em;
}

So what we’re trying to achieve (and what was working for the past two years) is something that looks like this.

What it should look like

Instead what started happening is this weird float: right; thing so when the list had to wrap we got this:

Wrong alignment of list items

Now this was only happening in Internet Explorer (surprise, surprise) 9 and earlier. Of course I thought it was an IE issue (because most design inconsistencies can usually be traced to someone making the mistake of using Internet Explorer). Well, I was wrong. Turns out some versions of Firefox were also showing this too. I knew this code inside and out. I looked over the markup and the styling and saw absolutely nothing that could be wrong. I tried everything in the code to change how it was displayed but my efforts were in vain. So I let it go for a weekend and when I got in today, Monday, it hit me. It was the Wordpress text editor.

The Wordpress text editor is a funny thing. It has two modes; Visual and Text. In Visual mode you’re in a WYSIWYG editor like MS Word but clunkier (if that’s even possible). In text mode you’re in a plain text editor and only the text you type will show up on the page. Or does it? This is where the trick happens. The Wordpress Text editor can handle markup but was never specifically built for it. Because the editor, in both modes, are made for non-technical users the text functionality still tries to save you from yourself even when you know what you’re trying to do.

When you enter markup like this into the editor…

1
2
3
4
5
6
7
8
9
<ul>
  <li><a href="/something"><img src="image.png" /></a>
<h4><a href="/something">Title
here</a></h4>
  </li>

  <li><a href="/xxx"><img src="image2.png" /></a>
<h4><a href="/xxx">Blah blah</a></h4></li>
</ul>

…you don’t get the unordered list you were expecting. Instead you get something like…

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
  <li>
      <a href="/something"><img src="image.png" /></a>
      <p></p>
      <h4><a href="/something">Title<br>here</a></h4>
  </li>
  <p></p>
  <li>
      <a href="/xxx"><img src="image2.png" /></a>
      <p></p>
      <h4><a href="/xxx">Blah blah</a></h4>
  </li>
</ul>

How did all those extra <p>’s get in there? Well, Text mode, like I mentioned, tries to save you from yourself. If you add a line break just for markup readability Wordpress will just go ahead and put an actual line break in the code or an empty paragraph tag. See, because Text mode is for normal users, it assumes that you always want your content inside of some markup for proper semantics and so that your theme’s stylesheet has a typography hook. It guesses as to what your intentions were.

Text mode doesn’t consistently alter your markup in my experience so far so the solution in my case was to remove all extra line breaks where the addition of another tag would alter the design and then inspected the elements once the content was published. In the future, if your Wordpress posts or pages are displaying unexpectedly and you don’t know what’s going on, inspect some elements. You probably have some extras you never meant to add in there. It’s a process of trial and error but it’s the only way I know of short of replacing it via some plugin to ensure markup posted in Text mode shows up correctly.

Web design, Web development

« Symlinks on OS X - Just a reminder Digital Ocean and Linode: One Year Later »

Comments