Managing Your Website Content

Unlike the obscure and inferior white-label CMS (content management system) often resold by web designers, your WordPress content management system is open-source (free) software. It’s the most popular CMS platform in the world with almost 60 million users and a hugely enthusiastic and knowledgeable support and development community to make sure that you will always find an answer to any questions that you might have. In the following sections I’ll explain how you can use it to write, publish and edit your own website content. I’ll show you how to create and edit pages and posts using the WYSIWYG (whatyouseeiswhatyouget) text editor inside your website admin area and how to format the content to make it look nicer. I’ll show you how to add graphics and photos to your pages and posts, show you how to manage user comments and include some tips for writing for the web. Your content management system is already search engine friendly right out of the box but I’ll also offer tips on how to improve search engine optimisation for your website even further.

website pages

Writing Pages

The two mostly used areas within your WordPress admin panel are found within two tabs. One is called ‘Pages’ and the other is called ‘Posts’. The Pages tab is used for creating and/or editing pages just like you would find in any other website. Pages usually form the main navigation of your site and tend not to change too frequently. A page could be an ‘About Us’ page or a ‘Contact’ page or they could have a number of child or sub-pages that can be found from within a drop-down menu of another page. Posts however are different – they are a series of chronologically organised articles – a bit like inserts in a diary but I’ll get to that later on.
Writing a page or a post in your editor is a very similar process. After Clicking the Page tab, you simply click on ‘Add New’ link to begin writing a new page, or you can choose the ‘All Pages’ link to view and manage your existing pages.
Write your page content inside your text editor and use the graphic editor icons to format your text. A list of these icons follows below. Before you save and publish a new page don’t forget to create a page title.

new pages
Your title will appear at the top of your published page as the headline. It also becomes the default file name for the page unless you use the ‘Permalink’ editing feature just below the title box to create a different filename. This will become the URL of the page (the www… bit) so it’s a good idea to choose something SEO friendly. More about that later. Before creating new pages it might be helpful to read my section on writing for the web.

page options

Page Options

On the right side of your text editor are some options. Pages and posts have some different options but I’ve identified the main ones with diagrams.

Page Template – Choose your desired page template here. The choices here will be dependent on those available with your chosen theme.

Page Parent – Choose from an existing list of pages where the page should be in relation to the rest.

Comments & Pings – For pages you would normally turn this feature off unless you really want people to leave comments. Comments are more often used for creating discussion around your blog posts.

blog posts

Writing Posts

Like I said earlier, creating a post is very similar to creating pages and uses the same text editor. To do so, enter your admin panel and Click the ‘Post’ tab. This will show a list of options. To create a new blog post click on the ‘Add New’ blue text link. Before publishing your posts be sure to read the bit about how to write for the web later.

Choose a descriptive title for your blog post. This will become the filename for the post unless you use the ‘Permalink’ feature below to create something a little more search engine friendly instead. For example, if the title of your blog post was “Things I find really irritating about web designers” the URL would then become www.yourwebsite.co.uk/things-i-find-really-irritating-about-web-designers which is a bit naff and not particularly search engine friendly.
Think of something better and try to insert some relevant key words in there to make Google happy. Don’t go crazy though because Google is extremely clever and won’t appreciate efforts to try and fool it.

Write your content into the text editor area just like creating a page. You can use the graphic editor icons to format your text. You can copy and paste text too but be aware that some other text editors can insert odd keyboard characters in amongst your text. Microsoft Word likes to do this so remember to check before you hit ‘Publish’.

Formatting website content

To write a page or a post just type. The paragraph formatting will take care of itself when you press the enter key at the end of each paragraph. For much better formatting however, use the graphic editing icons at the top of your text editor. These icons handle most of the functions you will ever need. If you can’t see many icons click the icon on the right – this is known as ‘the kitchen sink’. This will bring up a new row of icons and allow extended control over your text.

devon

The Text Editor icons

To apply an editor style to your text just select it and click the icon above to apply formatting. To add a graphic or photographic image all you need to do is click where you want to place the image then click the ‘Upload/Insert’ icon just above the text editor and follow the information in the pop-up window. Adding images is about as easy as it could possibly be and I find it much easier than using other content management systems.
Below is a list of the standard icons available in your text editor. When you get familiar you can add even more control by installing ‘Plug-ins’. Installing plug-ins will extend the capability of your content management system and it’s quite straightforward but beyond the scope of this tutorial. Google it. For now though I need to concentrate on the features that come out of the box. Below is an explanation of the icons in your text editor.

bold
Bold – Select some text and click the ‘bold’ icon

