How to Create Your Own WordPress Theme

Create your own WordPress Theme!

Sounds intriguing? Keep reading. This is not going to be a mind-blowing theme, but if you want to learn what is going on beneath the millions of WordPress websites out there, you should begin with the basics. This is the most basic setup for a WordPress theme, here you can learn how to build WordPress Theme.

Okay, you can go even more basic, but that would be too boring to go through and not give you a full idea of how a WordPress theme works.

WordPress has quickly become the most popular blogging platform on the planet. It makes it easy to get setup and to run with little effort. If you are a programmer, it also lets you create custom pages and themes.

Smartblog WordPress ThemeI rarely build a theme from the beginning anymore. If I begin from scratch I take a starter theme, create a child theme and then I start tweaking. Theme design has become more .. streamlined the few past years.

All themes look slightly similar or it is at possible to create similar designs fairly quickly with a drag-drop interface.

Only few clients these days that have a special interest in making their website run as fast as possible wants to spend money on a custom WordPress theme built from (almost) nothing.

This article will teach you how to create your simple WordPress theme, one which you can customize to your liking. It will lead you through the steps of creating all the necessary parts and putting it all together.

Read also  How To Use Log Tables in WordPress Plugins

Let’s begin!

How to build your WordPress Theme

To start, create a folder for your new theme. Name it anything but make it descriptive. Go to the folder of your website and navigate into wp-content/themes/ – Make a folder such as wp-content/themes/mytheme/

Inside the folder, create the following files using a text editor or HTML program:

  • header.php
  • footer.php
  • sidebar.php
  • index.php
  • stylesheet.css

These files represent the main parts of a WordPress theme. The first three are individual parts of a normal HTML page like the header, footer, and a menu sidebar. The Index file will tie everything together, and the stylesheet will allow you to control the look of the theme.

Creating The Main Files

It’s time to add the code. We’ll go over the important parts, but let’s copy and paste the following first:

Header.php

<html>
<head>
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php%20bloginfo('stylesheet_url');%20?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><?php the_title(); ?></h1>
</div>

Footer.php

<div id="footer">
<p>Footer<p>
</div>
</div>
</body>
</html>

Sidebar.php

<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</div>

Each PHP page is essentially recreating the normal parts of HTML code. The PHP will allow it to dynamically alter the code on the fly.

Index.php

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Site Content</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

Index.php ties everything together. If you want to include additional elements, you will simply have to create a new PHP page and include it in Index.php.

Read also  How To Check if the cURL PHP extension is loaded

Stylesheet.css

/*
Theme Name: My Most Basic Starter Theme
Theme URI: http://wordpress.org/themes/twentythirteen
Author: Me, myself and I
Description: This is a very simple basic starter theme used to show how simple it is to get started with making WordPress themes.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mybasicstartertheme

This theme, like WordPress, is licensed under the GPL.

*/

body { text-align: center; }
#wrapper { display: block; border: 1px black solid; width:90%; margin:0px auto; }
#header { border: 2px black solid; }
#content { width: 75%; border: 2px black solid; float: left; }
#sidebar { width: 23%; border: 2px black solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px black solid; }
.title { font-size: 11pt; font-family: arial; font-weight: bold; }

Stylesheet.css controls the appearance of the site. This is a normal stylesheet, so it will work the same like on an HTML site.

Once you are done, upload the whole folder to your WordPress site’s wp-content/themes directory and select the theme in the theme manager.

This is not going to win any design awards, and you have many hours of work ahead of you to get a meaningful site up and running, this just shows you how easy it is to get started with building your own theme from the beginning.

 

Leave a Comment

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

Free eBook - 

Guide to success with SEO

Join the newsletter for more interesting articles, discount code for SEO Booster Pro and much more.

Guide to success

with SEO 2018

FREE

We respect your privacy and do not share your details with others

Join our newsletter and get a free eBook, interesting articles, discount codes and much more.