How To Customise Your WordPress Theme Design?

To get the most out of WordPress and your WP website, you need to customise your WordPress theme design or build a WordPress theme. Let’s take a look at how to do this.

How To Create A Basic Design Theme For WordPress

To begin, you need to create a subfolder in the wp-content/themes director in the WP folder.

For the purpose of this tutorial, we will name the folder “tutor_theme”, but the name you give to your folder should ideal match the name of your created theme.

But before begin creating your theme, you need to map out a vision of your website will look in terms of its layout. You will ideally need:

  • Header
  • Sidebar
  • Content area
  • Footer

To customise these areas of your WordPress theme design, you need to create these five files in your tutor_theme directory:

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

These files can be created locally using a text editor, such as notepad.


The header.php file is basic HTML code that contains a single php code and a basic WordPress function. Here, you can specify your meta tags.

After the title line, you need to add:

<link rel=“stylesheet” href=“<?php bloginfo( ‘ stylesheet_url ’ ) ; ?>”>

This is your code for the index.php file:

<?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 Main Area text of the code (after the first line) indicates which section of your theme will be displayed in this area.

The lines after the Main Area text comprise of a PHP code, as well as basic WP functions. These are all essential to WordPress theme design.


Another essential part of your design theme for WordPress, your sidebar.php controls the sidebar – of course!

This is the code you need to add:

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

In the sidebar.php file, you rely on internal WP functions to show the Archives and Categories of your posts.


As well as adding the following code, you also need to add a basic FOOTER label to the footer.php file. You can then add additional text and links to your customised themes. Here is the code:

<div id="footer">


The style.css file is responsible for the basic look and design of your theme. Here is the code you need to add:

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

At this point, your WordPress theme design should be coming along nicely. You will have customised your header, main area, sidebar, and footer. For extra tips from our devs, feel free to read more about theme development.

If you need to design theme for WordPress, contact us now!