[contact-form-7 404 "Not Found"]
Other Ways To Meet Us :info@zealousys.com
Our Blog
Mar 13

Wordpress Create Custom Theme

By zealousys

If you know html and css, WordPress then it is simple to create a custom theme in WordPress.

This overview shows the process of how a custom WordPress theme can be built from a design concept in to a completed theme.

Before starting to build the theme you should have a very clear idea about your design layout as shown below. As an example, it consists of a Header, Sidebar, Main Content in the middle and Footer.


To start building your theme, create a custom theme template folder in wp-content/themes directory. As an example in this blog, we can give a name as mytheme.

To do this we will have to create the following files into the mytheme directory:

  • header.php – This file will contain the code for the header section of the theme;
  • index.php – This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
  • sidebar.php – This file will contain the information about the sidebar;
  • footer.php – This file will handle your footer;
  • style.css – This file will handle the styling of your new theme;

Each of these file then contains a series of PHP template tags. These tags tell WordPress where to insert the dynamic content. A good example is the <?php the_title(); ?> tag, which pulls in the post title and displays it in your theme:

Now let’s take a closer look at each file and what it should contain:

The header.php file

In this file you should add the following code:

  1. <html>
  2. <head>
  3. <title><?php wp_title(‘«’,true,’right’)?><?php bloginfo(‘name’)?></title>
  4. <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
  5. <script type=”text/javscript” scr=”<?php bloginfo(‘template_url’)?>/js/javascriptfile”></script>
  6. <?php wp_head();?>
  7. </head>
  8. <body>
  9. <div id=”wrapper”>
  10. <div id=”header”>
  11. <h1>HEADER</h1>
  12. </div>
  13. }

Basically, this is simple HTML code with a single line contains a PHP code and a standard WordPress function. In this file you can specify your Meta tags such as the title of your website, Meta description and the keywords for your page.

bloginfo (‘stylesheet_url’); is the snippet used to call the stylesheet. This replaces the manual path we created in the concept. Other files such as JavaScript can be called using the bloginfo (‘template_url’); tag. This renders the path to the theme folder in HTML.
add wp_head();, this is where any additional head elements are placed by WordPress plugins etc.

We have added the beginning of a “div” with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.

After that we have added a simple label HEADER wrapped in a “div” with class “header” which will be later specified in the stylesheet file.

Create index.php

Create index.php in your theme and copy paste the below code.

  1. <?php get_header(); ?>
  2. <div id=”main”>
  3. <?php get_sidebar(); ?>
  4. <div id=”content”>
  5. <h1>Main Area</h1>
  6. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  7. <h1><?php the_title(); ?></h1>
  8. <h4>Posted on <?php the_time(‘F jS, Y’) ?></h4>
  9. <p><?php the_content(__(‘(more…)’)); ?></p>
  10. <hr> <?php endwhile; else: ?>
  11. <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
  12. <?php endif; ?>
  13. </div>
  14. </div>
  15. <div id=”delimiter”>
  16. </div>
  17. <?php get_footer(); ?>

This is where all the meaty stuff begins! At the top we have the get_header(); and get_sidebar(); tags, these call the header.php and sidebar.php files and render the content according to where the tags appear.

The WordPress loop is then used to check for content, if there’s content available it’s rendered onto the page. Within the loop we have various tags that display the post information, such as the_title();, the_time();, the_content();.

Skipping down a little, the loop then displays an else tag, which will display if no posts are found, and the loop is finally closed with an endif. At the bottom we can use get_footer(); to call the rest of the page, which resides in the footer.php file.

The sidebar.php file

In the sidebar.php we will add the following code:

  1. <div id=”sidebar”>
  2. <h2><?php _e(‘Categories’); ?></h2>
  3. <ul>
  4. <?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
  5. </ul>
  6. <h2 ><?php _e(‘Archives’); ?></h2>
  7. <ul >
  8. <?php wp_get_archives(‘type=monthly’); ?>
  9. </ul>
  10. </div>

The sidebar in my design is where the list of pages and categories are held. The sidebar.php file was called from the index using the get_sidebar (); tag

In this file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items; therefore we have wrapped the actual functions in unsorted lists (the <ul> tags).

The footer.php file

You should add these lines to the footer.php file:

  1. <div id=”footer”>
  2. <h1>FOOTER</h1>
  3. </div>
  4. </div>
  5. <?php wp_fotter();?>
  6. </body>
  7. </html>

The footer.php file is probably the simplest file for this theme. The only thing that goes in here is the wp_footer(); tag just before the </body>, so that any extra info can be inserted in the correct place.

With this code we add a simple FOOTER label. Instead of this code you can add links, additional text, the copyright information for your theme and additional objects.

The style.css file

All the details of a WordPress theme are contained within the stylesheet. At the top of your style.css add the following code and then amend the details to suit.


Theme Name: MyTheme

Theme URI: http://www.yoursite.com

Description: My First Custom WordPress theme

Version: 1

Author: Your Name

Author URI: http://www.yoursite.com/author


Add the following lines to the style.css file:

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

This simple css file sets the basic looks of your theme. Those lines set the background of your page and surround the main parts of your site with borders for convenience.

At this point your website should look like this:


What Can We Build for You?


NDA From The Start
We keep your idea safe. We're always willing to sign a Non-Disclosure Agreement with you and fully protect your intellectual property.



For sales inquiry