Using The HTML Text Tab In WordPress

It is possible to run a very successful WordPress blog and never leave the visual tab, I work in the visual tab 95% of the time. It’s that 5% however, that is perhaps the most crucial for getting posts to look and behave exactly as I want them to.

In this post, I will hopefully help you get over your fear of the text tab in WordPress and feel confident enough to at least scan and tweak HTML. This is not a lesson in HTML, you should use Codecademy for that, but instead it is a motivational kick in the rear with some technical tips sprinkled in. You can do it, and here’s how.

HTML Tag Cheat Sheet At End Of Post

Here is an example of a simple post followed by what it looks like in HTML:

This is an important heading title

This is some paragraph text about the topic my important heading alluded to. I’m going to follow up this text with an image.

This text would look nice bold and this text should be italic and red. I don’t want this text. This text should link to something awesome!

“With great power comes great electricity bills.” – The Internet

hhhh
—
And here is what that amazing post looks like in HTML:

<h2>This is an important heading title</h2>

This is some text about the topic my important heading alluded to. I’m going to follow up this text with an image.
<img class=”aligncenter size-full wp-image-4145″ alt=”airplane-spoon-baby” src=”https://uhurunetwork.com/wp-content/uploads/2013/07/airplane-spoon-baby.jpeg” width=”367″ height=”408″ />

<strong>This text would look nice bold</strong> and <span style=”color: #ff0000;”><em>this text should be italic and red</em></span>. <del>I don’t want this text</del>. <a href=”http://www.themostamazingwebsiteontheinternet.com/”>This text should link to something awesome!</a>

<blockquote>”With great power comes great electricity bills.” – The Internet</blockquote>

—
By looking at the HTML you can see that it’s not complicated, it’s just a lot of text. HTML elements such as <h2> surround text that we want to be formatted (styled) a certain way. To close the tag we include a /, like this </h2>. This tells the browser what elements are and it then looks to your site’s CSS to determine how to style it. CSS (Cascading Style Sheet) is outside the scope of this post but know that CSS can exist in it’s own file or inline with HTML. Notice style=”color: #ff0000;” in our <span> tag? That’s CSS.

What you should know about the HTML text tab in WordPress is that you can modify it and the changes will show in the visual editor. IMPORTANT: Visual editor will not look exactly like the true styled text available to your visitor. So we could change the color from #ff0000 (red) to #0011ff (blue). Here is a simple hexadecimal color picker if you’re interested.

The 5%

In the beginning of this post I mentioned I only use the HTML text tab 5% of the time. What am I doing in that time? I’m correcting code.

Sometimes when you copy and paste text with pre-existing formatting it can appear a bit wonky. What I do is look at the HTML and find where it is messing up. Does it have an unnecessary tag? Does it have conflicting styles declared? Sometimes <span></span> tags can appear with styling I did not want, so I delete them.

Here is an example:

1. item 1
2. item 2
3. item 3 
4. item 4

I don’t want these items to be small and yellow. Why are they yellow? Let’s look at the HTML.

<ol>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 1</span></li>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 2</span></li>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 3 </span></li>
<li><span style=”line-height: 1.714285714; font-size: 1rem;”>item 4</span></li>
</ol>

Ok, I see <ol> for ordered list and I see <li> for list item. Aha! Span tags with inline style! It should look like this:

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3 </li>
<li>item 4</li>
</ol>

1. item 1
2. item 2
3. item 3
4. item 4

Perfect. This post was in no way an exhaustive lesson but hopefully you’re now at least curious about what the HTML text tab can offer. Try it out! Create a demo post and format it using all of the options at the top of your WordPress visual editor, then take a look at the HTML and try to read it to see what it’s doing.

If you’re finding that you’re having to constantly changing styles to make the text look better with your site you may want to think about revamping your site and modifying your style.css file for your theme.

HTML Tag Cheat List (Most Likely To Be Used In Your Posts)
<h?> … </h?>    Heading (?= 1 for largest to 6 for smallest, eg h1)
<p> … </p>    Paragraph of Text
<i> … </i>    Italic Text
<u> … </u>    Underline Text
<strike> … </strike>    Strikeout
^…    Superscript – Smaller text placed below normal text
_…    Subscript – Smaller text placed below normal text
<pre> … </pre>    Pre-formatted Text
<blockquote> … </blockquote>    Text Block Quote
<strong> … </strong>    Strong – Shown as Bold
<em> … </em>    Emphasis – Shown as Italics in most browsers
<a href=”http://fresnosocialmedia.com”> … </a>    Link text to a url
<img src=”url” alt=”text”/>    Basic Image – Tag Attributes: src=”url” URL or filename of image alt=”text” Alternate Text
<ol> … </ol>    Ordered List
<ul> … </ul>    Un-ordered List
<li> … </li>    List Item (within ordered or unordered)