Creating your own installable templates for ExpressionEngine 2

A year ago I was perusing the user guide and wiki over on ExpressionEngine's website for any information regarding creating your own installable templates. At that time there were none. At I just did a quick search for some of the files involved like theme_preference.php and default_content.php and the information available is still minimal.

At the time I was selling templates (and making a killing I tell you) so releasing this blog post was something I wanted to do but was torn about. But, in the effort to show how this site is changing, I am now happy to provide what I have learned about creating installable templates for ExpressionEngine 2.x. If you find this useful please let me know. And if you have something to add to the code or to the process definitely give me a hollar and let me know.

Typical warnings apply too. If you grenade your server doing something in this article it's not my issue. If you blow up your EE install as part of this process no whining to me.

I am disseminating this information but since I am not a programmer working for EllisLab and there are no docs on what I am about to describe YMMV. Typical warnings apply too. If you grenade your server doing something in this article it's not my issue. If you blow up your EE install as part of this process no whining to me. I have used this process over and over so I am confident in it but things can go wrong.

Step 1: Build out your EE website

That's right. Build it out. No shortcuts here. Start with your content. Make your design. Think about whether you want there to be color options. Think about all of the little details. Also if you are going to be releasing the designs so people can customize their design then the photoshop or fireworks files need to be organized. Slice up your designs and code them out. Verify that you are using valid HTML and CSS. Bring the code into EE and chunk it out. Make all of your custom fields, categories and channels. Insert your dummy content into entries. Test for cross browser support (sound like fun yet?).

Step 2: Think about the n00bs

Make sure that you think through things that will make life easier on whomever uses your template. For instance email addresses and phone numbers that are displayed in various places on the site. They can be made into a variable that is assigned a value by using a Snippet? Yes I said snippet. Why a Snippet and not a Global Variable? Well from what I can tell Global Variables cannot be acted against using conditional logic as they are lower in the parse order. So if you want to wrap some HTML with a conditional that checks to see if a bit of information like a phone number is available you can't do that with Global Variables. But you can with snippets. For instance:

{if phone}<p><strong>Phone:</strong> {phone}</p>{/if}
code

The above code will only show the HTML and text if there is a value in the Snippet titled Phone (even though that value can be anything but I digress). If you tried that with a Global Variable it would output the HTML and text as it gets parsed prior to Global Variables. Not showing the item and the unnecessary HTML if there is no value make for a cleaner looking site.

So think through the template. Is there any place you can make it simpler to make updating it easier?

Step 3: Thinking through Color Packs

If you are not going to offer different colors then you can skip over this section.

If you are going to offer color packs for a particular template the while you are creating your CSS you will need to separate out any CSS that has a value that is a) a color or b) is an image that has color in it. When creating template I typically develop my sites with a single color in mind and then once I am done I go back and duplicate the main CSS file. Once duplicated I go into the main CSS file and delete any Selectors and Declarations that have to do with color. I will then go into the color CSS file and delete everything but the color pertinent information.

One of the ways you can make it easier for people to change the look and feel of a template is to have a Snippet that assigns a variable that represents the different color packs. So for instance if the user types in style1 then they get the grey and red version and if they type in style2 they get the orange and purple version etc. The way this works is you have to have a CSS style sheet for each of the colors. You can even name them style1.css, style2.css etc. You also need all of the corresponding images for the various color packs. I typically create folders for each of the styles with the images and CSS in them so it is easy to track what CSS file and images go with each color pack for the site.

Wrap up for Episode 1

So that should get you started. In the next episode (should be a day or two) I'll explain the process for packaging up the templates. I'll also provide some code that will make your life a bit easier when doing this type of thing. Make sure to comment with any questions or thoughts.

Marcus Neto is a member of the ExpressionEngine Pro Network. His design studio is called Blue Fish Design Studio. He is also the founder of EETemplates.com. You can find further ramblings on his personal blog or on twitter

EETemplates.com

ExpressionEngine Templates Free Pro Tutorials EE EECMS