How to independently create a WordPress theme
Why create a WordPress template from scratch
Advantages of creating a new theme
- An ability to differ from competitors using standard WordPress templates;
- an ability to use unique functions, independently select working items;
- when working manually you can save money on involving third-party specialists;
- using different designs for each website page;
- an opportunity to refine or adjust the theme;
- creating a child theme as a backup to roll back unnecessary changes.
How to create a theme for WordPress
Next, you need to find the wp-content\themes directory on the disk where WordPress is installed and create a new folder in it with the name of the future theme. It also stores standard WordPress templates.
Each theme necessarily contains two files: index.php and style.css as well as an images folder with images for the template. To get started, just create these files, and then start filling them in. The index.php file can be registered independently in a text editor, ordered from a specialist, or taken with the ready-made content from another theme.
For the template, you need to upload the screenshot.png file with the desired extension of 1200x900 pixels to the folder with the theme. This can be any image that fits the specified format.
Let's consider an example of the index.php file with simple content for a theme with a header, footer, main post, and sidebar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/header.png" alt="" title=""/></a>
</div>
<ul id="menu">
<li><a href="#">Main</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div id="content-main">
<div id="content">
<div class="post-content">
<div class="post-img"><a href="#"><img width="275" height="230" src="images/mini.jpg" alt="Post thumbnail"/></a></div>
<h1 class="note-title"><a href="#">Heading</a></h1>
<div class="post-text">Main text</div>
<div class="readmore"><a href="#">Read more</a></div>
</div>
</div>
<div id="sidebar">
<div class="widget-title">Popular on this website</div>
<div class="widget">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copying information is prohibited</p>
</div>
</body>
</html>
Now you need to fill in the style.css file. Like at the previous step, open a text editor and add the following content:
/*
Theme Name: The name of your theme
Theme URI: The address of a website devoted to the subject
Description: The description of your theme
Version: The version of your theme
Author: The name of the author
Author URI: The address of the theme author
*/
Division of index.php into separate files

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/header.png" alt="" title=""/></a>
</div>
<ul id="menu">
<li><a href="#">Main page</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div id="sidebar">
<div class="widget-title">Popular on this website</div>
<div class="widget">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Copying information is prohibited</p>
</div>
In order for the header, sidebar, and footer to display correctly, you need to link their individual files with the main (index). To do this, add the line at the beginning of the index.php file:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php get_header(); ?>
<div class="content-main">
<div class="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post-content">
<div class="post-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a></div>
<h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post-text"><?php the_excerpt(); ?></div>
<div class="readmore"><a href="<?php the_permalink(); ?>">Read more</a></div>
</div>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
Why create a child WordPress theme
Creating a child WordPress theme starts just like getting started with the main one. You need to open the wp-content\themes directory and create a folder for the second theme in it. Next, do the same as before: create index.php and style.css files. In the second one, write:
/*
Theme Name: The name of a child theme
Template: The folder name with a child theme
Theme URI: The address related to the theme
Description: The description of a theme
Author: The name of the author
Author URI: The address of the author
Version: The theme version
*/
/* we are importing styles of the parent theme */
@import URL(«../The name of the main theme/style.css»);
/* additional styles */
.foo{ color:red; }
Builders and services for creating WordPress themes
One of the popular theme generators is Lubith which has a very simple and intuitive interface. To master this tool, it will suffice if you can read in English.
After registration, a personal account with settings opens. In this window, you can create and install blocks, select colors and the exact frame size. Use the sections on the left side of the monitor to select settings:

There are alternative WordPress theme builders with intuitive interfaces: Beaver Builder, Page Builder, Elementor.
Conclusion
Each WordPress template is based on two files: index.php and style.css. After they are created, you can experiment with different elements and functions of the templates, create a unique design for each page.
If there is no opportunity or desire to independently create a theme, use special online WordPress theme builders.
Speed up your search marketing growth with Serpstat!
Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.
A pack of tools for reducing your time on SEO tasks.
Cases, life hacks, researches, and useful articles
Don’t you have time to follow the news? No worries! Our editor will choose articles that will definitely help you with your work. Join our cozy community :)
By clicking the button, you agree to our privacy policy.