Steps to create your WordPress custom theme

Posted By :Ravi Rose |23rd January 2019

To create WordPress theme, all you require is


1. Installing WordPress Locally.


2. Then Follow the following procedure


Procedure to create a WordPress theme from scratch.


Manual – via coding     

Outside of configuring WordPress, almost everything you do in WordPress will be in the wp-content folder; everything else is core code,and you don’t  have to touch it.

Follow the path of wp-content > themes to arrive at your themes folder. You’ll see the WordPress default themes –twentyfifteentwentyfourteentwentythirteen – and index.php. Create a new folder for your theme: For Example mycustom.


A WordPress theme needs only two files to exist – style.css and index.php.


In your custom theme folder, create


  1. header.php – contains the code for the header section of the theme.
  2. index.php – contains the code for the Main Area and will specify where the other files will be included. This is the main file of the theme.
  3. footer.php – handles the footer section.
  4. style.css – responsible for the styling of your new theme.
  5. bootstrap.css – no separate CSS code is required; highly responsive.
  6. bootstrap.js – provides its own js for the navigation bar, or tabs etc.  




1. header.php File



You will write this code in the header.php file:-

<title>custom theme</title>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<h4>Some header Content</h4>

Header.php file contains the code for a head part in which the js and style file is linked. It displays the header of the page.

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

This line added after the title tells the WordPress to load a style.css file that will handle the styling of the website.

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

Here, the Bootstrap is used as it is the best-known framework for responsive websites. It provides inbuilt css files to style your website. You can download it and keep the bootstrap “.css” file in your theme/css folder.



2. index.php File


The main file index.php will contain this code:-

<?php get_header(); ?>
<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><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>

The very first line of code is:

<?php get_header(); ?>

will include the header.php file 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<?php endwhile; else: ?>

The above code displays the main content of the post that you have created through the WordPress administrative area.

Finally, add one last line

<?php get_footer(); ?>

which will include the footer.php file.



3. footer.php File


Add these lines to the footer.php file:-

<div id= "ttr_footer">

With this code, a simple FOOTER label will be added.



4. style.css File


Add the following lines to the style.css file

  Template Name: mycustom(theme name)
  Author :ravi rose(author name who develops the theme)
  Version: 1.0(theme version)

This CSS file sets the basic looks of your theme. These lines set the background of the page and surround the main parts of your site with borders as per your need.


Your theme has now been created. Go to the WordPress dashboard, and click on Appearance>Themes. You’ll see the theme in the collection with all the default themes.


Now, you can additionally adjust the CSS document,include pictures,animations and other content to your theme to get the looks you want with your theme.





About Author

Ravi Rose

Ravi is a versatile Backend Developer with a strong expertise in WordPress technology. He is well-versed in the latest technologies like HTML, CSS, Bootstrap, JS, WordPress, PHP, and ReactJS. Ravi has contributed to multiple internal and client projects such as TripCongo, Transleqo, Hydroleap, OodlesAI, and Nokenchain. He has also demonstrated his capabilities in various other areas such as project management, requirement analysis, client communication, project execution, and team management. With his wide range of skills and experience, he can deliver exceptional results and add value to any organization he works with.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us