E.Share

Today’s free WordPress theme is designed by Roshan of CSSHeaven.org (you might know him from his RamblingSoul themes). I ported the static template to WordPress and packed it with WordPress 3.0-specific features, including custom menus, headers, and backgrounds. More on that below.

WordPress 3.0 Menus

As stated above, this theme includes WordPress 3.0 menu support which means you have very flexible control over what links show up in your header menu. If you don’t set up a menu, it will default back to a list of WordPress pages.

For further reading on implementing the WordPress 3.0 menu feature into your own themes, I found these links really helpful:

• Goodbye headaches, hello menus! – A write-up by Justin Tadlock on WordPress 3.0 menus.
• wp_nav_menu – The official WordPress codex on the function used for the menus.

Custom Header

If you want to get rid of the red header image displayed directly below the nav menu, the custom header feature is for you. You’ll need an image 980 pixels wide and 170 pixels high to replace it. If it’s smaller than that, the CSS is coded to position the background image in the center of the div.

For more information on implementing this in your own theme, I found the add_custom_image_header page on the WordPress codex very useful, although I modified it a bit so it doesn’t load styles in the header, just an inline background image declaration on the “header” div.

Of course, feel free to check out the code in header.php and functions.php to see how exactly I did it.

Custom Background

If you want to customize the background image and get rid of the greenish background image currently used, use this feature.

This is by far the easiest feature to implement in a theme, thanks to WP Engineer for the one line code you need to add to your theme’s functions.php file.

add_custom_background();

You also need a wp_head() hook in your header so the internal stylesheet that handles the custom background styles can be embedded.

Custom Thumbnails

As you can see on index/archive/search pages, the posts are laid out in a gallery format. For this, I decided to use the built-in WordPress thumbnail system. It will automatically crunch the images to 270×140.

Thanks to Mark Jaquith’s tutorial for information on integrating this feature into the theme.

Widgets

Like almost all the other themes here, Green Tea is widget ready. The widgetized areas are the sidebar, left footer, right footer, and 404 page.

Conclusion

This should probably go without saying, but you’re going to need to be running WordPress 3.0 for this theme to not spit out a bunch of errors. It’s not backwards compatible, and I did this on purpose to help force people to upgrade to the latest version (which you should be doing anyway).

The reason I chose this particular template because it seemed to have as many elements that I could use to integrate WordPress 3.0 specific features. While I wouldn’t necessarily use these features on my own sites, I can see the value if you’re developing themes for public release or clients.

WordPress 3.0 menu integration is pretty much a must for those, as it makes things so much easier for users in customizing links in menus versus the old way: page lists, category lists, or hard-coded menus. Depending on the design, custom headers would be nice and to some extent, maybe even custom backgrounds (although I’m not a huge fan of this one).

Thanks to Max Luzuriaga for the suggestion of the Green Tea name which I got on Twitter.

Let me know what you think of the theme in the comments, I’d love to hear your feedback!

License: Everything is licensed under the GPL, the original template (including CSS and artwork) and the WordPress portion.

Related posts:

1. WP Clean & Green – Free WordPress Theme
2. RS16 – Free WordPress Theme
3. RS11 – Free WordPress Theme

Got a couple requests today to port this template by Mohd Huzairy to WordPress, so I did. As you can see, it’s super simple with a very minimalistic design. In the WordPress theme, I added a few features like a widgetized sidebar and threaded comments.

Related posts:

1. Simple Gray – Free WordPress Theme
2. RS11 – Free WordPress Theme
3. Jungleland – Free WordPress Theme

Today we have yet another a ported WordPress theme originally designed by Roshan of Rambling Soul. It’s pretty much just a standard blog theme with three widgetized areas (404, sidebar, intro text) and threaded comments.

Related posts:

1. RS11 – Free WordPress Theme
2. WP Rambling Soul 7 – Free WordPress Theme
3. Spotlight Blog – Free WordPress Theme

Here’s the first resurrected theme released on Theme Lab. Originally designed by Small Potato back in 2007, I ported it to the Thematic theme framework. It now includes features such as threaded comments as well as many features inherited from the parent theme, Thematic, such as new markup.

As always, remember how to install a WordPress child theme. You will need both Thematic and the Braintied child theme uploaded to your themes directory. Just activate Braintied.

Related posts:

1. Astatic – Free Thematic Child Theme
2. Monochromatic – A Thematic Child Theme
3. Should Child Themes Be Listed on WordPress.org?

