1. What is the purpose of the picture?
2. Edit the photographs (resize your pictures)
3. Add photos to your post
4. Add a link (optional)
5. Save draft or update post

What is the purpose of the picture?

It makes your life much easier if you decide beforehand which pictures you’d like to add and where, and what the purpose of the picture will be, because that will determine its size. For instance,

• small pictures can be floated on the right/left hand side of your text (e.g. 75 to 150 pixels wide), or
• medium pictures that have a bigger impact, but are small enough to let the text float around it on the left or right hand side (e.g. 130 – 350 pixels wide)
• big pictures with no text on either side – the maximum width depends on how wide your text column is.

Edit the photographs (resize your pictures)

Depending on the purpose of the picture, resize your photograph accordingly (see point above) in your favourite photo editor like Photoshop, Paint, Picasa, VSO Image Resizer, …

Add the picture to your post

Once you’ve got the right size for your photo, add a new post or edit an existing post, then place your cursor at the beginning of where you’d like the top of the picture to start from.

• Click on the “Add an Image” next to Upload/Insert at the top of the post editor.
• Select “Browser Uploader” (you can use “Flash Uploader” but sometimes it’s a little wonky and then frustrating to work with).
• Find your photo and upload it.
• You’ll then see a small version of it and the name of the photo will automatically appear.
• Change the Alt text to be something recongnisable (this appears when someone hovers their mouse over the picture).
• Add a caption that should appear underneath the photo (optional)
• Select the alignment for the photo, with respect to the text immediately after the photograph.
• * “Left” will make the text flow around the right side of the photo, good for smaller photos / thumbnails
• * “Right” will make the text flow around the left side of the photo, good for smaller photos / thumbnails
• * “None” will left-align the photograph, good for larger photos
• * “Center” will place the photo in the centre of your text, good for larger photos
• Then select full size
• Click on Insert into Post
• Click on “Save Draft” or “Update Post”

Because you’ve already made your picture the right size, you can select Full Size. Remeber it’s better not to add large photos, because they gobble up the disk space of the website and slow down the loading/viewing time for people reading your posts. Your photo should appear where your cursor was before you clicked on “Add an Image”.

Add a link to your photo

