Theme design process

1 - from HTML to WordPress theme

published: 13.02.2018

This article describes the WordPress theme development process. It all starts with a sketch of your website, description of the site, its content, and functions, wireframes, mockups, static HTML -site etc. This is my method of making a WordPress theme. In brief – I start with a static website with all necessary page types with sample content and ready CSS styles.

The idea is to make first a static website and then convert it to WordPress theme

Planning a new website

List features and requirements

In this series of tutorials, I create a WordPress theme for a new site. The site is should have a front page with a large image, a page for contact information with a form and map and there should be ability publish articles so it needs a blog. This describes the need and features of the site. The site should work well on mobiles and desktop. Support for older browsers is not too important, so the design can differ between modern and older browsers.

So we need at least

  • two-page templates; front-page and contact page
  • article page for posts
  • archive page to list posts
  • an embedded map
  • a contact form
  • plus a plethora of WordPress related stuff

But this is not all I have planned to implement. In this series of tutorials, I’ll start simple and then add more features as time and course passes by.

There are two reasons for this. First of all, I do not want to bind myself to a plan, that later appears not to be functional for the purpose of the tutorial. The second reason is, that I’m eager to get started. Planning a site with all possible features and styling would take way too much time and effort. For a real-world customer case, I would do all that but let’s start these tutorials and see where they take us. Starting with a simple goal, we can get right into the business.

I’ll start with simple design and add new features along the course

So, let’s start simple. Besides, it’s better for you if the tutorials only cover one subject at a time.

Wireframing the site

Always start with a wireframe. A wireframe is a drawing of the page so we need to draw every possible page we are going to implement and we need to plan for both small and large screens. A wireframe is important!

There is not such a small web project that a wireframe is not needed

A wireframe acts as a plan for a developer to create page structure. That is to design the HTML. For a designer, wireframe show what to design and also what not to do. A wireframe is part of project documentation, it helps estimate time to create the site, it helps to describe the project to the customer and everyone participating the project. It helps to test the design idea and it is helpful in every aspect you can imagine. Never start coding without a wireframe.

a table desktop with hand drawn wireframe sketch and mac computer

Static HTML version of the site

The next step is to create the site mockup using HTML. So we really do a static HTML version of the site first. Why? Because with that we can test the site and our ideas. We also create all the styling, the CSS using this static site. When we are ready to start developing the theme, we “slice” the HTML in pieces and copy them to WordPress theme files. Replace the content with WordPress functions and we have a ready-made and styled WordPress site. Simple as that.

I’ll add a link to the static version of the site when the code is needed. That is when I write the first tutorial of theme code.

Creating local WordPress environment

When we have our static HTML version ready, we can start working with WordPress. For that, we install a local development environment (web server with PHP support and MySQL database). Install a WordPress and start coding. All this is explained in detail in another tutorial. When we have finished the theme development on our local machine, we can go live.

Going live on our site

Going live involves getting a domain, hosting, installing WordPress, setting the site up, transferring the new theme on a production server and create content. The content can be created on our local machine in the production environment. I explain the alternatives when we get there.

Next step – building our development environment

In the next tutorial, I’ll explain how you can get yourself a local development environment. After that, I write about WordPress installation and then we are good to go with the development.

 

 

 

 

Author of this site: Kari Selovuo

I'm a web developer/designer, instructor, and writer who has a mind of a developer and a heart of a designer. I like to share my knowledge and help others learn web development.

Twitter: @KariSelovuo

Leave a Reply

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

0 Shares
Tweet
Share
Share