Today we have another awesome free WordPress theme, which I ported from a Styleshout template. It’s more or less a pretty standard blog design with a bunch of widgetized areas (mostly in the footer), threaded comments support, and post thumbnail integration, among other things.

Let’s get into the features in more detail.

FlickrRSS Support

If you have the FlickrRSS plugin installed, you can configure it to show your various Flickr photos. This will show up in your footer (above all the normal widgets).

This plugin is optional and will not break anything if you don’t want Flickr photos to show up.

Post Thumbnail Support

Like the SongSpace theme, this theme makes use of WordPress’ built-in post-thumbnail feature.

Since post thumbnails were introduced in 2.9, you’ll need to at least WordPress 2.9 to run this theme.

Archives Template

Like other Styleshout ported themes including Jungleland and FreshPick, Cool Blue has an archive template that differs from the usual index template.

I used the same template on the search results pages too.

Social Bookmarking

On single post pages I integrated the social bookmarking section available in the original Styleshout template.

Thanks go to Jeff Star of PerishablePress for the fully valid, SEO-friendly social media links for WordPress and also to the Sociable plugin (for LinkedIn and NewsVine).

To enable the e-mail icon, you’ll need to install the WP Email plugin by Lester Chan.

Opacity Hover Effect on Social Icons

I had some feedback from a beta tester, Muhammad Haris, who suggested that the icons would look good if they were set to 80% opacity by default and 100% on hover.

While I don’t like to mess too much with ported theme code, it’s actually pretty simple if you really want to. Just add the following lines in your style.css file:

