HTML Tutorial: How To Select and Modify a Site Template

By David Fiedler

Probably the fastest way to get a very capable site up and running is to use a Content Management System (CMS) such as WordPress, Joomla, or Drupal as the heart of your site. And one of the best ways of making your new site look good is to pick out a site template (often called a theme) to provide an integrated look and feel. There are generally dozens, if not hundreds, of free templates readily available from the same site where you download the CMS of your choice, and the sheer number of them may well daunt you: how will you possibly decide which one to use?

The first thing to do is recognize whether it's necessary for the template to perform a specific function. Let's say your site is intended to be a showcase for photographs; as a portfolio or display of crafts for sale, for example. You will find that there is a subset of theme templates specifically designed for this type of use, so by looking for these in the first place, you can get your site running faster with less work and customization on your part. Commerce/catalog sites, sales sites (where SEO is a priority), and news sites can all benefit from this approach.

Now you should look at the template with a critical eye towards suitability and modification. Try to find a theme selection overview page that shows you what multiple themes look like, even as thumbnails. This will let you rapidly scan a relatively large number at once, and what you're looking for is a layout that you're comfortable with, whether it's a simple one-column blog or a more complex design with sidebars for organizing ads, links, and tag clouds.

Don't make the beginner's mistake of getting too focused on whether the top graphic is right for you, because that's usually the easiest thing to change. On the other hand, ultra-complicated designs that use multiple graphic files that all fit together are usually artistic, beautiful--and impossible to modify.

The final examination for a template is a look at the code. Most CMS programs have an integrated theme or template editor, and it's safest to use it to open up the various modules that comprise the template. When you do, take a look at the CSS first, if you can. That will give you a good sense of the coding style of the author; if you can't read or understand their CSS (or if it's overly fussy), modifying it, if and when necessary, may well be your worst nightmare. You'll also get an idea whether the author correctly isolated the styles they used into the CSS or left it (incorrectly) in the HTML of the template. If you see comments such as "This will break if the user's monitor is less than 640 pixels wide", run!

Don't forget to take at least a brief look at the HTML code of the template as well. As a good (perhaps I should say bad) example, here's some actual code from the very beginning of a sidebar module of a Wordpress theme:

	  </div>
	  <div class="left-container
I stopped there to avoid identifying the guilty party (who might well have changed their code by now). What's wrong with this? It's very much like what programmers call "spaghetti code". Starting off by closing a
statement means that this can't be read as a standalone module at all; it's hopelessly entwined with whatever came before. Not only that, but you'll probably have to look through over a dozen other modules to even figure out which module came before this one!

While it's true that all modules in a theme are entwined to some degree, HTML like this is dangerous because it's indicative of sloppy work and sloppy thinking. There are probably more minefields like this one that will reduce you to a sobbing mess the first time you delete that leading </div> by accident and totally wreck your site for hours, until you can figure out the problem. So be on the lookout for bad code before you commit to a particular site template, and save yourself a lot of potential grief!

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date