Web Courses Academy Blog

How to make a WordPress theme – Part 1

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
wordpress theme from html
Quick jump to topics
Sharing is caring

create a wordpress theme

In this course, we will show you how to create a WordPress theme from HTML to serve as our portfolio and blog site. The existing html template is available at http://theme.webcoursesshowcase.com/ and you can refer to it as we build the theme.

You can download the theme here: https://www.webcoursesbangkok.com/wp-content/uploads/2015/10/simple-portfolio.zip

We are assuming that you already have a local development environment in place and have already installed WordPress locally.

Now that you have WordPress up and running on your local machine, we need to download Underscores and set it up for the new project. The starter theme Underscores is particularly build to serve as a starting point for custom WordPress themes. The theme is well-maintained, often updated, and by using it, you take advantage of the latest WordPress has to offer.

Underscores is available from http://underscores.me/ as well as from GitHub. For the purpose of this course we will download it from Underscores.me.

Before you download the theme, you have the option to enter certain information into the required fields so that you are not required to do it later in the theme’s stylesheet and certain templates:

  • Theme Name – the unique name of your theme.
  • Theme Slug – themes are required to have a unique slug so that certain functions are not in conflict with functions from plugins, for example.
  • Author – your name
  • Author URI – the theme’s homepage.
  • Description – a description of what the theme is about.

 

create a wordpress theme

After you fill in all the required information and press the Generate button, the site will create a zip file of your theme. Then, you can go to WordPress dashboard -> Appearance -> Themes and install the new theme from there in just the same way as you install any other WordPress theme from a zip file.

After activating the new theme, in our case the theme is called Simple Portfolio, the front end of your site should look in a similar way to the screen shoot below. It is a far cry from our original design and to create a WordPress theme, we still have a lot of work to do to make it resemble the design and function as expected.

create a wordpress theme

I use the NetBeans IDE whenever I start a new project to create a WordPress theme from HTML but you can use any text editor you like and feel comfortable with.

Immediately after I download, install and activate Underscores, I create a new project in NetBeans with the same name as the name of the theme I’m building.

create a wordpress theme from html

After you specify the Project Name and Source Folder, click Finish, and NetBeans will automatically create a new project with the name of the theme, which has all the files we previously downloaded from Underscores.me.

create a wordpress theme from html

As you see, Underscores already comes with all the templates we need to build page and post templates in our theme, which saves us a tremendous amount of time. It has an index.php template for displaying the latest posts, single.php template for individual posts, page.php template for pages, arhive.php template for handling archive pages, search.php template for search results and even a 404.php template that displays an error message when someone is visiting a broken URL.

Once you start with Underscores, one of the first things you would like to do is to open and edit the style.css stylesheet. At the top of the file, there is a large commented out section that helps WordPress identify your theme. As you can see from the screenshot below, most of the information we have included prior to downloading our theme is already included in the file. The rest, like the different tags that characterize our theme, we can add later.

create a wordpress theme from html

Here is a list of all the other parts on how to create a WordPress theme from HTML: part 2, part 3, part 4, part 5part 6part 7part 8part 9part 10part 11part 12part 13part 14

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities
Promise to only send you useful interesting newsletters once a month.