Effective Classy Websites

Subscribe to our free newsletter and download this page as a PDF and all our training movies as Quicktime files!

This tutorial will show you how to create a new post or article in WordPress.

Before we start I should mention that WordPress seems to function more reliably on certain browsers. In my experience Firefox is most stable and hassle free.

Considering its free why not download it now? It also does a great job of remembering all your passwords for all your sites and accounts. Download Firefox here.

NOTE: This is a detailed guide designed for beginners through to advanced.

Follow these steps to create an excellent blog article for your WordPress site:

Start by logging in to your WordPress site and clicking the Write tab.

1. Ask yourself “What is the focus of this article?”.

Keeping the topic narrow can be a good thing because you can explore your ideas with some depth. Your answer might be ‘I want to share this experience I had overseas and show some photos.’ Or perhaps ‘Create a concise guide on how to write a great blog article’

2. Create a strong title that tells the reader exactly what this focus is.

For example compare, ‘A great place to travel’ with ‘Landscape photos from Bolivias highlands in winter’. One gives no real specific information as to what it is about. The other gives clarity and is far more compelling. Also keep in mind that you are wasting peoples time if you fail to do this properly. A title is how people skim for what they are interested in. Make your title clear and specific.

One more point is that if possible put in some of your keywords that relate to your sites focus.

If you don’t know what you’re writing about yet you may want to leave this till later.

3. Choose a category from the menu on the right and fill in the side menus.

Categories : The Category is a broad way of positioning your article in your readers mind and gives another way to find and list your information. It is generally better to choose only one category because it can make for confusion for readers and the search engines. Create a new one if it does not fit into anything you already have.

The side menus (positioned below the Categories chooser), can actually be moved around by the way. When you put your pointer at the top of one of the blue bars it will change to a little hand. You can then re-order them freely.

Post Slug : This is the URL of the post. You can leave this alone and when you publish your article it will name it whatever you out in the Title.

Post Status : This is a way that you can change the way WordPress deals with your post. Keep this on draft until you are ready to show your article to the world. While you are writing, WordPress will frequently save your draft for you so you don’t have to click Save and Continue Editing. If you click Save, it will save your draft or post and go back to the Posts page. To return you will have to click on Write Post again and click on the title of the post again to be able to edit it.

Discussion : This is where you can disallow comments, or incoming blog links (pings) on your post. Usually you can leave both of these ticked.

Post Password : Here you can restrict only people that have the password to be able to view your article.

Post Timestamp : This is a record of when the post was written. This can be changed if you want to shift an article backward sor forwards in time. Very handy!

4. Write your article and create the raw text.

This is where you have to type stuff in to the keyboard and actually say something!

This is really the substance of your article. Even if you plan to upload mostly images and photos there is still a story to tell and thinking about what is special about them or giving some background can make all the difference. Involve people in your world. Invite them to see through your eyes and don’t be afraid to put your personality into it.

You may want to write your article in the WordPress window but many people have either written something already or prefer to have it prepared before they come to this stage. In either case we need to consider the formatting of the text we are importing.

If you want to import text without the formatting, click the Show/Hide Advanced Tool Tips button next to the Question mark on the top row of buttons. This will open up a whole row of options, but the one we want is the Paste as Plain Text button. Copy your text by highlighting it and right-clcking and selecting Copy, then click this button. It will import your text without formating while preserving the link breaks.

To import text with the formatting you can either paste directly into the window or if you have something from Microsoft Word then click the button to the right which is the Paste from Word button. This is the same deal except it will keep the layout from a Word doc for you.

Oh and make sure the spelling is correct!

You can use the Toggle spellchecker button for this to help out. See below for usage.

5. Format the text with the HTML editor and add links if necessary.

NOTE: If you let your pointer hover briefly over any of the buttons on the WordPress toolbar they will tell you in English what they do.

This is how we give the post structure and breathing space. Using italics and bold and the other various features makes an article so much easier to read and can help keep your readers attention.

Skillful use of images (next step) also makes for a good article and should be used to enhance, not distract your intention. So lets go through the buttons and what they all do.

Usually to make a button work you have to first highlight the text or position the cursor where you want something to happen. Some of these will display differently depending on the styling of the theme you are using.

So, moving from left to right we have:

Text formatting buttons:

