How To Create WordPress Theme

How to Create a WordPress Theme

We are going to create a simple WordPress theme to have the basic idea of WordPress theme development.

Theme Structure

There will be five files in our theme:

  1. style.css – Will have the CSS style and theme information, like – author and other complimentary stuff
  2. index.php – Is the main webpage template
  3. header.php – Is template file for the header area of webpage
  4. sidebar.php – Is template file for the sidebar area (right side) of webpage
  5. footer.php – Is template file for the footer area of webpage

style.css

Let’s create style.css first. Create a new file in your code editor, place following code in it and save it as style.css

/*Theme Name: Mytheme (Theme's name)
Theme URI: Mytheme.com (Theme's URL)
Description: My first cool theme (A brief description of your theme)
Version: 1.0 (Theme version)
Author: the_champ (Your name or WordPress.org's username)
Author URI: thechamplord.wordpress.com (Your web address)
Tags: white, light, right-sidebar (Tags to locate your theme in the WordPress theme repository)
*/

Note: Text in small brackets in above code is only to describe the purpose of the information. You can remove it from the code.

Do not leave out the comment tags (/*…..*/) from the code mentioned above. This tells WordPress the name, author and other stuff regarding your theme. The theme name you have specified in the code will let you activate/deactivate the theme from WordPress admin.

Add the following CSS style in the file, after the comment tag, as mentioned below:

/*Theme Name: Mytheme (Theme's name)
Theme URI: Mytheme.com (Theme's URL)
Description: My first cool theme (A brief description of your theme)
Version: 1.0 (Theme version)
Author: the_champ (Your name or WordPress.org's username)
Author URI: thechamplord.wordpress.com (Your web address)
Tags: white, light, right-sidebar (Tags to locate your theme in the WordPress theme repository)
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

The class names mentioned in the above code will be introduced in the template files we will create shortly.

index.php

As mentioned before, this is the main template of the webpage. Create a new file in your code editor, place following code in it and save it as index.php

<?php get_header(); ?>
<div class="content"></div><!--.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

First line in above code includes the header.php template file (we will create shortly) from theme folder. Similarly, third and fourth lines include sidebar.php and footer.php template files (we will create shortly). You can specify the main content of the webpage in the div having class content. Generally, this part displays the posts and comments of your website. Specialized piece of code used for this purpose is called the Loop.

To display posts and comments in content section of index.php template, place following code between the <div class=”content”> and </div> tags as mentioned below and save the file back:

<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--.post-header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--. entry-->
<footer class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</footer><!--.post-footer-->
</div><!-- .post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<nav class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</nav><!--.navigation-->
<?php else : ?>
<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 header.php

This is the template file for header area of the webpage. Create a new file in code editor, place following code in it and save it as header.php


<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<p>Header section. Logo and other details come here.</p>
</header>

sidebar.php

This is the template file for sidebar area (right side) of the webpage. Create a new file in code editor, place following code in it and save it as sidebar.php

<div class="sidebar">
 <p>This is the side bar</p>
</div><!-- .sidebar -->

footer.php

This is the template file for footer area of the webpage. Create a new file in code editor, place following code in it and save it as footer.php

<footer class="footer">
<p>This is the footer area</p>
</footer>
<?php wp_footer(); //Crucial footer hook! ?>
</body>
</html>

Packaging Theme

Create a folder, say – Mytheme, to contain all the above files. You can name this folder whatever you like, however keep it the same as name of the theme specified in style.css to avoid confusion. Compress it into a ZIP archive using WinRar or an equivalent program. Upload your new theme to your WordPress installation navigating to Appearance > Themes > Add New > Upload Theme, activate it and see your converted theme in action!

Pretty easy, isn’t it? This tutorial covers basic layout of a WordPress theme and is of great value for beginners. Next time we will play around with more complex aspects of WordPress theme development.

Stay tuned 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s