How to Create a custom WordPress Theme from scratch

WordPress is worlds most popular content management system which is used to create blogs, e-commerce websites, business websites and a wide variety of different websites.  WordPress is based on PHP & MySQL, so it needs a server to be able to be installed.

custom wordpress theme development tutorial

Custom WordPress Theme development from scratch tutorial

Prerequisite :

  • Basic Knowledge of HTML CSS
  • Basic PHP
  • WordPress Installation

What we are going to build :

wordpress theme development

We are going to create a WordPress theme based on Clean Blog static theme by startbootstrap.

We will convert the given static website and convert it to fully working WordPress theme.We will create all the necessary files folders for a WordPress theme.

Download the static HTML template from here.

The Design :

Every WordPress website needs three basic files, to begin with.

  1. index.php
  2. style.css
  3. screenshot.png

Creating the basic files :

First Create a folder under wp-content\themes and give it any name, I named it “blogtheme”. Next, we will create the index.php, style.css files. Also copy the css, js, img and vendor files from html template to your blogtheme folder.

custom wordpress theme development tutorial style.css


/*
Theme Name: blogtheme
Author: Vishwajeet Kumar
Author URI: http://vishwajeet.online
Description: Advanced WordPress Theme
Version: 1.0
*/

Copy the following code and paste it into your style.css. This is all the information which is displayed when you click on the theme details under appearance. You can write your own theme details as per your theme. You can check the detailed styles.css from here 

screenshot.png

Download and place the above image in wp-content\themes as screenshot.png

This is the image which is displayed as the preview when you download a theme. Now go the WordPress admin panel apperance>theme and activate your theme. Your Theme Preview should look like this.

index.php

Copy the complete code of index.html from the downloaded static website and paste it into the index.php file. Now reload your website and it should look like this.

custom wordpress theme development tutorial

Now as you can see, it is not looking good because it can’t find the CSS files for adding styles to the page. First, we have to include WordPress specific function to the stylesheet link so that it can grab the file.

So for every CSS and javascript files included in our folder , we will <?php bloginfo(‘template_url’); ?> before the file path.

So, for example :

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

will change to

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

So for all the included files, we will add <?php bloginfo(‘template_url’); ?> at the beginning of the file path.

After editing all the file path, reload theme and it should load perfectly with all the styles.

Creating the different theme files :

header.php

Now create a new file and name it header.php and paste the code from index.php till the closing nav tag. Now make the following changes in the header.php file:

<meta charset="utf-8">

will change to

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

Now add the following code before the closing head tag.

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

After making the following changes your header.php file should look like this.

</pre>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

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

<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('template_url'); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="<?php bloginfo('template_url'); ?>/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

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

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<pre>

 

footer.php

Now create a new file named footer.php and paste the code from index.php from opening footer tag till the end. Your footer.php code should look like this.

Add the <?php wp_footer(); ?> function before the closing body tag.

</pre>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright &copy; Your Website 2018</p>
</div>
</div>
</div>
</footer>

<?php wp_footer(); ?>
<!-- Bootstrap core JavaScript -->
<script src="<?php bloginfo('template_url'); ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Custom scripts for this template -->
<script src="<?php bloginfo('template_url'); ?>/js/clean-blog.min.js"></script>

</body>

</html>

Now open your index.php file and paste the below code. We are including the header and footer files at the beginning and the top. After making all the above adjustments your index.php should look like this.

index.php :

</pre>
<?php get_header(); ?>

<!-- Page Header -->
<header class="masthead" style="background-image: url('img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>

<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 18, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on August 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on July 8, 2018</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
</div>
</div>
</div>
</div>

<hr>

<?php get_footer(); ?>
<pre>

function.php

Create a new file and save it as functions.php

Add the follow code in the functions.php file.

</pre>
<?php

require get_template_directory() . '/bootstrap-navwalker.php';

register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'theme-textdomain' ),
) );

// Theme Support
function boot_theme_support(){
// Add Featured Image Support
add_theme_support('post-thumbnails');

}
<pre>

I this file we are including bootstrap-vawalker.php file which will allow us to integrate bootstrap navigation menus to our theme. Next, we are registering our menu so that we can create our menu items from the admin dashboard of the WordPress. Next, we are adding theme support for adding thumbnails to our blog posts. Copy and paste the above code into your functions .php file.