italic
Italics – Select some text and click the ‘italic’ icon

strikethrough
Strike Through – Puts a line through text

unordered list
Unordered List – This creates a bulleted list


Ordered Lists – Instead of bullets it auto numbers your list


Outdent – Undo an indent


Indent – Indent some text to create block quotes


Align Left – Align text to the left


Align Center – Centers your text


Align Right – Align text to the right


Add Hyperlink – Select the text you want to be a link and click the ‘link’ icon. Add the link URL, choose if you want to open in a new window or the same window then create a title to describe what it’s linking to.


Remove Hyperlink – Remove a link


Split Post – Inserts a <!–more–> tag. This shows an intro with a link to the full post where people can read the rest of it.


Spell Check – Spell check your text.


Advanced Tool Bar – This icon will open the additional icons below.


Formatting – Use this drop down to select your heading levels. If you want to specify text sizes and custom fonts, searching for and install a suitable plug-in. There are loads in the plug-in library for free.


Underline – Underline text


Font Color – Change text colour


Paste as Plain Text – Paste text copied from another source and remove all formatting.


Paste from Word – Paste text from a Word document & remove the weird formatting.


Remove formatting – Remove formatting from selected text, useful if you’re copying and pasting from elsewhere.


Insert Embedded Media – Insert multimedia files such as video files


Insert Character – Add special characters not available on your keyboard. For example ¥, é, Æ, £, and ©.


Undo – Undoes the last change.


Redo – Redoes the last undo.


Help – Not really found much use for this yet!

Hand Coded HTML

In your text editor you can choose to create pages and posts in visual or HTML view. Usually ‘Visual’ mode would be preferred because you can see a real world view of your page content but if you’re a bit more experienced in web design and the HTML code used to create web pages then you might like to use the code view. This will show the HTML formatting tags which make up a web page. Of course you’ll need to understand this code to make good use of it but it can be used for copying parts of an existing web page into your own but please don’t plagiarise!

You can look around Google for basic HTML tutorials and I recommend it because you’ll get to know how your pages are created and learn how to do more with them.

Saving and Publishing

As you write your pages, WordPress will periodically create an autosave draft version just in case you kick the power lead out of the wall but when you’re ready to publish cpress the blue ‘Publish’ button over on the right. If you’ve been editing an existing page or past, you still need to click the blue button to publish but it will be called ‘Update’ instead.

Before you publishing a new page you can use the ‘Preview’ button to see how it will look. When you click the ‘Publish’ button the new page will go live and you will then be redirected to a new blank ‘Write Page’ page.
The little calendar option will allow you some control to postdate your page for later publication. It will remain unpublished until the date and time that you set. Click the ‘edit’ link and the options will appear. It’s not an essential feature and I’ve never used it but I guess it might be useful to have there one day – perhaps you might want to auto-publish your blog posts while you’re away on holiday?
From your list of pages and blog posts you can see which ones have been published, on what date and which ones are draft pages or posts.
From the edit link you can change the dates of your blog posts and change the status of your pages and posts from ‘Published’ to ‘Draught’ and vice versa. Useful if you want to hide them for a while but not delete them.

Working With Images

Adding images is very easy using the image upload feature in your page or post text editor.

Adding Images

Firstly position your cursor where you want your image to appear and follow the steps below to add the image.

Uploading images

Click the ‘Add an Image’ icon in the ‘Add Media’ section above the text editor icons. Then you can either search for the image on your computer…

…or simply drag and drop it over the pop-up window.

Positioning images

Once you’ve found your image you will be presented with a number of options before placing the image in your post.

By default your content management system will use the images filename but you can change that. You can add a caption and have the image link elsewhere. You can also change the image alignment and the size of the image. After that just click the ‘Insert Into Post’ button.
Understanding a little HTML and using the code view of your text editor will help you gain more control over your page layout here but you can still do a great deal. The more you use it the easier it will become.

Image Sizes

Images on computers are measured in pixels. The space available to place an image inside a post or page is limited to the width that your WordPress theme allows. If the size of your image is too big it could spoil the layout of your site and force other elements like your sidebar down to the bottom of the page.
It’s best to know what the maximum available image width can be before uploading images and where possible look to see if your theme came with any unpublished example pages with pre-populated content. That’s often a good indicator of what will look good in your pages and I prefer to use a dedicated image editor such as Photoshop to resize images before I upload them but almost any computer will have some kind of bundled image editing software. You might need support from your web designer here until you get a bit more confidence to do these things yourself.

Now read my follow-on article: How to write for the web