ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

Green Tea – Free WordPress Theme

Last Updated on by

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.

Green Tea screenshot

Download


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.

Green Tea Custom Menu

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

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.

Green Tea Custom Header

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.

Green Tea Custom Background

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.

  • http://galengidman.com/ Galen Gidman

    Nice theme… custom headers are always good. Great stuff!

  • http://idiotnesia.com nurussadad

    I think, I’ll use this theme for my site :D

  • http://IzabelaTomaszewska.ArsBio.pl Izabela

    Thank you so much Roshan! Theme is amazing!

    I run it on a website where I put my psychology articles published in our magazine. Let everybody read them for free!

    Love all your work.

  • http://IzabelaTomaszewska.ArsBio.pl Izabela

    Leland, I should also thank you for rewriting this theme:) Thank you!

    • Leland

      Hehe, no problem. Although I couldn’t have done it without Roshan’s great design. :D

  • http://brookhavenwildlifecenter.org Carrie

    I’ve searched for a free theme to use with a website I’ve volunteered to create for a local non-profit, and LOVE this one. Thank you for creating and sharing it. I’m using it as a non-blog site, and so far I’ve been able to figure out how to change things to fit our needs.

    I’m a relative beginner to customizing themes, and I have what I imagine is a simple question.

    How can I add a logo to the top left corner of the front page? I know to upload the image directly through cpanel, but I don’t know what code to add–or precisely where–to call up that image.

    Thank you for any information you can share.

    Carrie

  • http://www.wcclv.org Jeff

    LOVE the Green Tea theme!! Grabbed it and used it for a free site I’m doing for a church. Looks GREAT in Chrome. Page tabs don’t render correctly in IE or Safari. Is this something I’ve done within the “home” page or is it a known issue? Also, how hard/difficult is it to turn those tabs into drop down menus, using the same style and way cool font, using child pages in wordpress? Thanks for all your work and for providing wordpress users with a wealth of tools!!

  • http://dynamitecandy.com Liz Staley

    Could anyone tell me where to go to edit the Lorem Ipsum at the bottom of the site? I’ve looked through every menu in my WordPress and can’t find it. Really don’t want a bunch of Lorem Ipsum on the bottom of my page. Thanks for the help!

  • Carrie

    Figured this one out. Thanks.