Here’s a screenshot:

Here’s the download link: Blog It 750 Dark

Everything is the same as the Blog It 750 theme, except the color. Enjoy!

The class for aligning pictures is “left” or “right” depending on what you want. If you’re looking to place it in the center like above, then wrap the image tag in a

<div align="center"> </div>

or add a center class to style.css. It’s up to you how you want to handle that.

As for typography, here’s a sample:

This is the H1 tag

This is the H2 tag

This is the H3 tag

This is the H4 tag

This is the H5 tag

And Finally H6 tag

The margins and padding are set to 0 (zero) for each of these, so if you use them make sure that you also include a line break (< br />) after you use them to allow for proper spacing.

Here’s the download link: Blog It 750

Of course, if you like black instead of white, we have that too:

Here’s the download link: Blog It 750 Black

Or perhaps you like black and red instead:

Here’s the download link: Blog It 750 Black and Red

These are, of course, released under the GPL. I would appreciate it if you kept the link in the footer though. Have fun with them!

The theme for the other site is actually wider than this one and has one more sidebar. I just thought that I would make a version that would fit on a 800×600 screen for kicks.

I don’t have a name for this one since I haven’t decided on whether or not I’m going to release it. Does anyone want to suggest one?

I’m not a fan of dark themes (my wife is), but I think it looks ok. What do you think?

*UPDATE*
Forgot to mention, for her site, the link color is actually white instead of the dark orange, since she hated the orange.

Download the Black & Red Theme

*UPDATE*

I updated the file to reflect the changes that I’ve made on the main index page for the famfamfam silk icons and how pages are displayed. Also, for those of you who don’t like red (the red was making my eyes bleed ) there is now a blue option.

Download the Black & Blue Theme

*UPDATE AGAIN*

Updated both files to remove the double Tags on single.php.

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 &#8220;<?php the_title(); ?>&#8221;</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 &#8220;<?php the_title(); ?>&#8221;</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">
		&copy; <?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.

Since I wasn’t happy with the link colors, I played around with various color combos for a couple of hours until I found something that I think looks good and is a little different. So here’s the changed css…

body, html {
	margin: 0;
	padding: 0;
	color: #000;
	background: #fff;
	font: 10pt verdana, arial, sans-serif;
	}

a, a:link, a:visited, a:active {
	color: #b00;
	text-decoration: none;
	}

a:hover {
	color: #fff;
	background: #555;
	text-decoration: none;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}

h1 {
	font-size: 12pt;
	}

h2, h3 {
	font-size: 11pt;
	}

h4, h5, h6 {
	font-size: 10pt;
	}

blockquote {
	margin: 10px 20px;
	padding: 10px;
	background: #eee;
	border: 1px solid #ccc;
	}

.alignleft {
	float: left;
	margin: 0;
	padding: 0;
	}

.alignright {
	float: right;
	margin: 0;
	padding: 0;
	}

.left {
	float: left;
	margin: 0 10px 5px 0;
	padding: 0;
	}

.right {
	float: right;
	margin: 0 0 5px 10px;
	padding: 0;
	}

p {
	line-height: 18px;
	}

small {
	font-size: 9pt;
	}

code {
	font-family: "Courier New", courier, verdana, arial, sans-serif;
	}

/* layout */

#page {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	}

/* header */

#header {
	width: 960px;
	height: 80px;
	margin: 0;
	padding: 0;
	}

#header-l {
	float: left;
	width: 400px;
	margin: 0;
	padding: 0;
	}

#header-r {
	float: right;
	width: 560px;
	margin: 0;
	padding: 0;
	}

#header a img {
	border: none;
	text-decoration: none;
	}

.title {
	font: 20pt bold arial, verdana, sans-serif;
	margin: 15px 0 0 10px;
	padding: 0;
	}

.description {
	font: 11pt arial, verdana, sans-serif;
	margin: 0 0 0 83px;
	padding: 0;
	}

.title a, .title a:visited, .title a:link, .title a:active, .title a:hover {
	color: #000;
	text-decoration: none;
	background: #fff;
	}

#search {
	margin: 30px 10px 0 0 ;
	padding: 0;
	text-align: right;
	}

#searchform #s {
	width: 250px;
	}

#searchform #searchsubmit {
	color: #fff;
	background: #555;
	}

#searchform input {
	border: 1px outset #b00;
	color: #b00;
	}

/* navigation */

