Create WordPress Theme

In this lesson, we will discuss how we can Create WordPress Theme. WordPress theme contains all the files required to create a website. WordPress theme gives an additional look and functionality on your WordPress website. They also provide a great way of security. Choosing a right theme is always a time-consuming process that leads to longer coding. We don’t even think we can create our custom WordPress theme. In this lesson, we will show how we can create own WordPress theme.

We need to create some basic files which are as follows:
1. index.php file
2. header.php file
3. footer.php file
4. sidebar.php file
5. style.css file
Step (1) – Create a file and save as index.php. Open the file and paste the following code:

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</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; ?>
<?php get_sidebar(); ?>
<div id="delimiter">
<?php get_footer(); ?>

The index files call to header, footer and sidebar template files which we create later. This is the file which is called first when we request for the site. This file defines the front page of your website.
Step (2) – Create a file and save as header.php. Open the file and paste the following code:

<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<div id="wrapper">
<div id="header">

The header file contains the meta tag and the links to the stylesheets. The body tag includes DIV ID tags; wrapper and header that define the boxes and the holds the header content.
Step (3) – Create a file and save as footer.php. Open the file and paste the following code:

<div id="footer">

This is your footer file. We are just using a dummy footer. You can customize according to you.
Step (4) – Create a file and save as style.css. Open the file and paste the following code:

Theme Name: demo
Theme URI:
Description: Demo WordPress Theme
Author URI:
Template: demo

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

This Stylesheet is used to give some basic look for your theme. You can use this stylesheet to style your whole theme.
Step (5) – Create a file and save as sidebar.php. Open the file and paste the following code:

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

We are using internal functions to show category and archives of posts. It will be shown as a list by WordPress function.
Step (6) – You can use any image for the theme thumbnail image. Rename the image as screenshot.png and copy the file to your FTP where all your rest files are placed.
Step (7) – Go to WordPress admin and hover over Appearance and click on Themes option.

Step (8) – You can see your theme is visible there. Click on Activate button as shown in the screenshot:

Step (9) – Visit your website front end to see the look of the theme.

Spread the love