“Probably, you don’t want to use the same old WordPress theme which everyone else is using. Maybe, you want to give that customized touch to your client’s WordPress website! The reasons to look for “How to create a WordPress theme from scratch?” can be many.”
Whatever be the reason, let’s get started and create a WordPress theme like a pro.
Why WordPress for customized themes?
There are no doubts about the popularity of WordPress- the most flexible and commendable Content Management System ever!
It is only WordPress- the powerhouse of millions of websites, that gives power to the designers and developers to create customized WordPress themes from scratch.
Before we get started:
1. WordPress Installation and Configuration:
The first prerequisite is to install and configure WordPress on a local server. Installation and configuration take a few minutes after which we proceed to the next steps to develop a theme in an easy manner. It is similar to converting a static HTML website into a dynamic WordPress website.
Step-by-step Process of Creating a WordPress Theme by Coding Method:
2. Create a new theme directory
It is the wp_content directory that would need some changes to be done after you configure WordPress on your localhost server. A new theme directory will need to be created in the wp_content > Themes Folder. You can name it “My Theme” or anything you want to. But you don’t need to mess up with wp_content folder at all.
3. Design and customize the theme:
After the theme directory has been created, you are now all set to give the skeleton or foundation to your very own theme. To modify the basic layout of any tailor-made theme, you need to have access to 7 files which are mentioned below.
It is noteworthy to know that style.css and index.php play crucial roles for a theme to exist.
Let’s get acquainted with the functions of these files in any theme:
Primary Files of a WordPress theme:
index.php: It is the most important file of any theme.Main area code is contained in this file. The location of other files is also specified in this file.
style.css: Styling of the theme is possible due to this file.
Secondary Files of a WordPress theme:
• sidebar.php
• header.php
• footer.php
• bootstrap.css
• bootstrap.js
However, a crucial step here is to copy the Bootstrap.js and Bootstrap.css files to the theme folder. Use of notepad would be handy here!
We start by dividing the page into header, footer, and sidebar:
1. header.php File:
Header styles and top navigation are handled in this file of your WordPress theme.
• You will need to put the code given below into your header.php file. Just copy and paste the code from below.
<script type="text/javascript" src="<?php echo get_bloginfo( 'template_url' ).'/js/jquery.js'; ?>"></script> <script type="text/javascript" src="<?php echo get_bloginfo( 'template_url' ).'/js/bootstrap.js'; ?>"></script> <div class="theme-header"> <div class="container"> <h1>THEME HEADER</h1> </div> </div> <div class="container">
Add the following lines of code after the title. It is responsible for loading of the style.css file to handle the styling of the website:
2. footer.php File
To add the plain footer label to the WordPress theme, add the following lines of code from below like we did for the header.php file:
</div> <div class="theme-footer"> <h1>THEME FOOTER</h1> </div>
Adding links, copyright information or any other elements is possible in place of a plain footer to the WordPress theme.
3. sidebar.php File:
Copy and paste the following code in the sidebar.php file from below: <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">September 2017</a></li> <li><a href="#">October 2017</a></li> <li><a href="#">December 2017</a></li> </ol> </div> <div class="sidebar-module"> <h4>Social Share</h4> <ol class="list-unstyled"> <li><a href="#">Facebook</a></li> <li><a href="#">Google</a></li> <li><a href="#">Twitter</a></li> </ol> </div> </div>
The sidebar of any WordPress website theme will have categories and other things like Archives, Tags and other lists.
4. content.php File:
It is the content.php file which contains all the secondary information on the WordPress theme.
For example the articles on the blog are contained in content.php file.
<div class="blog-post"> <h2 class="blog-post-title">Sample blog post</h2> <p class="blog-post-meta">January 1, 2018 by <a href="#">Admin</a></p>
This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.
<hr /> </div>
5. index.php File:
The already contained code in the index.php file is as given below.
<div id="theme-main" class="row"> <div class="col-lg-8 col-sm-8 col-md-8 col-xs-12"> <div class="row"><!--?php if (have_posts()) : while (have_posts()) : the_post(); ?--> <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12"> <h1></h1> <h4>Posted on <!--?php the_time( 'F jS, Y' ) ?--></h4> </div> </div> </div> </div> <!--?php get_footer(); ?-->
Division of Index.php File code lines into sections:
• As we can see from the above code, it starts from the header section of your WordPress theme.
<!–?php get_header(); ?–>
• The below part of the code is for the main content of the website:
<!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1></h1>
<h4>Posted on <!--?php the_time('F jS, Y') ?--></h4>
</div>
<!--?php endwhile; else: ?-->
In the sidebar.php, you display recent posts, categories, archives or other lists.
<!–?php get_sidebar(); ?–>
An empty “div” inserted hereafter will separate the Primary area and the Sidebar of the WordPress website from the footer.
• Finally, added one last line:
which will include the footer.php file.
6. style.css File:
The borders of the page of your WordPress website are set within the style.css file. Add the following code as below:
/*
Theme Name: My WordPress theme
*/
body{text-align: left;}
.theme-header{ background: #cccccc; padding: 50px; }
.title{ font-size: 11pt;font-family: verdana;font-weight: bold; }
#theme-main{ margin: 30px 0; }
.blog-sidebar{ border-left: 1px #a2a2a2 solid; }
.theme-footer{ width: 100%; border-top: 1px #a2a2a2 solid; text-align: center; background: #cccccc; padding: 50px 0; }
The border and the background of the page as well as the designs around the main area of the theme is defined by the style.css file.
Not only this, you can beautify your WordPress theme by adding animations, images and graphics by modifying this very file.
Output :
Final Words:
We discussed the steps necessary to get started with creating your very own customized WordPress theme. This is just a start to your WordPress theme’s endless possibilities. You can modify anything and everything once you lay down the framework of the theme by following the steps above.
However, it is crucial to have sound knowledge of HTML, PHP and WordPress know-how to make advanced changes to give the theme a look and feel you would like to!
