In July of 2010 I looked at a quick way to turn a vanilla install of WordPress 3.0 into a easy to use CMS. This post revisits that original article and updates it to make it compatible with changes included in the 3.1+ releases.
Although WordPress is very much geared towards blogging ‘out of the box’, it can easily be converted for use as a basic CMS website, with all the SEO goodness of a dynamic ‘latest news’ area, and a back end interface that is arguably more approachable for non-technical users than other open-source CMS offerings.
This tutorial assumes a familiarity with the WordPress admin interface, installing plug-ins, and messing around with PHP files on the server. You will need a clean install of WP 3.1 with the default Twenty Ten theme, then for good measure should set up a duplicate or child theme from this and use this as the basis of your changes. If you are not sure how to create a child theme here are some clear instructions.
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 query string 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:
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.
NOTE: Performance issues related to using the %postname% structure, as outlined in this article http://digwp.com/2011/06/dont-use-postname/ have been fixed as of versions 3.3+, and %postname% is now offered as a ‘common setting’.
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 of WordPress 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 a bit later.
5. Tweak the Admin Interface
The order of the items 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’ section, 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.
Another admin tweak you may or may not want to consider is disabling the new admin bar (added in 3.1) that is by default presented over the top of your site when viewed by a logged in user. I personally don’t like the admin bar and feel that it may confuse clients, who could think that their visitors will see it too.
To remove it, go to USERS > (USER NAME) and uncheck the ‘when viewing site’ tickbox under ‘show admin bar’.
You will have to do this individually for each user you have created.
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 edit a theme file on the server to include the secondary content code. This sounds like it might be fiddly, but is actually very straightforward.
The file we need to edit is called loop-page.php which can be found in your theme’s directory (if you are using a child theme, place a copy of this file in your child directory — it will override the original).
Open it in the editor of your choice and paste in the following code:
<div id="content2"> <?php the_content_2(); ?> </div>
Put it after
<!-- #post-## --> (the end of the first editable region), but before
comments_template(); like this:
We could just insert the PHP function, but wrapping it in a div allows us to give it an
class) attribute and therefore style and position the block using CSS.
Save loop-page.php then go back to the WP admin area. Refresh your browser, then start editing one of your pages.
You will now notice that you now have two WYSIWYG editors to play with:
Content entered into the second editor will be published onto the page, in a discrete block wrapped by a
div with an id of
By default, the second content block is stacked underneath the first, but with a bit of CSS magic, these two areas can be positioned anywhere that you want on the page.
7. Removing the Sidebar
To remove the blog sidebar from your static pages, select ‘one-column, no sidebar’ from the template input in the ‘page attributes’ box when editing a page:
Update the page for the new template to take effect.
Finished Home Page, with two editable content areas and no sidebar:
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, 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 main CSS document.