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.
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.
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.
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.
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.
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 5, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 13, part 14
