Control Your WordPress Page Formatting with Basic HTML

With WordPress’ visual editor, it’s pretty simple to design your page or post the way you want. However, sometimes there are just times that the editor just won’t do what you want. WordPress follows most of the regular HTML rules, but there are a few things that WordPress does differently.  Here are some tips.

First, make sure you are using the Kitchen Sink icon to reveal the second row of editing icons if you are using the Visual Editor.

For these other tips, you will need to be using the Text Editor.

When you add HTML tags, remember that they will always be inside less than/greater than brackets and for whatever tag we use at the beginning (called an opening tag), we must have the same tag at the end with a backslash to indicate the end of that formatting (a closing tag).  So our tags will look like this:

<p>Paragraph goes here</p>
<strong>Bold text goes here</strong>
<u>Underlined text goes here</u>

You get the idea? So here are some specific problems I’ve seen people run into:

1. Line spacing If you ever feel like there is a space between lines of text that you just can’t get rid of, simply switch over to the text editor and remove it that way.

2. Lists If you want to great a list with numbers or bullets, but you just can’t get it to work the way you want with the visual editor, switch over to the text editor. Then wrap your text with either<ul></ul> for a bullet list (unordered) or <ol></ol> for a numbered list (ordered). Then wrap each list item with <li></li> (used for both ordered and unordered lists). Your code should look like this:

<ul>
<li>Your item here</li>
<li>Next item here</li>
<li>Another item here</li>
</ul>

This will come out looking like this:

• Your item here
• Next item here
• Another item here

If you want to have two levels in your list, just add another set of <ul> or <ol> tags inside your <li> tags, like this:

<ul>
<li>Your item here</li>
<li>Next item here</li>
<li>Another item here</li>
<ol>
<li>Second level starts here</li>
<li>Next item here</li>
<li>Another item here</li>
</ol>
</ul>

Remember to close both list tags!  Then your output will look like this:

• Your item here
• Next item here
• Another item here
  1. Second level starts here
  2. Next item here
  3. Another item here

3. Spaces One thing that is a little different and doesn’t use the tags like the others are when you need to add spaces.  This is one of the areas in which WordPress acts a little differently.  If you have spaced down, but WordPress is not showing those spaces the way you want, go into your text editor and add this code on a new line:

&nbsp;

That should add the extra space you want.

4. Alignment  Sometimes after you’ve left aligned an image, the text or images after it wants to wrap and won’t move down to the next line.  When you need to fix that, go into the text editor and add this code after the image but before the rest of the text.

<div style=”clear:both;”></div>

No need to put anything between these tags.

5. Columns This last thing is a little more complicated, but if you want to have your text in columns, you can use this code:

<div style=”width: 45%; float:left; padding-right:2%;>Paragraph text here. </div>
<div style=”width: 45%; float:left; paddingright: 2%;>Second paragraph text here. </div>

Use this around each section of text and it will come out looking like this:

 
You might have to use the alignment trick above after these columns if the next text is getting pulled into the columns.

Also, once you start using this HTML on your Text Editor, you cannot go back to the Visual Editor. WordPress will wipe out all the HTML coding you’ve done, so I prefer to stay in the Text Editor at all times so I have more control of formatting.

Keep in mind that if you check your text and you see a less than or greater than bracket somewhere, that means you’ve forgotten a bracket.  Go back and check it. And if your formatting goes on longer than you wanted it to, you’ve forgotten your closing tag somewhere.  Just go back and add it in.

I hope this will make you interested in learning more HTML so you can even better control your WordPress pages and posts.  This is a great place to start to learn more: http://www.w3schools.com/html/html_examples.asp

Are there any other kind of formatting problems you’ve run into with the WordPress visual editor?  Let me know!