How to Design a WordPress Theme

Almost one in every four websites on the Internet is powered by WordPress. WordPress is a free content management system that allows even non-technical people to quickly and easily build beautiful websites, and it’s used by major corporations and small businesses alike. But to make your WordPress site truly unique, you can design your own customized WordPress theme. I was recently checking out some sites that I like and I realized that while I like those ones, I wanted something a little more minimalist and me. That’s when I decided that it was time to start learning to make my own theme (I think this will be an ongoing project for me).

Before You Begin

In order to design a new WordPress theme, you’ll need to have some basic knowledge of coding first. WordPress themes generally use HTML, CSS, and PHP. Once you have a basic understanding of the languages, you’ll want to check out WordPress’s own guidelines for building a theme, found in their Codex. After all these basics are out of the way, it’s time to get creative!

Most web designers begin by making a mockup of the webpage – a graphic representation of the design. This is usually an image or a graphic file and can be created with GIMP, Adobe Publisher, or even MS Paint. If you want a different style for your homepage (different headers, different slideshow, etc.), you’ll need to do two separate mockups.


The first thing you need to code is the stylesheet – the core of every WordPress theme. Make sure that you use WordPress’s guidelines for the stylesheet header, and code with current CSS. Almost every theme will use a functions PHP file, so that’ll be the next big file to code.

The next relatively easy pages to code are 404.php (the page that shows up when a visitor hits a 404 error), image.php (which tells your theme how to process and display images), and attachment.php (which tells your theme how to process and display attachments). After that, the index.php, front-page.php, and home.php will provide the actual designs for those pages. The single.php, single-{post-type}.php, and archive.php pages will come next.

Finally, you’ll want to finished out the coding with comments.php, page.php, category.php, tag.php, taxonomy.php, author.php, date.php, and search.php files. The right-to-left stylesheet (rtl.css) can be generated automatically for you using a WordPress tool found on their website.


If you’ve been designing for WordPress before, you may already have a dummy installation of WordPress on your local computer. If not, you’ll need to first download Xampp (free download) to set up your local host. Then, add WordPress and any existing plug-ins or extensions to your Xampp. Once this is done, you’ll have a basic hosting environment that allows you to test your theme locally.

When your theme is complete, you’ll want to compress all the files into a .zip format, then install the theme through your WordPress installer just as you would with any other theme. Experimenting with your new theme on a localhost allows you to pinpoint errors and troubleshoot your code before adding it to your website or to the WordPress community directory.

Designing WordPress themes can be a fun and easy way to build a customized website for yourself or your friends. It’s also good karma; if you release it to the public, you’re giving something back to the WordPress community. Finally, it can be marketable! A good WordPress theme designer can be a valuable asset to any modern web design team.

Tips for Teaching Yourself Web Design

Designing your own website can be a way to share your passion with the world, but it can also be a marketable skill. The advantage to learning web design is that you don’t need an expensive degree or many years of training. All the tools you need to learn web design are available for free online!

The basics
With a large website-building company, different tasks will be divided and assigned to different team members. A graphics designer will create a logo and design pictures, images, and color schemes. A web designer will create a mockup of the site, paying attention to formatting, placement, and aesthetics. A programmer will then create the site using web programming languages.

For a solopreneur or a hobbyist, these functions will usually be undertaken by a single individual. If there’s a little money in the budget, a logo design may be outsourced to a freelancer on a site like Fiverr or Odesk. Colors can be taken from the logo to use on the site. For most people, the biggest challenge will be using programming languages.

All those acronyms!
Scanning the resume of a web designer can be confusing, as it is often written almost entirely in acronyms! These acronyms are usually names of specific programming languages or platforms. Some of the most common that a new web designer will encounter are:

  • HTML: Hypertext Markup Language. This is the most basic language of the Internet. It changes and updates over time, and most current websites use HTML5 or XHTML.
  • CSS: Cascading Style Sheets. This is used to define styles and formatting for a website.
  • PHP: Now stands for Hypertext Preprocessor. PHP is a language that communicates with a database to send or retrieve information. It’s essential when designing with a CMS.
  • JavaScript: JavaScript is the most common programming language in the world. It’s used to create dynamic changes to HTML.
  • CMS: Content Management System. This is a pre-designed system that allows easy updates. CMS is designed to be easy to install and use, and there are a variety of free and commercial CMS platforms that can be altered and updated in many ways. These include WordPress, Joomla, Drupal, Ruby on Rails, and many other platforms.

Learn in the right order
If you’re brand new to web design, the most important language to learn is HTML. Once you’ve mastered HTML, you can move on to CSS, PHP, and JavaScript, in that order.

Working with a CMS allows you to create a website before you’ve fully mastered these programming languages. You can find free CMS platforms, templates, themes, and plugins on the Internet. Learning your programming languages allows you to customize a CMS to meet your unique requirements, but if you’re the type of person who wants to get started immediately, a CMS can help to reduce your learning curve.

Getting help
One of the first things a web designer learns is that everyone needs tech support sometimes! If you’re using a CMS, you can generally find help on forums associated with that CMS. You may find tech support tips in a wiki that was designed for the CMS or for the themes or plugins you’re using. Difficulty with your web server can usually be handled through email or live chat.

With modern programming languages, an abundance of free education on the Internet, and user-friendly CMS platforms, even a novice can create a beautiful website in a short amount of time. Web design can be a useful skill, but it can also be a fun hobby!