Transform static design to a theme

Part 4, from HTML to dynamic template

Buy the book

These articles are excerpts from the book's manuscript draft. You can read the book here or in an easier-to-read format and finalized by purchasing the finished book.

Table of Contents

This tutorial explains how we can transform the static site design to theme files. At first, we place all the HTML into the index.php file and then replace the content in the HTML file with content provided by WordPress. At this stage, we simply copy the CSS code into the theme style.css file and copy images into a folder inside our theme. Later I will show you how to load images from WordPress Media files.

Content of index.php file

If you followed my tutorials, you activated this empty theme in the previous tutorial and noticed that your site content is just an empty page. Nothing visible. This results from using a theme that does not have any template file to show any content. The only file we have is index.php, and this file is empty.

Test the index.php file

We’ll just put some code inside the otherwise empty index.php file as a first test. Open the index.php file in a code editor and type “Hello everyone, I am index.php file.” Save the file and reload your site in browser.

You will see the text you just typed in the index.php file. Now you understand that whenever you load your WordPress site, the content comes from index.php.

Page with text from index.php file.

We do not want to type all the content into the index.php file but we want to allow users to create content using any method WordPress provides. So let us start with the file. Because we are working with PHP code, we will start the file with a PHP block and then end the block to display our static HTML code, which we will then alter piece by piece.

First, remove the text mentioned above from the file, add the following code, and save it.

* This is the last resort in template hiearchy - index.php. 
* If no other more spesific template file is not present, 
* WordPress use this file to display content.
* version: 1.0
* date: 04.02.2022

If you test your site, you will see an empty page again.

Next, copy all the HTML from the static version of our page design and paste it after the PHP code. Notice that I ended the PHP code before adding any HTML code. If PHP code is something you do not know, please see my “PHP Quick Reference for WordPress developers“. ( I will add link to leanpub book later)

Now test your site again in a browser, and you’ll see something like this.

All the content is there, but the styling is missing. So now, let us fix it.

How to load the styles

Open your theme style.css file in a code editor. Paste all the styles from our static site CSS-file into the theme CSS-file. After this, test your site again and notice that this did not work. This is not how WordPress loads files, and we need to change the index.php and functions.php files to load the stylesheet properly. Let us do it.

How to use functions.php file to load css-files

To make WordPress load stylesheet(s), we must instruct WordPress to do that. And this is something functions.php is used for. Open functions.php file, and paste the following code into it, and then save the file.

* This is the functions.php file for tutorial theme wpsmithy
* version: 1.0
* date: 04.02.2022

function wpsmithy_load_files() {
	// load Google fonts
	wp_enqueue_style( 'google_fonts', 'css2?family=Playfair+Display:wght@500&family=Raleway:wght@100;300;700&display=swap', array(), '1.0.0', 'screen');

	wp_enqueue_style( 'wpsmithy_main_styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'screen');
add_action( 'wp_enqueue_scripts', 'wpsmithy_load_files' );

As you see, we are using WordPress action wp_enqueue_scripts to load the files. When this action actuates, our functions.php will run the function called “wp_smithy_load_files“. The name of the function is something we can choose on our own, but it should be unique for your theme. Remove the corresponding lines from the static HTML content in index.php file.

Don’t worry if you do not understand the code or the mechanism how the add_action -function works. I will explain the functions later. At this moment it is enough that the code works.

Tell WordPress to load content in <head>

Next we need to tell index.php file to load the WordPress headers including our stylesheet. Insert the following code just before the closing element.

					<?php wp_head(); ?>

Save the file and reload your site in your browser. Now you should see almost a good page. The styling is there, but the images are missing. We’ll fix it next.

Copy the _imgs folder from the static site design project under the theme folder. Then check the style.css and class .hero background rule and fix the URL by removing the “../” so that the rule is like

					background: url(_imgs/bg_anvil.jog); 

This will fix the hero image background.

Now your site should look like the static design. Except the logo is missing. We will fix it later. Now your site should look like this.

WP Smithy theme first page with static content.

Whats next?

In the following article, we start replacing the static content with WordPress content blocks and explain the code we used so far. The theme will evolve and you will learn the code in the following steps.

Picture of Kari Selovuo

Kari Selovuo

Leave a Reply

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