Concrete5 differs from many other content management systems on the web in that it lacks both a template engine and a theme compiler. Instead, all the core components of a site’s layouts are handled behind the scenes – meaning designers have an unprecedented degree of freedom when it comes to customizing how their site looks. As an added bonus, it also makes Concrete5 a fairly simple platform to learn from a development perspective – meaning a fledgling developer can get to work creating their own theme that much faster.

Now, just because Concrete5 theme development is a little simpler, doesn’t mean it’s going to be a cakewalk. There are still certain details you’ll need to understand – and certain procedures you’ll need to follow – in order to find success. Keep these best practices in mind, and you’ll be designing like a pro in no time at all.

Make Sure Your Template Has The Necessary Elements

Unless you plan to code your entire theme yourself from start to finish, it’s generally easier to start things off with a template. There are plenty of free templatesavailable all over the web, so it shouldn’t be too difficult to find one that you like. Just keep in mind that, in order for it to work with Concrete5, it needs the following features(this is true even if you’re creating your own template):

• Flexibility – the template needs to be able to work with Concrete5’s blocks (see below).
• An unordered list for the navigation menu, with images rather than plain text.
• The css file that’s included with the template must be named “main.css.” You can do this yourself.
• A “default.php” page type – most free themes will have a file named “index.html” which you’ll need to rename.”
• A “view.php” page type.

Know Your Blocks

As you likely know, Concrete5’s smallest piece of content – and the unit by which virtually the entire system is arranged – is called a Block. This can be just about anything – plain text, an image, a video, an audio file; a Block is whatever content you want to create. When designing a theme, there are a few details to keep in mind regarding Blocks:

• There are a number of Core Blocks in Concrete5 – but if none of those blocks suit your needs, you shouldn’t be afraid to customize them – or even create your own.
• One of the first things you should probably do is create a custom template for your Blocks, to allow for easier customization.
• You can limit the number of blocks a certain area will accept in order to prevent certain areas of your page from being overloaded with content.
• If you hard-code a Block into a theme, then it won’t be editable – so only do this sparingly (for example, if you’re selling your theme and want to include some sort of watermark on it). For static elements, it’s usually better to use Global Blocks.
• Of all your Blocks, Page List is your best friend. Familiarize yourself with it.

Set Up A Development Environment For Testing

Once you’ve figured out what template you’re going to use, your next step will be to set up a development environment on your computer. You’ll be using this for both construction and testing of your theme – I’d advise against testing it on a live website. Concrete5’s documentation section has a few awesome recommendations as to what development platform you should use. While you’re at it, you should also follow their recommendation and install firebug.

Use And Reuse – And Keep It Simple

One thing virtually every veteran developer will tell you is that whenever you’re looking to implement functionality that exists outside of the basics, you shouldn’t immediately default to coding it yourself. Particularly if you’re incorporating HTML into your theme, you’re going to want to do a bit of research and see if someone’s already created a module, addon, or code that does what you want to do. I’m not saying you should never code something yourself – only that you shouldn’t do more work than you absolutely need to.

Stay Away From jquery

One fairly common mistake a lot of novices make is to include jquery in their theme. Since Concrete5 already includes the jquery and jquery ui libraries, importing them through your theme will break the editor. It can also make a page completely unreadable – requiring you to go into the database to repair it. So, basically…don’t use jquery when you’re designing your theme. You have been warned.
This is by no means a comprehensive list – as such, we’ll likely be revisiting this topic at a later date. For now, however, this should be enough to get you started. Happy coding, and we’ll be sure to keep an eye out for your theme on the Marketplace!

Image: Flickr/AnnieAnniePancake