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.

style.css

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

functions.php

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

index.php

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.

header.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.

footer.php

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

sidebar.php

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

blog.php

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.

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.


Notice: Use of undefined constant WP_PB_URL_AUTHOR - assumed 'WP_PB_URL_AUTHOR' in /app/wp-content/plugins/adsense-box/includes/widget.php on line 164

Notice: Use of undefined constant WP_PB_URL_AUTHOR - assumed 'WP_PB_URL_AUTHOR' in /app/wp-content/plugins/adsense-box/includes/widget.php on line 164

Notice: Use of undefined constant WP_PB_URL_AUTHOR - assumed 'WP_PB_URL_AUTHOR' in /app/wp-content/plugins/adsense-box/includes/widget.php on line 164
Please wait...

Subscribe

Want to be notified when a new article is published? Enter your email address and name below to be the first to know.