An absolute beginners guide to creating pages and posts with WordPress.

One of the main reasons that WordPress has become so popular is because of the simple to use admin panel which allows users to create new blog posts and pages for their website’s with out requiring them to learn HTML or any of the traditional skilled that were once required of we web designers to produce web content.

I often say to my customers that, WordPress is as easy to use as Facebook, and indeed it is, but for the very inexperienced (some of my clients amongst them), the WordPress admin panel can still feel alien and a little intimidating.

If you feel this describes you, the important thing to remember is that WordPress was created for people like you. Don’t be put off, simply take your time and you’ll soon get to grips with the many features that WordPress offers.

Here were going to run through in baby steps how to start creating your first pages and posts.  I make no apologies if you are at a more advance level than the people I’ve just described and consequently this article is frustratingly basic.

To put it simply, this post wasn’t really written for you. You’ll be able to find a great many other tutorials online that assume you already have some WordPress knowledge or are at least familiar with the various terms that we’ll be covering here.

As I write this, I will be creating a real document for my own blog. Its a long overdue customer resource that will form part of my customer knowledge base. A Glossary of WordPress Terms for use not just on this site, but also on another domain I own,  Arena’s sister brand,  444 Web Design.

Step One – Log-in to your WordPress Admin Panel

The first thing you will need to do is to log in the the WordPress Admin Panel. This is sometimes refereed to as the “Back-end” of your site. By default WordPress installs the admin panel in a sub-folder of the main directory or “root” called wp-admin.  So to access your admin panel you’ll need to type into the address bar;

www.EXAMPLE-WORDPRESS-SITE.com/wp-admin/

This example assume that your WordPress installation is installed at the root of you domain, if it’s been installed into a subdirectory then you’ll need to add the directory into the address.

Now enter your admin username and password.  If you’re using a computer which is private then you also have the option to click the “remember me” box so that next time you visit this page you will not need to login again. If you’re using a machine that is also used by other people it’s unwise to check this box as that will allow any user of this computer to login and make changes to your site.

Step Two – The WordPress Admin Panel

Once logged in you will be directed to the WordPress Admin Panel. It probably looks similar to this

On the left is the main Admin Menu from where you can select all the different features of WordPress.  Locate the POSTS label and hover over it to bring up some further options in a pop-up menu.

Creating a page is similar to creating a post.  The two are slightly different in the way that WordPress handles them and in the way search engine’s will index them.

What’s the difference between a Post and a Page in WordPress?

In short a page can be displayed in the main navigation menu on your home page and so is useful for creating more permanent content on your site, where as a post is more suitable for blogs and other situations where visitors are more likely to be interested in the most recent content as posts are gradually replaced from the home page or posts page by newer posts.

let’s not dwell on this as you can easily convert a post to a page or vice versa at some later time, for now it’s just important that you understand that post and pages are different, and that they are handled differently, but both types of content are created in WordPress in the same way.

Let move on. We’re going to create a post, so select ADD NEW from the pop-up posts menu.

Step Three – The “Add Post” Window In WordPress:

You should now have the Add New Post window up on the screen. and it should look something like this.

At the top of the screen you have the title box with a prompt that reads “Enter Title Here” (I told you WordPress was simple didn’t I). Enter the title of your new post into the box. Now with the mouse, click in the main editing window beneath it. This is where we’re going to enter the content of our post – that’s the text, images, video or any other content that will make up our post. (Remember, if your’re creating a page the process is exactly the same only hover over the page menu and select “Add New Page”.)  Now start by adding some text and then we’ll move on.

Step Four Formating Text & The Editing Toolbar in WordPress

There are two types of editor available in WordPress. The Visual editor and the Text editor and you can flip between the two by clicking on the tabs that are located at the top right of the editing window.

When using the text editor it’s possible to add html code to construct more complex looking pages but for this tutorial we’re going to stick to using the visual editor, so click on the Visual tab to select it.

Once you have the text content of your post or page you may then wish to format it. After all, your posts would look pretty dull and uninspiring if the reader is presented with a page of bland text.

Formating, is the process of creating headers, paragraphs and such like or adding some styles your text like setting certain sections of text text to appear in bold type or italics.

If you’ve ever used MS Word, Works  or another word-processing package then this part will feel very familiar.  Indeed many of the key-board short cuts that you may have used in a Windows based word-processor can also be used in the WordPress editing window but there’s also an array of button located in a tool bar at the top of the editing window that will allow you to perform these tasks if you don’t know the keyboard short cuts. Let’s take a look at the Visual Editor Toolbar

Step Five – Formatting content with the visual editor toolbar

