In choosing a CMS: 40+ Great CMS Theming Tutorials

In choosing a CMS, one thing you should consider is the theming or templating process. While some CMSs have very simple and easy-to-use theming systems, others can be a real bear to use.

Below are tutorials for some of the more popular CMSs out there. Some have tons of tutorials available (WordPress, Drupal, Concrete5) while others have limited documentation outside of the official site (Magnolia, Umbraco, TYPOlight). Some CMSs we'd planned to feature had little readily-available theming documentation and were left off the list entirely. In any case, whatever CMS you choose should have reliable, easy-to-understand instructions for creating custom themes, either in the official documentation or easily available within the developer community.

CMS Made Simple

CMS Made Simple is an open source CMS built in PHP.

Getting Started: Templates

This page from CMSMS's documentation covers all the basics for creating your own templates. It also includes information on customizing the default templates.

3 ways to plug a custom CSS stylesheet in CMSMS

This tutorial shows three different ways to use custom CSS with CMS Made Simple. Methods included are using metadata in global admin settings, directly in the website templates, and using the native stylesheet mechanism of CMSMS.

Concrete5

Concrete5 is an open-source CMS released under the MIT software license.

Tutorial: Making a template for concrete5

This tutorial shows how to adapt a regular HTML template for use with Concrete5. The tutorial is illustrated and very simple to follow, with all the code you need included.

Concrete5—Create your own theme

This multi-part tutorial shows you exactly how to create your own template for Concrete5. It covers the elements of a theme, the HTML structure, and more.

Understanding and Building Themes in Concrete

This is the official theming documentation for Concrete5 and includes both a basic introduction to themes and links to more advanced topics.

CushyCMS

CushyCMS is a free, hosted CMS option.

How to Build a Maintainable Site using CushyCMS and Twitter

While this tutorial covers a lot more than just theming, that's what it starts with. And it does a great job of showing how to create a theme for CushyCMS, with very easy-to-follow instructions.

CushyCMS Designer Documentation

This is the official documentation for designers. It includes everything you'd want to know about designing or customizing themes for use with CushyCMS. Topics covered include overriding content types, using Cushy with dynamic languages, XML elements and more.

DotNetNuke

DotNetNuke is an open-source CMS for ASP.NET.

Creating your first DotNetNuke Skin

This is a very basic tutorial on how to create a skin for DotNetNuke. It's a good starting point for learning to create skins, though it doesn't really result in an end-product many people would want to use.

Creating a Skin Template

This is a thorough template on creating a skin that's part of a series on creating websites in DotNetNuke. It includes tons of information on skin design and implementation. Additional tutorials after this one provide more in depth information on skinning and are linked at the bottom of this page.

How to Create a Pure CSS Skin in DotNetNuke

This is a 9-part video tutorial on how to create CSS-based skins for DotNetNuke. It's very complete and based on the Simple Red Leaf layout available from DNN Creative Magazine.

Drupal

Drupal is a free, open-source, PHP-based CMS.

Theming Guide

This is the theming guide available in the Drupal documentation. It covers everything you'd want to know about building Drupal themes, including information for both Drupal 5 and 6. Best practices and information on how to contribute themes are also included.

Create a Killer Band Site With Drupal: A 6-part Tutorial Series

This tutorial is specific to band-sites, but the information it contains could easily be applied to other types of sites. It covers everything from designing the site in Illustrator to Drupal theming and admin. And it gives plenty of examples of similar sites running on Drupal.

How to Make a Drupal Theme

This is a very simple but complete tutorial on how to create your own Drupal themes. It covers theme building based on the PHPtemplate theme engine and Drupal 6. It also covers the different files included in a Drupal theme and what each one does.

From PSD to Drupal Theme TutorialPart 1, Part 2, Part 3

This multi-part tutorial covers everything you need to know to convert a PSD file into a Drupal theme. It's another very complete tutorial that includes all the code you'll need.

ExpressionEngine

ExpressionEngine is a PHP and MySQL-based CMS.

Dissecting the Default Templates

This page gives a complete run-down of how templates in ExpressionEngine work. It covers everything from category headings and parameters to variables to RSS and mailing lists. It's a good starting point for anyone interested in developing EE templates.

Introduction to Templates Tutorial

This video tutorial covers the basics of ExpressionEngine templates. It's another good place to start if you want to design EE templates.

Building a Small Business Site

This series of tutorials covers the complete setup of a website in ExpressionEngine. It includes a few tutorials specifically on how to work with templates, though, all of which are worth a look.

Joomla!

Joomla! is a PHP-based, free CMS.

Creating a W3C Valid Joomla Template

This tutorial shows how to create a CSS-based Joomla theme that's completely standards-compliant and accessible. The end result is a basic, 3-column theme that can be adapted to different needs.

5 Easy Steps Converting HTML Template to Joomla Template

Here's a five-step tutorial for turning just about any HTML template into a Joomla theme. The starting template should be (X)HTML and CSS-based and standards-compliant. This is really a very simple process and the tutorial outlines the steps very well.

How to Create Your First Joomla Template

This tutorial covers all the basics to creating a Joomla template, specifically geared to someone with no Joomla templating experience. It's highly illustrated, making it really easy to follow. It's also one of the most extensive Joomla theme tutorials out there.

How to make a Joomla theme

This is a very basic tutorial covering creating your own simple Joomla theme. It consists of only ten steps and provides sample code.

Magnolia

Magnolia is an enterprise-level CMS built on the Java platform. There is a free, open-source edition available.

Templating Guide

