Get a Quote

Designing Your Own WordPress Themes

Posted in Code

I get a lot of emails asking how I learned to design and build WordPress themes from scratch, and if I have any tips for those interested in building their own themes, so I thought I’d write a post about it for anyone else who might like to know.

My History with WordPress

I kind of fell into web design as a profession by accident. While I’ve always been pretty tech- and computer-savvy, I was never particularly interested in programming or computer science, so web design was never really on my radar. A few years ago I purchased my own domain and hosting (for a site that no longer exists), and installed my first WordPress blog. I was so excited to have my very own place on the web, and I wanted to take it a step further—I wanted to make it look like my place.

I knew nothing about web design (other than the visual stuff—I was very well versed in Photoshop), had a very basic knowledge of HTML, and had never even heard of CSS when I first started. But I figured out that I could take a theme that I liked the general layout of, open up the graphics in the theme’s images folder and create my own graphics over top of them, save them with the same names and suddenly have a theme with my own design. Around the same time, a friend of mine explained the general idea of CSS to me, which piqued my interested and made me want to learn more. I picked up a book that explained HTML and CSS and how to use them together, and that set me on the road to building my own WordPress themes from scratch.

Tips for Those Interested in Building Their Own Themes

If you have a self-hosted WordPress blog that you want to learn to customize yourself, or if you’re interested in getting into WordPress theme creation in general, here are a few things that really helped me get started:

  1. In order to be truly creative and free in your theme-building, you really need a solid grasp of current HTML and CSS standards. Slicing a layout in Photoshop and saving it as images and HTML, or using the WYSIWYG side of Dreamweaver will NOT produce web-standard HTML. Take the time to learn how to correctly hand-write your own HTML and CSS from the ground up—you will be so glad you did!
  2. Set up a local server environment on your computer for offline WordPress development. XAMPP is the one I use. It’s easy to setup and runs everything most CMSs, including WordPress, need.
  3. Peruse’s Theme Library. Don’t just look at the themes for their graphics and visual appeal; look for interesting layouts, or functions. If you see something that’s new to you, download the theme and plug it into your local dev environment so you can dig through the code and learn how it works.
  4. Google “how to create your own WordPress theme”. There are dozens of great tutorials out there that will take you through the basics of a WordPress theme. If you have a hard time understanding one tutorial, try another one. Different people take different approaches—find one that makes sense to you.
  5. Work from a framework. What’s a framework? It’s like a theme template, a super simple (plain, even) theme that has all the basic necessities of a theme with a basically blank stylesheet just ready for your new design. Create your own framework or grab one of the many already-existing frameworks out there. No need to reinvent the wheel every time you create a new theme. Working from a framework will save you a ton of time!

Getting Advanced with WordPress

The list above are things that are helpful if you’re just getting started and you want to focus on customizing the way WordPress looks. But the fun of WordPress doesn’t end there. If you’ve got a little PHP under your belt, WordPress offers a ton of functionality beyond the standard template tags. Explore WordPress’ Codexif you’re wanting to dig deeper and find creative ways to use WordPress. Also be sure to check out the vastPlugin Library to add even more functionality to your themes. If you’re creating themes for sale, look into adding theme options and an admin panel to your theme.

Some Great HTML, CSS and WordPress Resources