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 Labelsection 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.)

Demo

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

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

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

11 thoughts on “Use WordPress as a CMS with Thematic – Part2

  1. Hi gekow!

    Since in this tutorial I created a child theme, the home_banner.php is that of Thematic Theme so you can download it for free. And as far as CSS and images go you can always see them with your browser if you are interested on how I’ve implemented the site in more detail.

    If you have any other questions don’t hesitate to ask!

  2. Thanks for taking the time to do this nice tutorial. Helped me to visualize how to create a child theme… now all I have to do is go do it. :-)

  3. Hi Cristi,
    Thanks for the post, it helps me caching up with new WP developments.
    That kraft example site is awesome.

    Keep up posting!

  4. Thanks for this great theme – I’m loving the Byty child theme for our brand new site: http://www.katydock.com.

    3 things:

    1) I think that you should explain in detail in one of your tutorials about how to change the header logo.

    2) Any chance of spelling out exactly which plugin to download to make the top-level navigation have a drop down menu for child pages.

    3) Also, I think that I would like to see an explanation of how to map all of the widget placement choices – there are so many options that there too many ways to duplicate widgets.

  5. @Marc – Your new site looks great! I’ll add it to the list of sites that are using my Child Theme.

    1. Also I’ve posted a short tutorial a few hours ago that explains in more detail how to change the Logo and add a image (in your case) in the header for the Byty Theme (from what I can see you modified the entire top image). http://www.cozmoslabs.com/2008/10/29/installing-wordpress-child-themes-customizing/

    2. I don’t think a plugin would solve much (at least not that I’m aware off). I didn’t think about multilevel navigation once I implemented the Byty Theme. This is feature that I’ll implement in the near future. I’ll send you a email once I have an Update.

    3. This should explain what all those widgets do: http://wp-themes.com/wp-content/themes/thematic/readme.html

    • Hey Kenn,

      Actually that is a good question. We never actually went live with that project and some time ago, like over a year ago, we switched hosts. That wp installation was never ported I guess. It fell between the cracks.

      It’s probably some place on my HDD, but I just to know if I’ll ever move it back online… These days I just can’t find free time.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 × eight =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>