-->
In Creating Your Own WordPress Theme Part 4 we began adjusting the css to reflect what we want. In this part, we’ll wrap up this tutorial with a completed theme. There will probably be quite a few changes and this will be rather long. Hopefully we’ll have something a little unique when we’re done.
We’ll be working on the sidebars, comment area, footer, and making a few adjustments to several of the php files to make it all come together.
Let’s get started…
First let’s make a few changes to style.css to make the single page display look a little better.
.post {
clear:both;
margin: 0 0 30px 0;
padding: 0 0 20px 0;
border-bottom: 1px dashed #000;
}
/* single */
.post-single {
clear: both;
margin: 0;
padding: 10px 0;
}
.navigation {
margin: 0;
padding: 0;
} Now open single.php, archive.php, attachment.php, and search.php and change:
<div class="post"to:
<div class="post-single" This corrects the way the page displays with the page navigation at the top.
While we’re playing around with single.php, let’s go ahead and change the way the postmetadata displays, since I don’t care for the Kubrick default.
Add this to the bottom of style.css:
p.postinfo {
background:#222;
border:1px solid #000;
color: #ddd;
padding:4px 10px;
font-size:8pt;
margin: 20px 0;
}
p.postinfo a, p.postinfo a:active, p.postinfo a:visited, p.postinfo a:link {
color: #fff;
text-decoration: underline;
}
p.postinfo a:hover {
color: #b00;
background: #fff;
text-decoration: none;
}
span.viewing {
padding:0 0 3px 1px;
line-height:15px;
}
span.tag {
background: url(images/tag.png) no-repeat top left;
padding:0 0 3px 19px;
line-height:17px;
}
span.posted {
background: url(images/page_white_text.png) no-repeat top left;
padding: 0 0 3px 19px;
line-height: 17px;
}
span.author {
background: url(images/group.png) no-repeat top left;
padding: 0 0 3px 19px;
}
span.comment {
background: url(images/comment.png) no-repeat top left;
padding:0 0 3px 19px;line-height:21px;
}
span.calendar {
background: url(images/calendar.png) no-repeat top left;
padding:1px 0 3px 19px;line-height:23px;
}
span.rss {
background: url(images/rss.png) no-repeat top left;
padding:1px 0 3px 19px;
line-height:21px;
} Next open single.php and replace this section of code:
<p class="postmetadata alt">
<small>
This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through the <?php comments_rss_link('RSS 2.0'); ?> feed.
<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open ?>
You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.
<?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.
<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link('Edit this entry.','',''); ?>
</small>
</p>with:
<p class="postinfo">
<!--<span class="viewing">You are viewing "<?php //the_title(); ?>"</span><br />-->
<span class="comment"> <?php comments_number('No comments','1 comment','% comments'); ?></span><br />
<span class="posted">Posted in <?php the_category(', ') ?> </span><br />
<span class="calendar">Written on <?php the_time('D, d F Y ') ?> at <?php the_time() ?></span><br />
<span class="tag"><?php the_tags('Tags: ', ', ', ''); ?></span><br />
<span class="rss">If you liked this post, then consider subscribing to our <a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to our Posts Full RSS Feed!" rel="nofollow">full RSS feed</a>.</span><br />
</p>If you want to use the line saying “You are viewing “, just uncomment it. in other words remove:
<!-- and -->The images are from famfamfam’s silk collection. They’ve got a ton of great small icons you can use for your site.
Now let’s go ahead and do the sidebars. Place the following in your style.css under /* sidebar */:
#sidebar-l {
float: left;
width: 170px;
margin: 0 10px 0 0;
padding: 0;
}
#sidebar-r {
float: right;
width: 170px;
margin: 0 0 0 10px;
padding: 0;
}
#sidebar h2 {
font-size: 11pt;
color: #333;
margin: 0 0 5px 0;
padding: 0 0 3px 0;
border-bottom: 1px solid #333;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar ul li {
margin: 0;
padding: 0;
}
#sidebar ul li ul {
list-style-type: none;
margin: 0 0 15px 0;
padding: 0;
}
#sidebar ul li ul li {
margin: 0 0 5px 0;
padding: 0;
}
#sidebar ul li ul li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar ul li ul li ul li {
margin: 5px 0 0 0;
padding: 0;
}Now open sidebar.php and add the following:
<div id="sidebar">
<div id="sidebar-l"> <-- Add this line
<ul>Now change:
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>to read:
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>All we did above was add the 1 to dynamic_sidebar. Ok, further down before the very last div add:
</div>
<div id="sidebar-r">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : endif; ?>
</ul>
</div>
</div> <-- This is the last div do not add this one. Here for example only.If you are not using the functions.php from our previous posts, then change your functions.php file to read:
if ( function_exists('register_sidebars') )
register_sidebars(2);You should now have two working wigetized sidebars. 
Next, let’s get the comment section to look right on a single page. First open style.css and add the following:
/* comments */
#comments {
width: 560px;
margin: 0;
padding: 0;
}
#comments h3 {
font-size: 11pt;
margin: 0 0 30px 0;
padding: 0;
}
#commentlist ol {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
}
#commentlist li {
margin: 10px 0;
padding: 10px;
}
.norm {
color: #fff;
background: #222;
margin: 0;
padding: 0;
border: 1px solid #222;
}
.norm a, .norm a:active, .norm a:link, .norm a:visited {
color: #fff;
text-decoration: underline;
}
.norm a:hover {
color: #b00;
background: #fff;
text-decoration: none;
}
.alt {
color: #000;
background: #eee;
margin: 0;
padding: 0;
border: 1px outset #b00;
}
.alt a, .alt a:visited, .alt a:link, .alt a:active {
color: #b00;
text-decoration: none;
}
.alt a:hover {
color: #fff;
background: #555;
text-decoration: none;
}
#comments input {
border: 1px outset #b00;
color: #b00;
}
#comments textarea {
border: 1px outset #b00;
color: #b00;
width: 560px;
}
#comments #submit {
color: #fff;
background: #222;
}Now open comments.php and change this:
<!-- 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">to this:
<!-- You can start editing here. -->
<div id="comments">
<?php if ($comments) : ?>
<h3><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<div id="commentlist">
<ol>A little below that find:
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>Change to read:
<li <?php if($oddcomment == '') echo 'class="norm" '; else echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>Below that find:
</ol>Change to:
</ol>
</div> Now at the bottom of comments.php change:
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>to this:
</form>
</div> <-- Add this
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>We’ve done single post, sidebars, & comments. What’s left? The footer…
Open style.css and insert this into the /* footer */ section:
#footer {
clear: both;
margin: 0 0 20px 0;
border-top: 1px solid #222;
}
#footer-l {
float: left;
width: 470px;
margin: 10px 0 20px 0;
padding: 0 0 0 10px;
}
#footer-r {
float: right;
width: 470px;
margin: 10px 0 20px 0;
padding: 0 10px 0 0;
text-align: right;
}Now open footer.php and replace:
<div id="footer">
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
<p>
<?php bloginfo('name'); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.-->
<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
</p>
</div>
</div>With this:
<div id="footer">
<!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
<div id="footer-l">
© <?php the_time('Y'); ?> <a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a><br />
Stay Updated - Subscribe to our <a href="<?php bloginfo('rss2_url'); ?>">News Feed</a>
</div>
<div id="footer-r">
<?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a><br />
<a href="http://wpmania.com/" title="Black/Red Theme by Darryl. See our other themes at WPMania.com">Black/Red Theme</a> by <a href="http://wpmania.com/" title="Black/Red Theme by Darryl. See our other themes at WPMania.com">Darryl</a>.
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>And we’re done! Yay!
You’ve now got a fully operational theme that you can do with as you please. I hope that this tutorial showed you that creating a WordPress theme doesn’t have to be difficult. There are all sorts of things that you can do when creating themes, and this tutorial just touched on the basics, but with a little practice you can create something unique. Good luck with your theme designs.
I’ll upload the full theme in a little while, just as soon as I name it It will be released under the GPL.
2 comments
Posted in WordPress Themes
Written on Sun, 16 March 2008 at 1:10 am
Tags: create your own WordPress theme, themes, wordpress, WordPress Themes
If you liked this post, then consider subscribing to our full RSS feed.
April 9th, 2008 at 7:55 am
thanksssss:)
nice article! ^^
http://www.revphp.es
May 14th, 2008 at 9:18 pm
I tried to create the theme. Due to some hurry my theme was O.K but was just not working. Surely going to make again by following your each and every step