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 screenshot.png.

In order for a wordpress theme to “work”, we need only two files: style.css and index.php.

Create a file called style.css in the theme directory, and paste this into that file:

HTML

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.

Having selected the new theme, we can view the site in the browser. It will come up, but it’s going to be missing styling. That’s because it is looking for the stylesheets and javascript in 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:

HTML

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. The header.php file should look like this:

HTML

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.

HTML

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-light to 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:

HTML

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 style.css file:

CSS

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 footer.php from index.php by adding the following at the bottom of index.php:

HTML

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


3 Comments


    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'add_theme_comments' not found or invalid function name in /home/geoffcor/public_html/geoffcordner.net/wp-includes/class-walker-comment.php on line 179

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'add_theme_comments' not found or invalid function name in /home/geoffcor/public_html/geoffcordner.net/wp-includes/class-walker-comment.php on line 179

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'add_theme_comments' not found or invalid function name in /home/geoffcor/public_html/geoffcordner.net/wp-includes/class-walker-comment.php on line 179

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.