No-fuss websites in Kent and the south east, with applegreen
Skip navigation

Ask Applegreen: WordPress CMS

WordPress is both a blogging platform and a content management system (CMS), designed to enable people with no training in coding to publish on the web.

I intend this page to be mainly a how-to guide to using WordPress. But Wordpress needs some introduction to explain why it works the way it does.

About WordPress

WordPress started life a blogging site used by professional writers to promote themselves on the internet. Eventually, its popularity and ease of use led to its development as a CMS capable of supporting entire websites. While a blog is normally a single page of individual posts stacked above one another, a website has many pages that link together with a navigation system.

Nowadays WordPress enables the creation of CMS websites that look like classic ones but in which one of the pages, usually labelled News or Events, retains the attibutes of a blog, thus offering the best of both worlds.

What is CMS?

CMS is a system that enables the creation of websites destined to be edited by non-specialists. The job of hosting such a website, and of designing it to a particular specification, is specialist work requiring knowledge of web languages such as HTML, CSS and PHP. But once that is done, the non-specialist is given access WordPress’s editing facility, called the Dashboard.

From the Dashboard, the user can add and change the text in pages, add photos, upload pdf documents and write blog posts publicising events or news. Advanced users can add extra pages and change information in the sidebar.

Should I choose WordPress?

Applegreen offers its clients three website options:

  1. A hand-coded website;
  2. A hand-code website with an integrated WordPress blog/news page;
  3. A website entirely powered by WordPress, of which Applegreen has done the design.

The first option offers the greatest flexibility in design together with light, fast-loading pages. Any updates are carried out through Applegreen’s tailored follow-up service which is fast and affordable (see Website Maintenance on our Costs page). This is the best option for people who either do not feel confident in learning how to update, or who are too busy running their business. Among others, YouByYou Books relies on Applegreen for all its updates.

The second offers the same advantages as the first but with an option for website owners to add their own news or events, or write a blog. The WordPress page is seamlessly integrated into the navigation and styled to resemble the hand-coded website as closely as possible. This option is useful for business people who wish to blog about their work, or for organisations that have regular events or special offers: see the News page at Camden Community Nurseries. There is a small extra cost to adding WordPress to a hand-coded site because Applegreen is effectively creating the design twice over.

The third option offers access to all the pages, including the ability to add new ones. This is particularly useful for organisations like churches and small charities where there may be several people wishing to update different pages, or where new initiatives may lead to the need for more pages in the future. The decision to design purely in WordPress must be made at the start of a project. To choose this option, you must feel confident that you can spend time mastering the editing system that is available to you, or have someone in your organisation or business who will. Check out Smarden and Biddenden Churches.

Back to top

WordPress Instructions

Do not be daunted by the apparent length of the instructions below: there are a lot of pictures, and not all the instructions apply to every situation. If your website was created by Applegreen, you should already have received a set of instructions and been talked through them so these ones are just a reminder.

The Dashboard
The page from which you begin editing does not look like the website itself. Logging in through the Admin takes you to a page called the Dashboard from which you can access the content of the different areas of the website.

The WordPress dashboard, use for editing your WordPress CMS website

Your dashboard will look a little like this one though the colours may vary. The important bits are the links down the lefthand side: your dashboard will contain some or all of the ones listed here. The most useful are Posts, Media and Pages.

We strongly advise that you keep your actual website open in one tab of your browser while you look at your Dashboard in another tab. You will need to keep alternating between the two tabs.

Editable areas
The editable parts of your website, and the means to access them, will vary depending on the following conditions:

  1. Whether you are using WordPress as a single news or blog page integrated in a hand-coded website (Option 2 above);
  2. Whether your entire website has been created in WordPress, and you can edit all of the pages (Option 3 above) which may or may not include a blog-style news page;
  3. Whether your website or news page has a sidebar (made up of widgets);
  4. Whether you as user have full administrator rights or just editor rights (this only applies to websites with several contributors).

As I explained above, a blog is normally a single page of individual posts stacked above one another, whereas a website has many pages that link together with a navigation system. In the two screenshots below, I have greyed out and labelled the editable areas for ordinary webpages and for a blog-style page. This website has a sidebar consisting of widgets:

Editing the blog / news / events page
The following applies to blog-style pages that are either integrated into hand-coded websites or part of of a WordPress only website.

Entries to the blog-style page are called Posts. In the Dashboard, hover over the word Posts in the left-hand margin, then choose either All Posts (to edit an existing post) or Add New to write a new one. When you click All Posts the exisiting posts will appear as a list: hover over the one you want to edit and the options will appear.

The editing screen will look something like this:

The WordPress Posts editing screen, use for editing your blog or news page

If writing a new post, put a relevant title in the title box and write its main contents in the larger box beneath the title (for details of how to do this, see Posts and Pages Content below). The click the Publish button on the right (for a new post) or Udate (if editing an existing post). Once this is done, go back to the relevant page on your website and reload it (refresh): your changes or additions will now appear.

