Create a Theme Template
To begin creating a WordPress theme, begin by creating (or downloading) an html template. For this tutorial, we’ll use a free bootstrap template downloaded from startbootstrap.com.
If you use a different template (or build your own html template), some specifics may change depending on the code. The steps will remain the same.
We’ll name the theme we’re building bootblog. Create a directory in themes titled bootblog and place the downloaded
index.html, post.html, contact.html, and
about.html files, along with the
css, js, img, and
vendor directories (and their contents) into the bootblog directory.
To confirm that everything has moved correctly, we’ll open index.html in a browser. It should render correctly. Take a screenshot of your browser tab and save it in the directory with the title
In order for a wordpress theme to “work”, we need only two files:
Create a file called
style.css in the theme directory, and paste this into that file:
Now, create a file titled
index.php and paste the contents of
index.html into that file. Now we can go into wordpress >> appearance >> themes and select the new Bootblog theme.
css, js, and
vendor directories in the website’s main directory, but those directories are actually in the theme directory. To fix this, we need to add the url path.
There are several ways to do this, but only one that is actually approved by WordPress. The WordPress approved way of adding path is to use the following:
echo esc_url( get_template_directory_uri() ); Add the following php snippet <
?php echo esc_url( get_template_directory_uri() ); ?> to all links to internal files, followed by a forward slash. These links will be in the head and also at the bottom of the page, where several js files are called. Here is an example:
Now when we refresh the page, we should see everything properly styled, and when viewed as mobile the dropdown menus should work. If things are not working, view source in your browser to make sure the link path shows and is correct. Check that the forward slash is there, and make whatever adjustments are necessary.
Create header and footer files
Let’s have a look at
index.php.The bootstrap template we’re using contains an image at the top of the page that floats behind the navbar. We’re going to begin by removing the image and the block that contains it. Delete everything between the two
<header></header> tags. Save the file, and view in browser.
Next, cut everything above the deleted
<header></header> block, which will be the navbar to the top of the file with the opening
<html> declaration, and paste that into a new file named
header.php file should look like this:
In order for the
header.php file to appear, it needs to be called from
index.php. Add the following to the top of
index.php and save.
Now when we refresh the page, we’ll see the complete page rendering almost as expected. Because the navbar floated on top of the image that we’ve removed, we now have white text floating on top of a white background, which means they are invisible. We’re going to make two changes. The first is to change the class of the navbar from
navbar-dark, and add the class
bg-dark. These are bootstrap classes, and you can read about them here.
The navbar div should now look like this:
This particular theme we’ve downloaded has some additional styling in the file
css/clean-blog.css file that overrides the bootstrap defaults. Rather than edit that file, we are going to override those changes by adding the following to the
Note that these css changes are particular to the theme we downloaded and are using for our template. If you are using a different downloaded html theme, or your own html theme, you may need to make different adjustments (or no adjustments at all).
Next, we’ll remove
<footer> and everything below it, and paste that into a file called
footer.php. Save that, and then called
index.php by adding the following at the bottom of
We’ve created the minimum parts for a functioning wordpress theme. It remains a completely hardcoded theme that contains no dynamic content, but we have the blocks we’ll build out.
The next step will be setting up header.php