Firstly, go to the target website page that you’d like to link to – this can be on your website or on another website. Then copy the URL (http://…) and go back to your post and click on the photograph to which you’d like to add the link.

The easiest way to add a link to a picture is the same way for adding a link to text i.e. once the picture (or words) are selected, click on the link button at the top that looks like little links in a chain.

A little window will pop up, where you can paste the URL into. Then if the website is external i.e. not your own, select the target as “Open in new window”. Otherwise you can leave this option as “Target not Set”. Click on Insert.

Remember to save your post and check that your photo(s) are loading properly and any links that you’ve added are working properly.

Pre-emptive Troubleshooting …

If you need to move the photo to a different place, you can just click and drag it, but this doesn’t always work as well as it should! Because the html codes sometimes get all mixed up, I find it much easier just to delete the photo and insert it again into the right spot.

This time you can select “Media Gallery” instead of uploading the photo again from your computer, unless of course if you’d like to change the photo altogether!

When you copy any text and paste it into your WordPress page or post, it’s most likely that the underlying style codes will be copied too. These codes will override the style sheet that is set out in your web design and show each article with different fonts, colours and sizes. This could also happen when you copy and paste text from e-mails (or other sources). 

So what if it’s completely different? Will the sky fall on my head?

Perhaps. Perhaps not.

Personally I prefer the information I’m reading to look uniform and neat, but then I’m rather pedantic. Other people might enjoy reading posts that look different to each other, with a mish-mash of fonts, colours and text sizes.

It could come across as being free-minded and fun-loving, but it could also be (mis)interpreted as being scatter-brained and that you’ve lost sight of the ball. Hmm.

Hang on a mo’ … before you get the wrong idea – I am not saying that your writing should be boring or not show any imagination! It’s just better if the styling is done in a uniform way and with purpose. Take a look at How to Style Your Text to get great looking website pages.

So how do I copy and paste text without the underlying codes?

In the text document or e-mail, highlight the text that you’d like to use in your article. Press <Ctrl+C> to copy the text to your computer’s clipboard. Then instead of pasting it directly into WordPress, you need to make a quick detour.

In Vista, go to the Windows Start button, All Programs, Accessories and choose Notepad (you can normally find Accessories quite easily in the other versions of Windows).

Then you’ll get a blank screen in Notepad. Press <Ctrl+V> to paste the text. You’ll see the text appear in the blank window. Then, to make sure you’ve selected everything, press <Ctrl+A> to select all. Press <Ctrl+C> to copy it again.

Now go to your WordPress post (or page) and place your cursor (left-click with your mouse) in the spot where you’d like to insert the text. Then press <Ctrl+V> to paste it. Voila!

Your text has been copied without any underlying codes. Now you can style the text to suit your website.

Hang on a minute … there were pictures too, but now they’re gone!

Okay, you’re on to me.

Notepad is a basic text editor and doesn’t know what to do with pictures. You on the other hand are bright and intelligent and can insert an image yourself through WordPress.

Or it might work if you copy the picture itself and paste it into the right spot.

Might … what kind of training is this?

The path of the image plays a role in whether it will appear in your post or not. Sometimes the route to the pictures can’t be found, then instead, you’ll see that dreaded white box with a little red X, which should rather say, “Sorry, would you mind trying something else?’ in a friendlier tone, don’t you think?

Tip: consider the size of the picture in relation to the width of your text column. You might receive a lovely big photograph by e-mail, but if you to try to squeeze it into a narrow column of text, it could just fall off the side and only show half the picture. Refer to How to add a picture for further details.

This took a long time to implement and if the client changed his/her mind, it was a nightmare. For example, if a font colour was to be changed from a deep red to a slightly brighter red, it would take forever. With larger websites, this could take days, if not weeks. Style sheets are the solution!

CSS (cascading style sheets) 

Nowadays we create designs using Cascading Style Sheets that give your website a coherent look-and-feel. Style sheets allow us to determine global settings for various parts of your website.

For instance, the top menu can get one look, while a sidebar gets a different look. The header and footer each get their own styling. Then within the body of your website, there are specific settings for paragraphs, bullets and various sub-headers. Putting it simply, we separate your words from their styling.

This makes adding text VERY easy for you because you DON’T NEED to change any font types, colours or text sizes.

So, can I style my text for emphasis?

Yes you can. The question is what do you want to change? A paragraph? A sentence here and there? Or a heading or two? If your website starts looking like a Christmas tree with vulgar decorations, it will probably scare people away, so it’s better to keep a uniform style to your text.

Want to increase the impact of your words? Make effective use of (sub)headings and bullet points.

The best tip for making easy-to-read website pages is to make bite-sized paragraphs. If a page contains long sections of text, your rushed-for-time visitor can’t scan the page to see what’s in it. Inevitably, he or she will move on to another website.

Use Sub-Headings

You can use the different headings on title and even paragraphs within your page or post.

Type in your sub-headers and their following paragraphs. Then as indicated above, change the format for your sub-header from the default paragraph setting to Heading 1, 2, 3, 4, 5 or 6.

If you can’t see the dropdown tab for paragraph in the second row of buttons, then you need to show the “kitchen sink” (see picture above) which is normally the second last button in the first row, or press <Alt+Shift+Z>. Click on Save Draft and Preview to see what each option looks like.

NB: a heading gets applied to the entire paragraph, including any line breaks that you get from pressing <Shift+Enter>.

To better illustrate how text can be styled using sub-headers, below is a list of the different settings that have been created for this particular design … yours will most likely be different.

This is what Header 1 looks like

This is what Header 2 looks like

This is what Header 3 looks like

This is what Header 4 looks like

This is what Header 5 looks like

This is what Header 6 looks like

1. Type in a title (e.g. Contact Us)
2. Add the content of your page
3. Add the “Insert More” tag to separate the intro from the body
4. Select the Parent attribute, if a sub-page
5. Change the Page order, if required
6. Change the Discussion settings
7. Click on Publish
8. DONE!

This is how to add a new page in a nutshell. Looking for more details? Follow these easy steps below. 

On the Dashboard, click on Add New underneath Pages. Then you’ll get a blank page. Type in a brief title for the page name, and an introductory paragraph. Then continue with the body of the page and add an “Insert More” tag to separate your intro from the body. If required, select the Parent page and change the page order. Lastly, deselect the options to allow comments, pings and trackbacks on your page. Click on Publish.

1. Type in the title (and permalink)

The title of your page gets used as the name in your menu, so you should keep it quite short otherwise it could affect the menu layout because of a width problem. In the first line of the body, you could add a sub-header to tell people what that page is about.

By default, the title you have entered for your page also becomes the URL, known as a permalink, which stands for Permanent Link. You can change the title of the page at any time, and you can change the URL or permalink at any time, however …

If you change the permalink after publishing, then the original page won’t be found anymore. So any visitor who tries to access that page through a search result link, or perhaps from another website, will get an “Error 404 – File not Found” message instead.

Tip: if you’d like to change the URL, do so in the beginning i.e. while you’re busy with your draft. Once you’re happy with your page and have published it, then leave the permalink (URL) as it is to prevent visitors from getting the 404 error message.

2. Add the content of your page

Pages are normally used for “static information” like contact forms, legals notices or about us pages. But they could also be used for product pages or photo galleries. Here are some tips for writing a page:

• Before you add a new page, it’s easier if you first plan how you’d like the information to appear.
• Add the content first in the correct order, and then you can add thumbnails, bigger photos and/or photo galleries to the page.
• Keep your text in easy-to-read short paragraphs so that your visitors can quickly skim the page.
• When they get to the bit they’re interested in, they can slow down to read all the information.
• Give your pages a a logical clear order.
• Use sub-headers to split up the information into related topics.
• You should type an introduction, or short paragraph, and then the rest of the body.

3. Add the “Insert More” tag

By separating your first paragraph from the rest of your content, you’ll make it easier for your visitors to search for information. How does it work? After typing in their search term, they’ll get a list that shows all the pages and/or posts that contain the search words that he/she typed in, in chronological order.

If you don’t add the Insert More tag, then your visitor will see a huuuuuge list showing each and every single page in full detail. If there are just a few pages, then it wouldn’t be too bad, but if you’ve got lots of pages, it just tedious and boring wading through all the information.

Therefore, give your visitors a brief overview of what the pages are about by separating the intro from the body -> add the “Insert More” tag – a little button which can be found between the link buttons and the dictionary button in the top row (between the title and the post). Some tips:

• It’s probably easiest to add the “Insert More” tag last … after you’re happy with the layout of your post.
• If you’d like the words “read more” to appear on the same line as your intro, go to the end of the sentence, press a space and then click on Insert More.
• If you want the words “read more” to appear on the next line, go to the end of the introduction, and press <Enter> to create a new, blank paragraph. Then click on Insert More.
• Then you’ll see a dotted line appear with the word “more” in it.
• A little quirk with italics … if the last words of your intro are in italics, and you add the “Insert More” tag, the codes sometimes get a little mixed up, which could result in the rest of the text being italicized on category/tag/search page, after the faulty introduction. Prevent this by italicising your words after you’ve added the more tag.

4. Choose a Parent attribute

By default all new pages are added as a Main page. However, if this new page is a sub-page of another page, then select the other page as a parent.

You can change the relationship later, so that the page becomes a main page, or perhaps linked to a different parent page, but this would change the url of the page. If you have added a link to that page, or someone else has added a direct link to that page, then any visitors arriving via that link would get an “Error 404 – File not found” message. 

You can also have sub-sub-pages like grandchildren, e.g.

Parent page
-  Child page
    – Grandchild page

5. Change the Page Order 

Pages are first sorted numerically and then in alphabetical order. By default, each page is given a numerical value of 0. So, if you’d like to change the order of your pages, the easiest way is by changing the numerical values.

That means you should change the 0 to a 1 for the first page, then change the second page’s 0 to a 2. Carry on until you’re happy with the page order.

Please note: page orders are relevent within their parent, child or grand-child category. Therefore changing a grandchild page will have no affect on the order of the parent page and vice versa.

6. Change the Discussion settings

By default the discussion settings on pages and posts are set to allow comments, pings and trackbacks. And it’s a very good idea for (most of) your posts. However, because of the nature of static pages, we normally deselect this option not to allow any comments. 

Look for the discussion settings at the bottom of the page. You might only see a grey header, which you need to click on to see the two options, “Allow Comments” and “Allow Pings and Trackbacks”. Deselect both buttons and save your draft.

7. Draft, Preview & Publish

When you’re writing a new page, it’s better to Save as Draft first, while you’re typing and moving things around. Then you can click on Preview to see what it’s going to look like. When you’re happy, click on Publish.

Publish = LIVE

Your page only becomes visible to other people when you publish it.

1. Type in title above (e.g. how to write a new post)
2. Type in an introductory paragraph
3. Type in the body of your post
4. End off with a conclusion
5. Add any thumbnails, photographs or galleries
6. Add the “Insert More” tag to separate the intro from the body
7. Type in relevant Tags for that specific post
8. Select Categories to sort/link your posts together
9. Click on Publish
10.  DONE!

This is how to add a new post in a nutshell. Looking for more details? Follow these easy steps below and you’ll be posting away in no time. 

On the Dashboard, click on Add New underneath Posts. Then you’ll get a blank page. Type in a title, then add your first paragraph (introduction) and continue with the body of the post. Afterwards add an “Insert More” tag to separate your intro from the body. Then add tags to describe that post and check off all appropriate categories. Preview your post (optional) and click on Publish.

Add title (and permalink)

Add a descriptive title for your post that will tell visitors what the post is about. By default, the title you have entered for your post also becomes the URL, known as a permalink, which stands for Permanent Link.

You can change the title of your post at any time. And you can change the URL or permalink at any time, however …

If you change the permalink after publishing, then the original page won’t be found anymore. Any visitor who tries to access that page through a search result link, or perhaps from another website, will get an “Error 404 – File not Found” message instead.

Tip: if you’d like to change the URL, do so in the beginning i.e. while you’re busy with your draft. Once you’re happy with your post and have published it, then leave the permalink (URL) as it is to prevent visitors from getting the 404 error message.

Add introduction

The introduction of your post plays a crucial role on your website. Whenever someone clicks on one of the categories or tags, they will get a list of all your posts  underneath each other, in chronological order. If someones uses the search function, then your pages will be included in the list too.

The introduction should serve as a teaser for your website visitor, giving them clues as to whether or not the information that they are looking for is included in that post.

So to make searching through these lists easier for your visitors, you should separate the intro from the body by using the “Insert More” tag – a little button which can be found between the link buttons and the dictionary button in the top row (between the title and the post).

Tip for using the “Insert More” tag

• It’s probably easiest to add the “Insert More” tag last … after you’re happy with the layout of your post.
• If you’d like the words “read more” to appear on the same line as your intro, go to the end of the sentence, press a space and then click on Insert More.
• If you want the words “read more” to appear on the next line, go to the end of the introduction, and press <Enter> to create a new, blank paragraph. Then click on Insert More.
• Then you’ll see a dotted line appear with the word “more” in it.
• A little quirk with italics … if the last words of your intro are in italics, and you add the “Insert More” tag, the codes sometimes get a little mixed up, which could result in the rest of the text being italicized on category/tag/search page, after the faulty introduction. Prevent this by italicising your words after you’ve added the more tag.

Add the body of your story

Next you need to write the “actual content” of your post. Website visitors like to scan pages to get an overall picture of what the article is about. They’re in a hurry and they want answers quickly. Give them what they want!

Use sub-headers to categorize different topics in your post. By carefully planning the information in your post, you’ll be saving your visitor’s time. If it’s too long or too boring, they’ll go elswhere … it’s just one click away.

Aside from sub-headers to separate your paragraphs, keep your paragraphs short. Say, two or three sentences per paragraph? If your sentences are really short, then it might be better to use an unordered list (the list button with the dots not the numbers).

Finally, after you’ve finished adding the text, have read and re-read it, and you’re happy that it’s saying what you want it to say, then you can add your pictures, photographs or galleries. Okay, you can add them before, but it makes editing easier if you add the pics afterwards.

Add tags

Why use tags? It helps your visitors find related posts and makes your website more interesting! While categories are used broadly, tags are specific to the post you’re writing e.g. use the main topics of your post as tags.

You can type in tags one by one and press <Enter> or you can separate the tags with a comma and then press <Enter>. If you press <Enter> straight away, you’ll add the default text, “Add new tag” as a tag, which of course doesn’t make any sense to your visitors. You can remove unwanted tags by clicking on the little x next to them.

Tip: If you type in the first few letters of a tag that you’ve used previously and let it hover a little, then you should get a list of related tags to choose from. You can also click on option “Choose from the most popular tags”. These are handy ways to prevent typos and to ensures that your posts are properly linked together.

Choose categories 

By default there is always one category that is selected. The name gets chosen during the website build, as well as a few other major categories. Categories add structure and hierarchy to your website. Select the appropriate categories for the post you’re writing.

Draft, Preview & Publish

When you’re writing a new post, it’s better to Save as Draft first, while you’re typing and moving things around. You can then click on Preview to see what it’s going to look like. When you’re happy, click on Publish.

Publish = LIVE

Your post only becomes visible to other people when you publish it.