Try UPDATED site audit in Serpstat!

How-to

– 11 min read –

October 18, 2019

How to independently create a WordPress theme

Creating a WordPress theme makes it possible to build a website structure for individual needs and not adapt to existing templates. To create a WordPress template, it is enough to have basic knowledge of HTML, PHP and be able to work in the admin panel of the website engine.

Why create a WordPress template from scratch

All future website owners have standard WordPress themes to choose from. But not all of them are suitable in terms of their design. Therefore, some webmasters need to layout a unique design and features of the template.

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

To create a WordPress theme from an HTML template, you will need basic knowledge of this programming language. The first thing to do is download and install WordPress on your computer. You will also need any text editor, such as Notepad ++ or WordPad.

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>

This code must be copied to WordPad and saved in a folder with a new theme, specifying the PHP extension. Further, you can add any elements to this file that you would like to see on the website. You can view all existing HTML tags on this website.

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
*/

This is enough for now. Next, you will need to add the information about the appearance of the pages to this file.

Division of index.php into separate files

The index.php file contains general information about the website. It contains elements that are common for each page. For the correct operation of all content, you need to create separate files for the header, sidebar, and footer. All of them will be stored in a shared folder, and each will be assigned a PHP extension.

For example, we create a header.php file first. To do this, select and copy the lines relating to the header from index.php.

 <!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>

This is the full contents of header.php. The same actions need to be done with the remaining files. Therefore, the contents of sidebar.php will be like this:

<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>

And in the footer.php file there will be these lines:

<div id="footer">
    <p>Copying information is prohibited</p>
  </div>

They can be filled up and edited at your discretion. For example, in the header, you can add a unique image with a search bar, logo, and other elements.

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(); ?>

And these lines at the end of the file:

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

As a result, after transferring the data of the header, sidebar, and footer, this information will remain:

<?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(); ?>

All that remains after the transfer of code sections is a clean index.php file. You can optionally create additional files and sections to display various information on the website. Here is a list of the most popular items:

Home is a theme for the main page.

Search is a website search format.

Date is the date and time output style.

Archive is a section for storing obsolete data.

Comments is the comment output rule.

Category is for categorization.

404 is the error page output format.

Page is for the theme for individual pages on the website.

Why create a child WordPress theme

There is always the risk of making a mistake without the possibility of returning to the previous state of the file. To prevent this from happening, you can create a subtheme for making revisions. The style.css duplicate will be stored in it where will not affect the state of the main file.

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; }

After that, you need to activate the created child template in the admin panel and continue working with it.

Builders and services for creating WordPress themes

You can create a theme using the online editor. You don't need to manually register codes, but you can independently select and swap working blocks and create a unique design.

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:

When the design is ready, you need to click the "Download" button to download the archive of the new theme. To install it on the website, download the archive in the WordPress admin panel and activate a new theme. Then you can edit the theme right in the website code.

There are alternative WordPress theme builders with intuitive interfaces: Beaver Builder, Page Builder, Elementor.

Conclusion

Creating themes for WordPress provides great opportunities for business owners, bloggers, and service providers. Using a unique template, you can create a special theme with the most convenient set of functions for a particular website. You do not need to be a programmer or layout designer. It will suffice to have basic knowledge of PHP and HTML.

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.

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5

Found an error? Select it and press Ctrl + Enter to tell us