Convert Static HTML to Dynamic WordPress Code
Why do I need to Convert Static HTML to Dynamic WordPress Code?
When you first start out in learning how to build a website, you learn HTML, CSS and then build all sorts of pages for your website. But later on, you realize that your site is missing some dynamics of easily publishing & updating content.
The reason for this is because your site does not use a database system that houses your content and neither is it programmed in a way that it fetches the content from some database to render on the front end. At this stage, you just have a nicely designed static site in raw HTML & CSS which basically just gives you the look and feel of the site you want.
Now you do some more research and learn that you would need to design a database architecture for your site and then program your site via server-side programming language like php to make it dynamic. Well, that is a task that would require a whole team of programmers, database designers/architects.
Fortunately, a team of designers, developers & programmers at Automattic have been working on an open-source project called WordPress since 2003 and now we can leverage what they have built for over the course of 17 years by integrating our own look and feel for our website into a powerful content management system that now powers over 36% of the internet.
So the goal of this post is to explain how to integrate the raw HTML & CSS into a living breathing WordPress theme.
Steps to Create WordPress Theme from Static HTML site.
In this tutorial, we will use a static HTML site template created by Brad Schiff who is an instructor on Udemy and has a fantastic course on WordPress there. If you love video tutorials you can enrol in his course and follow along with him.
Step 1: Create a theme folder and basic files.
Create a new theme folder in your WordPress installation’s theme directory and name it. We’re naming our folder as fictional-university. After that, open your code editor and create the following files:
- style.css
- index.php
- header.php
- footer.php
Leave the editor open. We’re going to come back to it later.
Step 2: Copy the styles from your HTML site folder to WordPress theme folder stylesheet.
Now, we’re going to create a WordPress style sheet by copying your static HTML site’s CSS code into it. Go to WordPress theme folder’s style.css file, and first paste the following code on the very top:
/*
Theme Name: Fictional University
Author: Sunil Chauhan Creative Web Consulting
Author URI: https://www.sunilchauhan.com/
Description: A development theme, from static HTML to WordPress
Version: 1.0
*/This code at the top is important as it provides information to WordPress that it’s a theme stylesheet header. You can edit the details like the theme name, author and URL, description, etc.
Right after the stylesheet header information, copy and paste your static HTML site’s CSS code into the file. Save and close it.
Learn how this style.css file is loaded in our WordPress pages.
Step 3: Split up your Static HTML site’s HTML Code
WordPress uses PHP to pull information from its database. So, you need to split up your old website’s HTML into different pieces to make sure it can put them together correctly.
First, let’s see how our static website’s HTML code looks in the index.html file.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fictional University</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><a href="#"><strong>Fictional</strong> University</a></h1>
<span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
<i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="site-header__util">
<a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
<a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
<span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
</div>
</div>
</div>
</header>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(images/library-hero.jpg);"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Welcome!</h1>
<h2 class="headline headline--medium">We think you’ll like it here.</h2>
<h3 class="headline headline--small">Why don’t you check out the <strong>major</strong> you’re interested in?</h3>
<a href="#" class="btn btn--large btn--blue">Find Your Major</a>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Mar</span>
<span class="event-summary__day">25</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
<p>Bring poems you’ve wrote to the 100 building this Tuesday for an open mic and snacks. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Apr</span>
<span class="event-summary__day">02</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
<p>Live music, a taco truck and more can found in our third annual quad picnic day. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="#">
<span class="event-summary__month">Jan</span>
<span class="event-summary__day">20</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">We Were Voted Best School</a></h5>
<p>For the 100th year in a row we are voted #1. <a href="#" class="nu gray">Read more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="#">
<span class="event-summary__month">Feb</span>
<span class="event-summary__day">04</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Professors in the National Spotlight</a></h5>
<p>Two of our professors have been in national news lately. <a href="#" class="nu gray">Read more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
<div class="hero-slider">
<div class="hero-slider__slide" style="background-image: url(images/bus.jpg);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Transportation</h2>
<p class="t-center">All students have free unlimited bus fare.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(images/apples.jpg);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
<p class="t-center">Our dentistry program recommends eating apples.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(images/bread.jpg);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Food</h2>
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color"><a href="#"><strong>Fictional</strong> University</a></h1>
<p><a class="site-footer__link" href="#">555.555.5555</a></p>
</div>
<div class="site-footer__col-two-three-group">
<div class="site-footer__col-two">
<h3 class="headline headline--small">Explore</h3>
<nav class="nav-list">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
</ul>
</nav>
</div>
<div class="site-footer__col-three">
<h3 class="headline headline--small">Learn</h3>
<nav class="nav-list">
<ul>
<li><a href="#">Legal</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
</div>
<div class="site-footer__col-four">
<h3 class="headline headline--small">Connect With Us</h3>
<nav>
<ul class="min-list social-icons-list group">
<li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<script src="js/scripts-bundled.js"></script>
</body>
</html>
Now, open our static website’s index.html file code above in code editor & then we’re going to split that into the newly created WordPress files themes files as below:
header.php
In your WordPress theme folders header.php file make sure you have the following lines of code at the very top:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<?php wp_head(); ?>
<title></title>
</head>
<body>Now since we are interested in the top navigation of the site that will display on every page of our site. So in our static website’s index.html file code right after the opening <body> tag copy the code from opening <header class="site-header"> tag to closing </header> tag and paste it right after the opening <body> tag in the WordPress theme’s header.php file.
So the header.php file will now look like below:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<?php wp_head(); ?>
<title></title>
</head>
<body>
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><a href="#"><strong>Fictional</strong> University</a></h1>
<span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
<i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="site-header__util">
<a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
<a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
<span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
</div>
</div>
</div>
</header>footer.php
Now, lets split the code from static index.html file’s footer and put that in the WordPress theme folder’s footer.php file.
But first, make sure you have following code at the very bottom of footer.php file.
<?php wp_footer(); ?> // this line of code loads black admin bar for logged in users on front end.
</body>
</html>Now copy the code from the static index.html file’s footer section since we would want it to display on every page of our site. So copy the code starting at the opening <footer class="site-footer"> tag to the closing </footer> tag and paste it in the WordPress theme folder’s footer.php file right before the code we already pasted in footer.php file above.
So, our footer.php file will now look as below:
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color"><a href="#"><strong>Fictional</strong> University</a></h1>
<p><a class="site-footer__link" href="#">555.555.5555</a></p>
</div>
<div class="site-footer__col-two-three-group">
<div class="site-footer__col-two">
<h3 class="headline headline--small">Explore</h3>
<nav class="nav-list">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
</ul>
</nav>
</div>
<div class="site-footer__col-three">
<h3 class="headline headline--small">Learn</h3>
<nav class="nav-list">
<ul>
<li><a href="#">Legal</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</div>
</div>
<div class="site-footer__col-four">
<h3 class="headline headline--small">Connect With Us</h3>
<nav>
<ul class="min-list social-icons-list group">
<li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<?php wp_footer(); ?> // this line of code loads black admin bar for logged in users on front end.
</body>
</html>index.php
Let’s turn to the index.php file now. It should be blank at the moment, so copy and paste these lines of code:
<?php get_header(); ?>
<?php get_footer(); ?>In between the above two lines of code, we need to paste in a portion of code from the static HTML file index.html.
So, go inside the index.html file and copy the code from the beginning of <div class="page-banner"> tag to the closing </div> tag right before the opening footer class="site-footer"> tag.
Now paste this code in index.php in between the two lines of code that pulls in the header and footer of the site. So the index.php file will now look like below:
<?php get_header(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(images/library-hero.jpg);"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Welcome!</h1>
<h2 class="headline headline--medium">We think you’ll like it here.</h2>
<h3 class="headline headline--small">Why don’t you check out the <strong>major</strong> you’re interested in?</h3>
<a href="#" class="btn btn--large btn--blue">Find Your Major</a>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Mar</span>
<span class="event-summary__day">25</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Poetry in the 100</a></h5>
<p>Bring poems you’ve wrote to the 100 building this Tuesday for an open mic and snacks. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Apr</span>
<span class="event-summary__day">02</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Quad Picnic Party</a></h5>
<p>Live music, a taco truck and more can found in our third annual quad picnic day. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="#">
<span class="event-summary__month">Jan</span>
<span class="event-summary__day">20</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">We Were Voted Best School</a></h5>
<p>For the 100th year in a row we are voted #1. <a href="#" class="nu gray">Read more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="#">
<span class="event-summary__month">Feb</span>
<span class="event-summary__day">04</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Professors in the National Spotlight</a></h5>
<p>Two of our professors have been in national news lately. <a href="#" class="nu gray">Read more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
<div class="hero-slider">
<div class="hero-slider__slide" style="background-image: url(images/bus.jpg);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Transportation</h2>
<p class="t-center">All students have free unlimited bus fare.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(images/apples.jpg);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">An Apple a Day</h2>
<p class="t-center">Our dentistry program recommends eating apples.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
<div class="hero-slider__slide" style="background-image: url(images/bread.jpg);">
<div class="hero-slider__interior container">
<div class="hero-slider__overlay">
<h2 class="headline headline--medium t-center">Free Food</h2>
<p class="t-center">Fictional University offers lunch plans for those in need.</p>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">Learn more</a></p>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>Step 4: Tidying things up (Fixing broken images & Javascript slideshow)
We now just have two quick problems to solve. The issue is that we are missing the images and the second problem it that slideshow section isn’t behaving like a slideshow. So let’s fix both of these things but let’s begin with the missing photos.
So all we need to do is look in the new folder that we downloaded from the following link at the beginning of this lesson:
Now we need to copy or move following three folders from inside of the downloaded folder into our WordPress theme folder:
- images
- css
- js
Now although we now have above three folders in our WordPress theme folder, if you refresh your site, you will see that we still don’t have the images in place but now we are very close as we just need to update our HTML to look for the images in the right folder.
In our theme folder open the index.php file in the code editor and up toward the top you will see the following line of code:
<div class="page-banner__bg-image" style="background-image: url(images/library-hero.jpg);"></div>Notice it is using an inline style attribute trying to pull in a background image. We just need to replace this with the following line of code
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/library-hero.jpg'); ?>);"></div>Now let’s just do the same thing for thee images at the bottom of the page inside the slideshow code. Let’s replace the following three lines of code:
<div class="hero-slider__slide" style="background-image: url(images/bus.jpg);">
<div class="hero-slider__slide" style="background-image: url(images/apples.jpg);">
<div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/bread.jpg'); ?>);">with
<div class="hero-slider__slide" style="background-image: url(images/bus.jpg);">
<div class="hero-slider__slide" style="background-image: url(images/apples.jpg);">
<div class="hero-slider__slide" style="background-image: url(images/bread.jpg);">The only problem now is that the slideshow section now isn’t cycling through the slides. It is just showing all three slides stacked on top of each other. All we need to do to fix that is load a javascript file that handles the slideshow behaviour.
So back in our text editor jump into the theme’s function.php file that we had set up in the following lesson:
Loading a javascript file is just like loading a CSS file. Just add the following line of code inside a function that we named university_files()
wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);So, the code in the function.php now becomes following:
<?php
function university_files() {
wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'university_files');
?>Now if we save the file and refresh our browser, we will have a typical slideshow behaviour.
This brings this long lesson to a close. Hope you survived till the end 🙂 and hoping this would help.
XOXO
No Comments