How to format posts in WordPress

By mcvanrensburg  | 

 April 5th, 2012 | 

Within this article I will discuss basic post formatting in WordPress, both in the Visual and HTML views. Personally, I like to switch between the two when posting new content, because both of the editors(views) brings something different to the table. The Visual editor makes things a little easier as it is supposed to be “What you see is what you get” (WYSIWYG), while the HTML editor gives users with a basic understanding of html coding, more control over the content in their posts.


I have come across a lot of problems with clients pasting content in from word processors or typing something in the visual view, only to have it differently displayed in the actual post. So with a basic understanding of what goes on “behind the scenes”, they will be able to fix it in the HTML view. For some reason however, word processors sometimes messes up one’s formatting completely, so I would recommend typing your post directly in WordPress.


I will now go through all the basic needs of a blogger in both views, so that you can understand firstly, how to do the things you want to do and how to fix that may have gone wrong. Remeber this is not a full tutorial on the workings of both these editors, this is just a basic introduction to what you need to know to get yourself going.


The WordPress Toolbar



1.) The Title: Pretty much self explanatory:  Here you enter the title of your post


2.) Views: Here you switch between to two different views of WordPress. The Visual (WYSIWYG) Editor View and the HTML Editor View.


3.) Content: All the actual content of the post is added in this part


Formatting the text and adding images


Firstly, when adding formatting text in the Visual Editor, things might not always work the way you are use too. You might have to do some things a few times before it works, and with this some mistakes can slip in, but with a basic understanding of html code, you can fix this in no time at all.


The bare basics of html code in the WordPress backend revolves around one principle: Everything you want to apply something to,  needs to be contained in the correct HTML Tags. This is extremely important. For example:

I want the word Love in, “I love wordpress” to be bold, then I would wrap this word in strong tags, that looks like this <strong></strong>. Note the <> for where you want the tag to start and the </> for where you want the tag to end. This stays the same for all tags and it is of the utmost of importance that if you start a tag, that you close it again, otherwise you might run into some trouble. Luckily the Visual editor does this all for us!


So getting back to my example, in code view it would look something like this:



Which will output, I love WordPress.


If you grasp this basic concept of html, then you are ready to do basic formatting in the html view as well! Ok lets start…


Adding paragraphs between text:


When you want to add paragraphs between text in WordPress you can either in the Visual View, push the ENTER key on your keyboard TWICE, to add a double space like this:



When viewing this same text in the html view, you will get something like this:



In the WordPress HTML view the piece of code &nbsp; represents a paragraph space. The white spaces in between means nothing to code, so don’t worry about them in code view. Sometimes WordPress’s Visual view produces more paragraphs than you bargained for, so you can easily delete them in the HTML view, by removing unwanted &nbsp; ‘s.


Inserting an Image into a post


When writing a blog article, you sometimes want to add images to your post to liven things up a bit.  Doing this is real easy.  Take a look at your toolbar. Just below the Title tab, you will find the “Upload/Insert” tab, with for small icons next to them. The first icon is the “add an image” link that we will be using to upload our image.



Once this screen has loaded click “Select Files”. This will take you to the file browser, so you can select the image on your pc that you want to upload.



When you have selected the image, this screen will appear.



Here you are faced with a few options. I like to click none under “Link URL”, so you don’t have any links that lead to nowhere on your blog image. Next you have to decide if you are using the image for your main blog image (Featured image) or if you are only inserting it into the blog post. Make sure the size of the image is correct according to your website’s layout and then make your pick. Once this is done, just close the window with the small X at the top and you are set!


Right, you should now be good to go so get busy adding your content. Please leave comments if you have any further question regarding my post of formatting posts in WordPress.


1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)

Loading ... Loading ...

Be Sociable, Share!

    Leave a Comment