How to make WordPress theme – the basics

This is fast and easy tutorial on how to create your own simple WordPress theme. With your own theme you have full control on how your WordPress will look and behave.
Requirement for this tutorial is basic PHP and HTML knowledge.

Create WordPress Theme

First you need to create a folder in wp-content/themes in your WordPress site. Its best if you use locally installed WordPress to test and practice without affecting your real sites. Name the folder how you want to name your theme Рin our case simplecustomtheme. Keep in mind that there may be other simplecustomtheme named themes out there, choose unique theme for your theme, something meaningful. Our first theme will have very simple structure Рheader, main area and footer. We will need to create three files:

  • header.php
  • index.php
  • footer.php
  • style.css

Add these files to your simplecustomtheme¬†folder. Here is the content you need to add to them and I’ll explain the details after each file:

header.php – Here we add the WordPress header information

<html>
<head>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body>
<div> <!-- this div will be closed in footer -->
<h1><?php bloginfo( 'name' ); ?></h1>

index.php – This file will handle the main content of your blog

<?php get_header(); ?>
<div>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(read more)')); ?></p>
<?php endwhile; else: ?>
<p><?php _e('Nothing Found'); ?></p><?php endif; ?>
</div>
<?php get_footer(); ?>

footer.php – the footer data

Custom blog footer
</div>
</body>
</html>

style.css – you need to add stylesheet file or WordPress will claim that your theme is incomplete.

body { text-align: center; }

 

If you’ve worked in your WordPress wp-content/themes folder when you open your Appearance->Themes menu you should see your theme there:

If you can’t find it look at the bottom for some error messages like – your theme is incomplete. It will usually tell you the cause.

This is the bare minimum you need to create a WordPress theme. From here on you work to make it better – add one or more sidebars, custom stylesheet and new functionality. You can download some free themes from internet and look how they are done.
If you want to have your theme shown as an image in the themes menu like the other themes you need to add an image of it named screenshot.png in its folder.
For more information on Theme Creation you can read the official documentation https://codex.wordpress.org/Theme_Development

Leave a Reply

Your email address will not be published. Required fields are marked *