WordPress 3.0 to a Client Friendly CMS in 7 Easy Steps

This post is going to look at a quick way to turn a fresh install of WordPress 3.0 into a easy to use CMS for non-technical clients. It will utilise the new ‘Twenty Ten’ theme that already has some CMS leanings, the new custom menu feature, plus a couple of plug-ins that add some extra functionality.

UPDATE! since the release of version 3.1, WordPress now uses a slightly different template structure to the one described in this tutorial. A revised version of this post is available here

WordPress as a CMS is a debate that is waning now, I think. Each subsequent release adds more and more CMS-like features. However, WP still ‘defaults’ to a blog when first installed, and the emphasis in the admin area is very much about managing posts and comments, which can be confusing to those not familiar with its ways.

However WP can easily be converted for use as a basic CMS website, with all the SEO goodness of a dynamic ‘latest news’ area, and the superior (in my opinion) back end interface.

This tutorial assumes a familiarity with the WordPress admin interface, installing plug-ins, and messing around with PHP files on the server. You will also need a fresh install of WP 3.0 using the Twenty Ten theme.

Let’s get started!

1) Create Some Pages

The first thing to do is create some pages.

As you probably know, WP gives the author the option of creating either dynamic blog ‘posts’ that can work in several contexts and taxonomies, or ‘pages’, which behave much more like standard, fixed, web pages. Since we are interested in setting up a CMS, we will focus mostly on page creation.

For this tutorial we are going to use page titles of ‘Home’, ‘About’, ‘Staff’, ‘News’ and ‘Contact’:

Add some preliminary content to ‘Home’, ‘About’, ‘Staff’ and ‘Contact’, but leave ‘News’ blank, and disable comments on all of these pages.

2) Change The Permalink Structure

By default, WP creates silly URLs for pages such as ‘?page_id=3′. If we want the URLs of our pages to reflect their titles, which is much better for SEO and client understanding, we need to go to SETTINGS > PERMALINKS and insert:

/%postname%/

into the ‘Custom Structure’ field:

By doing this, the ‘About’ page will now have a URL of http://www.mysite/about, ‘News’ will have http://www.mysite/news, and so on.

3) Make the Home Page Static

By default, the ‘Home’ landing page will contain the main WordPress blog, with a reverse-chronological list of posts. To make the site less blog-like and more like a standard website, we will need to move the blog to the internal ‘News’ page, and make the landing page static.

To do this go to SETTINGS > READING and under the ‘Front Page Displays’ section, change the settings  to how they appear below:

4) Create a Custom Menu

This feature is new to WP 3.0. Similar functionality is available for older versions using the My Page Order plug-in, but this gives us a few more options.

Go to APPEARANCE > MENUS

Type ‘Main Nav’ in the menu name field, then click on the blue ‘Create Menu’ button:

You can now add your pages to it:

and can arrange their order by dragging and dropping them into place:

A particularly good feature of this is the ability to nest pages within pages, which automatically generates a drop-down on the menu:

Infact, if we take a quick look at what we have got so far, we already have a fully-fledged standards compliant, SEO-friendly CMS site up and running, with editable fields for the content on our four main pages, a fully-functioning ‘latest news’ section,  and a dynamically generated menu:

Yes, that sidebar needs removing but we’ll come to that in a bit.

5) Tweak the Admin Toolbar

The order of the tabs in the main admin toolbar don’t make a lot of sense to clients if they aren’t using WP as a blog. The focus is clearly on blogging, and the ‘Pages’ tab, which is most relevant for our purposes, appears fourth on the list:

There is a nifty plug-in called Admin Menu Editor by W-Shadow which can quickly resolve this. I tried once to manually edit the PHP files for the toolbar, it was very time-consuming, and was problematic when it came to upgrading. This method is much less of a headache, in my opinion.

Install the plug-in, go to its settings and move the ‘Pages’ tab to the top of the toolbar, above ‘Posts’ but below the ‘Dashboard’ tab and its divider :

This makes much more sense when using WP a CMS, and will confuse clients less, I believe.

Additionally, by creating a user account with an ‘Editor’ role for the client, access to many of the other tabs is removed and you get a much more intuitive and easier to use interface for less confident clients.

the resulting toolbar looks like this:

That’s much better. Of course, admin users will still get full access to appearance, plug-ins, settings, etc.

6) Create Additional Editable Content Blocks

One standard feature of most CMS’s that WP lacks out of the box is the ability to set up more than one editable region for a page. More complex layouts might require different blocks or columns that you need to make independently editable for the client. We also have that sidebar with all the blog-related widgets appearing on every page at the moment, and this should only appear in the ‘News’ section. How do we do these things in WP???

First we need to install the Secondary HTML Content plug-in by Jake Goldman. This allows us to add up to four additional editable content blocks to each page. On it’s settings page, you simply choose how many extra blocks you want to add (for this tutorial we’ll just add one), and check the ‘add media buttons’ tickbox*.

* ‘Add Media Buttons’ allows clients to add images via buttons added to the MCE editor (by default they can only create and format text). This feature doesn’t currently seem to work in WP 3.0, but presumably will be fixed by the author of the plug-in soon.

We now need to create a new template file on the server for our layout that contains the two editable regions. This sounds like a lot of work, but thankfully the Twenty Ten theme includes a template that almost does what we need. It’s called onecolumn-page.php and can be found in the theme’s directory.

Duplicate this file and rename it twocolumn-page.php:

Open it in the code editor of your choice and edit the comments section at the top, which WP uses to register the template and make it available in the admin area.

Change ‘Template Name:’ to Two Column, No Sidebar:

Now scroll down to line 30 and insert the following code into the loop, making sure it goes in between the end of the ‘#post’ block (the first editable region), but before ‘comments_template()’:

<div id="content2">
    <?php the_content_2(); ?>
</div>

We could just insert the PHP function, but wrapping it in a div allows us to give it an id (or class) attribute and therefore style and position the block using CSS.

Save twocolumn-page.php and go back to the WP admin area.

7) Apply The Custom Template to the Pages

Refresh the browser, then start editing the ‘Home’ page.

On the right you should notice an section called ‘Template’ under ‘Page Attributes’. Our new template should be an option on the drop-down in this section:

Change the page template to Two Column, No Sidebar, and then do the same for ‘About’, ‘Staff’ and ‘Contact’. Leave ‘News’ as the default template, as this needs to keep the blog layout and the sidebar.

By default, the two editable blocks are unstyled, so will be stacked on top of one another. With a bit of CSS magic, these can be turned into vertical columns.

That’s It!

Finished Home Page, using the new two-column template:

Finished ‘News’ section, using regular blog layout with sidebar intact:

With these quick steps, which shouldn’t take you more than fifteen minutes, we can change a brand new WordPress install into a fully functioning CMS website that contains multiple editable regions, custom templates, a dynamically generated drop-down menu, a dynamic ‘news’ section, and a streamlined admin interface. The Twenty Ten theme is plain enough to form the basis of a unique design that can now be styled by simply editing the CSS.

Happy blogging CMS-ing!