Bold – Italic – Strikethrough – Bullets (dots) – Bullets (numbered) – Outdent – Indent (or blockquote text) – Align Text Left – Align Text Center – Align Text Right.

Next we have: Insert/Edit Link – Unlink – Insert/Edit Image – Split Post with more tag.

Insert/Edit link : to create a link you must open a new page or tab in your browser and go to the page you want to link to. Make sure to leave the New Post page you are on open. Do not navigate away from this page.

Then, select the link by left clicking on the icon to the left of the web address so that it highlights like so.

Right click the highlighted url and select COPY. This copies the url to your cache.

Next, navigate back to your new post draft highlight the text or image that you want to make into a link. Then click the links button on the WordPress toolbar. This will open a small box that looks like so. Right-click on the highlighted url section you can see and select PASTE. Then you can choose to have the link open in a new window and also the title for the link. Press Insert and your link is created!

Unlink : Removes a link from text or images. You must highlight the text first and you must be accurate over where the link is.

Insert/Edit Image : Allows you to insert an image into your post. Usually you will need to upload the image or file first (see the next step below) but it is also possible to reference an image from another site without having to upload anything. Note: It is considered bad from to do this unless it is one of your own sites.

Instructions here apply to Firefox only – Right click on the image in the browser and choose Copy Image Location from the drop-down list. Then click the Insert/Edit Image button and Paste in the URL. More details about image upload and placement in the next step.

Split Post with More Tag : What this does is tell WordPress where to end the article on the blog page where you view all the current articles. Then if they click on the More link (or the Title of the post) they can view the full page. The best way to approach this is to tell enough to make it clear what it’s about without going too in depth.

Part of what makes a blog work is that people can skim over the posts to see what intrigues them. See the info blog on this site to see an example of this. If the article is very small you can just leave this button.

Toggle Spellchecker : Did I mention that spelling is important? Well it is and WordPress has a very useful tool to help speed this up. Click this button and all words that it considers suspect will be underlined with red squiggly lines. Click it again to turn it off. The small arrow next to this button changes the language of the spell checker. Keep in mind that the checker assumes you are American. Typical!

Show/Hide Advanced Tool Tip : As mentioned before this opens a row of choices which from left to right are ~

Paragraph : This drop-down list represents the different formatting and size options for the block of text that you have selected. These options will display differently depending on the theme you have selected. The styling or CSS for the theme determines how Heading 1,2 or 2 and so forth will look.

Underline : This adds an underline to the text. Duh!

Align Full : Justifies the text to the edge of the post. The standard is to allow the text to fall where it will but some people prefer the look of this.

Select Text Color : This allows you to make text whatever color you want. Click on the small arrow to see color choices or on the A to make the text the last color you chose.

Paste as Plain Text : Allows you to import text and remove the formatting.

Paste from Word : Imports text from Microsoft Word and maintains the formatting. Imports text from Microsoft Word and maintains the formatting.

Remove Formatting : Highlight text and press this button to remove all formatting.

Cleanup Messy Code : A good way to remove code that you cannot see that will clutter up the loading of the page. Comes with a warning! This can sometimes change things in the post that you may find annoying.

Insert Custom Characters : Allows you to insert a range of useful little symbols and characters that sometimes are vital to your message. Such as – © Copyright 2008 – My wisdom is ‚àû – I could use a π – and – I am running at ¼ capacity.

Undo : Allows you to take back the last move you made. This doesn’t always work.

Redo : The opposite of above.

6. Insert and Add Images or files to your post.

NOTE : You can upload almost any type of file to make it downloadable on your site but here we cover images because they are most common. Keep in mind there is a size limit, generally around 8MB.

Ok we made it, this is what you wanted to know isn’t it? Come on, you do have some content don’t you?

Scroll down the page to the Upload section. It looks like this.

1. Click on the Browse… button on the Upload tab shown above. This will bring up a dialog box called File Upload where you can navigate your computers files and select the image you want to upload. Click Open and it will return you to the Upload box.

Here I must touch on the aspect of image quality and optimization. Remember you are displaying these images on the web and as such they do not have to be more than 72 dpi which is screen resolution. In addition if they are larger than they need to be they will take longer to load on the pages. If you have Photoshop or some other image editing program you will need to prepare them before uploading them.

2. Add a title to the image. This isn’t necessary but can help with search sometimes if you want the images to show up in Google image search.

