Posted on Leave a comment

WordPress Theme Guide

How do you turn html into a WordPress Theme?

This article is geared towards students and is intended to be a refresher for when you need to translate HTML designs into a WordPress theme in a hurry. My assumptions are that you know enough HTML and PHP to work with WordPress and that you just need to be guided through the steps.
First we start with creating a new folder in the wp-content/themes folder to contain all of our WordPress theme and all of the files mentioned in this article. Our first file in our new WordPress theme is going to be style.css in the root folder you just created. This file is the heart of any theme, containing your custom css stylings and a header comment that credits the author, names the theme and points to your email and/or website.


The following is an example style.css file header comment. This comment is required and tells WordPress about your custom theme.


Next, create functions.php in the root of your and start it with the following code. This code adds your stylesheet to the output of the wp_head() function, and registers our sidebar widget area


Next create your index.php from the index.html of your design to provide a default template for your site. Replace your content with the relevant php tags. The following is a minimal example that breaks everything into div tags with id attributes all set for styling:

You now need to fill in the blanks of your template by chopping up your design’s index.html into a header, a footer and a sidebar. Save these files as header.php, footer.php and sidebar.php.


This is the top of the final rendered html documents. it should contain your <!doctype> tag, your <head> tags and usually your top navigation or banner.


This is the bottom of your site and should contain copyright info and the wp_footer(); function


This is a widget area in sidebar form. you registered this widget in functions.php above.

As a final note, custom page themes can be created by copying index.php and adding a comment to the top of the file.

The following is an example custom home page with a blog roll designed to work with Zurb Foundation 5’s grid system which I teach to my students. This is


Finally screenshot.png is an image that should be a screenshot of your theme in all it’s glory. WordPress will show this image on the Appearance->Themes page.

The above is the bare minimum you need to put together for a theme in the classes I teach, and should function as a crash course in building a WordPress theme from an html design. Of course WordPress theming is a deep rabbit hole with a lot of options and limitless possibilities, I encourage you to read the WordPress Codex! To get more in depth, check out the codex article on the matter.

Posted on Leave a comment

Basic WordPress Widget Tutorial

Sometimes you just can’t find a pre-built widget that does exactly what you want, when you run into this scenario, your best bet is to build something from scratch. This tutorial will is an answer to “How do I build a custom WordPress widget?“.

WordPress widgets are objects that have several required parts:

  1. Constructor (__construct) – actions to take when the widget is first created like enqueueing javascript or stylesheet files.
  2. Front-end  (widget) – the widget’s HTML output
  3. Back-end (form) – the form for the widget’s edit interface in the Admin section
  4. Update (update) – catches the form submission from the back-end form, updating the database

The easiest way to add a custom widget type to your theme is to build a class that looks something like this:

To embed this widget type into your own custom theme, just include this php in your functions.php

To add this widget type to your custom plugin, include this code in a standard plugin file.