WordPress Theme Development From Scratch Part 1 : Theme Temp...

WordPress Theme Development From Scratch Part 1 : Theme Template, Header and Footer

Category: WordPress   Updated by Ryan Dhungel



So you want to learn WordPress theme development from scratch, Great! Surely, You know how to use WordPress. you have also used free and premium WordPress themes. It is great to simply search and download themes. With little effort, you can set up your website and go live. But you don't always get lucky to find the perfect theme you are looking for, right?

You also want complete control of your website. You want to understand how everything is working behind the scene so that you customize the design, manipulate certain functions and optimize your site for better performance.

If you are working for a client, most likely you need to customize the theme to get the desired header, footer, navigation and page layout with extra elements etc. 

If you are reading this article, that means you understand what it means to learn WordPress theme development. You have clearly seen the potential of learning this awesome skill. The possibilities are endless.

What will you learn?

I am going to make these tutorials incredibly well explained and make 100% practical. Just so that you don't get stuck in the middle, I will also make the source code available in github for you to download for each part as we progress. You are not far away from creating your dream theme that works exactly the way you want.By the end of these tutorial series you will gain full understanding of:

  • Convert HTML Template to WordPress Theme
  • Template Breakdown to Header, Footer, Sidebar etc
  • Create Bootstrap Dropdown Navigation System
  • Loop Through Posts, Post Meta, Excerpt etc
  • Featured Image, Sidebar Widgets etc
  • Post Formats, Templates and Gallery
  • Custom Front Page and Icon Boxes
  • Use Font Awesome Icons
  • Create and Implement Theme Customizer API


List of WordPress theme development from scratch tutorials series


Requirements

  • Basic knowledge of HTML CSS and Bootstrap
  • Comfortable with basics of PHP
  • Comfortable with WordPress admin panel
  • local development enviroment such as MAMP, AMPPS or XAMPP installed and ready to use

While you can work on live host, It is way better to create your own local development enviroment (localhost) using MAMP, XAMPP etc so that you can install WordPress locally. WPbeginner have a good article about it.


Goals

  • Be able to use bootstrap for layout
  • Set up a brand new WordPress theme
  • Convert html template to WordPress theme
  • Template breakdown to header, footer, page layout etc
  • Dynamically load meta tags, stylesheets, header and footer
  • Understand how WordPress header and footer works and the elements inside it


Getting Strarted

Before we start working with WordPress, we want to have a html page template ready. We will convert the html template to WordPress theme along the way.


Using Bootstrap web framework

We will be using twitter bootstrap for the layout. It is the most popular web framework for front end development. It is a css and javascript framework that is fully responsive and mobile ready. It makes your life as a web developer a lot easier. In fact it is the most popular framework out there which is very easy to start with, if you have basic commands of html and css. If you don't know much about it, don't worry. You will learn along the way.


Here are some of the reasons for using bootstrap:

  • It is fully responsive so that you dont have to worry about your site not rendering properly in mobile devices
  • It is the most popular web framework and most loved by web developers across the world
  • It is easy to learn, even if you have never used bootstrap you will be able to catch up along the way


bootstrap theme development home page layout


Creating a template


You can create your own website template or use an existing one. In this tutorial We will create a front page template for our theme which you can see above. I will also be using bootstrap's blog template from it's official website which you can see below. It will look different than blog page.

To make it easy for you to follow along I have these templates with html, css and javascript saved in github. The folder is called wpbootstrap, It includes bootstrap css and bootstrap javascript file as well as font-awesome css so you don't need to dowload bootstrap or font-awesome seperately. So download it from github. If you dont have an account with github then you can create one for free. It's easy. Once you download it, unzip and place it on your desktop for ease of use.

Now if you open frontpage.html and index.html in your browser, you can see index.html which is our blog posts page and also frontpage.html which is our front page. You can see how they look on the browser. That is what we will be building. Lets start converting it to a theme.


bootstrap theme development blog page layout


Convert html to WordPress theme


Now we have html template with css ready to convert to a WordPress theme. The first thing we need here is a fresh install of WordPress. I am sure you have a local enviroment setup for theme development right?

Through out these series I will be using MAMP, you could be using XAMPP, AMPPS, WAMP etc. Go ahead and download latest version of WordPress and extract it in your htdocs or www folder. Give it any name you like, I am calling it wpbootstrap. Now start MAMP and click on Open WebStart page. From there, click on phpMyAdmin, click on Databases, create a database in phpmyadmin with the name you like. I am calling it wpbootstrap. Now open up your favourite web browser, go to http://localhost/ (or http://localhost:8000/).

Click on the name you gave to your WordPress install earlier and follow up the installation. Make sure you type the correct database name. I am putting root as my username and password both. Click submit and run the installation for the fresh copy of WordPress. Fill out the information on welcome page and click on install WordPress. You will be prompted with the success window. Now click login and fillout login form with the username and password you created earlier on welcome page. Great, You are in the admin dashboard of your local WordPress install.