3. The description really isn’t necessary unless you are a little narcissistic.. anyway moving on.

The features below may not be available depending on the version of WordPress you are using and whether there is a specific plugin installed.

4. The tick box next to Resize Image is useful if you have your image optimized (or not!) but it is bigger than what can be displayed on the page. If you have this ticked WordPress will resize it to the figure in the field that you can change to what is suitable. 640px is a standard large size on the web.

Note: leaving these buttons unticked will import the image unchanged.

The Create a Thumbnail button is similar but is a way that you can let WordPress create a smaller version of your image. This allows you to have a small image that loads quickly that when clicked on loads the larger version.

5. Press the Upload button.

6. Wait a moment or two depending on the size of the file. Once the file has uploaded the window will change and will look like this :

So you will see the picture and now we have some other choices (depending on the installation of WP), which from left to right are:

Show: This determines what WordPress displays, the thumbnail (if you created one), the full size image, or only the title.

Align: Determines which side if at all, that the image sits on the page. With both left and right alignment, text will flow around the image. Without alignment i.e. choosing No, the image will behave like text and you can change its formatting with the text alignment buttons. Remember, you can create links to images as well!

Link To: This controls whether the image is a link and what it points to. The 3 choices here are the full file, the page it is on, or none at all. A common use here is to set the Show: Thumbnail and the Link to: File so that the small image on the page opens the larger one when you click on it.

Now position your cursor where you want the image to go and press the Send to editor (or insert into Post)  > button.

These next 2 points require a specific plugin called Vipers Video quicktags.

For an easy guide to installing plugins in WordPress click here.

6. Adding YouTube movies and Quicktime files to your post.

Adding a YouTube movie.

1. Navigate to the movie within YouTube.com in a separate Tab or Window.

2. Highlight the URL address at the top of the browser by double clicking it (sometimes it needs 3 clicks?). Right-click on the highlighted address and select Copy.

3. Position the cursor where you want to insert the movie.

4. Click the YouTube button in the toolbar, then right-click on the open field in the box that opens up. Press OK and it will create a piece of code that will insert the movie when you view the final post.

Inserting a YouTube movie without a plugin is pretty simple too.

1. Go to the page where the YouTube movie you like is hosted and click on the word embed there on the left. This will highlight the code you need.
2. Copy this code using Control + C (on PC) or Command + C (on Mac).
3. Go back to your WordPress sitew (or Dreamweaver for that matter) and paste this code where you want the movie to appear.
4. In WordPress on important thing is that you have to switch to HTML mode first. This might be a little scary for some people but just put the cursor where you want it to go and Past using Control + V (On PC) or Command + V (On Mac).
5. Switch back to Visual Mode and you’re done!

Inserting a Quicktime movie. (this is only possible with above mentioned plugin)Vipers Video Quicktags.

This is a little trickier because you first need to create a path to a quicktime movie file. Your options are:

1. Depending on the upload size limit you could use the Upload Form in WordPress. Browse to the file on your computer and press Upload. Then right click on the link and select Copy Link Address from the drop-down menu.

2. Use an FTP application to access the web server your site is hosted on and upload the file without any file restrictions. You may want to put it into the Uploads folder on your site so that it shows up in your wordpress administration. This address will look like so – http://yourwebsite.com/wp-content/uploads/

3. Copy the full URL address file path to the Quicktime file from either of the 2 methods shown.

4. Position the cursor where you want the Movie to go.

5. Click the Quicktime button on the toolbar, and Paste in the address copied from above.

Now when your post is published all this media goodness will show up and play with a click.

Speaking of which….

Check your complete post for spelling errors and editing and then press Publish!

You may also want to press Save and return to the post at a later time.

When your article does get WordPressed it will go to the top of the blog as the latest article. You are on your way!

Keep writing and exercising that awesome tool you have called a Brain. Until next time…

Related posts:

1. Insights – Plugin Tutorial – Awesome WordPress Media and Links tool Insights What It Does: Allows you to quickly and easily, search for and insert YouTube...
2. How to add a Favicon to your WordPress website What is a Favicon? It’s a small 16×16 pixel icon that shows up in your...
3. Writing Posts and Pages in WordPress 2.6 – Screencast Tutorial This 27 minute Screencast Training goes into depth, and will show you how to post...