This is the templating tutorial from Magnolia's official documentation. It covers the basics of creating a simple template.

MODx

MODx is an open-source "application framework" built on PHP.

Beginner's Guide to MODx: Creating the Template

This tutorial is from the MODx wiki and covers all the basics of theming with MODx. It includes all the sample code you'll need and is broken down in easy-to-understand sections.

Theming MODx

Here's another wiki-based tutorial for creating MODx themes. Sample code is included, though this tutorial doesn't seem to be quite as complete as the one in the official documentation.

Building a Website with MODx for Newbies—Part 3: Working with Templates

This tutorial gives thorough instructions for customizing an existing template to work with MODx. Additional tutorials in the series get into more detailed customizations and other aspects of working with MODx.

Plone

Plone is a free, open-source CMS.

Creating a new theme for Plone: a real-world example

This is a very complete tutorial that covers all aspects of building a Plone theme from a Photoshop mockup. It shows how to do everything from creating the basic foundation for the theme to styling the individual elements.

Creating a Custom Theme for Plone

This is another incredibly detailed tutorial for creating Plone themes. It covers everything from creating custom CSS to overriding visual elements.

Radiant CMS

Radiant is a free Ruby On Rails CMS.

Radiant CMS

This tutorial covers the basics of working with Radiant, including how the pages are set up and how to design around the basic page structure. It shows the basic divs used and how theme and template files are generally set up.

SilverStripe

SilverStripe is built on the open source Sapphire development framework.

Developing Themes

This is the theme development guide right from the SilverStripe Documentation. It's a great place to start, as it explains all the basics of how SilverStripe themes are structured and the core files required.

Tutorial for SilverStripe

This is a tutorial for creating a very basic SilverStripe theme. It includes three steps. In the end, you get a framework that allows for quick and easy theme development without compromising the capabilities of SilverStripe.

Building a Theme from a Static Template

Here's a tutorial that covers how to adapt just about any website template to work as a SilverStripe theme. It includes a sample template to work with (both the starting files and the completed ones). It also includes documentation for working with other templates in case you'd prefer to start with something different.

Tutorial: Building a Basic Site

This is the tutorial in SilverStripe's official documentation. It covers building templates in addition to other basic functionality of the CMS.

Textpattern

Textpattern is an open source CMS built on PHP and MySQL.

Your First Textpattern Theme

This is an 8-part tutorial on creating a Textpattern theme, specifically geared at beginners. It covers forms, pages, excerpts, secondary pages and forms, and tags, among other things. It's very complete and easy to understand.

Page (Template) Related Tags

This page gives a complete overview of the tags used in building page templates (as opposed to form templates) for Textpattern. It's a must-have resource for anyone building Textpattern templates.

TYPO3

TYPO3 is a GPL-licensed CMS built with PHP.

Creating TYPO3 Templates

This is a very detailed tutorial from ThemesWiki that thoroughly explains how to create templates for TYPO3. It covers the elements of a template, objects and properties, using TypoScript, integrating design templates, using the auto parser template and more.

TYPO3 Template Design Guide

This is a rather short article on creating maintainable sites and templates in TYPO3. It includes hints for using TemplaVoila, too.

Futuristic Template Building Tutorial

Here's a very in-depth tutorial on creating TYPO3 templates. It includes sections covering integration of an HTML page template with TemplaVoila, creating additional page templates, "flexible content elements," and information on TypoScript.

TYPOlight

TYPOlight is a free, PHP-based CMS that uses Ajax and other "Web 2.0" technologies.

Tutorials: Creating Custom Templates

This tutorial is from the TYPOlight documentation and covers all the basics of creating your own layouts. Topics included are creating basic modules, importing style sheets, creating page layouts and the site structure, adding content, and previewing and modifying your templates. You can also watch the tutorial as a narrated screencast.

Umbraco

Umbraco is an open source CMS built on ASP.NET.

Understanding Templates & Stylesheets

This article from the official documentation offers the basics of how Umbraco builds pages and using templates. It's a perfect starting point for learning how to build templates for Umbraco.

WordPress

WordPress is a free blogging platform that can be modified to be used as a CMS.

So you want to create WordPress themes huh?

This is one of the most complete WP theme-building tutorials out there. It consists of 25 separate lessons and covers how the WP templating system works, The Loop, post meta data, search forms, calendars, comment templates and pretty much everything else about themes in WP. If you want to build a theme completely from scratch, this is the tutorial to show you how.

How to create a simple WordPress theme

This tutorial gives instructions for creating a basic, simple WP theme that includes the header.php, index.php, sidebar.php and footer.php template files, in addition to the style sheet. It's very simple and straight-forward, but a great place to start if you're new to building WP themes. The basic steps can easily be adapted to building more complex themes.

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Here's another very complete tutorial, offering up 11 lessons on how to create a WP theme. It focuses on creating a theme with good SEO, valid and logical semantic markup, separated trackbacks and comments, two widget areas, and all the basics you'd expect from a WP theme. The lessons are ordered logically and include theme development tools and information about the WP template and directory structure.

How to convert any web template into a WordPress theme

Sometimes you don't want to design a theme from scratch. Maybe you've found the perfect theme (or designed one), but it's just a regular web template, not a WP theme. This tutorial will show you how to convert that web template into a WP theme without too much trouble. It also includes a link to a video tutorial showing how one template was converted.

How to Create a WordPress Theme from Scratch

This tutorial shows how to take a basic HTML/CSS template and convert it to a WP theme. It's incredibly complete, covering every aspect of WP theming. It also explains how themes are structured and how to create the core theme files.

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She's been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.