Theme development procedure

Part 1. introduction to theme development

Buy the book

These articles are excerpts from the book's manuscript draft. You can read the book here or in an easier-to-read format and finalized by purchasing the finished book.

Table of Contents

Creating your WordPress theme is rewarding. You get exactly what you want and what you need. And nothing more. Nothing extra. And you’ll have complete control over your site – the design and functionality.

Is it complex or laborious? Not really, but you need to understand what you are doing.

Prerequisites

Do you need to be a PHP master, JavaScript guru, or HTML genius? No, but you should have a solid understanding of the basics. That is HTML. Why HTML? Aren’t we using WordPress, which uses PHP? Yes, but WordPress is the engine that spits out HTML to visitors’ browsers. Or to be accurate to the visitor’s user agents. Of course, browsers are not the only user agents we need to support. For example, screen readers use the HTML source code to read navigate the content and read the contents to the user.

Skills needed

To get going with theme development, you need to have knowledge of:

  • HTML (good)
  • CSS (good)
  • PHP (some)
  • JavaScript (some)

It does not harm to know the technologies better, but you need to know this. Why does one not need to know PHP any better? Because one can get a long way with WordPress without writing own PHP code. But you need to understand all the programming basics and understand the PHP code you read.

Theme development procedure

In a simplified manner, the theme development proceeds as follows. 

  1. define the needs for the site
  2. design the layout wireframe
  3. do the graphic design according to the layout
  4. implement the design as a static HTML page (or site)
  5. convert the static HTML to WordPress templates 

For example, you take your HTML page, cut the beginning of the file, and paste it to WordPress header.php. Then replace the content with WordPress functions. Simple as that!

 

Let us start designing a new theme

This article is the first tutorial in a series of tutorials on making your WordPress theme. I progress in small steps in this series and explain everything you need to know to code your theme. 

The series of these tutorials work so that each part deals with one topic. Each article explains

  • what we do
  • why we do
  • how we do

I’ll keep the portions small enough to understand the concept fully. In the next post in this series, we’ll design the front page for our site; We’ll draw the wireframe and create the HTML and basic CSS styling. 

After that, we’ll see how to create an empty theme; The theme requirements, and talk about some tools and write our first WordPress-specific code. 

Till then, check my other articles.

Picture of Kari Selovuo

Kari Selovuo

Leave a Reply

Your email address will not be published. Required fields are marked *