Use Wordpress as a CMS with Thematic – Part2

Photo by solarnu

In Part 1 of the tutorial we’ve discussed about:

1. Installing Wordpress
2. Creating a Child Theme
3. Implementing out blog design
4. Css tricks
5. The functions.php file
6. Setting up Wordpress and adding pages.

Now we take over from where we left and make the web-site fully functional. In order to do that we’ll use a few plugins to help us create a nice, functional and easy to use interface. The plugins we’ll use for this project are:

1. cFormsII – for our contact form
   
2. Nextgen-Gallery – Easy to use with great out of the box functionality
   
3. WP Super Cache – Since this is a static web-site we’ll use this plugin to make the site load in a snap

1. CForms

The plugin description says it all: “cforms is a highly customizable, flexible and powerful form builder plugin, covering a variety of use cases and features from attachments to multi form management, you can even have multiple forms on the same page!”

As you can see this is a really powerful tool, especially if you need just a simple form, but the real advantage of it is that you can easily configure the way your form is displayed, as you can change the css directly from the administration panel. This, correlated with the fact that it has over 20 ready made css templates to accommodate a verity of designs saves us precious development time.

Cforms comes with a ready made standard form that you can either modify or just use it as it is. Since the web-site was developed for a Romanian client I had to make a few changes, mainly translating the form from English.

If I take it from top to bottom these are the steps I followed to create my form:

• Translate the Field Names on the form
• On the “Redirection, Messages, Text and Button Label” section I’ve translated the Submit button, required and error messages
• On the “Core Form Admin / Email Options” changed the “Admin email address(es)” to that of the person who will receive the email
• On the Styling tab I’ve selected my css template of choice and modified some of it’s default styling to better fit my needs.

The rest of the options you can leave unchanged unless you want something in particular like CAPTCHA, or “Tell a Friend” functionality and even “Database Input Tracking”(all submissions through the form will be stored inside your database and you can see them on your dashboard.)

Have a look on how the form turned out in the end here.

2. Nextgen – Gallery

This is really a good plugin. It has a lot of out of the box functionality that you probably don’t want to change.

What I liked about this was how easy everything was to set-up. Upload and activate the plugin, upload the pictures, enter the tag (if I would have used text instead of an image some odd things would have happen ) in your post or page and you’re done(the thumbnails are created automatically ). Fast and easy. This way my client can add it’s own photos without the need to edit them for the web since all that done on the server side.

The only thing I had a problem with it was that on IE6 the thumbnails were displayed some place on the left side of the site. To fix this all I had to do was to modify inside nggallry.css (you can find it in the plugins/nextgen-gallery/css folder) the .ngg-gallery-thumbnail img selector, and comment out position:relative; declaration (or just delete it.)

Have a look at the gallery in action.

3. WP Super Cache

Since we have static pages there is no need for Wordpress to load each time a page is requested. This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

These plugins made from our simple Wordpress blog a decent CMS. It gives you the advantage that it is free and really well documented, and it gives to your client a simple to use CMS without any headaches.

You can even give your client just an editor’s account so I doesn’t have to see every settings page and get lost in them. Also if you do this don’t forget to give access in the Nextgen – Gallery to editors as well!

Finally I’ve tested the site on Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7 and Safari 3. Of course it didn’t work on IE6, and I had to add a few hack’s to the style sheet, but most of the problems you can find them well documented online.

The only thing remaining is moving the web site to the client’s server, although we’ll discuss this in a different post some time in the future.

This was a simple project that could have been done using just HTML, CSS and Javascript in a mater of minutes once you have the template ready, but this was not the point. The reason I used Wordpress was to find out more about this platforms capabilities and offer to the client a easy way of changing the content on the web-site.

In the end you can do almost anything with Wordpress that you can do with a more advanced CMS, as there are over 2,936 plugins and counting over at wordpress.org, all you need to do is just a little digging

Further Reading:

1. Use Wordpress as a CMS with Thematic Theme- Part1
2. Before I go on vacation, more Thematic madness!
3. Installing Wordpress Child Themes and Customizing the Byty Theme
4. Replacing the Thematic Menu with a DropDown List of Categories
5. 10 design tips for your custom wordpress theme built with thematic