Top 5 Common Mistakes in Theme Building

By

I see a ton of theme builders sprouting out of the woodwork everyday.
The problem is a lot of them have great ideas about the design, but the big part (coding) is terrible.

So here are the top 5 mistakes I see in themes, especially WordPress themes..

  1. Using tables for layout. This has been outdated for a looooong time.
  2. Using JavaScript to make multiple level drop menus.
  3. Using a pile of CSS hacks to support versions of IE.
  4. Adding a bunch of required plug-ins.
  5. Not validating their code.

So lets break these down.
#1. This simply should not happen, but I still see people creating their layouts with tables. This is a No No!

First because it is not proper markup. Tables are for tabular data ONLY.

Second because you end up with a lot more code than if you just used Div’s and CSS.

#2. Using JavaScript for creating drop menus drives me nuts…

You should never use JavaScript for functionality, unless it is absolutely the only way.
If you shut JavaScript off in the browser and the navigation breaks, its pretty useless.
Not to mention a drop nav can be created in Pure CSS. Then add a little JavaScript for effects, like, delay or animation.

#3. Using CSS hacks to support browsers is one of the most common things I see. (Not talking about vendor CSS eg. -moz)

If you know what yo are doing, it is not necessary and a waste of resources and time.
Any layout should work out of the box with the same CSS for all browsers, including various IE versions.
I see some themes with 4-5 different styles sheets for the various IE versions. That is ridiculous and should not be needed.
Fix your code, it can be done without hacks.

#4. If you are going to create a theme that requires plug-ins…..

For God sakes take the time to merge its style sheets and JavaScripts with your themes. Then use the WP hooks to disable the plug-ins versions.
A lot of these plug-ins can make for a very slow theme do to extra style sheets and JavaScipts being loaded.
This is not necessary.

#5. Non valid code affects a lot of things.

Firstly, the browser has to take the time to figure out what you are trying to display. (Wasting resources)
If it is bad enough the browser switches to Quirks mode. (Wasting even more resources)

Second, it can hurt your SEO. You can argue it wont, but even Google suggests it in their articles on good SEO tactics.
So simple check your code and validate it with the available tools. http://validator.w3.org/
Not to mention it also makes it harder to make your theme display properly and the same across all browsers.

These are almost pet peeves of mine. I should have titled it as that.
If you take the time to avoid the 5 mistakes mentioned here your theme will load faster, look better in all browsers and bots will love you for it.