How to market yourself #7: How to write and design a WordPress page or post

Constantly updated quality content is the mainstay of any website or blog. I have already described how to set up a WordPress.org blog and what to write about when you have one. Here,s the “how to” for those new-ish to WordPress…

There are three things to remember when you are writing:

1. Make your text scannable! That means, by what ever means – using bold text, titles, italics, bullets, links, etc – break up otherwise dull looking text. Remember your visitors will typically spend a few seconds on your website so it is necessary to entrap them. These words and phrases that jump out may interest the reader. It also looks nicer.
2. SEO. Include your keywords in the title of your post or page, in the <h3> tags or subtitles or in bold. Keywords are descriptors of the page or the site. But you may want to emphasize the ones with which you want to be found by search engine. So I may want to put graphic designer in my headings more often than not as I mainly want to be found on Google for people searching for graphic designers. However, only include words that are relevant to the article.
3. Save. As soon as you start writing click the “Save Draft” button. And click this intermittently through the writing process. Also, click the “Preview” button (you can do this straight after even if it hasn’t finished saving the draft) from time to time and see how your post looks. This opens it in a different window of your browser (or tab if you are using them) and if you keep this window open it will update every time you hit “Preview”. Don,t worry, the unfinished post or page is invisible to your website,s visitors until you click the “Publish” button! WordPress does have an autosave function but I find this the best method.

Getting started: What is the difference between a WordPress page and a WordPress post?

Both WordPress pages and posts create webpages! However a WordPress page is for static content (typically the “About Us” or “Contact” page) and a WordPress post is for adding content to your blog, something that is dated and belongs to a certain category.

The process of writing a new post or page in WordPress 2.7 and above starts in the dashboard (the dashboard is the welcome screen which displays when you add “wp-admin” after your blog,s URL in the browser,s address bar). Look for where it says Post or Page in the left hand column. Under these headings, click “Add New” (you may need to click the small arrow when you hover the mouse over to the right of where it says Post or Page).

Adding the title of your post or page

OK, this may be pretty obvious. The box at the top of the “Add New Post” or “Add New Page” screen (just below where it says “Add New Post” or “Add New Page”) is for the title. Remember this title is very important for SEO terms so cram it full of keywords.

If you have your permalinks set to %postname% (as is highly recommended) the permalink will be displayed beneath the post title. WordPress is quite good at generating these pretty permalinks. However, if you,ve taken a while to write the title you may find that not all of the words are in the permalink. In this case you can type in all the words you want, separated by hyphens.

Writing – what all those buttons mean above your WordPress text editor?

Writing a WordPress post can be like writing in a word processing package. Well, nearly, but not quite…

There are two tabs above the text editor – Visual and HTML. If you are a beginner with HTML I would advise you to start to flick between the two. If you know about HTML you’ll probably stay on the HTML tab all the time.

The following bulleted list is my explanation of the buttons along the top of the Visual editor and their results in HTML.

• Bold: Fairly simple one to start with. It emboldens the text in Visual mode and wraps <strong> tags around it in HTML mode.
• Italic: You guessed it. This italicizes the text in Visual mode and wraps <em> tags around it in HTML mode.
• Strikethrough: This strikesthrough the text in Visual mode and wraps <del> tags around it in HTML mode, it usually means that the word was in the original version of the text but is to be discounted now. (No, I’ve never used it before.)
• Unordered list or bullet points: Click to add a bullet and then hit return for subsequent bullets. Hit return twice to end bullets. In HTML mode, click <li> when each individual bullet point is highlighted, then select all bullets plus <li> tags and click <ul>.
• Ordered list or numbered points: Much like above. Click to add number 1 and then hit return for the following numbers. Hit return twice to finish the numbered list. In HTML mode, click <li> when each individual numbered phrase is highlighted, then select all phrases plus <li> tags and click <ol>.
• Blockquote: This defines the selected text as a block quotation. It is indented and most themes will put in a colored background. It is a very good way of breaking up text and I must confess I don’t always use it for a quotation but also as a method of differentiating a block of text from the main article.
• Align left, center and right: Pretty obvious really. Adds style="text-align: left;", style="text-align: center;" or style="text-align: right;" into whatever element the cursor is blinking in.
• Insert link: This is very useful in both modes. Once the text you want to anchor the hyperlink is selected and this button is clicked a window will pop up with a handy (or not so handy) http:// already there. Put the whole link into this box (for example http://www.google.com/) and in the HTML mode you will see <a href="http://www.google.com/"> at the beginning of the anchor text and </a> at the end.
• Unlink: Select the colored underlined text in Visual mode and click this and it’ll get rid of the link.
• More: This breaks a post into “teaser” and content sections. Insert this tag after a few sentences of your post and on your blog’s home page you’ll see only those first few sentences followed by a hyperlink (more...), which when clicked displays the rest of the post’s content.
• Spellcheck: I tend to rely on Firefox’s spellchecker so I don’t know how good this one is.
• Fullscreen mode: Does what it says on the tin.
• Kitchensink: When clicked this will bring a whole second line of formatting options.

