There are two ways to compose a great blog in WordPress: the amateur way and the professional way. Amateurs copy and paste their blogs directly from Microsoft Word, warts and all, then click Publish and forget about it.
Don’t be that person — be a professional! Here are some terrific basic HTML tricks as they apply to WordPress. These tips will allow you to fine-tune your blog presentation. Ultimately, you want fans, customers and prospective customers to see you’ve put some thought into the design as well as the content.
Before You Begin HTML Coding
First, it’s still a good idea to compose the entire blog, pictures and all, outside of WordPress or any other web environment. That’s because a loss of connection or an errant Back button could cause you to lose your work. Although WordPress is good about autosaving, if you lose Internet before it has a chance, it can’t save. Composing your blog’s content locally is wise, because you’re saving it offline and aren’t dependent on a connection to store the document. I particularly like Notepad++, because it keeps track of tags in HTML, among many other useful features.
Next, log in to your blog’s WordPress account, add a new post, then click the Text tab in the upper right. You’re not going to use the Visual Editor at all. Paste the contents of your blog here.
Use Text rather than the Visual Editor.
Now, you’re going to make the content look nicer, then add pictures.
Header Tags
You know those headlines that you use to break up sections of content? Surround these headers with the <h3></h3> tag. If you have subheads, use <h4></h4>. Also consider using your blog’s SEO keyword in one or more headers, as this is beneficial for optimization and ranking.
Lists
You should code ordered lists, which start at 1. and continue from there, and unordered lists, which are represented by bullet points. To do this, begin a list with <ol> or <ul> depending on whether the list is ordered or unordered. Then, each list item should be surrounded by a <li></li> tag. After you’re done with the list, close it with </ol> or </ul>. When you view the draft, you’ll see the numbers or bullet points, right where they should be.
Text style
Anything you want to emphasize in text, depending on your client’s style guide, should be surrounded by <b></b> or <i></i>, depending on whether you want to boldface or italicize the text. You can also underline with <u></u>.
There are many other tags usable in WordPress to pretty up content, but header tags, lists and text style will get you 90% of the way there.
Images
Now, images are a bit trickier. If you’d like to get a nice, big image that spans the width of the text without any unnecessary text flowing, indents or extra code, you really should do it yourself instead of using WordPress’s built-in tools.
Upload the image
First, upload the image directly to WordPress by right-clicking Media and opening that into a new tab. Then, click Add New. Click Select Files and find your image, then click Open.
Open Media in a new tab, then click Add New.
Don’t worry about your image fitting inside the blog dimensions. You’ll be showing it it in a smaller size later, and users will be able to click on it to see the full-size version. This is especially useful for screenshots.
Note the Image Data
Once the image is uploaded, click Edit.
Upload the image, then click Edit.
See where it says File URL? Copy and paste that bit into Notepad — you’ll need that later. Also, write down the width and height of the image.
Note the image filename and the width and height.
Next, go back to the tab that has your WordPress blog.
Some Good HTML Image Code
Use this code for your image. (You may want to save it for later. I have an Excel spreadsheet that generates this code with everything pre-filled, which saves a lot of time.)
<center><a href=”URL”> <img src=”URL” alt=”” title=”” width=”X” height=”Y”/></a>
<span style=”font-size: x-small;”> </span></center>
Fill in URL in both spots with the File URL you saved earlier. Put the image width where it says X and the height where it says Y.
See that empty space between span tags? Put your image caption here, and make sure to mention your SEO keyword here. It’ll show up in small text just below your image. Cool, huh?
Put that same image caption in the quotes after title. In the quotes after alt, put the title of your blog post as the alt text. This seems counterintuitive, but SEO experts like you to use your blog title as the alt text for images — it’s a neat trick that gains you favor with Google search results.
What about the Featured Image?
Note that some blogs have a Featured Image feature that will automatically put this image at the top of your blog and as a thumbnail in your blog index. This is good, except the image might not be resized appropriately or might appear cropped into a tiny square. Sometimes, you’ll want to use the Featured Image; sometimes, you’ll want to use the code above. Experiment and see what works for you. (Also, remember that the featured image is only one image; the best blog posts have two or more images.)
Save & Preview
OK. Now that you have all your text, all your HTML tags and your image in the right place with the right code, save a draft and click Preview. (I’m assuming you filled in the title, tags, keywords and everything else, as you did before when you used the Visual Editor.)
If all goes well, you’ll see a beautiful blog like this one. It’s possible you missed a tag — those greater-than and less-than symbols are easy to forget — in which case you’ll have to debug your HTML and find the missing tag.
You’re a Programmer?!
Once it all looks pretty, schedule it or publish it and show the world. Congrats, you’re an HTML programmer — and you have more mastery over your WordPress posts than anyone who relies on Visual Editor. What you see is what you get — if you program it that way.
For further resources on HTML, take a look at the excellent tutorials on W3Schools.
