WordPress is a powerful blogging tool to using Content Management System (CMS). By default, WordPress provides lots of inbuilt themes, which can be used you in your website. If you want to build your own custom theme then WordPress provides an option for it.
In this article I will show you how can you built your own theme (Customized theme). Let me tell you basic steps for using customized theme in WordPress.
Step 1: Creating Main Index Template File
Step 2: Creating Template File
Step 3: Creating CSS File
Step 4: Upload and Install Theme
Let’s see the brief the demonstration on it.
Main Index Template File:
Main index file is nothing more than an index file (index.php) file which contain the whole structure of customized theme. Let’s see a snapshot.
Code of ‘index.php’ file:
<?php get_header(); ?> <!--/call header function of WordPress -->
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="post-cat"><?php the_category(', ') ?></span>
<span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span>
</div>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<span class="previous-entries"><?php next_posts_link('Older Entries') ?></span>
<span class="next-entries"><?php previous_posts_link('Newer Entries') ?></span>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div> <!--/content section-->
<?php get_sidebar(); ?> <!--/sidebar section -->
<?php get_footer(); ?> <!--/footer section -->
Code of ‘header.php’ file:
<!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=ISO-8859-1" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>
<!--/header -->
</div>
Code of ‘sidebar.php’ file:
<div id="sidebar">
<ul class="searchform">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</ul>
<h3>Category</h3>
<ul class="ul-cat">
<?php wp_list_categories('show_count=1&title_li='); ?>
</ul>
<h3>Archives</h3>
<ul class="ul-archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
<!--/sidebar -->
Code of ‘footer.php’ file:
<div id="footer">
<div class="left-col">
<h4>Recent Posts </h4>
<?php query_posts('showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li>
<strong><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a></strong><br />
<small><?php the_time('m-d-Y') ?></small>
</li>
<?php endwhile;?>
</ul>
</div>
<div class="left-col">
<?php include (TEMPLATEPATH . '/simple_recent_comments.php'); /* recent comments plugin by: www.g-loaded.eu */?>
<?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(5, 60, '<h4>Recent Comments</h4>', ''); } ?>
</div>
<div class="right-col">
<h4>About</h4>
<p>Welcome to my design blog and portfolio showcase.</p>
<p>Feel free to <a href="#"> contact me.</a></p>
</div>
<hr class="clear" />
</div>
<!--/footer -->
</div>
<!--/page -->
<div id="credits"><span class="left">Powered by <a href="http://www.wordpress.org">WordPress</a> | Theme by <a href="http://xyz.com">Arun Kumar Singh</a></span> <span class="right"><a href="<?php bloginfo('rss2_url'); ?>" class="rss">Entries RSS</a> <a href="<?php bloginfo('comments_rss2_url'); ?>" class="rss">Comments RSS</a></span></div>
</body>
</html>
Template file:
Templates are PHP source files used to generate the pages requested by visitors, and are output as HTML. WordPress allows you to define separate templates for the various aspects of your site. It is not essential, however, to have all these different template files for your site to fully function.
Many template files are used in website such as archives.php, single.php, comments.php, tag.php, taxonomy.php, author.php, date.php, search.php etc. Here I am creating four template file, let’s see the PHP code of these.
Code of ‘archives.php’ file:
<?php
/*
Template Name: Archives
*/
?>
<?php get_header(); ?>
<div id="content">
<h2><?php the_title(); ?></h2>
<?php query_posts('showposts=-1'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M d Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
</li>
<?php endwhile;?>
</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Code of ‘comments.php’ file:
<?php // Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'class="alt" ';
?>
<!-- You can start editing here. -->
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit',' ',''); ?></small>
<?php comment_text() ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif;?>
Code of ‘searchform.php’ file:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search:'); ?></label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="GO" />
</form>Code of ‘single.php’ file:
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><?php the_title(); ?></h2>
<span class="post-cat"><?php the_category(', ') ?></span>
</div>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
<?php comments_template(); ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<span class="previous-entries"><?php previous_post_link(' %link') ?></span>
<span class="next-entries"><?php next_post_link('%link') ?></span>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry!!.</p>
<?php endif; ?>
</div>
<!--/content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
CSS File:
CSS (Cascading Style Sheet) file is very important file which is used for controlling the presentation or layout of web page. Here I am creating a CSS file with name ‘Style.css’. Let’s have a look:
/*
Theme Name: MyCustomTheme
Theme URI: http://www.xyz.com
Description: A theme by <a href="http://www.xyz.com">Arun Kumar Singh</a>.
Version: 1
Author: Arun Singh
Author URI: http://www.ndesign-studio.com
*/
body {
font: 75%/150% "Trebuchet MS", Tahoma, Arial;
color: #333333;
background: #FFFFFF url(images/main-bg.gif);
margin: 0px;
padding: 0px 0px 40px;
width : 800px ;
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #CC6633;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: underline;
}
p {
padding: 0px 0px 15px;
margin: 0px;
}
h1 {
margin:0px;
background: url(images/header-icon.gif) no-repeat;
padding-left: 70px;
height: 60px;
font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
color: #c9eefe;
}
h1 a{
color: #c9eefe;
text-decoration: none;
}
h1 a:visited{
color: #c9eefe;
text-decoration: none;
}
h1 a:hover{
color: #ffffff;
text-decoration: none;
}
h2 {
color: #59770e;
margin: 0px 0px 2px;
border-bottom: 1px dotted #CCCCCC;
letter-spacing: -1px;
font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
padding-bottom: 3px;
}
h2 a, h2 a:visited {
color: #59770e;
text-decoration: none;
}
h2 a:hover {
color: #FF6600;
text-decoration: none;
}
h3 {
font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color: #758d38;
margin: 10px 0px 5px;
}
form {
margin:0px;
padding:0px;
}
#page {
margin: 0px auto;
width: 760px;
border-bottom: 5px solid #d5e6eb;
border-left: 5px solid #d5e6eb;
border-right: 5px solid #d5e6eb;
background: #FFFFFF url(images/content-bg.gif) repeat-y;
}
#header {
background: #0FACEA url(images/header-bg.jpg) no-repeat;
height: 170px;
border-bottom: 3px solid #59780a;
position: relative;
}
#headerimg {
position: relative;
padding: 30px 0px 0px 40px;
height: 60px;
}
#headerimg .description{
position: absolute;
left: 110px;
bottom: 3px;
color: #c9eefe;
font-size: 14px;
}
#nav {
list-style: none;
margin: 0px;
position: absolute;
left: 0px;
bottom: 0px;
}
#nav li {
float: left;
margin-left: 5px;
}
#nav a {
color: purple;
text-decoration: none;
background: #6b9a11 url(images/nav-button-bg.gif) repeat-x;
padding: 5px 15px;
font: bold 14px/100% Arial, Helvetica, sans-serif;
border-top: 1px solid #AFCD69;
border-left: 1px solid #AFCD69;
border-right: 1px solid #AFCD69;
display: block;
}
#nav a:visited {
color: purple;
text-decoration: none;
}
#nav a:hover {
color: #000000;
}
#content {
padding: 10px 0px 30px 20px;
float: left;
width: 485px;
overflow: hidden;
}
.entry {
clear: both;
padding-top: 10px;
}
.post-cat {
background: url(images/mini-category.gif) no-repeat left center;
padding-left: 18px;
float:left;
font-size: 95%;
color: #999999;
}
.post-comments {
background: url(images/mini-comments.gif) no-repeat left center;
padding-left: 18px;
float: right;
font-size: 95%;
}
#comments, #respond {
border-bottom: 1px dotted #CCCCCC;
padding-bottom: 5px;
}
.commentlist {
margin: 10px 0px;
padding-left: 20px;
line-height: 130%;
}
#sidebar {
float: right;
padding: 0px 10px 20px 0px;
width: 220px;
}
#searchform {
background: #bcd67e url(images/searchform-bg.gif) repeat-x;
width: 220px;
padding: 10px 10px 10px 10px;
float:right;
}
.ul-archives li a:hover{
color: #FF6600;
text-decoration: none;
}
#footer {
clear: both;
background: #048DB4 url(images/footer-bg.gif) no-repeat;
color: #ACD7EE;
font-size: 95%;
line-height: 130%;
}
Upload and Install Theme:
After creating these files, puts all in one folder. Here I am putting all file within ‘MyCustomTheme’ folder, now zip this folder and upload into WordPress.
Let’s see an example.
Login in to WordPress Administrator Panel and open Dashboard->Appearance->Themes->Install->Upload, now upload your zip file here and click ‘Install Now’ button.
After successfully installation the theme, activate theme by clicking ‘Activate’ button.
Output:
Leave Comment