Customizing a CMS Web Site

Using a CMS system to create and manage a web site is becoming more desirable. There are many out there, and the decision on which to use depends on the web site’s requirements.

Popular “open source” options include Drupal and WordPress. Both robust and well thought-out systems. However, deciding on which to use – then downloading, uploading, connecting to a database and checking some basic settings is only the beginning of a project. After that comes the actual visual design, page structure/hierarchy, and CSS formatting.

For both Drupal and WordPress use themes, and come with a default theme. (This is a folder containing multiple .php pages that control how the web pages are put together.) To make a custom website we do never modify or change any files of the default theme, but create a ‘child’ theme instead. The custom child theme can be an entire copy of the default theme , or it can be just a few .php files, in the child folder, which link-to and use the functionality from files in the parent theme.

All customization of the CSS and some php functions are edited in the child theme files.

Drupal and WordPress use the same principals, but have different requirements regarding the set up of a child theme. First we need to know which folders the themes are located in:

Drupal:  sites/all/themes
Wordpress: wp-content/themes

Inside these folders are the theme folders, and depending on how the CMS was set up (by SimpleScrips?) or on which server (Dreamweaver ads multiple free themes to WordPress, Bluehost only includes the default) it may include none, one default or multiple themes.

At this point one should have a pretty good idea of what the proposed design and site structure will be, so the next step is to find a suitable theme to customize. Both Drupal and WordPress have hundreds of free themes available for download. However, customizing a theme that is already very “designed” can be frustrating. Starting with a simple ‘plain’ theme, which includes minimal stye can be easier to handle than trying to retrofit an advanced theme.

For Drupal, a good starting point is the “zen” theme. This also includes a “starter kit” and clear instruction on how to proceed. For WordPress, the default 2010 (or 2011) theme is also relatively easy to customize.

The new theme folder will reside in the ‘themes’ folder, and have it’s own name. Inside that are the custom files. To activate the theme some basic information needs to be edited in these files:

In Drupal the .info file is changed.
In WordPress the style.css file is changed.

These edits will make the theme available for activation in the admin area of the CMS system.

Once the theme is activated we can start editing the CSS to create the front-end visual look of the pages. The easiest way to experiment with CSS is to use the Firefox Web Developer plugin. The effect is seen in the browser window, but not saved. Once a CSS style is decided upon, it is copy/pasted into the actual CSS file within the theme folder.