In the header.php file make the following changes in the nav tag.


 <!-- Navigation -->
 <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
 <div class="container">
 <a class="navbar-brand" href="index.html">Start Bootstrap</a>
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
 Menu
 <i class="fa fa-bars"></i>
 </button>
 <div class="collapse navbar-collapse" id="navbarResponsive">
 <?php
 wp_nav_menu( array(
 'theme_location' => 'menu-1',
 'menu_id' => 'primary-menu',
 'container' => false,
 'depth' => 2,
 'menu_class' => 'navbar-nav ml-auto',
 'walker' => new Bootstrap_NavWalker(),
 'fallback_cb' => 'Bootstrap_NavWalker::fallback',
 ) );
 ?>
 </div>
 </div>
 </nav>

Displaying the blog posts on the home page

Now we will add the wordpress while loop to query the blogposts and output the result. Now open the index.php file and replace all the code below closing header with the following code.


<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php while(have_posts()) : the_post(); ?>
<div class="post-preview">
<a href="<?php the_permalink(); ?>">
<h2 class="post-title">
<?php the_title(); ?>
</h2>
<h3 class="post-subtitle">
<?php the_excerpt(); ?>
</h3>
</a>
<p class="post-meta">Posted by
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a>
on <?php the_time('F j, Y:g a'); ?></p>
</div>
<hr>

<?php endwhile; ?>

<?php echo paginate_links(); ?>

</div>
</div>
</div>

<hr>

<?php get_footer(); ?>

<?php while(have_posts()) : the_post(); ?> : Using while loop we are checking if we have any post and if we have any post published then get the post.

<?php the_permalink(); ?> : Using this we are getting the URL of the post.

<?php the_title(); ?> : Using this we are getting the title of the post.

<?php the_excerpt(); ?> : Using this function we are getting short description of the post.

<?php echo get_author_posts_url(get_the_author_meta(‘ID’)); ?>”><?php the_author(); ?> : Using this we are echoing the author information.

<?php the_time(‘F j, Y:g a’); ?> : This function allows us to output the date of publish of the post.

<?php echo paginate_links(); ?> : Using this function we are getting the pagination links.

Creating the individual blog post pages :

All the WordPress pages refer to single.php and use it as default template to display all the blog post. So first we will create the single.php

In your theme folder, create a new file and save it as single.php and paste all the code from index.php into it.

In the single.php make the following changes.

</pre>
<?php get_header(); ?>
<?php while(have_posts()) : the_post(); ?>

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<header class="masthead" style="background-image: url('<?php echo $image[0]; ?>')">

</div>
<?php endif; ?>


<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1><?php the_title(); ?></h1>
<span class="meta">Posted by
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a>
on <?php the_time('F j, Y:g a'); ?></span>
</div>
</div>
</div>
</div>
</header>

<!-- Post Content -->

<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php echo the_content(); ?>
</div>
</div>
</div>
</article>

<hr>
<?php endwhile; ?>
<?php get_footer(); ?>
<pre>

So in the beginning, after opening the post loop, we are checking if this blog post has any thumbnails if it has then we are displaying the thumbnail.

And also we are replacing <?php echo the_excerpt(); ?> to <?php echo the_content(); ?> fo r displaying the full content. So that’s all done for the single.php file

Creating the page.php file

All the wordpress pages use the page.php file as the base template to display all the page contents. So, create a new file named page.php and paste all the code from single.php in to page.php file. That all for displaying pages.

Contact Page: Adding Contact Form

Create a new page and name it Contact. For adding a contact form to contact page we are using a plugin name WPForm. Download and activate it from Apprrance>plugins>add new.

Now add the following shortcode under contact page like as shown below.

custom wordpress theme development tutorial

So, that all for creating a simple WordPress. This by no means is complete WordPress tutorial and there are a lot of topics which are not covered in this article. You can visit the official WordPress documentation to read about all the different functions. Please leave your comment below if you have any query.

Summary
How to Create a custom WordPress Theme from scratch
Article Name
How to Create a custom WordPress Theme from scratch
Description
Learn how to create a custom WordPress theme from scratch by converting a static HTML bootstrap blog template to WordPress.

Leave a Reply