As I mentioned, the toolbar contains some pretty common looking buttons that most people will already be familiar with so let’s just list them from left to right. Don’t worry if your tool bar looks different to the one illustrated here you’ll see why in a moment.

Working across the top row from left to right we have:

• Make text Bold
• Make text Italic
• Make text strikethrough
• Bulleted List
• Numbered List
• Make text Blockquote
• Align text left
• Align text center
• Align text right
  You all know left and right… right? I mean yes? 🙂
• Create link
• Remove link
• Insert “Read More” tag
  We’ll come back to this one later.
• Toggle spellchecker
  Needs no explanation, a tools that I need often 🙁
• Full screen editing mode
  Switches to a full screen layout while editing, handy when your post id quite long.
• Show/Hide kitchen sink
  This button shows the second row of tool buttons.  I said you’d see why your’s looked different at the start.

Now working across the lower row of options from left to right

• Select text type
  This tells WordPress if the text should be a header or paragraph or any of the other text types available from the drop down selection list
• Underline text
• Align text full / Justify text 
  Full width also known as justified text will automatically expand the with of the spaces between words and fit text to the full width of theparagraph. This explanation paragraph has a full width format applied to it, notice how the far right hand of the text lines up exactley to the edge of the available space on all lines apart form the final one.  Try it out for your self, you won’t break anything and you can alsway undo the effect by pressing the control and Z keys simultainiously.
• Select text color
  Need I say more?
• Paste as plain text
  Exactly what it says on the tin
• Paste text from MS Word
  a special feature that allows you to paste content copied from MS word with out adding the MS Word formatting
• Remove text formatting
  remove all text formatting, handy if you’ve pasted text from another web page
• Insert custom character
  ie copyright ©, currency € and trademark ™ symbols that might not be available on your keyboard.
• Outdent
  remove text indent
• Apply/increase text indent
• Undo
  Phew this button is handy no?
• Redo
  Hmm, I’ve used this one a few time in the past also
• Help Button
  When all else fails this is great when you’re stuck

Step Six – Adding Media to Post and Pages

Text Formatting helps us to create documents that are easier for the user to read, but to add real punch to our post we need to add some pictures or even video.  Wordpress makes this very easy to do and there’s a button located just above the main editing window for just this purpose.

Move the cursor to the position in the document that you want to add you picture of video and then with the mouse click the ADD MEDIA button.  This will bring up a pop up window. Don’t worry your post is safe WordPress will take you straight back to it when you’ve selected the media you wish to insert.

Initially the media gallery will display all the images and photos that you have already uploaded to your WordPress media library. If you haven’t uploaded any images yet this section will be empty.

WordPress allows you to make a choice about how you want to insert media into you post. You can either upload a file from your computer or link directly to an image of video which is located somewhere else on the web.

Hot-linking media from other sites.

NB. linking to an image of other file is called “hot linking” and you should be careful with this choice for a number of different reasons. It’s considered bad practice, it’s rude and experienced web masters will steps to stop other sites hot linking from their own.

This is because when someone views your page, the image is downloaded directly from the original server which is hosting the file and not your own, so you are in effect stealing bandwidth from the original website.  

Hot linking is also discouraged because if the file is removed from it’s original location, it will also be unavailable to people who view your post. If this happens an empty space will be displayed where the file should be and this will negatively effect your sites rankings in the search engines so strongly recommend that you take a copy of the image (assuming you have the copyrights to do so) and upload it to your own WordPress library.  At Arena DM we don’t limit our customers’ bandwidth and so there is no reason to hot-link from other sites. Never the less if you do wish to insert media in this way you simply click the “Insert from URL” link on the left hand side of the WordPress media library window and paste the location of the file you wish to be displayed.

A far better choice is to upload a media file to your own WordPress library and that way it will always be available for visitors to your site. Your site looks better for it and there can be no penalty in terms of undoing the SEO or search engine optimisation that we build into your site. So to add a file to your WordPress media library, select the “Upload File” link located at the top of the widow.  Select the file you wish to use and WordPress will import them into the media library.

Once imported, WordPress will show you a number of empty boxes on the far right hand side of the screen. It’s worth taking the time to enter some information into these boxes as it will not only make you pages more informative for the reader, but also assist search engines to index you sites content correctly. Search engines are blind to images and other media and so they use the textual information that you enter here to get a better idea of the media that your site displays and when all other factors are equal, search engines tend to return sites with indexable media content ahead of those with non-indexable or no media content.

Step Seven – Good SEO Practice When Inserting Media Files into WordPress

Now let’s take a minute to look at the empty boxes and run through what we should be inserting into them to help search engines to index our media content.

