A beginners Tutorial on Creating a WordPress Theme From Scratch

Part 1: A Basic Tutorial on Creating a WordPress Theme From Scratch

by

Wondering how to create a  WordPress theme right from scratch? No wonders, in this post we will explain you creating a theme from the scratch. Nowadays WordPress CMS is widely used all over the world. If you are a WordPress developer and the client prescribes to for a unique website with added features and functionalities of your own, then definitely it’s in your hand to satisfy the client’s needs. Or if you are new to WordPress and much interested in knowing how to create a theme from scratch, Or even for creating your own website, then am sure this article will definitely help you. All you have to know the basics of HTML, CSS, and PHP to create a WordPress theme.

Create a folder to hold your theme files

If we are building themes, then it is must to know where the files that make the WordPress theme live in a WordPress installation. In the WordPress root directory, you will find several files and folders. The folders available are

  • wp-admin
  • wp-content
  • wp-includes

The themes you create will be present in WordPress root file -> wp-content -> themes -> list_of_themes.

In the theme folder, there are three default WordPress themes such as twentyfifteen, twentysixteen, and twentyseventeen.  If you take any default theme, you will be able to see a theme folder, and inside the folder, there will be around 12 core files. Few themes, including the default WordPress theme, you may see more files which are for extra customization, but they are not mandatory additions. First, let’s see the overview of the main files:

  • header.php→ It contains everything that will be displayed at the header of your website
  • index.php→ It is the main file of the theme. It contains the code for the main area and specifies where other files are included
  • sidebar.php→ It contains everything that will be displayed at the sidebar of your website
  • footer.php→ It contains everything that will be displayed at the bottom of your website
  • Archive.php→ When viewing dates, categories, posts by author etc this template file is used
  • single.php→ When viewing an individual post this templates file is used
  • comments.php→ To enable the comment section, it is called at the bottom of the single.php file
  • page.php→ This file is similar to single.php, but this page.php file is used for WordPress pages
  • search.php→ When you display search results, this template file is used
  • 404.php→ When you get a 404 error occurs, then this template file is used
  • style.css→ Everything related to styles for your theme goes here
  • functions.php→ This file is used where you can configure the WordPress core, without even touching the WordPress core files

All these files contain a series of PHP template tags. These tags convey WordPress where to insert the dynamic content.

Create a new folder in the themes folder of any name for example “bloomingflowers” where we will be creating the WordPress theme from scratch. Then create two new empty files in the folder. It can be named style.css and index.php. These two files are important to create a WordPress theme. 

Create a WordPress theme from scratch

Let’s consider a theme has basic files such as header, a footer, the main content(index.php), and a sidebar. You can create the WordPress theme files locally by using the code editor, and then you will be able to preview the theme design on your browser using XAMPP. 

Style.css

WordPress actually reads the comments that are stored in the style.css file. In this file, you will give all the specific information about the theme that we are going to build. This stylesheet file is important for any WordPress theme. This file controls the layout and visual design of any website pages.  

In the following snippet, we have given the Theme Name, Theme URI, Description, the Author, the Author URI, and the version number of our theme. All these details will be used by WordPress, to display the details of the theme to admins. Make a note that you have to add it to the top of the file with no spaces before it.

/*

Theme Name: Blooming Flowers

Theme URI: https://www.WPBlogX.com/themes/bloomingflowers

Description: A colorful bright flowers

Author: WPBlogX

Author URI: https://wpblogx.com

Version: 1.0

.

General comments/License Statement if any

.

*/

Index.php file

In the index.php file enter the following lines of code:

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Content of your Post</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, the file is not found.'); ?></p>
<?php endif; ?>
</div>

<?php get_sidebar(); ?>
</div>
<div id="delimiter"></div>
<?php get_footer(); ?>

In the above code, you can even make changes if you want. The text between the <h1>tags and <h4> tags can be customized as you want them to display on your blog. You can make changes whenever you want, and since these are template files, your changes will reflect your entire blog. Now WordPress will read this particular file and grab the details in this files which are required to display in your page.  Now you can add other PHP files as you required.

Header file

Add the following code in the header.php file:

<html>
<head>
<title>Creating a New Theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> Header Section of your Post</h1>
</div>

<link rel= “stylesheet” href= “<?php bloginfo(‘stylesheet_url’); ?>”> → This line tells the WordPress to load style.css file and it is added after the title tag. 

<?php bloginfo(‘stylesheet_url’); ?> → It is a WordPress function that actually loads the stylesheet.

Footer file

Add the following code in the footer.php file:

<div id="footer">
<h1> Footer Section of your Post</h1>
</div>
</div>
<?php wp_footer();?> 
</body>
</html>

Here in the footer, it will just be displayed as “This is the footer”. Here you can also add links, additional text, the copyright information for your theme to place it in the footer.

Sidebar file

Add the following code in the sidebar.php file:

<div id="sidebar">
<h2 class="sidebartitle"><?php _e('Category'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 class="sidebartitle"><?php _e('Archive'); ?></h2>
<ul class="list-archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

Here the WordPress functions are called to display categories, archives of posts etc. By default, the WordPress function returns them as a list item, and therefore you must give this functions in an unsorted list as <ul> tags.

And then finally add the various stylesheets in the style.css file to make your website look attractive.

/*
Theme Name: Blooming Flowers
Theme URI: https://www.WPBlogX.com/themes/bloomingflowers
Description: A colorful bright flowers
Author: WPBlogX
Author URI: https://wpblogx.com
Version: 1.0
.
General comments/License Statement if any
.
*/
body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 2px #000 solid;
    width:100%;
    margin:0px auto;
}

#header {
    border: 2px #000 solid;
}

#content {
    width: 100%;
    border: 2px #000 solid;
    float: left;
}

#sidebar {
    width: 25%;
    border: 2px #000 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #000 solid;
}

.title {
    font-size: 15pt;
    font-family: arial;
    font-weight: bold;
}

This file will give the basic looks of your theme. These lines set the page background and the main parts are surrounded by borders of your website. You can add images, animations and any other contents as per your needs for your website, and you can even modify the CSS file.

Functions file

Functions.php file is another important file to create a WordPress theme. This file does many things for your theme. Here you can place the code to modify the default behavior of WordPress. It is a kind of plugin where you add functionalities to your theme. Functions.php file is stored in your themes folder. It can execute only when the current theme is activated.

<?php
Function your_function_name() {
wp_enqueue_style(‘style’, get_stylesheet_uri());
}
add_action(‘wp_enqueue_scripts’, ‘your_function_name’);

This snippet will include the stylesheet in the custom theme. You might be wondering, why this custom function is needed when you can manually link the stylesheets in the file where it is required. When your theme goes deeper inside and becomes more complex, then it is difficult to link each and every stylesheet. In order to avoid confusion, and make your task simple this file is used. You will be happy using this function, once the theme requires to add more assets.

Conclusion

When all your theme files are complete, then its time to install and check how it works. Hope you got an idea about creating a WordPress theme from scratch. If you have any suggestions or doubts, please feel free to comment to us.

You can subscribe to us at Facebook and Twitter.

1 thought on “Part 1: A Basic Tutorial on Creating a WordPress Theme From Scratch”

Leave a Comment

%d