.share-box a img{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}
.share-box a:hover img{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

If a browser doesn’t support the opacity feature, don’t worry about it, the images will just show up as normal. Of course you can change all the 80’s and .8’s in the first part to whatever percentage you see fit.

Threaded Comments

The original template had a threaded comments design built-in, so I integrated it with a custom callback (plus a few CSS changes).

Widgetized Stuff

The Cool Blue WordPress theme has six widgetized areas. One in the sidebar, four in the footer (for each column), and one on the 404 template.

Pictured above is the fat, fully widgetized footer included in the Cool Blue theme.

To handle the “Updates” part, I coded in a custom widget to input your feed URL, Facebook URL, Twitter URL, and E-mail subscription URL. I’d recommend you place it in the “Footer One” widget area.

Thanks to WP Engineer for the code.

No Theme Options Page

That’s right, this is a feature. Why? Because I really couldn’t think of a good reason to include one that couldn’t be better accomplished by a separate plugin. Expect a follow up (opinion) post regarding this soon.

Conclusion

The Styleshout ports are easily the most downloaded themes here, although my download counter has been busted ever since I upgraded to 2.8 so I’m not 100% sure if anyone has overtaken them. I doubt it.

Hope you all like the theme, let me know what you think in the comments.

Related posts:

1. Keep It Simple – Free WordPress Theme
2. Blue World – Free WordPress Theme
3. TechJunkie – Free WordPress Theme

It’s been a long time since I’ve released a Thematic child theme. This one is called Astatic, and it’s designed to be a very minimalistic WordPress blog theme with posts formatted in two columns on index pages.

If you remember how to install a child theme, you also need to have Thematic uploaded to your /wp-content/themes/ directory, but activate Astatic.

Notes

• I removed several elements through the functions.php file. I could’ve used display: none; to disable them through CSS, but that kinda freaks me out.
• The blog title will show up wrapped in an H1 tag on non-singular pages. On singular pages, the post title uses the H1 tag. This is to keep the SEO crazies happy since I removed the blog description (see above note) which usually handles the H1 stuff.
• The posts on the index pages are styled in two columns on index pages through the .not-singular selector. Credits go to the body_class function.
• Only three files included in the child theme: screenshot.png, functions.php, and style.css. No images are used in the design at all.

I tried to make the code in functions.php pretty well commented so you can hopefully figure out what’s going on there. I may do a follow up post on my development process.

Credits

Every time I make a new Thematic child theme is a learning experience. Here are a few resources I used to help me out:

• ThemeShaper Forums – This place has a wealth of useful info in their archives. Tip: Use a site specific Google search followed by your query (i.e. site:themeshaper.com/forums/ child theme question).
• The Right Way to Override Theme Functions – A nice tutorial on overriding Thematic functions. This information was probably gone over in some post in the Thematic forums (see above) too.
• Useful Thematic Filters – This post has a nice list of useful Thematic filters (like the title would suggest).

There are also a lot of good info on the ThemeShaper blog, particularly through the How To Modify WordPress Themes The Smart Way series.

Conclusion

Hope you all like the design. It all started when I coded this when I was bored, then I decided to turn it into a Thematic child theme.

Most of you who have seen my “designs” know that there are very few images, mostly because I suck at making them in Photoshop. Hence, they are almost always pure CSS.

I know it’s really simple but I’m sure it could come in handy for something. Let me know what you think in the comments.

Related posts:

1. Dissecting Astatic – Thematic Child Theme Tutorial
2. Braintied – Free Thematic Child Theme
3. Monochromatic – A Thematic Child Theme

Today we have a free WordPress theme designed by Brad of DemusDesign. I took the coded design and ported it to WordPress. This is the first theme here which makes use of the_post_thumbnail feature to handle thumbnails and needs at least WordPress 2.9 to function properly. Other features include several widgetized areas, including a widgetized footer.

And now onto the features in more detail…

Widgetized Areas

Included in the theme are five widgetized areas.

• One for the sidebar
• Three for each footer column
• One on the 404 template

Color Schemes

Included in the original template are several color scheme stylesheets: blue, brown, green, orange, pink, purple, red, yellow. In the WordPress theme, I decided to integrate these with a very simple theme options page dropdown.

The green one is pictured in all the screenshots. If you don’t set anything, the default color scheme is blue.

Post Thumbnails

Instead of using TimThumb like I usually do to handle resizing post thumbnails, I decided to integrate a feature that was made available to themes with the WordPress 2.9 release called the_post_thumbnail.

Simply upload an image like you usually do, select it as your post thumbnail, and it will be displayed on the site. No messing around with custom write panels any more.

Keep in mind this is my first attempt at integrating post thumbnails into a theme with the_post_thumbnail, so it may take some experimenting to get them just right.

Further the_post_thumbnail() resources:

• New in WordPress 2.9: Post Thumbnail Images – Mark Jaquith
• The Ultimative Guide For the_post_thumbnail In WordPress 2.9 – WP Engineer

Conclusion

Hope you all like this WordPress theme. Thanks once again to Brad of DemusDesign for the great template.

Let me know what you think in the comments. Would be especially interested to hear your feedback regarding the_post_thumbnail in comparison to something like TimThumb and using custom fields.

Related posts:

1. Photabulous – Free WordPress Theme
2. Newsworthy – Free WordPress Theme
3. Blue Green – Free WordPress Theme

This WordPress theme is ported from the free CSS template of the same name by Rambling Soul. It’s a dark blog theme with a custom homepage template. It supports widgets and threaded comments. There are a few other features in the theme which will be gone over below.

Custom Homepage Template

Included in the theme is a custom page template designed to be used for your homepage. It includes the following:

• Gallery like post layout with optional custom thumbnails
• Widgetized areas above and below the post area

To use this page template as your homepage, you’ll need to do the following:

• Make a blank page called “Home” (or whatever else you want to call your homepage, doesn’t matter) and select the “Home Page Template”
• Make a blank page called “Blog” (or whatever else you want to call your blog, doesn’t matter)
• Go to Settings → Reading and select “Home” as your Front page, and “Blog” as your Posts page.

I used a similar technique in the Simply Minimal WordPress theme so you could have a clearly separated Home and Blog page regardless of your permalink structure.

Remember, you you don’t need a blog on your front page.

If you don’t want to use the custom homepage template, don’t worry about it. You’ll have a regular blog style layout as your homepage.

Custom Homepage Post Images

As mentioned above, there are optional custom post images you can use on the homepage template. They should be sized 185×100 (185 pixels wide, 100 pixels high).

I opted not to use something like TimThumb due to hosting compatibility issues that some hosts have. You’ll hopefully be able to easily crop the image yourself within the WordPress admin panel.

After cropping, simply input the full URL in the custom write panel on the posts page.

And save/publish, the custom homepage image will now appear on the post you selected.

Widgets

There are four widgetized areas in this theme.

• Two on the homepage template (top and bottom)
• Sidebar
• 404

The 404 template widget area isn’t pictured.

Theme Options

Included is a simple theme options page to control which pages are excluded on header and footer menus.

Depending on the length of your blog title, you may not have a lot of room for links in the header, so just input a comma separated list of page IDs you wish you exclude.

To find your page ID, go to the manage pages menu and hover over a link to edit a page. You should see something like com/wp-admin/page.php?action=edit&post=XX in your browser’s status bar, where “XX” is your page ID.

Optional Plugins

This theme has support for the following plugins.

• WP-PageNavi – For numbered pagination on index, archive, and search pages. Otherwise you get boring “Previous” and “Next” links.
• WP125 – For 125×125 ad management, will replace the static 125×125 ad links in the current template, or you can use widgets.
• Yoast Breadcrumbs – Adds breadcrumb navigation directly below the header. Highly recommended for SEO and user navigation purposes.

Remember, these are all optional plugins you can install for added functionality. You don’t need to add any integration code since I already included it with the theme, and the theme won’t break if you don’t have these plugins installed.

Conclusion

Hope you all like the theme, let me know what you think of it in the comments.

And of course, thanks once again to Roshan of Rambling Soul for the great template. You can check out all his other designs ported to WordPress on this page.

Related posts:

1. Splashtastic – Free WordPress Theme
2. RedPepper – Free WordPress Theme
3. RS11 – Free WordPress Theme

Finally, I’m releasing the losing theme from theme battle #3. In case you forgot, the winning theme was the free Tasty Showcase theme which has now been coded for WordPress.

All Orange is a simple and clean, two column blog designed by Anto. Click the image below for a bigger preview.

Keep in mind this is an uncoded PSD and not a functional WordPress theme. It’s provided as-is with no support.

Do whatever you want with it, practice your coding skills, use it on a site, whatever. As per my rules for theme battles, I won’t be coding it. Ever.

For more free PSD goodness here at Theme Lab, check out the following:

• Massive Free PSD Template Giveaway #1
• Bravissimo – Free PSD + XHTML/CSS Template
• Green Shade – Free PSD Download

Let me know what you think in the comments! Would you like to see more PSD or HTML only themes here or would you rather just have more free WordPress themes?

Related posts:

1. Bravissimo – Free PSD + XHTML/CSS Template
2. Green Shade – Free PSD Download
3. OrangeWP – Free WordPress Theme

Finally, presenting the winner of theme battle #3. Tasty Showcase was a template designed by Brad of DemusDesign, who also coded it in XHTML/CSS/JS. I then took the coded template and ported it to WordPress. It has a ton of widgetized areas, including widgetized footers (plural).

Read on to see the features, including how to use the slider, in more detail…

The Slider

Displayed on the homepage, this Karmic Flow powered slider will display your four latest posts with a custom image should you choose.

Once you have a custom image sized 653×367 (653 pixels wide, 367 pixels high) simply input the absolute URL to the image in the built-in custom write panel.

If you don’t have an image, the theme will automatically use one of the placeholder images (depending on which slot it is) if you don’t specify one yourself. That means even if you don’t have any images, there will still be a different picture for each one.

Widgetized Areas

This theme is chock-full of widgetized areas, 14 to be exact. Here’s where they are, and what they do:

• Sidebar – Four areas, one full width above, two half widths, and one full width below
• Footer – Five areas, one for each column
• Home Footer – Four areas, one for each column
• 404 Template – One area, so you can customize your 404 pages

Keep in mind the “Home Footer” areas are only used on the homepage (where the slider is). The rest of the footer widget areas are controlled through the “Footer” ones, and affect every other page on the site besides the homepage.

The above diagram shows all the “Sidebar” and “Footer” widget areas. Not pictured are the “Home Footer” areas (basically the same place as the regular footer, except on the homepage) and the 404 template widget areas.

Conclusion

I bet you all forgot about theme battles, didn’t you? I know it was a few months between the conclusion of the voting and the release of the winning theme (this one) but better late than never.

Brad from DemusDesign was kind enough to code this one into XHTML/CSS and integrated the Javascript for the slider even though I usually code the winning theme battle themes myself. This time I just did the WordPress portion. You can get the static (non-WordPress) version on his site.

I’d also like to thank Cristian Antohe of Cozmos Labs for spotting a bug on the theme via Twitter. Also a special thanks to Omar Corrales of Slimmity who tested the theme himself and provided some good feedback, including several bug fixes before the release.

Anyway, since the time RS16 was released, I got the forums back online (with a matching bbPress theme) so if you have any support questions, they go there.

Let me know what you think of the theme in the comments, I’d really love to hear your feedback.

Related posts:

1. Jungleland – Free WordPress Theme
2. Newsworthy – Free WordPress Theme
3. RS11 – Free WordPress Theme