MightyMeta

wordpress-as-cms-b2

Converting WordPress 3.x to a Client Friendly CMS

| 26 Comments

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’:

Creating Pages

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:

/%postname%/

into the ‘Custom Structure’ field:

Permalinks

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:

Static Page Settings

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 APPEARANCEMENUS

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

Creating a Custom Menu

You can now add your pages to it:

Custom Menu - Adding Pages

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

Custom Menu Reordering

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

Custom Menu - Nested Pages

Custom Menu - Dropdown Example

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:

Site Preview - Half Way There!

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:

Toolbar - Default

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 :

Admin Menu Editor

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:

Toolbar - Client View

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’.

Disable 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*.

Secondary HTML Settings

* ‘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:

Paste Secondary Content Code

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 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:

Secondary Editor

Content entered into the second editor will be published onto the page, in a discrete block wrapped by a div with an id of content2.

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:

Change Template

Update the page for the new template to take effect.

That’s It!

Finished Home Page, with two editable content areas and no sidebar:

Finished - Home

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

Finished - News

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.

Happy blogging CMS-ing!

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.

26 Comments

  1. Thanks for sharing this — great information. I could have really used it when building my website — I wanted a separate front page without a blog and couldn’t figure it out, so I have WP installed into a subdirectory and I have a handful of pages built by hand. This way would have been much better. I’d switch my site around to do it this way, but I’m concerned about preserving all my current URLs. Oh well… I’ll do better next time thanks to this.
    –lee–

  2. I am a WordPress applications guy, into SEO and social media, and not a coder. Is it really necessary to get into the basic theme coding? Isn’t it better to write a child theme so if and when the theme upgrades, the changes have not been wiped out?

    • Absolutely!

      I guess the scope of this article was to show a basic setup — it doesn’t expand into how you would then develop the existing theme into a new one.

      However I can see how this could be confusing/misleading for some. Will amend with reference to child themes.

  3. Bravo James, bravo.

    This should be must-reading for all new wordpress users. Your explanations were crisp, to the point, and un-patronizingly simple.
    Thanks as well for your reference to a couple of plug-ins. One I’d forgotten about, and one not heard of nor considered.

    thanks mate!

    Michael

  4. Regarding the Secondary HTML Content plug-In, if I understand the example, each additional editing area would be:

    etc…
    Is this correct?

    • For some reason the PHP tags in my post were stripped out. What I meant to ask was do you add more fields by using (no PHP this time):
      the_content_2()
      the_content_3()
      the_content_4()
      etc…

      • Yes that’s right. Just remember to change the div id and plug-in settings too.

        You can have up to five extra blocks, although having that many may overcomplicate things at the backend. Media buttons still don’t work in WP3+ either so inserting images is awkward. Maybe we could make a request to the plug-in author?

        Sorry ’bout the tag stripping. Need to use html entities for brackets.

  5. Great article James. Any chance of following it up with a guide to how to mix and match blog posts and pages in WP with a CMS-like menu structure? Re permalinks, I use /%category%/%postname%/ which seems to work pretty well at this stage (love the fact that you can change this and update all URLs instantly). The next URL challenge for me is to implement sub-category navigation (location within country) and sub-sub-category (activity within location within country). If anyone has tips on how to manage this I’d love to hear them. I want my locations and activities to be blog posts because I can do much more with those in SEO terms, syndication, etc

    • As far as I know the new menu manager allows you mix and match static pages with custom taxonomies such as categories and sub-categories. Essentially any structure that you have set up within your site can be turned into menu items.

  6. I develop custom wordpress site, the information you presented here is excellent and very helpful even to the experienced people.
    Keep it up.

  7. Hi James,
    Nice article, but I’d just like to correct you on one point about the permalinks settings. If you select any option other than the default, your pages will have urls like http://example.com/pagename all of the options and replaceable parts are about the permalinks for posts.

    It is still reasonable to go with at least a /%year%/%month%/%postname% for your blog or news posts. That then gives you the ability to have intuitive yearly archive urls, etc.

    By the way, the default query string permalink format is not silly, it’s safe. Some hosting companies may not have mod_rewrite (the apache add-on required for proper permalinks to work) enabled, others like, Windows IIS hosting, don’t even support mod_rewrite.

    So, rather than deliver a product that would be broken out of the box for a small, but significant, number of installations, the WordPress team play it safe.

    Cheers,
    Mike

    • Thanks for the info Mike, I didn’t know about the permalink/URL thing, will check that out!

      I can appreciate the reason behind why the default setting for URLs is non-canonical, but wouldn’t it be great if WP could detect if mod_rewrite is present and default to a canonical option if this is so?

  8. Nice article and great for the throngs of folks still learning WordPress. I’m also going to comment on permalinks. In the past I would always use %category%%postname% until I kept coming across articles about performance issues when permalinks didn’t start with a numeric value. So, using one of the date elements is great or you can use the ID, %post_id%, if you don’t want date values showing up in the URL. You still get the SEO advantages and you don’t take a performance hit. You can read more here: http://dougal.gunters.org/blog/2009/02/04/efficient-wordpress-permalinks/

    And if you want to know even more check out the WordPress Codex: http://codex.wordpress.org/Using_Permalinks

    • Thanks for the tip Jeff. Have read about that also, although my understanding was that it only really affected things once you had a lot of articles: http://digwp.com/2011/06/dont-use-postname/

      Guess it’s a weigh-up between any performance benefits vs cleaner-looking URLs.

      Will be updating this post soon to reflect the changes brought by 3.2 and the Twenty-Eleven theme, so will certainly mention the issues with %postname%

  9. This is a good tutorial and I must say that I learned a lot about the permalinks that I didnt know. I have always used pagename — blogtitle for posts, but will definitely consider changing this. Thanks

  10. This was the article I was looking for. And those admin menu plugin is very helpful. Thanks!

  11. Update:

    WordPress has fixed the ‘permalink’ issue in version 3.3+

  12. Hi, I’ve been going through the instructions on your page which I’m finding really helpful — I’m a WordPress newbie — but I got an error when I reached step 6 using the line between the div tags

    …but it worked when i changed it to

  13. er..that didn’t display..change “the_content_2” to “the_secondary_content”

  14. Near the end of the comments on the page linked off your page: http://digwp.com/2011/06/dont-use-postname/
    … my understanding is that the problem of simply using %postname%

  15. Hi all,

    I am delving into wordpress for the first time. We are trying to create a CMS style website. The issue I am having is that even when I follow the instructions above, I still get the ‘comments’ box on each page. The examples shown in this tutorial show that this box is not showing and that is what we want. The only place we want to post comments is on the ‘News’ tab.

    I am using the twentyeleven theme. I have not tried the above tutorial on the twentyten theme.

    Thank you in advance for any help you can offer in where I may be going wrong.

    Kindest regards,

    Mike B

  16. Hi all,

    I found what to do. In Pages — ‘page name’ — Screen Options, tick Discussion. A section will appear further down the page. Now untick “Allow comments.” You can also untick “Allow trackbacks and pingbacks on this page” as well because you arn’t using comments on the page in question.

    You have to do this on each individual page you create or have created. I did it on all pages bar one where I wanted to have comments and discussions posted etc.

    Hope this has been of help to any noobies like myself.

    Mike B

Leave a Reply

Required fields are marked *.


MightyMeta, 8 St Lawrence Lane, Ashburton, Devon, UK, TQ13 7DD

Powered by WordPress | Theme Derived From "Yoko" by by Elmastudio

Scroll To Top