There are a lot of WordPress themes in the world and most of them suck.
They can often be full of poor or bad practice, and in a lot of cases, can conflict and break with plugins. A good theme, can be stretched, pushed and pulled and never break.
If you want to get into WordPress theming, or have been doing it for a while, I highly recommend starting with a proven theme. Whether it be a free theme, like Twenty Ten, or a premium theme like Standard Theme, it’s a good idea to work with and manipulate themes that are founded on good code. It’s also a great way to become a better theme builder, as you can learn new techniques.
Now, here are 10 tips to help you create solid WordPress themes:
1. Respect HTML and CSS Standards
Both HTML and CSS have defined standards, and there is a reason for that. Keeping clean code will increase cross-browser compatibility.
HTML, XHTML and HTML5 code can be checked on theW3C website.
If you don’t respect the code, the code won’t respect you.
2. Respect WordPress Coding Standards
Now, I could have combined this with number one, but then I would have had to titled this post “9 WordPress Theming Tips”, and face it, that’s just not as catchy.
When WordPress releases an update, there are thousands of themes and plugins that must be kept in harmony. The only way that can be done, is to establish standards. If you do any kind of theming in WordPress, you will eat, sleep and breathe the WordPress codex. When you’re theming, stick to the standards. You won’t regret it!
If you are a seasoned coder, do not use PHP shorthand:
[cc lang=”php”]
[/cc]
Use full PHP tags:
[cc lang=”php”][/cc]
You can read the complete coding standard guide can be read on WordPress codex.
3. wp_head() is Your Friend
If you don’t have wp_head() between your <head> and </head> tags, many plugins won’t work. Also, be sure you have wp_footer(); in your footer.php.
4. Hack with Care
Jean-Baptiste Jung (Cats Who Code) told this story:
Last year, Gravity Forms developer Carl Hancock let me know that one of my hacks (Named Disable WordPress automatic formatting on posts using a shortcode) was intensively used on themes sold at Themeforest, and caused conflicts with Gravity Forms.
This doesn’t mean you should stop using snippets and hacking your site theme. What this does mean, is that you shouldn’t hack a theme you’re going to publicly distribute, unless you explicitly know what you’re doing.
5. Strong Foundations Lead to Strong Themes
You can save a lot of time and headaches by starting from an existing theme. If you start with a stable theme, like the default WordPress Twenty Ten, or an impressive premium theme, like Standard Theme, you won’t regret it!
Cats Who Code recommends Cris Coyier’s Blank Theme as a starting point, or Constellation as a blank HTML5/CSS3 theme.
I think it really depends on what you’re trying to build, as well as your experience level.
6. Use Localized Strings
This is something you will want to do if you want your theme to go public. It makes your theme or plugin translatable into another language.
First, use the _e() function:
[cc lang=”php”]_e(“Text to translate”, “textdomain”);[/cc]
Also, using __(); will work as before, but returns the text:
[cc lang=”php”]_e(“Text to translate”, “textdomain”);[/cc]
If you want to learn more about building multilingual WordPress themes, I recommend reading Cats Who Code’s, “Easily create multilingual sites with WordPress.”
7. Prefix Your PHP Functions
If a theme and a plugin use the same name for a function, the site will break. So, instead of using something like:
[cc lang=”php”]function display_stuff($stuff){
…
}[/cc]
Simply adding a prefix can make a world of a difference:
[cc lang=”php”]function eric_display_stuff($stuff){
…
}[/cc]
You could use your name, initials or plugin name. Whatever you do, add a prefix.
8. Test and Build with Content
You really don’t know how your theme is going to behave until you drop-in some content.
Cats Who Code recommends:
… use a plugin named WP Dummy Content, which allow you to create posts, pages, categories and more so you can check how good you theme looks when it’s full of content.
Another tool to have in your tool box is the WP Lorem Ipsum Post Pack, a XML file that contains categories, sub-categories, pages, sub-pages, 30 test posts, tags, thumbnails via custom fields, and a “Testing the Elements” post so that you can test html elements, such as <h2> and <blockquote>, so you can test your theme in depth.
Oh, yea, I’ll be using those!
9. Check Your Theme
If you think your ready to go public with your theme, make sure your theme supports the latest WordPress functions with the Theme-Check plugin. It not only tests your theme, but will tell you about any coding mistakes.
10. GPL is Hawt
WordPress themes have to be GPL compliant. So, unless you want to be out-casted from the WordPress community, or even a lawsuit, respect the WordPress license.
This was a great list of tips from Cats Who Code, but if you have anything you would like to add, please do!
[via Cats Who Code]
Eric J says
Your formatting got messed up in point 2, and yeah prefixing functions is important!
Eric Dye says
That was a real, “Not to self” for me.
Thanks!
Stephen Bateman says
1. This article is amazing.
2. I’ve tried a bunch of different “blank” themes, and none of them come close to Standard (for building on top of). And that *isn’t* just because I work for the makers of Standard 🙂
Eric Dye says
#FACT