Now go to MAMP/htdocs/wpbootstrap/wp-content/themes. There you will find bunch of themes that comes with WordPress by default. You will also find index.php. Leave them as they are, We will be creating our own custom theme from scratch.


Create a theme folder


Create a folder called wpbootstrap in wp-contents/themes. wpbootstrap is the name of our new theme. There must be at least two files in any theme for WordPress to recognize it as a theme. So let's go ahead and create two files, they are index.php and style.css. I will be using sublime as my favourite text editor.

Theme declaration

We will start off with style.css. You can put your theme related info as shown below. You must have at least Theme Name for your theme to work. The other informations are not mandatory however you should put some information about your theme. You don't want to just write down your theme name and leave right?

Feel free to modify the information below to suit your theme. To read more about it and other valuable information about WordPress theme development, you can always go to official WordPress site. Remember to keep this information always on top of your stylesheet.

/*
Theme Name: wpbootstrap
Theme URI: http://kaloraat.com
Author: Ryan Dhungel
Author URI: http://kaloraat.com/
Description: WordPress theme built with bootstrap
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: bootstrap
Text Domain: wpbootstrap
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


Discover your theme from WordPress admin panel

Now if you go to your WordPress admin Appearance/themes, you will see your theme there. Cool right? However your theme does not have any image like the other themes do. Let's add an image. Find an image you like with the width of 1200px and height of 900px or above. Name your image screenshot.png and place inside your theme folder together with index.php and style.css.

Go back to the browser and refresh the page, you will see your theme with an image. Great! Now you can activate your theme and visit the front page. What do you see? It's all white right? That's because we don't have anything in our index.php yet. Lets start working on the content.

Bring the html, css files to the theme directory


It is time to bring the files that you downloaded earlier from github which contains index.html, bootstrap css and js etc.


CSS/JavaScript

  • First copy the js folder and paste it in your theme folder.
  • Create a new folder in your theme folder and name it css.
  • Go to your download folder and copy the bootstrap.css file and paste it inside your theme's css folder.
  • Open up the blog.css from your downloads folder, copy all the css.
  • In your theme folder, open style.css and paste the css that you copied from blog.css. Paste it right below the theme declaration that we made earlier.


HTML

  • Open up index.html from your downloads folder and copy all the html code.
  • In your theme folder, open index.php and paste the html code that we copied.


Now if you refresh the page, you will see that we now have index page with all the content we downloaded earlier. However it is missing styling because it is missing the stylesheet. Let's load stylesheet dynamically.


PHP functions in WordPress

Now that we are going to turn our static html page to dynamic WordPress theme, we will be using PHP. We all know that WordPress is built on PHP. If you are familier with the basics of php, you will be love it. If you don't know anything about php you might get a little confused but take it easy. Take it slow and don't get overwhelmed.

There are bunch of php functions that are WordPress specific. You will get used to it along the way. Remember we don't have to write any php code on our own. Most of it will be WordPress specific and we will use them at the right time at the right place.

Just keep in mind that php is written with the opening <?php and closing ?> tag.


Load stylesheet

Now our first step is to load stylesheet dynamically using a function instead of hard-coding it. This is our first step towards getting dynamic.

Go to index.php and Select the code below:

<link href="/css/blog.css" rel="stylesheet">


Replace with the following code:

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">


We will be updating some of our functions so that our theme meets the current standard but for the moment, Let's stick with the easiest options available.


See how we inserted php function inside html link to load the stylesheet dynamically? This is how we will be doing things from now on. The WordPress way!

Let's do the same with bootstrap stylesheet too. But with this we will be using template instead of stylesheet. That way WordPress will go looking for the location of the current template.

<link href="<?php bloginfo('template_url'); ?>/css/bootstrap.css" rel="stylesheet">


Now if you go back to the browser and reload the page, you will see that our page have got the styles back.

Start adding dynamic content

Now that we have set up our stylesheets correctly, the next thing we will do is replace the static index page with dynamic content. We will start working form the head section.

Load language attribute

Load the language attribute dynamically so that we can change it using admin panel. Currently we have specified en like this in our head section:

<html lang="en">

Let's make it dynamic

<html <?php language_attributes(); ?>>


Meta tags

This is what our meta tags in head section look like at the moment

<meta charset="utf-8">
<meta name="description" content="">

Let's make them dynamic now with the code below:

<meta charset="<?php bloginfo('charset' ); ?>"> 
<meta name="description" content="<?php bloginfo('description') ?>">


Now you can go to the reload the front page and see the source code. You can see the language attributes, charset and description are all there that is generated dynamically.


Title


Currently we have static title text, Let's make that dynamic with our site name.

<title><?php bloginfo('name'); ?> | <?php wp_title(); ?></title>


Now we have dynamically generated the page title. You can go to admin panel Settings/general and change the site title.

It is great but the front page will have no description such as sample-page or blog post title etc after the site title, thats why we have to use php termery operator to display site description dynamically.

<title><?php bloginfo('name'); ?> | 
<?php is_front_page() ? bloginfo('description') : wp_title(); ?>
<?php wp_title(); ?></title>


Now the front page will have the title and description seperated by '|' pipe symbol while the other pages will have page or post name and the main title accordingly.


Header

Now there is one more important thing to do with head section. put this line of code right before the closing </head> tag.

<?php wp_head(); ?>

This is really important because when we use third party plugins or widgets that needs to interact with the head section, This function will be necessary. Now if you go to your page and see the source code, you will see a bunch of script generated in the head section.

You will also see the white space above the menu created as soon as you put that function, This space will be used for admin bar for logged in users.

Footer

Let's add a dynamic footer as well right after the closing </footer> tag.

<?php wp_footer(); ?>

 
Go and reload the page, you will see the top bar populated with admin options. Also if you check the source code, bunch of script is loaded in footer.

Seperate the header and footer files

Our next step is to seperate header and footer from the index page and include then using the php function. Go to index.php and copy the code from the top to closing mastehead div in the body that includes navbar.

Here is the full code to copy:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
 <head>
 <meta charset="<?php bloginfo('charset' ); ?>">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <meta name="description" content="<?php bloginfo('description'); ?>">

 <title><?php bloginfo('name'); ?> | <?php is_front_page() ? bloginfo('description') : wp_title(); ?><?php wp_title(); ?></title>

 <!-- Custom styles for this template -->
 <link href="<?php bloginfo('template_url'); ?>/css/bootstrap.css" rel="stylesheet">
 <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
 <link href="/css/font-awesome.css" rel="stylesheet">
 <?php wp_head(); ?>
 </head>

 <body>

 <div class="blog-masthead">
 <div class="container">
 <nav class="blog-nav">
 <a class="blog-nav-item active" href="#">Home</a>
 <a class="blog-nav-item" href="#">New features</a>
 <a class="blog-nav-item" href="#">Press</a>
 <a class="blog-nav-item" href="#">New hires</a>
 <a class="blog-nav-item" href="#">About</a>
 </nav>
 </div>
 </div>


Create header.php


In your theme folder, create a file called header.php and paste the above code and save. Now go back to index.php and delete the copied text and paste this function instead

<?php get_header(); ?>


It will load header.php file.

Create footer.php

Go and do the same with footer. Copy from the begining of footer tag to all the way down to the end of page.

Here is the full code to copy:

<footer class="blog-footer">
 <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
 <p>
 <a href="#">Back to top</a>
 </p>
 </footer>
 <?php wp_footer(); ?>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
 </body>
</html>


Create a file called footer.php and paste the code that you copied and save. Now go back to index page and delete the copied code and put this function instead which will load footer.php file.



<?php get_footer(); ?>


Now you can reload the page and see that everything is working perfectly however we did seperate header and footer from our index page and placed them on their own pages. Now we can include them on any page we want using get_header or get_footer function. We will be taking things off the index page one by one such as blog posts etc and load them dynamically.


Dynamic copyright text with date

Now we are going to put dynamic copyright text with date and name in footer. Go to footer.php and find the code below:

Blog template built for Bootstrap by @kaloraat.


We will echo the current year followed by the site name in footer with the code below:

<p>&copy; <?php echo Date('Y'); ?> - <?php bloginfo('name'); ?></p>


Dynamic website header and description

Go to index.php and copy this as well so that we can dynamically change the website header and description instead of static content. Paste the following code in the bottom of the header.php then go back and delete from the index page because it is already included in header.php

<div class="container">
 <div class="blog-header">
 <h1 class="blog-title">The Bootstrap Blog</h1>
 <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>


As you can see the title and description is static. Let's make it dynamic so that we can change it from the wp admin. Replace the above code with the code below:

<div class="container">
 <div class="blog-header">
 <h1 class="blog-title"><?php bloginfo('name'); ?></h1>
 <p class="lead blog-description"><?php bloginfo('description') ?></p>
</div>


Now you can log into the wp dashboard, go to setting - general and change the information dynamically.


Conclusion

Let's wrap up this first part here. So far we learned how we can load things dynamically in WordPress and control from the admin panel. We also learned about header and footer which is very important part of the whole development process because most of the time we need to customize header and footer while working in any website project either for yourself or a client.

We have made ourself familer with header and footer. We also understand how WordPress has its own php functions to do certain tasks such as loading stylesheet, template, header and footer. We will learn more about functions in coming series.

In Part 2, We will learn to Create a bootstrap dropdown menu using wp-bootstrap-navwalker.

This is just the begining, There will be a lot of exciting things happening in future lessions. Keep practicing and I will come up with the next part shortly. I hope you all had fun learning and developing your WordPress skill. Leave your comments below.

For any development related questions, feel free to use our forum.

Download source code from github



Back to articles