#navbar {
	display: block;
	width: 960px;
	margin: 0 auto;
	height: 30px;
	font-family: arial, verdana, sans-serif;
	font-weight: bold;
	/* border-top: 1px solid #000;
	border-bottom: 1px solid #000; */
	background: #000 url(images/navbar.gif);
	}

#navbar ul {
	margin: 0;
	padding: 0 0 0 10px;
	float: left;
	}

#navbar li {
	display: inline;
	}

#navbar ul li.current_page_item a {
	color: #ccc;
	height: 24px;
	border: 0px;
	padding: 6px 10px 0 10px;
	}

#navbar ul li.current_page_item a:hover {
	color: #fff;
	text-decoration: none;
	background: #b00 url(images/navbar-hover.gif) repeat-x;
	}

#navbar a {
	color: #ccc;
	float: left;
	margin: 0;
	height: 24px;
	padding: 6px 10px 0 10px;
	}

#navbar a:hover {
	color: #fff;
	text-decoration: none;
	background: #b00 url(images/navbar-hover.gif) repeat-x;
	}

/* content */

#content {
	float: left;
	width: 560px;
	margin: 10px 0 0 10px;
	padding: 0;
	}

.post {
	margin: 0 0 30px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px dashed #000;
	}	

/* sidebar */

#sidebar {
	float: right;
	width: 360px;
	margin: 10px 10px 0 0;
	padding: 0;
	}

/* footer */

#footer {
	clear: both;
	text-align: center;
	}

/* single */

.navigation {
	margin: 0;
	padding: 0 0 50px 0;
	}

As you can see, I’ve changed few things, including adding 2 graphics for the navbar. Almost all of the changes have to do with color, although there are changes for the single page navigation, alignleft, alignright, and search.

So not a whole lot done this evening, but we’ll make better progress tomorrow. Until then…

In Creating Your Own WordPress Theme Part 2 we finished up with a very basic theme with no styling. It works, but it’s ugly. Today we’re going to pick up right where we left off and get most of the layout, minus any graphics, done.

Open style.css so we add in some of the basics including font, font-size, h1, etc. Here’s what I’ve done so far…

body, html {
margin: 0;
padding: 0;
color: #000;
background: #fff;
font: 10pt verdana, arial, sans-serif;
}

small {
font-size: 9pt;
}

Next let’s setup the page. I want the page to be centered on the screen with a fixed width of 960 pixels.

#page {
width: 960px;
margin: 0 auto;
padding: 0;
}

What this is telling the browser to do is make the width of the page 960 pixels, no margin top or bottom, center the page in the browser (that’s what auto is for), and no padding. If you’re not familiar with CSS, then use this tutorial to learn more about it. It’s what I did.

Ok, the header is a bit more complicated, although not much because I want to separate the header into two distinct sections next to each other, one for the logo, and the other for the search form. So here’s the css…

/* header */

#searchform #s {
width: 250px;
}

As you can see, the left side is 400 pixels wide and the right is 560 pixels. This should give us plenty of room to put a decent sized search input. Let’s change up our header.php file to reflect what we’ve done.

< div id="header" >
< div id="header-l" >
< div class="title" >< a href="< ?php bloginfo('home'); ? >" title="WordPress Mania - Crazy About WordPress" >< ?php bloginfo('name');? >< /a >< /div >
< div class="description" >< ?php bloginfo('description'); ? >< /div >
< /div >
< div id="header-r" >
< div id="search" >< ?php include(TEMPLATEPATH . '/searchform.php'); ? >< /div >
< /div >
< /div >

And the header is done. Let’s go ahead and add some navigation below the header for pages. Here’s the css:

/* Navigation */

#navbar a:hover {
color: #c00;
text-decoration: none;
}

And now add the following at the bottom of header.php

< div id="navbar" >
< ul >
< li class="< ?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ? >current_page_item< ?php } else { ? >page_item< ?php } ? >">< a href="<?php echo get_settings('home'); ?>" >Home< /a >< /li >
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ? >
< /ul >
< /div >

Now to wrap up Part 3, we’re going to make two separate columns in the main body for content and sidebar and toss in the footer for good measure. So here’s the rest of the css for this lesson.

/* content */

.navigation {
margin: 0 0 30px 0;
padding: 0;
}

You can see we have a content area that will be on the left that is 580 pixels wide, a sidebar on the right that is 360 pixels, and the footer at the bottom that aligns the text to the center of the page.

Well, that’s it for this part, next time we’ll do more with the content area, sidebars, and if we have time, the comments. Until then…

Basic.zip