This is only a brief description of using the text editor in Visual mode. Remember to constantly flick between Visual and HTML tabs and you will learn a bit about HTML. One thing you will see is that most HTML tags consist of two tags – a start tag and an end tag. The end tag is identified by a forward slash (/) before the tag name (look out for this in your HTML editor).

Indeed, instead of selecting the text and clicking the button to apply whatever text style you want, you can position your cursor before the text, click the style button once, then move it to the end of the text that you want styling and click the same button again and the end result will be the same. It’s a case of opening and closing a tag.

Insertion of the <p> tag

If you hit the return key on your keyboard in the Visual text editor you will get a new paragraph. So it will wrap the previous text in <p> tags.

In the HTML editor, one hit of the return key will give you a line break or <br/> tag. (A slightly different type of tag, it stands on it’s own, is “self-closing” and therefore requires no start or end tag). Two hits of the return key in the HTML text editor will give you the new paragraph <p> tags just like one hit does in the Visual editor.

Any more hits of the return key won’t give you any more line breaks so don’t try it!

Insertion of the <h2> tag

Remember our important points to think of while writing a WordPress page or post? Breaking text up and SEO? The <h2> tag encompasses both of these in a big way.

In most WordPress themes, the title of your post is wrapped within <h1> tags which conveys to search engines that it is important text. Similarly, you can break up your text with subheadings or <h2> tags which conveys to search engines that it isn’t as important as <h1> text but is important nonetheless.

Insertion of code into the HTML text editor

You can add any HTML code you like into the HTML text editor which is very useful. I’ve often added tables and divs. One word of warning when doing this: remember the <p> tags!

Say you want to put ordinary text inside a <td> tag. You will have to hit your carriage return twice to get the <p> tags to appear. In this case it is probably easier to add the <p> tags in the editor.

How to insert images manually into a WordPress post or page

OK. WordPress has great new options for inserting images, audio and video into your post. But I’m old-school and I want to show you how to do it the HTML way.

There are two main ways to put an image into a post. One way (see above) is to make the image straddle the whole width of the text. To be able to get the image to fit snuggly into the box you are writing you need to know the width in pixels of the <div> that contains the post text. Go to Appearance > Editor in the WordPress dashboard and click on <style.css> to find this out. In my theme the <div> that contains the text and headlines is called “entry”.

Once you have done this you need to re-size your image to that pixel width using photo editing software such as Photoshop and upload it using an FTP client to your website, preferably into a directory called “images”. Once that is done you can enter this code into the HTML text editor:

<img src="http://your-site.com/images/image.jpg" alt=""/>

Remember to add two returns above and below it in the HTML text editor. Also, don’t forget to write good keyword rich and descriptive file names and alt text for the image.

The other method is to add a less wide image to the left or the right of the main body of text and have the text wrap around it. In this case you don’t want to add any returns after the code as you want the text to run adjacent to it. Simply insert this into the beginning of a paragraph to insert an image on the left hand side of the text:

<img src="http://your-site.com/images/image.jpg" style="float: left; margin: 0px 10px 0px 0px;" alt=""/>

And here is the code for inserting an image on the right hand side of the text:

<img src="http://your-site.com/images/image.jpg" style="float: right; margin: 0px 0px 0px 10px;" alt=""/>

Conclusion – OMG this post has been so long and you’ve got to the end of it!

I’m sorry that went on for a bit longer than I thought it would. Just goes to show you there’s more to writing a WordPress page or post than just … writing!

If anyone has anything to add to this, as always, please do so in the comments below. I’m bound to have left some important things out and probably made a mistake or two – intentional, of course!