I know this section sounds like its getting quite technical, but really it’s fairly simply and well worth the few minutes it take to get this right. Correctly “tagged” media content can have a huge effect on your site’s SEO or search engine otimisation.

However that said I started this article with the beginer in mind and so if you find it’s just too much to take in then just skip to the next section.

The Image Title

The first box is the image title. Digital cameras and phones tend to save images and video with some form of sequential name often making reference to the date that the file was produced on.  While this is useful for us to be able to locate them on our own computers, it’s not much help to a search engine so its a good idea to rename it when you import the file into your WordPress library and it further helps if we use real words that describe the actual content of the media.
And so, for the large image of the WordPress media gallery that I’ve used above I called it “The media gallery in WordPress”.

The Image Caption

The image caption in WordPress is displayed below the image. If we think of the image title as primarily search engines we should think of the image caption as being primarily for the real people who read your posts.

When I add an image caption, my WordPress theme surrounds it in a box which I think  looks a little ugly (i really must get around to changing it but where does one find the time. It is possibe style each image individually using the advanced settings but we’ll leave that for another day), and so solely for ascetic reasons I have chosen not to include captions on the images I’ve included in this post.

The Alt Text

Originally an image’s Alt or alternative text was designed to be displayed in the event of an images failing to load. It’s a throw back to a time of slow connection speeds and page time outs. Even today typically when an image fails to load  a browser will display a broken image icon with the Alt text shown within the area that the failed image would have taken up. Today it’s crucial for SEO performace as the text used in the alt tag is sized upon by search engines as a good indication a pages media content. So not only is it a good idea to include an alt tag but we should try to use a primary key word in the text specified. That said is not always a good idea to try a be to clever, as keyword stuffing will simply result in penalties with most modern search engines. I recomend that you keep al tags short and to the point. In this case I have used the same text as I have done for naming the image file its self. It’s relevant and tells both users and serach engines exactly what the image is of.

The Image Description

In WordPress, you can link an image to open a page all to itself. On this page will be displayed the full image description. It will also be displayed if you use the image in a WordPress gallery, (more on this in later post) The description should be used to offer viewers more information about the media they are looking at. You might chose to include a date and location of where the media was taken or produced or credits and copyright information. It is likely that your image pages will eventually get crawled by search engines and so it’s a good idea to add an image description and the more informative the better.

Image Alignment

Here you can select weather to align the image to float to the left or right of the text on your page or set no alignment at all in which case the image creates a break in the text which then continues below the image. There is no SEO value to this property but varied use of the alignment of images can create intresting pages for your site’s visitors.

Link to

The “Link To”  drop down list has a number of values. by selecting “Media File” the inserted image links to the file itself useful for very large images that way you can display a thumnail of the image which looks nice on your pages. Linking to the “Media Page” will create a link to the image page that displays the image description as discuss above and by linking to “None” you will insert the raw image only with no link created.

Image Size

This property offers you the option to control the visual size of the image in you post or page. This is useful because we can shrink the displayed size of images that would otherwise look rather cumbersome in you post.

There isn’t really an SEO advantage to be gained here but the are potential disadvantages because If you chose to use a large image then consequently you will have a large file size, and if you don’t intend linking to either the file itself or the associated image page that WordPress creates, then you should consider reducing the image in a program like Photoshop as the inclusion of a large file will simply slow the page load time of the page that it’s included in.

This is important because load times are used by search engines to help them rank web pages. When all other factors are equal faster loading pages are ranked higher than pages that load more slowly.

Conclusion

OK that’s quite enough of the media SEO in WordPress. If you got bogged down in this section try not to worry. Over time most people begin to get in the  mind-set and gradually these consideration become second nature but I know also that at first SEO can make your head spin so if that’s happen to you then you are not alone.

If you’re really struggling and need help to SEO your website I like to invite you to get in touch I’m happy to quote on an individual bases for website SEO if you’re local to Milton Keynes I can even visit you to discuss your requirements or we can arrange it via email or telephone.  Now let’s move on.

Step Eight – Publishing Your Post

Now that you’ve created your post you’re nearly there. All we need to do is select a category and publish your post.

This tutorial assumes that your main categories are already set up and if you have had your web site designed by Arena DM then they most certainly will have been so just select the category by checking on of the boxes on the far right of the Add New Post screen. You can publish you post under more than one category and when you’re happy click the blue “Publish” button on the top right.

Congratulations, you have just published a post to you WordPress website. If you found this post helpful please take a moment to visit my Facebook page and click the like button and share this post by clicking one or more of the links in the SHARE widget on the right.