Changing the name of the blog / news / events page
Only try this if your website is designed entirely in WordPress — for hand-coded websites with a WordPress page, contact Applegreen (or your developer if it's not us) because the change will impact on pages to which you have no access!

Changing the name of your blog page is easily done under Pages, simply choose the relevant page and edit the name, and the new name will update itself in the navigation. However, WordPress will treat the newly named page as an ordinary (non-blog) page, and any new posts will fail to appear there, unless you update the system manually.

To do this, hover over Appearance, click on Customize and choose Static Front Page. At the bottom of the box that appears you have options for Posts Page. Choose your newly named page and click Save and Publish.

Editing a static (non-blog) webpage
People whose entire website is built in WordPress (Option 3 above) have mostly non-blog pages that are described as "static".

In the Dashboard, hover over the word Pages in the left-hand margin, then choose All Pages for a list of existing pages. When the list of pages appears, hover over the one you want to edit and the options will appear (adding a new page is for advanced users and is not covered here). Your list of pages will look something like this:

The WordPress Pages list, use it to access your website pages

Clicking Edit will take you to the Editing page which will look similar to the blog editing page, illustrated further up. But in this case, the title will most likely (but not always) be the same as that page's navigation label: it is advisable not to change it without good reason.

The rest of the page's content will appear in the larger box below which is edited in the same way as for blog posts, see Posts and Pages Content below. When you are happy with your page, click the Update button on your right, then refresh the relevant page on your website. Your changes will appear.

Back to top

Posts and Pages Content
The larger editing box gives you two mode options for accessing and editing content, visible as two tabs immediately above the box: Visual and Text. In the editing screen image shown in the Blog post section, the box is set to Visual.

In Visual mode the text will appear as it does on the website itself. In Text mode, a limited amount of HTML code is also visible. This is useful for code writers who can fine-tune the appearance of text, but not essential for everyone to know.

One difference between the two modes appears when you use the return key to create a line break: in Visual mode a single tap of the return key creates two lines. In Text mode the return key creates only one line. It helps to know this when fine-tuning the spacing.

For most purposes it’s easier to write in Visual mode. Symbols above the box give some limited word-processing choices such as bold, italic and alignment. For more symbols, click the square Toolbar Toggle icon at the end of the first line. All the icons are explained when the cursor is hovered over them.

However, when copying from an existing word-processed document it is best to use Text mode, as this strips the text of the formatting that is copied across from word-processed text. Bold highlights can then be added manually if desired.

To add pictures to a page, the image you want must first be uploaded to Wordpress. Above the content box click the Add Media button: you will be given a choice between using an image previously uploaded to the media library, or uploading a new image to use (the image must be on your computer for the Wordpress Upload system to be able to find it). Once you have made your choice, you can decide on the image’s alignment and on its final size in the page. Add a caption if you wish. Then click Insert into page and the picture will appear where you put your cursor in the box. In Visual mode the picture itself will appear, but in Text mode it will show only as HTML code. Click the Update button and refresh the webpage to see the result.

Uploading a document such as a pdf is similar to uploading a photo: click the Add Media button, or choose it from the left-hand navigation of the dashboard, and upload your document to the Media Library as you would an image file (above). In the editing mode for your page (Visual or Text), highlight the text you want to use as link for the document, and click the Add Media button above the editing box. In the Media Library, highlight the document you want to link to (a tick will appear in the top right-hand corner of that document). Some information boxes will appear on the right: the Title box shows the name of the file which will appear on your page as link. The Title will replace the text you have highlighted, so you must change it if you want to control what the highlighted text says. Click the Insert into page button, and click Update in the page edit mode.

Adding a link is done as follows: in either Visual or Text mode, hightlight the words you want to use as link text, and click on Insert/edit link icon above the box. Copy the whole url of the page or website to be linked to (careful that http:// does not appear twice). Click the ,b>Add Link button and the link text will be underlined.

After each edit click Update and refresh the page on the website, for the change to take effect.

Extra pages, tabs and categories
Advanced users can learn to add extra webpages, manage alternative menus and take advantage of tabs and categories when writing frequent blog posts. This is covered in plenty of online instructions and books, and would be the subject of a one-to-one tutorial in the case of an Applegreen project.

Back to top

Case Study: Frieda Pruim, journalist

Frieda is a Dutch journalist living in Utrecht, where she has exercised her profession for more than 20 years.

Two-and-a-half years ago she went freelance, continuing in journalism, and undertook extra training as a professional organiser (helping to "de-clutter" people's lives). When she found herself engaged in a mix of article and book writing, editing and professional-organising commitments, she decided to present all her work in a single hub: a website she could update herself. She had* designed by a local developer (not an Applegreen project) and launched it in 2012.
*Frieda's website is in Dutch, but the Latest News heading on the home page should be clear enough to English-speaking readers!

She explains: "I was shown by my developer how to use WordPress. Some things I worked out myself. If I need help I can still ask my developer to explain things, or pay him to do extra things for me."

Asked how difficult she found it at the beginning, she says: "I found it very easy. I am used to computers, but wasn’t used to updating websites. That is, I sometimes had to do it at Opzij (my last job) but that was an extremely complicated system. I am also webmaster for a Joomla site and I find Joomla terrible." [Joomla is an alternative CMS to WordPress]

Frieda spends about half an hour twice a month adding news items and links to her home page. She updates her home page most frequently but has edited all the pages at different times. She is comfortable adding photos and uploading pdf documents. With extra instructions she has been able to add new pages to the main navigation.

In conclusion, Frieda is enthusiastic, saying: "I would certainly recommend WordPress!"

Last updated October 2014