Create wordpress themes is fun. You can create unique Wordpress site look. Its good start to learn about CSS, HTML/XHTML, and PHP. In this sort tutotrial, we will create simple themes with minimum template files. You can look at preview each step.
Anatomy of Theme
WordPress Themes live in subdirectories residing in wp-content/themes/. For example theme named ’simple’ will reside in the directory wp-content/themes/simple/.
Theme template
At the minimum, a wordpress theme consist of two files:
- index.php
- style.css
Starting with themes structure
Create new themes directory in the wordpress themes folder, named with ’simplethemes’. Create two files, index.php and style.css. For now on our themes directory, we have directory structure like this:
-wordpress
-wp-content
-themes
-simplethemes
index.php
style.css
Create themes layout
We will create themes layout that consist of header, footer, content area on the left sides and sidebar on the right side.
Open index.php files on our themes folder and add the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="main"> <div class="container"> <div id="header" class="container"> this is header </div> <div id="sidebar"> this is sidebar </div> <div id="content"> this is content page </div> <div style="clear:both"></div> </div> </div> <div id="footer"> this is footer </div> </body> </html>
Adding CSS stuff to make layout more visible
Now, we adding CSS stuff to make layout more visible by adding border on each element. Open style.css, add the following code.
/*
Theme Name: simplethemes
Theme URI: http://blogfreak.com/
Description: Clean WordPress Themes
Version: 1.0
Author: Mufti Ali
Author URI: http://www.blogfreakz.com/
*/
/*reset*/
*{
margin: 0;
padding: 0;
border:0;
outline:0
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}
img{
border:none;
}
ul, ol
{
list-style: none;
}
a
{
text-decoration: none;
}
a:hover
{
color:#00B4FF;
text-decoration: underline;
}
/*end of reset*/
/*contaner*/
.container{
width: 960px;
margin: 0 auto;
}
/*header*/
#header{
height:100px;
margin-bottom:10px;
border: 1px solid #eee;
}
/*sidebar*/
#sidebar{
position:relative;
float: right;
width: 300px;
margin-left: 10px;
position: relative;
border: 1px solid #eee;
}
/*content*/
#content{
position: relative;
float: left;
width: 600px;
padding:20px;
min-height:400px;
border: 1px solid #eee;
}
/*footer*/
#footer{
margin-top:10px;
border-top: 1px solid #eee;
}
Now include style.css to our index.php. Open index.php and add this code inside “<head></head>” element.
before
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>
after
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
Header stuff
okey, we continue with adding header stuff. Open index .php and add the following code on header.
before
<div id="header" class="container"> This is header </div>
after
<div id="header" class="container">
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
</div>
Adding featured posts
On the index.php, add the following code inside content element:
before
<div id="content"> this is content page </div>
after
<div id="content">
<div id="content">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('more'); ?>
</div>
<?php comments_template(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Wrapping up
At the source code above, we are adding WordPress template tags. Wordpress template tag is somethink like function provide by wordpress enggine to develope wordpress themes. All the tags above are well documented in the WordPress Codex.
[...] Create WordPress Themes from scratch Part I [...]
[...] Create WordPress Themes from scratch Part I. Create themes layout [...]