WPservice DEVELOPMENT STUDIO PRESENTS
LONG-TERM GROWTH
We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

How To Customise Your WordPress Theme Design

wordpress theme designTo 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.

header.php

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 ’ ) ; ?>”>
index.php

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; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?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.

sidebar.php

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'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

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

footer.php

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">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

style.css

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!

Comments are closed.