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 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 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 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 is a free, open-source, PHP-based CMS.
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 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! 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 is an enterprise-level CMS built on the Java platform. There is a free, open-source edition available.
This is the templating tutorial from Magnolia's official documentation. It covers the basics of creating a simple template.
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.
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 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 is a free Ruby On Rails 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 is built on the open source Sapphire development framework.
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 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 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 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 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 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.
Thanks for adding my MODx tutorial to the list! Excited to see that it made it into this post. :)
Excellent list of tutorials, I’m going to be busy for a while :)
cool stuff you have in this post! Very useful and informative. Thanks for compiling them up
Cameron, I love your lists ! Thanks
RT’d, bookmarked and now commented.. CMS theming tutorials – Great article!
Thanks for including Train-ee!
Gotta bookmarked on this one.
Great list, Thanks.
thanks, Cameron, for the great post. I always love your posts. the creating a psd to drupal tut was good to read.
very helpful cms theme tutorials, thanks for the nice list..
Excellent round-up, thank you so much…
these of all listed tutorials helping me about my development work. thanks
thanks , really need a cms :-)
very good information,
thanks for sharing. Ready to go to the links
What? No eZ Publish theming? ;)
As usual, another good article from Cameron.
Tutorial on WP theme creation comes at the right time as I am keen to create one on my own. Hope those will help me get started. Thanks.
wow..great list there..:P thanks a lot
Great List. Thanks for the post
Wow! Deffo bookmarking this. Cheers.
hell of a list, thanks! you just saved me 8 hours of web searches…
they dont develop radiant anymore, now there’s wolf and frog. http://www.wolfcms.org and http://www.madebyfrog.com .. wolf is more active.
This is a very useful article but could go a step further and score on how search engine friendly the platforms are. Let’s ensure that having the write vehicle built to house the website is important decision for business owners, but how easy is it to drive? Businesses are looking to be in command of their own website, everybody says I want a content managed website solution. But how competent is the person in the business who will drive this CMS on a day to day basis. There are some very good platforms listed here such as Joomla and Unmbraco, and whilst website agencies can very quickly slip behind the wheel and make these platforms work, the end user is most likely to be a novice who has been given the task to manage the website on a day to day basis. That person did not set out to be a web developer and if the CMS is good, sufficient training time should highlight the features they need to know about in order to be competitive online when using the platform through them being able to create killer headline pages that sell. Another CMS I believe should be on the list is Redback and is in use on one of our websites http://www.internetbusinessmarketing.co.uk. Once again congratulations to the author of the article.
Wow! What a great list. I will have to check some of these out.
its great to see CMS tutorials……..Thanks
This looks brilliant, but unfortuantely I am trying to edit a wordpress thesis site. Do you have any tutorials like this for creating, a thesis theme, skin etc?
That would be awesome.
Those interested in Wolf CMS might be interested to know a basic theming tutorial is available in its wiki:
TY for the useful information! I would never have found this on my own!
I agree with your thoughts here and I really love your blog! I’ve bookmarked it so that I can come back & read more in the future.
It is always best to learn the underlying computer language and a good base of HTML therefore as to learn PHP in a better way.
wow massive list thanks ! :) especially TYPO3 Template Design Guide
Great list on all of the different CMS’ and their themes. I’ve worked quit a bit with Joomla, Drupal, but haven’t hear of the others. Nicely don!
Hi! This is a great list you’ve made. To tell the truth I didn’t even know that there are so many platforms and possiblilities of the theme creation. So, thanks a lot!