Aside from the features listed below, I would like to point out some of the awesome things you’ll get when you purchase a theme from Colorlabs:

• The two themes below have responsive layout, which means no matter what your screen’s size is it will respond to it and adjust itself accordingly, even the images. Try viewing the demo (link below the images) and adjust your browser’s size, or check it on your smart phone or tablet. Amazing!
• For one website you’ll get a lifetime support on one domain for the standard pack, and unlimited domains for the developer pack.
• Access to documentation and theme updates.
• If you’re new to this kind of thing, Colorlabs will setup the theme for you!

But wait, where’s my Discount Coupon?! It’s at the end of this post!

Adam & Eve

In a relationship there are two sides, so why not have a two-sided blog too? This is actually my first time seeing a double-sided blog theme, which is actually fantastic considering that you and your partner can use each side for your daily ramblings! Imagine how cute that would be. But of course you can also use this theme aside from talking sweetly, or bitterly, with each other. Fantastic theme!

Click here for the demo.

Some Cool Features:

• Double blogging – display two different blog posts side by side
• Customized sidebar
• Featured post sliders
• Social network integration
• Tons of customizable widgets

Invitora

With today’s technology, even invitations should not stop from being a very static piece of paper. Invitora revolutionizes the way people can send out invitation for their wedding. It is a one-paged theme that emulates a real-life wedding invitation, added with spice with the social media button to let the whole world know that someone is getting married!

Getting married soon? Make your wedding invitation fun by using Invitora!

Click here for the demo.

Some Cool Features:

• Six color schemes
• Photo gallery that will show photos from blog posts
• Social network integration
• Tons of customizable widgets
• Page templates (contact page, blog page, gallery page)

Itching to get your hands on these themes?

Then use this coupon code for a 70% plus discount: AEE42

Coupon is valid from February 10, 2012 up to the 17th!

What now? Now you share this to as many friends as you can, across several social networks you are on!

Click for Themes Below!

A “too long; didn’t read” (TL;DR) version is: there is a never ending supply of free themes. Anything that tends to be too popular destroys itself through fame by the people.

Let us delve deeper into the problems people are currently experiencing.

Market Oversaturation

Imagine a lengthy street lined up with peanut vendors only a foot apart from each other. Now imagine half of them give free taste, the other half boasts their “SPECIAL” peanuts through signs. Heaven for an elephant but a very horrible scene for someone who’s after quality peanuts. Same goes with templates and themes.

With themes here and there it is only natural to arm your self with fear of dissatisfaction.

War for Quality

Of all the wars in man’s history, war for quality is the only moral war. It is already demonstrated that many templates and themes are way below average quality. Such a thing does not exist in Theme Forest because every submission needs to pass through the lens and extreme examination before being approved for the marketplace. Talk about TSA-like examination, this is it, only loved by everyone.

Halt! It does not stop there. Envato, the company from which Theme Forest came to existence not only offer themes but also almost everything you need to create a business website. From 3D models to codes and sound effects, they have it. Properly regulated and properly priced. One of the best things that ever happened in the internet.

An advantage of joining this fantastic community is you get to interact and use the services that experts offer. I know this will be stingy but who will let this chance pass and choose amateurs?

You Need Not Go Far for Reviews

Unlike most websites that offer free and premium themes and templates, Theme Forest has already set its roots. Hundreds, if not thousands, of satisfied customers leave their comments and suggestions that will absolutely be of help when choosing a perfect theme. Buyers or lurkers can check how the product works through a preview, satisfied customers even rate the themes for you. Automatic customer service, I tell you, and it’s more credible when you see a 4.5 stars with applauding people in the comments. There are also a lot of authors who are ready to help you in case a problem arises from the product.

Oh. My. Gosh. 225 comments and I assure you that most of them are either comments from satisfied buyers or the author’s reply. Need I say more?

Hint: You Can Sell Yours Too

Since Theme Forest is only after themes and templates that are of high quality, if you are like their authors whose excellence is driven by passion then feel free to be a member and start earning your dollars with their massive audience. A product being approved is already an honor.

Massive Categories

Almost anything from personal website to eCommerce are catered at Theme Forest. With a wide selection, people of different goals can really find high quality materials there that suits perfectly with their goals be it for business or for personal blogging.

Pricing

I’ve read several comments and one prevailing element is on how affordable products are at Theme Forest while maintaining quality. As the homepage proudly states, there are items that you can buy from $1. Below is a screenshot of a newsletter and an under construction template.

Here’s another screenshot, all highly rated with great number of sales for a very affordable price.

Not satisfied with what I’ve told and shown? Visit Visit Theme Forest now and see for your self. We will really appreciate if buyers and authors will share their experiences in the comments section.

Corporate WordPress Themes

1. Noblesse –  $35

Noblesse is a powerful, rich graphics theme with features oriented for content presentation. It comes with 7 color variations, 7 different fonts, 8 custom widgets and 8 different template pages. Although the theme is very rich in graphics (90% done with css3) it is very flexible, giving you the possibility take it to the next level.

The homepage has a multitude of variations and can be completely changed. Each page has the possibility to display a headline, description, image and switch sidebars. Packed with over 50 shortcodes (embedded in editor) the styling possibilities are endless. Please find bellow other features of the theme.

Some Features:

• WP3 Custom Types + WP3 Menu
• Unlimited custom sidebars
• 7 color variations
• 2 different slideshows
• Unlimited template pages (-Blog)
• ~50 shortcodes embeded in Editor
• Multiple homepage variations
• Psd files included

2. Colorwave –  $35

Colorwave is a clean, modern and professional template which is perfect for portfolios, companies, agencies, Photographers and even more…

Some Features:

• 3 Highlight Sliders
• Full Custom Sidebars
• 14 Template Colors
• 7 Custom Widgets
• 2 Blog Type (Classic/Magazine)
• 30+ Custom Style Shortcodes

3. Phenomenon –  $35

Phenomenon is the ultimate and one of a kind premium hosting wordpress theme that was created with hosting companies and businesses in mind. Phenomenon is very easy to customize and it comes with a great documentation that includes 6 screencasts that help you get the theme up and running in no time!

Some Features:

• BluzPanel Included!
• Cufon font replacement
• Threaded Comments 3 Page templates: Full-Width, Gallery, Blog
• 34 Awesome & Useful Shortcodes
• PSD for logo customization – included!
• Login Module (integrated with: WordPress, WHMCS or Custom)
• Compatibility (IE 7 , IE 8 , Firefox, Opera, Safari, Chrome)

4. Periodic –  $35

The simple, clean elegant interface is meant to be a perfect backdrop to your content. The theme is ready to start working, out of the box, with a multitude of theme options, custom widgets and shortcodes to help you personalize your environment.

Some Features:

• Fully developed comments
• Built in pagination support using WP-PageNavi
• Enhanced blog post template
• Seven custom widgets
• YouTube integration for video posts
• 9 shortcodes

5. EZINE –  $35

EZINE is clean, elegant, modern and minimalist premium wordpress theme that can be switched as blogging, magazine, community and portfolio wordpress theme, there’s 4 skins color and background pattern variation available with EZINE theme, Please explore the demo to see more theme features.

Some Features:

• Jquery slideshow (Nivo slider)
• Custom Shortcodes
• Support WordPress 3.0 Menu System
• 4 Skins option
• 10 custom widgets

6. Gadgetine –  $30

Gadgetine is premium blog magazine theme that will also work well for a serious news portal. It has 3 columns, 8 news sections and a LOT banner spaces on the first page.

The theme is very friendly for affiliate marketers or just regular bloggers who wish to monetize their hobby. They will appreciate the ability to easily promote specific posts and create their own pages with no limitations (read landing pages). Carefully placed banner spaces will help to make that sale. T

heme has its own configuration page, so you wont have to edit any code files! Setup is very easy.

With built in thumbnail generator, you will have no problem creating great looking articles.

The theme also includes automatic picture resize script, that will save you hours of resizing those pictures from older version of your website.

You will also have a special page for your RSS feeds and many more great features.

Some Features:

• Theme has 10+ banner spaces
• Automatic picture resize
• Feedburner compatible
• SEO Optimized
• Fully Compatible with WordPress 3.0

7. EXPO –  $30

EXPO is a highly customizable WordPress Showcase and Resource Theme, integrated with rich feature and enhanced administrative options. You can use this theme to promote good products (themes, web, design) at your website and earn referrals money.

Other possible use is a simple showcase website with products reviews, photos, etc. Since this theme is widget base theme, you can easy manage the layout of your site using WordPess widget manager.

Some Features:

• Easy Thumbnailer
• Many Back End Options
• Highly customizable theme and well commented
• These widget can be used in 9+ different widget areas.
• You can switch between 2 or 3 columns using custom theme options.

8. MAJALAH –  $25

MAJALAH is magazine style WordPress theme with clean and modern layout, and also can be switched as community theme. There are 2 Slideshow options in MAJALAH theme, 3D slideshow and Javascript slideshow that easily configurable from admin theme options, and also 2 colors available in dark dan white color with 4 combination background.

Some Features:

• PSD included
• Flickr Integration
• Two color scheme
• Archives templates
• Admin theme options
• SEO Optiomized
• Built in Twitter Integration

9. Affair –  $20

A 2 column, magazine flavoured WordPress theme, designed to put your content at the forefront and give your blog a modern, stylish and professional feel. Featuring automatic thumbnail generation and custom social media links.

The perfect theme for bloggers wanting a magazine look!

Affair is coded in Valid Xhtml and CSS , is ready to run straight out of the box and for those who like to tinker, customizing the theme is also super easy!

Features:

• 2 column magazine layout
• Automatic thumbnail generation
• Custom social media links
• Pretty looking comments with Gravatars
• SEO ready!

10. Maglicious –  $30

MagLicious is a throughout professional premium WordPress Theme which is perfectly suited for News and Magazine style Websites.

Some Features:

• 2 templates for the price of one
• Widgetized mainpage
• Full page slider
• Portfolio page with video support
• 9 skins for different color variations

11. FlibBlog –  $35

FlipBlog is the hottest new thing since sliced bread. This theme is like a Rock Star buisness/portfolio theme got together with a hip blog theme and had a baby. Yeah… FlipBlog is the whole package.

Some Features:

• Full lightbox integration
• 6 dynamic widget areas
• 5 homepages to choose from
• Built-in ThemeBlvd SEO Plugin
• Tons of Shortcodes
• 10 Custom widgets
• Total visual customization

12. Beatific –  $30

It is a full W3C Valid PHP coded WordPress website theme, easily customizable. All PSD files are attached in the file ZIP so you can modify everything on the site, and you can easily create your own themes too, since the documentation is very clear on how to modify. The site uses jQuery for the image scroller on the Home page and for some minor tweaks.

Features:

• 17 pages long documentation
• Custom post type for Portfolio items
• Full WordPress integration
• 4 carefully hand crafted themes

13. Nesnel –  $35

Nesnel is a premium portfolio and business theme for WordPress. It has user-friendly admin panel with configuration wizard, slider management system, shortcode generator; modular page layouts, 90+ advanced shortcodes and more. And it’s incredibly easy and quick way to have a website. You can setup in minutes to your WordPress.

Some Features:

• Ready for WordPress 3 and greater
• 90+ Shortcodes
• Unlimited level unique navigation menu
• Ajax contact form
• Nested Comments
• Translate Ready

14. Lifeline –  $35

Lifeline is a clean and sleek WordPress theme that is built for easy customization and enormous flexibility. It’s powered with our custom Theme Options Panel, JWPANEL.

Some Features:

• 7 custom page templates
• 4 color schemes included
• 10 custom widgets
• Unlimited widget sections
• Widgetize homepage
• Localized. Translation ready

15. Survive –  $30

Survive is clean and modern WordPress theme made for Business, Portfolio, Personal Blog or any kind of website.

Some Features:

• Threaded comments
• Nivo Slider
• Cufon font replacement
• Shortcodes for more text-control
• Step by step detailed installation guide
• Full control from admin panel

16. brandNew –  $35

brandNew theme for WordPress is a modern web 2.0 theme with spacious layout, clean typography and better readability. The theme is best suited for corporate ventures, blogging requirements and personal portfolio. Backed with useful short-codes, custom widgets, multiple skins and language localization support – the theme is versatile enough to fit into your web requirements.

Some Features:

• 10 Skins
• 2 WP Menus
• Home page scroll Slider
• Full width Nivo Slider
• 5 Portfolio Templates
• 8 Custom widgets
• 7 widget areas with exclusive usage for each page

17. Uniquate –  $35

Uniquate is a Powerful Professional WordPress theme. It’s perfect for Corporate, Business and Personal Portfolios.

It includes powerful and minimal admin panel which give you full control over every major and minor design element throughout your website.

It comes with 11 skins and I am sure you can create your own skin easily.

Some Features:

• Video support in gallery
• WordPress 3.0 menu support
• 2 column fixed layout
• Jquery cycle plugin
• 11 color skins
• Powerful and minimal theme options page simple to use
• No need to add custom fields for thumbnail images

18. CleanSlide –  $30

CleanSlide is a professional & clean premium WordPress theme. It can be used for almost every type of website project. It comes with a detailed documentation, which includes all the main instructions you will need to customize this theme. All the html and psd files are included.

Some Features:

• 8 different color schemes
• Unique jQuery Portfolio incl. filtering
• jQuery Accordion freebie included
• PSD file included

19. Stealth –  $30

Stealth is a sleek, stylish and simple theme that you’ll be able to setup for you or your client in no time.

Some Features:

• 6 dynamic widget areas
• Contact form builder
• Built-in ThemeBlvd SEO plugin
• Tons of shortcodes
• 10 custom widgets
• 8 page templates
• 6 styles

20. Sniper –  $25

SNIPER is a clean and robust WordPress theme, best suited for decent corporate websites, photography portfolio, and personal blog. The simplicity and straight-forward design style opens a wide scope for modification and flexible configuration. Backed with powerful widgets, useful short-codes and language ready functionality, SNIPER can be useful for your next corporate project. Here are some of the features:

Some Features:

• 8 custom widgets
• 4 widget areas
• Language Ready theme
• 2 WP3 Menus
• 9 portfolio/gallery templates for image showcase
• Custom blog template for creating more than one blog-alike pages.

E-Commerce

1. WP FlexiShop –  $35

This theme utilises the powerful WP E -Commerce plugin to create a versatile and feature packed WordPress powered shop, with 3 different layout options and unlimited color possibilities. Make this theme your own.

Mix up content on the homepage with swappable content areas, and change between 2 different footer areas, or use both! A theme so versatile that you can re-brand it to suit your business by simply changing a few settings.

Some Feautres:

• Multiple payment options
• User accounts and order tracking
• Supports tax
• AJAX cart loading
• 12 widget areas
• 3 different types of layouts
• Elegant 2–step checkout

2. Sofa Shoppr –  $40

Sofa Shoppr is WordPress based webshop (e-commerce) theme. It works in conjunction with PayPal payment gateway which means that users can safely checkout either by using their own PayPal account or a credit card. Beside the fact that this theme is extremely easy to setup and maintain, it does include all of WP 3 .0+ features, built-in widgets, advanced layout control, user reviews and an ample Options page through which all the crucial sections of your future webshop are settable.

Another cool thing is a featured products banner rotator – Piecemaker (Adobe Flash app), fully integrated into system. Webshop owner can simply upload all the slides through WP Admin panel and set all of Piecemaker variables via theme Options page so no need to edit XML file or upload slides by using FTP client. On top of that, each banner can be linked to a certain/featured product page – if needed.

You can select between 3 different layouts for your webshop Home Page; it can consist of Widgets only, it can be a grid of listed products (no sidebar) or a combo of grid and sidebar. Both grids may optionally be mixed with Widgets too which is another great feature – you can literally create your own layouts. There’s plenty more but I guess you’ll discover on your own as soon as you install Sofa Shoppr.

Some Features:

• Orders tracking
• Fully implemented piecemaker banner rotator
• Complete webshop + PayPal solution
• Entirely settable via Options page
• 8 built-in widgets

3. The Clothes Shop –  $40

Some Features:

• Multiple payment options
• Manage registered customers
• Coupon/voucher codes
• Shop modes: regular, inquiry, affiliate, PayLoadz
• 30 independent widget ready sections
• 22 Custom widgets featuring: “shop by outfit”,”shop by size”,”shob by color” etc.

4. enVirashop –  $30

enVirashop is a WordPress eCommerce theme that has an in-built shopping cart feature that requires no plugins.

The theme comes with plenty of options so you can personalize your store to suit your needs. Please check the screenshots to see the design variations and the options available.

Some Features:

• Set tax rate
• Multiple currencies
• Product options
• Payment methods (PayPal & Google Checkout)
• 5 banner colors
• 5 shopping cart colors
• jQuery shopping cart

5. Cars Dealer –  $35

Cars Dealer is a full featured WordPress 3 theme developed for car dealers looking for something a little bit different. Cars dealer is not a “corporate” website, it’s just a clean and elegant design focused to inspire everyone that come to it.

Of course you can easily use this template for any other markets.

Some Features:

• Latest jQuery Framework
• 20+ custom options
• Multiple Page Layouts (6)
• Custom Post Types (2)
• WordPress Version 3.x

6. Time for Food –  $25

Time for Food is a beautifully designed WordPress Theme for all you foodies. It can be used to share recipes or just write articles based about food.

The site works in IE6 , IE7 , IE8 , FF, Opera and Safari.

The Theme uses the TimThumb Script, so you need the GD libary installed for this to work (99% of hosts have this installed, if not just ask them to enable it).

7. The Jewelry Shop –  $45

Some Features:

• Translation ready
• 34 Custom Widgets
• 34 Independent and collapsible widget ready section
• Products with video, audio and/or images
• Protected account area
• Customer wishlist

8. The Furniture Store –  $45

Some Features:

• 2 Localized Child Themes
• Optional Blog Alongside The Shop
• 27 Independent and Collapsible widget ready sections
• Customer Wishlist
• Frontend customer login/registration and protected account area

9. EStore –  $35

EStore is a clean, modern, web 2.0 style wordpress theme suitable for online store, shopping cart and business sites.

This theme is fully compatible with WP Ecommerce plugin.

Some Features:

• WordPress 3.0
• 7 page templates
• 4 sidbar position
• New Custom Post Type for slider
• New Custom Post Type for portfolio
• New Custom Post Type for products
• New Custom Post Type for testimonials

10. Hansum –  $25

Hansum WordPress theme is a clean, beautiful and easy customizable theme. It’s perfect for corporate, photography show case, personal/company portfolios, blogs and clean looking websites. This theme comes with massive and functional theme option page which gives you entire website under your control. It comes with 4 page templates, Portfolio, gallery , blog and contact.

It comes with 2 skins with light and dark

Some Features:

• Theme options page
• Inbuilt contact page
• 3 page templates
• 2 column fixed layout
• jQuery hslides slider

You can preview the theme here or download djavu-shop work in progress theme here.

Tutorial Requirements

This tutorial assumes you are fairly comfortable using the following languages

• Html
• CSS
• jQuery
• PHP
• WordPress

What will we learn in this tutorial?

• Creating a WP e-Commerce Theme
• Brief introduction to Wp e-Commerce file relationship
• A dynamic accordion slider (using jQuery Kwicks) that uses the company categories as content
• Playing with CSS3 to add a nice touch

Preview of our WP e-Commerce Theme

The theme I’m working on is named Djavu-shop. The main feature of this theme is it’s accordion slide on top of the products. This accordion displays the available categories and/or brands. Sliding over the accordion will bring a brief description of the category. A click on the link will display all the products of this category or brand.

A few fancy effects such as the buttons and shadows are made with CSS3.This tutorial is the first part of a suite of tutorials. For the first part we will only focus on the product page (see picture above).

Anatomy of a WP e-Commerce theme

Before getting stuck into the build process, it’s important to know how WP e-Commerce themes work. Open the default theme (wordpress-directory)/wp-content/plugins/ wp-e-commerce/themes/default), you’ll notice that it’s all contained in a folder, and there’s around 9 core files. Note the default theme is always loaded! Your theme only overrides the default theme behavior. In our theme we will include more files which allow extra customization.

Here’s an overview of the main files you’ll be working with:
cart_widget.php // Cart widget to be displayed on the sidebar for example
category_widget.php // Displays a widget with the categories and brands given in WP e-Commerce
default.css // Stylesheet of WP e-commerce. Original file is always loaded!
functions.php //
grid_view.php //
images/ // Folder containing WP e-Commerce related images
list_view.php //
products_page.php // Page where all products are displayed, per category, brand, etc…
shopping_cart_page.php // It’s the checkout page. Where the client puts his name, address etc…
single_product.php // Description of a product
Each of these files then contains a series of PHP template tags. These tags tell WP e-Commerce where to insert the dynamic content. A good example is the <?php  echo wpsc_the_product_title (); ?> tag, which will display your product title (or name if it is more understandable).A catalog of all available template tags are here . Probably you will find a tag that will do exactly what you want or if it is WordPress related try the WordPress Codex.

Create a new theme out of the default

The best way to start creating your own theme is to make a copy of the original theme. The default theme is in (wordpress-directory)/wp-content/plugins/ wp-e-commerce/themes/default. Duplicate the “default” folder and call it “djavu-shop”. After this open the new created theme folder and rename the default.css file to djavu-shop.css. Delete everything inside your css file (!) and put the following code inside of it.

<code>/*Theme Name: Djavu-Shop Theme
Theme URI: http://www.djavupixel.com
Description: Just another WP-e-commerce theme
Version: 0.2
Author: Leonel Hilario
Author URI: http://www.djavupixel.com*/</code>

Login to your wp-admin section and browse to Store>Settings>Presentation page, click on the drop-down list and djavu-shop theme should be in the list. Select it and save changes.
Create a “js” folder inside our theme. We will put some JavaScript inside. Download jQuery kwicks and put “jquery.kwicks-1.5.1.pack.js” on the js folder created before.
In this tutorial we will only work with djavu-shop.css and products_page.php. The next tutorials will focus on other files.

Reminder

Inside the “djavu-shop” folder you should have the following files:
cart_widget.php
category_widget.php
djavu-shop.css
functions.php
grid_view.php
images/
js/
list_view.php
products_page.php
shopping_cart_page.php
single_product.php

Preparing WP e-Commerce for our theme

Add 4 categories in WP e-Commerce

Login into your WordPress account and then click on Store>Categories. For this example we will create 4 categories “MacBook Pro”, “iMac”, “iPod Touch” and “iPhone”.  Add a small description and a picture to all categories! In our example we need 4 pictures of at least 320 pixel width and 320 pixel height (for this tutorial I used 4 pictures of 576×320).  Here below is an example screenshot and here you can download the pictures.

For the lazy one like me here are the products descriptions:

• MacBook Pro: The fastest, most powerful MacBook Pro ever. Three Times.
• iMac: The ultimate all-in-one. Turbocharged.
• iPod Touch: A great portable game player.
• iPhone 4: This changes everything. Again.

Configure presentation settings

Just copy the same settings as in the picture below. Please note that this picture is tall. Click on the image to open the full size

Let’s start building our theme!

Open products_page.php and go to line 35 it you be “<ul class=’wpsc_categories’>“. Delete line 35 to 48, just before the endif. Here we will add Kwicks for jQuery which is an accordion slider.

Here is the PHP/HTML code:

<code><ul class='kwicks'>
<?php wpsc_start_category_query(array('category_group'=>get_option('wpsc_default_category'), 'show_thumbnails'=> get_option('show_category_thumbnails'))); ?>
<li>
<div class="kwicks_inner">
<div class="image"><?php wpsc_print_category_image(); ?></div>
<div class="caption-title transparent_class">
<?php wpsc_print_category_name();?>
</div>
<div class="caption transparent_class">
<a href="<?php wpsc_print_category_url();?>" class="wpsc_category_link"><?php wpsc_print_category_name();?></a>
<?php if(get_option('wpsc_category_description')) :?>
<?php wpsc_print_category_description("<div class='wpsc_subcategory'>", "</div>"); ?>
<?php endif;?>
</div>
</div>
</li>
<?php wpsc_end_category_query(); ?>
</ul></code>

We created an unordered list and inside of it we put we kwicks_inner class. Inside we put the picture as we think it is more flexible than putting it on the CSS. In class caption-title we put the title of the category. On mouse over the class caption will be displayed which contains the title and the small description that we entered before (see Preparing WP e-Commerce for our theme). Now open djavu-shop.css and paste this CSS code:

• wpsc_print_category_image() prints the category image unscaled
• wpsc_print_category_name() prints the title of the category
• wpsc_print_category_description is the description we gave before to this category
• wpsc_print_category_url() link to the category content

<code>/* Product Page - The accordion (kwicks) effect on top of page */</code>

<code> </code>

<code>.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px #ddd;
-moz-box-shadow: 2px 2px 5px #ddd;
-webkit-box-shadow: 2px 2px 5px #ddd;
}</code>

<code> </code>

<code>#content #products_page_container ul{
margin: 0;
padding: 0;
}

.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}

.kwicks li{
float: left;
width: 160px;
height: 320px;
margin-right: 5px;
}

.kwicks li a {
color: #fff;
}

.kwicks .kwicks_inner {
width: 320px;
}

.kwicks .image {
width: 90px;
height: 240px;
float: left;
}

.kwicks .caption-title {
background-color:#333333;
color:#CCCCCC;
float:left;
font-size:16px;
margin:40px 0 0 16px;
padding:3px 0 3px 16px;
text-align:left;
width:100%;
}

.kwicks .caption {
display: none;
text-align: center;
width: 320px;
height: 80px;
color: #ccc;
font-size: 16px;
float: right;
/* Playing with CSS - Adding some transparency */
background-color: #333;
}

.kwicks li.active .caption {
display: block;
}

.kwicks li.active .caption-title {
display: none;
}

</code>

<code>.transparent_class {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}</code>

So this was a bit of code. As you may read we added a few CSS shadows. The .kicks li.active class is fired when a mouse passes over the accordion. Here we hide the .caption-title to show the .caption which contains the title and description of this category. For more information about Kwicks please read the well documented page or if you want to try other nice effects.

Now we hase the HTML and CSS code and here is the JavaScript code that will create all the magic:

<code><script src="<?php echo $djavu_theme_url ?>/js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.kwicks').kwicks({
max : 320,
spacing : 0
});
});
</script></code>

Note that you can put this at the top oder bottom of the page. I would recommend at the bottom of the page so that the layout loads faster.

Conclusion

This may look a bit difficult at first sight, but it’s not and it is the first part of a series of tutorials. Make a temporary install of WP e-Commerce and fill it with dummy content this will really help understanding how WP e-Commerce works and will also help to find errors. In our next tutorial we will focus on more general parts of the design as I am working on it ;-)

Preview the theme | Download files

Further Discussion

Have some thoughts of this theme? Give them to me, I’d love to hear them. This is as much a proof of concept as it is a tutorial. It introduces basic html, css, jQuery, PHP and the WP e-Commerce plugin. I’m sure there will be people out there who will feel that a perfect e-commerce start page is something else. If so, what would you do?

SketchPad is released under the GPL V2 license specifically for 1stwebdesigner, so you’re free from restrictions on how you use it!  Feel free to use it for any personal or commercial websites.  Just remember to share, tweet, link, and comment on this article to help support this free WordPress theme!

Features of SketchPad

• 10 Awesome Color Schemes
• WordPress 3.0 Custom Menu Implementation
• 4 Widgetized Footer Areas
• Custom Ad Management Widget
• ThemeSheep Admin Options
• Custom Home Page Post Layout Options
• “Latest Tweet” Header Option (can disable from admin options)
• Integrated Page Navigation
• Automatic Thumbnail Integration, set it and forget it!
• Set your own custom logo easily
• Input your Analytics or other tracking code through admin options
• Bread crumb navigation
• “Related Posts” custom feature

DEMO

DOWNLOAD

DETAILS PAGE

10 Awesome Color Schemes to Choose From

Easily change the look of your website through the ThemeSheep admin options page.  Just select the color that you like, hit “save options” and you’re blog is instantly changed to the color of your choice.

Custom Post Layout Options

Through our admin options, you can easily select whether to display all large full width posts (as you see in the demo) or small half page width posts.  You can even mix these layouts up and do “X” amount of large, and “X” amount of small posts!  You’re in control of how your posts are displayed to your readers.

Custom Author Box and Post Excerpt Captions

Out of the box, SketchPad will create an “Author Box” in every one of your blog posts.  This author box will use the authors email Gravatar as the image, use the author’s name as a link to their posts, and use the “BIO” information that an author can fill out in their WordPress profile page.  Another neat feature is the custom excerpt caption.  This area is directly beside the main posts thumbnail and will first display the “excerpt” field ( you have to fill the excerpt field out whilst creating a new post ), if no excerpt variable exists, it takes the first 150 characters from your content to display.  This is a great way to give visitors a quick summary on the article and the author, capturing their interest and increasing reader loyalty.

Details Page

SketchPad is available for free download, or if you’d like to work from the PSD’s, the developer package is available for $22 USD.  Both are available on our details page

Demo Page

A full featured demo is up for your viewing pleasure.  You can preview every color options as well as check out all the features of the theme on the demo page

Download SketchPad

SketchPad.zip (ZIP file 245kb)

1. inFocus ($37)

inFocus is a Powerful Professional Premium WordPress theme. It comes with an impressive fully customizable jQuery homepage slider with 3 different staging effects.

Whether you’re a WordPress pro or just a beginner, this theme has you covered. With a huge custom back-end area you have complete control over the look and style of your theme. Add images to your homepage slider, add as many sidebar widgets as you like, pull in your latest tweet from Twitter and much much more, all without having to touch a single line of code!

For your convenience inFoucs comes with 10 skins to choose from. Click on color name below for a full preview. Also below is a full list of inFocus’s features.

Some features:

• jQuery Slider
• Custom Sidebars
• Custom Widgets
• Portfolio Gallery
• Huge Tabbed Admin Area
• Layered PSDs are included for easy modification

2. Display 3 in 1 ($42)

Display is a WordPress theme, best suited for business and portfolio sites. It comes with a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The theme has a huge wordpress custom backend (8 additional Admin Pages) that make customization of the theme easy for those who don’t know much about coding or WordPress. Display also has 3 fantastic skins to choose from.

Some Features:

• Valid XHTM Strict1.0 and CSS 2 .1, tableless Design
• Multiple Page templates
• jQuery Support
• Huge admin area to customize the theme from your WordPress backend

3. Unite ($37)

Unite is a merger of crisp design and powerful communication. It takes a clean, organized approach to presenting content so it’s easier to find what you want.

This is a premium WordPress theme with 5 pre-made skins including a dark theme and textured background theme. The theme is easy to modify and ready to be up and running out of the box. The PSD files included have been customized to allow fast skinning.

Some features:

4. Luxury ($32)

Luxury is a clean, feature packed WordPress theme designed to make your life easier. You can check out video tutorial how to set up custom home page.

Some features:

5. Prosto ($37)

Prosto is a professional developed, clean designed WordPress Theme with powerful CMS features. That is well suited for personal portfolio, blog, or any kind of business website. Easy to customize with extended admin panel for any kind of users. You can simply control your theme look and content without any special knowledge. Setup layout and choose custom sidebar for each page. Make unlimited portfolios in 3 different layouts that is give you a great flexibility and much more.

Some features:

• Unlimited sidebars
• Unlimited portfolios
• Translation ready
• WP3 support
• Layered .PSD files included
• Customer support

6. Centita ($27)

Centita is WordPress Theme with minimalist and elegant look that suitable for your professional corporate website, easy to customize and rich of features.

Some features:

• jQuery image slideshow
• Widget ready
• Built in AJAX contact form
• Customizable homepage and sidebar area
• 7 layered PSD files included

7. Pandora ($32)

Pandora is a WordPress Template, designed to promote anything from a corporate business to a portfolio site.

Some features:

• Valid XHTML Strict 1.0 and CSS 2 .1, table-less layout, 960 Grid System
• jQuery Support
• Code optimized for getting the top results in the Search Engines
• WordPress related Features
• All PSD files are included
• Documentation Included

8. Hyperion ($37)

Hyperion is a clean and stylish WordPress Theme well suited for any business, portfolio, blogger, or anyone needing a beautiful website. Hyperion comes with 3 jquery slideshows, many page templates, 3 widget areas, over 80 theme options, and 6 color styles, 2 custom widgets for your Twitter feed and Flickr images.

9. BossPress ($32)

BossPress is a WordPress theme which is suitable for web developers, designers, photographers and small corporates.

Some features:

• Full width showcase
• Absolute positioned logo & navigation
• Cool portfolio page
• Full widget ready
• Black & white, 2 theme color option

10. Barely Corporate ($32)

Barely Corporate is a clean WordPress theme that couldn’t be more easy to use. With a beautiful exterior and a backend that gives you ultimate versatility and freedom, Barely Corporate will have your website up and running in no time.

It may look similar on the outside with just a few visual tweeks, but on the inside it’s the smoothest WordPress theme you’ve ever used. The main goal was to give you the maximum amount of control, but at the same time not throw a million options and meta boxes in your face. Barely Corporate’s new framework will truly allow you to get that new website up and running for you or your client successfully without all the hassle.

Some features:

• 12 styles
• 4 dynamic widget areas
• Full lightbox integration in pages and posts, including

  shortcode

• Insert jQuery slideshows in your pages and posts with a simple shortcode
• Unlimited portfolio pages, with flash and video capability
• WordPress 3 navigation menus supported

11. Realist ($27)

This is woking right out of the box. Make your own property listings that can be searched, and filtered. This is a property website ready to go!

Some features:

• Colour variations
• Smart searching
• Fading banner
• Property previews
• Automatic image attachment
• Google maps

12. Universal Business ($27)

Widgets loaded template with an extremely easy configuration of the homepage, header, footer, sidebar and many others. You can launch a nice an clean customer’s website in no time. Our goal was to create a template that you will be able to use for any client you have, no matter if you are creating a car business website, hotel website or website for carpenters. You can use it for your own company as well.

Some features:

• Valid XHTM Strict1.0 and CSS 2 .1, tableless design
• Multiple templates
• jQuery elements
• Simple administration
• PSDs included

13. Vision ($37)

Vision is a WordPress theme designed with corporate businesses  in mind. It has a custom CMS integrated into the WordPress administration area that allows you to build a fully functional professional website in minutes. The theme is also well suited for online portfolios and blogs.

Some features:

• PDF documentation with screenshots to help you through the installation and customization process
• Lots of Video Tutorials to help you install and customize the theme
• 5 Skins with one layered PSD file for the light skin
• Full width home page jQuery slider with fading animation supporting images up to 1920px width
• CSS and jQuery drop down Menu
• Full width page template
• 125×125 ads ready

14. BVD – Beautiful Website Design ($37)

The WP version of very popular BVD – Beautiful Website Design. Any modern web browser will make this theme work with no issues! PC or Mac system does not make the difference as well.

Some features:

• jQuery Slider
• Auto resizable thumbnails
• Built In Twitter widget
• Footer widgetized
• Sidebar widgetized

15. Real Estate ($27)

Real Estate Theme is a professional WordPress Template, that is suitable for real estate type websites or for showcasing your work and/or products. The Real Estate Theme comes with an easy to set up “featured” image slider (with it’s own admin options), a colour switcher with 3 colour schemes and a built-in contact form.

Some features:

• Supports WordPress 3.0 menus
• Theme admin panel
• Three separate colour schemes
• Built-in contact form
• Share/social network buttons on posts and single page
• Add recent Twitter and Flickr posts to your homepage
• Google analytics integration

16. Silver Business ($32)

SilverBusiness is a premium wordpress template designed for companies, products, or individuals. It provides great solution for small businesses, because it combines great corporate design with functionality of WordPress. It comes jam packed with a lot of features. This site will really make you stand out!

Some features:

• jQuery powered top rotator, which can be adjusted simply via wordpress admin
• Lavalamp jquery menu
• Cufom powered custom heading in Anivers font
• Featured services section which can be adjusted via wordpress admin, or turned off
• Valid XHTML 1 .0 Strict and CSS
• PSD files included

17. Web Lider ($32)

WebLider is a Simple And Elegant WebSite Template. It is great to emphasize and present your products and your business.

The theme is easy to customize- options settings are included. This means that the options (such as images in slider, pages to show etc.) can be set in admin panel, without the need to edit the code.

The theme is widget ready. It has multiple dynamic sidebars for the different pages and widgets can be easy dragged and dropped into them from the admin panel.

Some features:

• Featured Stylish Images Slider on the homepage
• Multiple Dynamic(widget aware) Sidebars included
• Tableless Design
• Works and looks similar in all major browsers
• Working jQuery/PHP contact form with validation

18. C3 ($37)

Beautiful theme with a complex and customizable WP framework on top of it. Taking aside the unique, massive back end CMS , that gives you almost unending possibilities of making changes for your needs we’ve added something that no one on Theme Forest has so far: One click auto install.

Sit back, relax, drink your coffee, and watch how our work frame does its magic and auto installs the Creative Juice WP theme to the version that you see on the live preview. This theme requires php 5.0

Some features:

• One click auto install
• Jquery image slideshow
• Dynamic sidebar widget creation
• Feedburner ready
• Cross browser compatible

19. Centivio ($27)

Centivio is clean web 2.0 style wordpress theme for business, company and corporate website. This theme comes with 10 color options for this theme for you can easily choose the color base on your business brand.

Some features:

• 10 color options
• jQuery Cycle for rotate images in the homepage
• jQuery Sliding Box in the portfolio page
• 10 page template with its own right sidebar position
• Home alternative with cu3er 3D Slider and 5 sidebar position

20. Durable 5 in 1 ($32)

Some features:

• The Homepage includes Custom Cu3er Slider with ease of editing and changing category option. You can modify it by setting things via admin cu3er options
• Homepage 3 columns with 3 pages Option which can be selected via Admin
• Highly customized About Page, Blog Page, Portfolio Page and Services Page, you are able to edit the coding if needed as i have well commented the coding
• Multilevel Dropdown Menu by Superfish
• Portfolio page with prettyphoto mixed order for video options
• Multilevel threaded comment lists
• Custom Page selection for welcome content

21. Greatio ($32)

Greatio is a Premium WordPress Theme, best suited for Business, Portfolio, Interior and Architecture sites. It comes with some JQuery scripts which makes it better view. Also 7 color theme available (Red, Violet, Green, Blue, Orange, White and Wood).

Some features:

• Valid xHTML
• Crossbrowser compatible
• Cufon font replacement
• 7 different styles (added 4 more color variations)
• 3 different homepage sliders
• Portfolio pages with LightBox

22. TekNium ($22)

TekNium is a clean modern business wordpress theme.

Some features:

• Valid xHTML/CSS
• jQuery image slider
• Admin options page
• Option to show latest news and blog posts on home page
• Widget ready

23. Koncept 10 in 1 ($32)

This theme has all the popular and common features which used by the current trend sites and more over this site has a lots of features built and customized user friendly and easy loading less weight hand coded and full functionality. Works in all the major browsers. For more details see features list below.

Some features:

• 2 Columns CSS Layout
• Sidebar Widget ready Layout
• Highly customized About Page, Blog Page, Portfolio Page and Services Page, you are able to edit each block as I have well commented the coding.
• Multilevel Dropdown Menu by Superfish.
• Portfolio page with full ease of customizing options.
• Switch Colors From Admin Theme Option Page

24. Universum ($27)

Universum is clean and modern template designed for companies, small business and individuals. It combines fresh modern look with great functionality. It is really easy to set – up and comes with in-depth help file. Purchase it now and impress your customers today.

Some features:

25. New Sense ($32)

NewSense is a Simple And Clean Business WordPress Theme. It’s great for any business and is designed in corporative and modern style. The home page is designed to emphasize your products.

The theme is easy to customize- options settings are included. This means that the options (such as images in slider, categories to show etc.) can be set in admin panel, without the need to edit the code.

The theme is widget ready. It has a dynamic sidebar and widgets can be easy dragged and dropped into it from the admin panel. The theme also goes with 3 styles- blue, orange and green and it is very easy to change between each other from the admin panel.

Some features:

• Featured Stylish Images Slider on the homepage
• Dropdown menu support
• Tableless Design
• Advanced Admin Panel
• Working jQuery/PHP contact form with validation
• 7 PSD Files included

26. Blitz ($32)

Blitz is a premium business wordpress theme that suitable for business, company, corporate and portfolio. The design is clean and professional and comes with 5 color variations.

Some features:

27. Complexity ($37)

Complexity is a simple business and portfolio theme that is easy to customize and will get you or your client’s website up and running in no time. It’s everything it’s name isn’t, which is simple. This theme takes advantage of the power of WordPress 3 with the use of custom post types, navigation menus, background image control, post thumbnails, and much more.

Some features:

• 12 unique styles
• 5 dynamic widget areas
• Full lightbox integration in pages and posts, including

  shortcode

• Timthumb image cropping with easy on/off setting
• Unlimited portfolio pages, with flash and video capability
• WordPress 3 navigation menus supported
• 6 Page Templates

28. Web Explorer ($32)

WebExplorer is a simple and elegant premium business WordPress theme. It’s great for any business and personal sites.

The theme is easy to customize- options settings are included. This means that the options (such as images in slider, pages to show etc.) can be set in admin panel, without the need to edit the code.

The theme is widget ready. It has multiple dynamic sidebars for the different pages and widgets can be easy dragged and dropped into them from the admin panel.

Some features:

• 3 Featured Stylish Sliders on the homepage
• Multiple Dynamic (widget aware) Sidebars included
• Advanced Admin Panel
• Very descriptive help file with screen shots and examples
• Working AJAX contact form with validation
• 15 PSD Files included

29. Vivee ($32)

Vivee is clean web 2.0 style web template that suiable for business, company, corporate and portfolio website. There are 7 color version of this template.

Some features:

• 7 Color Variations
• jQuery Cycle
• 10 Pages Template with its own sidebar position
• Portfolio page with jQuery Lytebox
• Blog Page with custom category

30. Small Business ($32)

Small Business Theme is perfectly suited for business or portfolio site types. The theme has classic blog features as well as special portfolio section for displaying works or products.

The built-in options panel (over 20 options), provides advanced theme customization to fit your or client requests.

Update 1.4 brings support for WordPress 3.0. The theme is backward compatible with WordPress 2.9 but I highly encourage you to upgrade to WordPress 3.0+ version as theme setup is much easier, only 4 steps! The new custom menus are supported and there is support for Google Analytics as well (or any other script/html that you want to add before end of the page). There is also jquery.easing plugin file permission fix that was causing trouble with slider.

Some features:

• Portfolio and Blog Functions (option for disabling blog feature)
• Easy Installation
• Easy Customization
• XHTML 1 .0 Strict Valid
• 5 Custom Widgets
• No Boring Custom Fields

31. Vanilla ($27)

Vanilla WordPress CMS Website Template is best suited for corporate, Business and Personal websites along with Blog facility

Some features:

• Auto thumbnail resize
• Dropdown menu for categories and pages
• Well commented code for all pages.
• Well documention for speed and easing options customization for Featured Projects Slider
• Valid XHTML and CSS
• Designed with “960 GRID ” System
• Read me file included for easy customization.

32. Andromeda ($37)

Andromeda is a clean theme with functional CMS and unique features. A massive pack of backend CMS options was created for this product to give you full control while creating and editing the site and its features. The main idea behind this theme was to create a something clean and simple, useful, nice looking and easy to modify.

Some features:

• 3 Skins: Light Grey, Dark Grey and Mixed
• 6 custom option modules
• 12 widgets (8 custom) and unlimited sidebars
• Accordion slider
• Full control over sliders via CMS Options
• Working AJAX contact form
• Extensive documentation PDF file included

33. Transformer ($27)

Transformer is a (CMS) wordpress theme that includes all the needed features that would give your website a great look with many administrative options to help you customize as you wish. For example, you can choose one of two scrollable styles and manage scrollable options like effects, speed, autoscroll and much more.

Some features:

34. Colosseum ($37)

Colosseum is the ultimate fusion of wordpress, creativity and great futures. This premium theme can be used for just about anything, from corporate websites to personal portfolios. It uses a lot of advanced css3 and jQuery effects, yet it still works on browsers that don’t support it.

Some features:

35. Freshfolio ($32)

Freshfolio is a WordPress theme with a clean interface and awesome jQuery custom slideshow perfect for use with portfolio and business websites.

Some features:

36. Corporate Folio ($27)

CorporateFolio is an elegant theme aimed at companies who need a quick and serious web presence setup. The homepage is perfectly suited to showcase your services, previous work or products while the blog is there to publish important company news and promote engagement through it.

Some features:

• Valid code
• Custom homepage
• Content Slider (either pages or posts)
• Portfolio page template
• 7 widgetised areas
• Auto Image resizing

37. Explict ($37)

Some features:

• All Fundamental Page Templates (main page, full-width page, search results, 404, contact, archives, author pages, post pages)
• 6 Additional Page Templates (blog, 3 portfolios, left sidebar page, right sidebar page)
• Animated portfolio with category filtering
• 30+ custom easy to use Shortcodes
• Accordion Content Slider
• Different Sidebar Per Post/Page
• Layered PSD files

38. Kinetic 3 in 1 ($37)

Kinetic Template has been designed to suit any kind of wordpress site. It comes with 3 color schemes at the moment, 2 Image sliders and several page templates.

The theme provides total control over your content and lets you decide how you want to show your site’s content to your visitors. However, author is always open for suggestions for more features or designs.

Some features:

39. Good Business ($37)

Good Business is a very clean Premium Business WordPress theme. It can be use for 1 or 2 column layout. Has a beautiful sidebar navigation and breadcrumbs of every inside page for you to easy to navigate.

Good Business comes with an impressive fully customizable jQuery and 3D slider, it has a 6 color style variation. This wordpress theme is fully customizable and well documented. Whether you’re a WordPress pro or just a beginner, this theme has you covered. With a huge custom back end area you have complete control over the look and style of your theme.

Some features:

• Conform to W3C standards
• 2 Homepage sliders
• 6 Page templates
• Widgets sidebars
• Ajax Contact Form
• Huge Tabbed Admin Area
• PSD files included
• Extensive Documentation Included

40. Podium ($32)

Podium is clean and elegant business wordpress theme that can be switched as business, corporate, portfolio and blogging theme. there are 7 skins option available, also two slideshow type (3D and jQuery slideshow) and two homepage layout.

Some features:

• 7 skins option
• 2 slideshow style
• Custom Post type for slideshow
• Support WordPress 3.0 Menu System
• Portfolio page with Pop up Lightbox
• Widgetable homepage and footer area
• Valid XHTML /CSS
• Poweful Admin Theme Options
• PSD Files included
• Well Documented

41. Novatorix 10 in 1 ($37)

Novatorix is a WordPress Theme, best suited for Business and Portfolio sites. It comes with a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The Theme has a huge wordpress custom backend (7 different option pages) that make customization of the Theme easy for those who don’t know much about coding or wordpress.

Some features:

42. Aurora ($32)

The Aurora WordPress version is author’s best project ever! Business site, Blog and Portfolio in one. Layout is designed for companys which love celan, crispy and professional designs. Each page was designed step by step with details. The package contains 6 full pages with 10 color schemes!

Some features:

43. Furu ($37)

Some features:

• All Fundamental Page Templates (main page, full-width page, search results, 404, contact, archives, author pages, post pages)
• 6 Additional Page Templates (blog, 3 portfolios, left sidebar page, right sidebar page)
• 30 custom easy to use Shortcodes
• Custom Twitter Updates Widget
• Contact Form Widget with all possible fields
• Threaded comments ready
• 100% Valid XHTML
• Layered PSD files

44. Dabbe ($27)

Some features:

45. Good Waves ($32)

Goodwaves is a neat business and portfolio wordpress theme built to help you present your company, service or product in the easiest and most convenient way. It has an awesome 3D Image slider as well as some jQuery goodness to spice things up. The theme comes with an easy to understand and configure wordpress backend panel for quick customization and installation

Some features:

46. Avisio ($37)

Avisio is a WordPress theme that takes advantage with all the amazing new wordpress 3 features and is best suited for Portfolio and Business Websites. It has the ability to create unique skins right from your backend without the need to edit anything within your CSS files whith just a few mouse clicks and also offers the option to install content automatically when setting up the theme, so it will look like the theme preview.

Some features:

47. Awesome Press ($27)

Some features:

48. Quambizz ($27)

Quambizz is an ultra clean and easy to use wordpress theme which can be used for a corporate purposes or if you want to set up a portfolio or even if you want a web site to represent your application.

Do you like a clean style then this theme will be perfect for you. The theme comes with 3 color styles, a PSD for the slider and a PSD for the portfolio image preview, and many more cool features such as a theme admin panel to set up the homepage, featured category, portfolio category and more.

Some features:

49. Biz ($27)

Biz Template is clean style wordpress theme for business, company and corporate website. There are 3 color option for this theme that you can directly choose via “theme options” feature in the admin area.

This theme comes with 8 page templates with its own sidebar widget. The pages template are Home, About, Services, Blog, Portfolio, Contact, Extra1 and Extra2.

Some features:

50. Crescento ($37)

This site is best suitable for a business, Company, Blog, Portfolio, or freelancer Portfolio website as well. Theme works in all the major browsers, and has massive features to use for your next projects. For most of the part you can just follow the HTML with commented codes. The font used for the logo in case you are wondering is Myriad Pro, which comes with your Adobe Photoshop Installation. You can create new logo using the PSD file included.

Some features:

Today we will be incorporating an options panel for the WordPress Classic theme. The methods you will learn will allow you to very easily integrate it into an existing theme you’re working on.

Setting The Files :

The theme that we will be working on is the classic theme provided by wordpress. You can find it on wp-content/themes folder. You should see the following files:

• index.php
• functions.php
• comments.php
• footer.php
• header.php
• rtl.php
• sidebar.php
• style.css
• screenshot.png
• An images folder with two files

Most of our work will be done within the functions.php file.

Now go to your wordpress admin panel then go to Appearance>Themes  and activate the classic theme.

Working on functions.php :

Begin by opening up functions.php in your code editor of the classic theme ( wp-content/themes/classic/functions.php ) then insert the following code :

<?php
$themename = "Classic Theme";
$shortname = "ct";

I added two variables the first one reffers to the name of the theme and the second is the shortname : You can choose any name for these two variables but don’t forget to select significant names because you will be using them later.

Now let’s start adding some options for our theme :

$options = array (
    array( "name" => $themename." Options",
           "type" => "title"),
    array( "type" => "open"),
    array( "name" => "Color Scheme",
           "desc" => "Select the color scheme for the theme",
           "id" => $shortname."_color_scheme",
           "type" => "select",
           "options" => array("blue", "red", "green"),
           "std" => "blue"),
    array( "name" => "Logo URL",
           "desc" => "Enter the link to your logo image",
           "id" => $shortname."_logo",
           "type" => "text",
           "std" => ""),
    array( "name" => "Homepage header image",
           "desc" => "Enter the link to an image used for the homepage header.",
           "id" => $shortname."_header_img",
           "type" => "text",
           "std" => ""),
    array( "name" => "Footer copyright text",
           "desc" => "Enter text used in the right side of the footer. It can be HTML",
           "id" => $shortname."_footer_text",
           "type" => "text",
           "std" => ""),
    array( "name" => "Google Analytics Code",
           "desc" => "Paste your Google Analytics or other tracking code in this box.",
           "id" => $shortname."_ga_code",
           "type" => "textarea",
           "std" => ""),
    array( "name" => "Feedburner URL",
           "desc" => "Paste your Feedburner URL here to let readers see it in your website",
           "id" => $shortname."_feedburner",
           "type" => "text",
           "std" => get_bloginfo('rss2_url')),
    array( "type" => "close"));

Here the variable “option” contains a big array which also contains other child arrays. Each child array holds an option.

The first array reffers to the title of the page ( In our case it’s ‘Classic Theme Options’ ). Every time when we want to add a new option we have to declare an array with a type and give it the name we want.

You can take a look at the options specified below :

• name: The name of the input field.
• desc: A short description explaining what it is to the user.
• id: the id of the field, prefixed by the shortname. It will be used to store as well as access the options.
• type: the input type – select, text or textarea
• options: used to declare an array of options for a select type input.
• std: the default input value, used if no other input is given.

Now we have our options ready but how can we view them ? Add the following pieces of code to the functions.php file:

function mytheme_add_admin() {
global $themename, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
header("Location: themes.php?page=functions.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] ); }
header("Location: themes.php?page=functions.php&reset=true");
die;
}
}
add_menu_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}

Here I declared a function with a name of “mytheme_add_admin”. This function is used for updating options : If the options are saved, then all the options are updated with their new values. If the options are being reset (indicated by another hidden variable with a value reset), then all of the options are deleted. The last line adds a theme page( add_theme_page ) in Appearance box and it calls mytheme_admin function. If you want you can replace add_theme_page with add_menu_page to create an external box :

At this step we still don’t have the theme options page, so we have to write mytheme_admin function which was called by add_theme_page, add this code to functions.php :

function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>

Here we have some conditions : if the settings are saved WordPress will show ” Classic theme settings saved “. Likewise for reset.

Now paste the code above I will explain it after :

<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>

<form method="post">

<?php foreach ($options as $value) {
switch ( $value['type'] ) {

case "open":
?>
<table width="100%" border="0" style="background-color:#cdcdcd; padding:10px;">

<?php break;

case "close":
?>

</table><br />

<?php break;

case "title":
?>
<table width="100%" border="0" style="background-color:#868686; padding:5px 10px;"><tr>
<td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>

<?php break;

case 'text':
?>

<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td>
</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php
break;

case 'textarea':
?>

<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>

</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php
break;

case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php
break;

case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
</td>
</tr>

<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>

<?php break;

}
}
?>

<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>

Explanation :

With this code we created our options page content : I used a php foreach loop, each option type is evaluated on a case-by-case basis. So if the type of the option is title do this, if it is a checkbox do that…

If there is an “open” type option we do nothing. If there is a “close” type options, we close our table. For each of the types “text” , “select” , “checkbox” and “textarea” , we display the corresponding input. At the end we added two buttons one to save the settings and the other to reset them.

Now our options page is ready, but we have to add this short code to make it work :

<?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>

This short code tells WordPress to add the admin menu.

After all this, here the result you should end up with :

In this example I used simple styles included in functions.php to make our options page looks better but I will show you how to add a stylesheet to functions.php so you can add your styles rapidly.

How to add a stylesheet to functions.php :

First, you have to create a new folder on your theme folder, name it functions then create a new css file with a name of functions.css. After flling your css file add this code to functions.php after mytheme_add_admin function :

function mytheme_add_style() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
}

That adds the functions.css file to the head. The location of the file is determined by the template directory.

Also, if you want you can use scripts to make your options page better by including a js file.To do this you have to change

wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");

To :

wp_enqueue_script("script", $file_dir."/functions/script.js", false, "1.0");

After adding your stylesheet or your script, you have to add this code under add_action(‘admin_menu’, ‘mytheme_add_admin’); so they will be active :

add_action('admin_init', 'mytheme_add_init');

Making Use of the Options :

Now after creating our options, I will show you how to make use of them. First up, open up your header.php file, and add the following code:

<?php
global $options;
foreach ($options as $value) {
    if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>

You must put the code above at the start of all the files which you add options to. Once you’ve done that you can begin using your options. For example : If you want to display the footer text you have to echo $ct_footer_text ( ct reffers to the shortname of the theme ) :

<?php
echo $ct_footer_text;
?>

For a checkbox you can check if the box is checked ( it will return true ) do this…

You can download the functions.php file here.

That’s it ! Thanks for reading this tutorial and I hope it was useful.

You can Download source files of this tutorial or Live preview this theme.

As I promised in the first part of this tutorial, we will do some stuff that will make your blog theme more interesting and useful. I’m re-writing the list with what we will cover in this part:

• Widgetizing your sidebar
• Making a working search form
• Using the single page template: comments, author details
• Using custom fields for showing an image for each article

1. Widgetizing the Sidebar

Having a widget-ready theme is the most important thing of a blog theme. It doesn’t matter for the reader but it helps you a lot. How a widget-ready theme is helping you? Well, imagine that you want a lot of things to be displayed in the sidebar. Think that you will have some lists like friends, archive, categories, tag cloud, advertising area, etc. It would be easy to write markup in the sidebar.php file, but it would be more easy letting WordPress for handling this. Having a widget-ready theme is a big advantage because you can add text, lists and advertising area within WordPress admin panel.

But enough with talking, let’s get started! Open your sidebar.php file that you have coded in the first part of this tutorial. Now, we’ll have to decide what pieces of code will stay even if the widgets are turned on. Widgetizing the sidebar makes a condition like: if widgets are available, show widgets and chosen sidebar markup, else, show original sidebar markup. Below are the widget tags, without any code in them:

<!--Code that will stay even if the widgets are used-->
<?php  /*  Widgetized sidebar, if you have the plugin installed. */
 if (  !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :  ?>
<!--Code to be replaced by WordPress-->
<?php endif; ?>

Maybe this clears everything for you. The comments are very explanatory, so now we just need to use it with our sidebar markup. So, you should decide what code will remain even if the widgets are used. Normally, the search box have to always be there. Of course you can let WordPress add it but this will stop you from any additional customization to the search form elements:

<div id="navigation">
<p><strong>Navigation  Here</strong></p>
<ul>
<li><a href="<?php  bloginfo('url'); ?>">Home</a></li>
<?php  wp_list_pages('title_li='); ?>
</ul>
</div>
<div  id="extra">
<form id="searchform" method="get" action="<?php  bloginfo('home'); ?>">
<input type="text" name="s" id="s" size="15"  /><br />
<input type="submit" value="<?php  esc_attr_e('Search'); ?>" />
</form>
<?php  /* Widgetized  sidebar, if you have the plugin installed. */
 if (  !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :  ?>
<p><strong>Categories</strong></p>
<ul>
<?php  wp_list_categories('title_li='); ?>
</ul>
<?php endif;  ?>
</div>

I’ll stop here for a moment. I added a search form, which has WordPress specific values. If you remove them, the search form won’t work:

<form id="searchform" method="get" action="<?php bloginfo('home');  ?>">
<input type="text" name="s" id="s" size="15" /><br  />
<input type="submit" value="<?php esc_attr_e('Search'); ?>"  />
</form>

The code I have been showing you previously, is the markup of the sidebar.php file, along with the widget tags. The condition for what I’ve written there, is the following: if there aren’t any widgets in use, show the categories, else, show the widgets you are activating.

We aren’t ready yet. This code won’t work if we do not add some functions. Normally, for not modifying the WordPress core files, we add new functions to the functions.php file that you will have to create. For creating the function for the widgets, add the following code to your new functions.php file:

<?php

if ( function_exists('register_sidebar')  )
 register_sidebar(array(
 'before_widget' => '',
 'after_widget'  => '',
 'before_title' =>  '<p><strong>',
 'after_title' =>  '</strong></p>',
 ));

?>

You need some explanation, right? Well, between the apostrophes you need to write your needed markup. Before and after widget could be used div tags, of course if your template needs them. For our current layout, we won’t add anything. The same thing happens for the title of each widget (e.g. Categories) which are wrapped by the paragraph and strong tags. You got it? Hope you did. This is everything you need to know about widgetizing the sidebar.

2. Adding a “Read more” link

Creating a Read more link is used for the blogs who do not want to show all the content of their articles on the front page. There are many ways we can achieve something like this:

2.1 The WordPress “more” tag

The more tag is activated by a little button when adding a new post from the WordPress admin panel. You can press ALT+Shift+T or click the following button:

If you do not know how to use it, I’ll explain you how to. Let’s say you have 2 paragraphs of text, but you want to show on the frontpage only the first paragraph. Click after the first paragraph and then click the shown button. You will see a dotted line with a little tag where it says “more”. All the content before this line will be shown.

But there is something else. You need to modify the content tag from the index.php file. As the source files from the first part do not have any parameter set to the tag, you will need to add it. Copy and paste the following code instead of the standard content tag:

<?php the_content(__('Read more...')); ?>

Do not remove the paragrpah tags. Just the content tag needs to be modified. Now in each article where you place the more tag from the WordPress will show a “Read more” link. Go and try it!

2.2 Using the excerpt

Another way to achieve this is by using the excerpt. This works a bit diffrent. When publishing a new article in WordPress, you will see a box where it says “Excerpt” If you still have the content more tag used, the excerpt will automatically use the content before the dotted line. If you won’t use it from the WordPress Editing screen, it will remain empty.

If so, you will be able to write something different, like a short introduction or description. Let’s say you have some content in the article, and just write in the excerpt a random description.

If you publish the text, you will notice that you will get the whole content on the respective article. For getting the text you have written in the Excerpt box, you will need to modify the index.php loop. So instead of:

<?php the_content(__('Read more...')); ?>

You will need to add the excerpt tag which is the following:

<?php the_excerpt(); ?>

Now, take a look and see the difference.

2.3 Using a limitation plugin

Using such a plugin sometimes is easier for you. What this plugin does? Well, depending on each plugin, it can limit your content to word number, letter number or just show the first paragraph of the article. You can see a list of 3 such of plugins:

• Content and Excerpt Word Limit
• WP Limit Posts Automatically
• A tutorial about limiting the content

Now, you just need to decide which one is best for you.

3. Comments-template: using comments in WordPress

When It comes to develop a new WordPress theme, the part I hate the most is working on the comments. It’s not because it’s hard, it’s because I need to make a lot of stylings to achieve a nice comment area. I won’t get into styling because it relies on your creativity and CSS skill. I will only show you how to use the comments in a theme and what the used tags are doing. I suggest learning some basics of PHP before editing the comments.php file, because you’ll need some basic knowledge about PHP to code your own comments. For now, I’ll just show you how to use them. So let’s get started by opening the comments.php file from the WordPress Classic theme which is located in the wp-content/themes/classic directory.

Now, save the comments.php file in your layout07 directory. Ok, you won’t understand much things in this file if you don’t have some basic PHP knowledge. For now leave the file intact and open the single.php file and add after the content tag the following tag:

<?php comments_template(); ?>

This will enable the comments in your theme. You will see a heading saying “No Comments” and below, a form with a heading saying “Leave a comment”. You can either leave a comment as a guest, or just sign in to WordPress and leave a comment as an admin (or user). Now, the most important tags you need to know when editing the comments.php file are the following:

<?php comment_author_link() ?> <!-- The author of the comment  -->
<?php echo get_avatar( $comment, 32 ); ?> <!-- The  commenter's avatar (or Gravatar) -->
<?php comment_text() ?> <!--  The commenter's comment text -->
<?php comment_date() ?> <!-- The  date when the comment have been posted -->
<?php comment_time() ?>  <!-- The time when the comment have been posted -->
<?php  edit_comment_link(__("Edit This"), ' |'); ?> <!-- The edit link for the  comment (if you want to edit something in your comment) -->

Now, constructing a new comment structure is very easy, but you need to pay attention for not breaking the PHP code. The default structure of the comment is the following:

<?php if ( have_comments() ) : ?>
<ol id="commentlist">

<?php foreach ($comments as $comment) : ?>
 <li <?php  comment_class(); ?> id="comment-<?php comment_ID() ?>">
 <?php  echo get_avatar( $comment, 32 ); ?>
 <?php comment_text()  ?>
 <p><cite><?php comment_type(_x('Comment', 'noun'),  __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php  comment_author_link() ?> — <?php comment_date() ?> @ <a  href="#comment-<?php comment_ID() ?>"><?php comment_time()  ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |');  ?></p>
 </li>

<?php endforeach; ?>

</ol>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

So now, let me explain. Starting from the first line: If there are comments left to your article, your comments will be shown with the giveen structure within foreach PHP function, else (if no comments are posted) show a text with “No comments yet.”. For changing the look of your comments, you need to work just inside the foreach function. I’ll show you how to change the look of your comments, very easily.

Delete the <ol> tags and everything inside the foreach function. You’ll just be left with something like this:

<?php if ( have_comments() ) : ?>

<?php foreach ($comments as $comment) : ?>

<?php endforeach; ?>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

Next, wrap the foreach function with a div id “comments”, like the default structure were wrapped by <ol> tags. Now, add the following code withing the foreach function:

<div id="comments">
<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__("Edit This"), ' |');  ?></strong></p>
<p><?php comment_text()  ?></p>
</div>

Just take a look on how the comments are displayed now. I have removed some tags because you won’t need them as a beginner WordPress theme developer. I added div’s instead lists because it’s more clean. The class and the id were assigned for further customization via CSS. Now, if you have made the changes as I told you, you should edn up with something like this:

<?php if ( have_comments() ) : ?>

<div id="comments">

<?php foreach ($comments as $comment) : ?>

<div class="comment">
<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__("Edit This"), ' |');  ?></strong></p>
<p><?php comment_text()  ?></p>
</div>

<?php endforeach; ?>

</div>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

For finding more information about manipulating the comments.php files go to the WordPress Codex and start looking for what you need. All that I’ve covered here is just basic stuff. Hope you’ve understood everything of what I’ve told you!

4. Using custom fields for showing an image for each article

Custom fields are one of the most important feature of WordPress. If you master the custom fields, you can create stunning WordPress functionalities like displaying an image for each article (like what I’ll be teaching you), displaying a certain message or link to your visitors (like a live preview and a demo button or even a source link for your article).

Where can you find the custom field box? The cutom fields box is located under the Send Trackbacks box, in the Post > Add post in the admin panel:

Using the custom fields isn’t so hard. You just have to learn the tag that calls a specified custom filed name. The tag is the following:

<?php echo get_post_meta($post-&gt;ID, 'custom field name', true);  ?>

If you would write “image” instead of “custom field name”, WordPress will create a custom field with the name “image”, so any value you will give to the custom field, WordPress will output the value in the place where you have written your custom field tag. Not too clear for you? Let’s apply the custom field tag to create a nice thumbnail for each post! We will use an image tag which uses as source a link introduced by the custom field:

<img src="<?php echo get_post_meta($post-&gt;ID, 'image', true); ?>"  alt="<?php the_title(); ?>" />

This tag will be posted above the content tag inside the index.php and the single.php files. Now go and create a new custom field with the name “image” and add to the value a link to an image. You can see how I’ve done this in the following pic:

Just in case that you won’t attach a thumbnail to your post, the article will show you an image missing. So you may add a thumbnail to each article you are writing. This is everything you need to do!

5. Author details: single page template and profile

WordPress have some predefined functions to output the current author details. This can be useful if you want to show some details about you or other authors in the single page templates. WordPress is also creating a profile page for any author where you can show the author details: description and posts.

This may sound difficult, but it’s very easy, just like all other things in WordPress. You only need a tag or two (if you want the author name displayed too) to show up your auhor details on single page template (and also others). Place the following tags at the start or at the ending of the article loop (in the single.php file):

<p><strong><?php the_author_posts_link();  ?></strong></p>
<p><?php the_author_description();  ?></p>

The first line is for outputing the author’ posts page link and the second is for outputing the description of the author (entered from Biographical Info from the profile within WordPress admin panel). You can wrap these codes by a div id “author” so you can style it if you want. So the loop would look like the following:

<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<p><strong><a href="<?php the_permalink();  ?>"><?php the_title();  ?></a></strong></p>
<p>Published on <?php  the_time('m d Y'); ?> by <?php the_author(); ?></p>
<img  src="<?php echo get_post_meta($post->ID, 'image', true); ?>"  alt="<?php the_title(); ?>" />
<p><?php the_content();  ?></p>
<div id="author">
<p><strong><?php  the_author_posts_link(); ?></strong></p>
<p><?php  the_author_description(); ?></p>
</div>
<?php  comments_template(); // Get wp-comments.php template ?>
<?php endwhile;  else: ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif; ?>

Now, for creating the author profile page, you need to open the page.php file then save it as author.php. Now, delete the actual loop and everything within the content div and paste the following code:

<p><strong><?php the_author_posts_link();  ?></strong></p>
<p><?php the_author_description();  ?></p>
<ul>
<?php if (have_posts()) : while  (have_posts()) : the_post(); ?>
<li><p><strong><?php  the_title(); ?></strong></p><p>Published on <?php  the_time('m d Y'); ?></li>
<?php endwhile; else:  ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif; ?>
<ul>

As you see, the author details are outside the loop. Then, we would like to display the posts that the current author have written so far. We are creating the loop, but this time we will show just the article title and the date when it was published. That’s it now. Save your file and go to test it!

That’s it!

Well, people, these are all the things I’ve wanted to cover as basics. Just leave comments requesting other things, and probably I will cover them in upcoming tutorials. Have fun with creating WordPress, and if i’ve helped someone to develop a nice theme, let me know! More to come on 1STWD…

What we need

WAMP/XAMPP Server (or similar software) - Download

WordPress 2.9.2 (latest version, recommended) – Download

Getting started – creating the working environment

First thing first, you need to install WAMP Server. After installing WAMP, download and copy the WordPress files in the www directory from your WAMP folder. Start WAMP Server, click on the icon in the task bar, and a pop-up list show appear, then select phpMyAdmin.

Now, create a new database. Give it any name, but you need to keep it in mind as we need it at the WP installation. As for now, we are done with WAMP Server, just leave it running.

WordPress Installation

After copying all the files, you need to install WordPress. Enter on the address where you have put the WP files. The address would be exactly, without any www or http, localhost or localhost/WordPress. After accessing the address, the installation may start.

Click “Create a Configuration File”. After this, you will see some listing of things you need to know. I’ll just tell you what you need:

1. Database name: your given name of the database we’ve created earlier
2. Database username: this should be “root” if you set it on your computer.
3. Database password: there is no password set.
4. Database host: localhost
5. Table prefix: for now, leave it as it is.

Now, just fill in the fields with the required information, and go further! After filling up the fields, next give any name to your blog, and write your e-mail address.

Now, copy the auto generated password, and paste it in the password field at the site login. Now, because you cannot keep that weird password in mind, go the upper right corner of the site and click on “admin”. You should see a page where you have your account info. You can modify anything there, but for now we are setting a new and easier password.

Go to the bottom where it says “New password” and set your new password.

Good, now you have WP installed, but we have a lot more things to do.

1. Planning the theme layout

When I’m starting a new project on developing a WordPress theme, as everyone should do, I first build my HTML/CSS template. This is easier because you also learn how to convert a simple HTML template into a fully functional WordPress theme. So i won’t go through building the template, considering you already know how to build your own. I’ll just use a simple layout from Free-CSS.com in this tutorial. Go here and download the #7 template.

2. Starting the conversion

When I’m making a theme, I’m always copying code snippets from a default WordPress theme (because i cannot remember all of them). I use the WordPress Classic theme, but you can also use a cheat sheet. The best one i’ve found is the one created by Ekinertac. After it opens in the PDF format, save it in your computer (you may need it when you do not have access to the internet).

All the contents from the sheet are the most used functions from WordPress, and the ones that you need to create a basic WP theme.

A thing that you have to notice is that WordPress is using PHP. Even if you aren’t a PHP master, or you have absolutely no idea what PHP is, you are still able to create a basic theme. When creating a theme, you need to know just tags and what they are doing, so do not worry about PHP.

2.1 Making the theme recognizable by WordPress

A very important part of a WordPress theme is the CSS file. In the CSS file are written some lines that WordPress is using to g a theme. First, you need to rename the styles.css to style.css as WordPress is search for style not styles. Copy and paste these lines at the start of your CSS file:

/*
Theme Name: Free-CSS template WP version
Theme URI: <a href="http://free-css.com/">http://free-css.com</a>
Description: A very basic  WP theme based on a simple CSS layout from Free-CSS.com
Version: 1
Author:  >your name<
Author URI: >your site url<
Tags: free, css,  tutorial, simple, basic
*/

You can change everything that is located after the “:” dots. Save your CSS file as we won’t need it because we are just trying to give to the HTML template functionality.

2.2 Converting the HTML file

After you set up your CSS file, we need to go and change some things in the index.html file. First of all, clear all the sample text.
Save you file as index.php. We do not need the sample text anymore as we will introduce our own text from WordPress later.

Now, we need to make some declarations for the WP theme. We need to make the title dynamic and to set the stylesheet path. These lines will help you:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');  ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true,  'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">@import url(  <?php bloginfo('stylesheet_url'); ?> );</style>

Now, we will start with the header of the design. For adding your blog’s name with a link to your homepage in the header, we will use this line of code:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

The first PHP tag is used for retrieving the blog’s homepage link and the second is for the blog’s name (the one you set in the installation).

Now we’re going further for the loop. The loop is a block of code that will repeat for each post from WordPress. We will use the loop to construct the article. I’ll cover more about the loop in the second part, where we will use it for other things too.

Now, all your code is wrapper by some loop specific tags. Here they are:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!--Code to be repeated here-->

<?php endwhile; else: ?>
<?php endif; ?>

Next, we will start constructing the article structure. We will need a title, some info about the dat when the article was published and it’s author.

The following line makes the article title:

<p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>

The first PHP tag is for the article’s link and the second is for the article title. These tags are kinda self-explanatory. We’re moving further for the meta data (date, author). Copy and paste the following code under the article title code:

<p>Published on <?php the_time('F d, y'); ?> by <?php the_author(); ?> in <?php the_category(','); ?></p>

First tag is for retrieving the date. The date tag have some parameters. These parameters are setting the date format (month, day, year). You can add characters like “-” or “.” or making something like “Month 02 Day 15 Year 1990″, it’s up to you! The second one, is for echoing the author of the post and the third, is for category or categories that the post is filed under.

Now, we will be placing the content tag. The content tag will output everything you write in a WordPress post:

<?php the_content(); ?>

The tag doesn’t need paragraphs because WordPress auto generates them for you. We’re finished with the loop. You can see the code pieces at the party:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>

Next, we will be going to code the sidebar.

We will start with the navigation. As you see in the CSS layout, the navigation is located in the sidebar. It doesn’t matter because the technique is the same. For creating a basic navigation you need these lines of code, which will placed between the <strong>ul </strong>tags:

<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>

You already know what the first PHP tag does. The second one, is listing the pages that WordPress generates. The parameter is for list title. Try removing it and see what’s happening.

This is all you need to do for getting a nice working navigation menu. Now, we will create the categories list. All the blogs have categories and we don’t want our theme to lack categories. We will just add this code between the div #extra tags:

<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>

There is another listing tag but this one is listing the blog’s categories. I’ll cover more things relating the sidebar in part 2, where i will teach you how to make a theme widget-ready. That means you will introduce new blocks inside of WordPress, without coding anything.

But what about the footer? Shouldn’t it have some text in it? Well, we will write the copyright:

<p>Copyright &copy; 2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All rights reserved.</p>

As you see, we have introduced some tags, just like in the header, to output the blog’s title.

The theme is functional, but we will need to make some page templates for single post (where the comments will appear) and the page (where you could write some info about your blog). If you use the same code for the header footer and sidebar, your template would get messy. Let’s say that you want to add one more thing to your sidebar. You will have to modify 3 times for each page template. Well, for avoiding this, we will chop the markup.

For each section of the index.php file we will have a separate file. So we will have header.php, footer.php and sidebar.php. Now, we will be starting to chop!

Copy and then replace the following lines:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
</head>
<body>
<div id="container">
<div id="header"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1></div>

With the following line:

<?php get_header(); ?>

Your copied code needs to be placed in the header.php file. The same thing we will do with the footer and sidebar

Copy the following:

<div id="navigation">
<p><strong>Navigation Here</strong></p>
<ul>
 <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div id="extra">
<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>
</div>

Paste them to sidebar.php then in the index.php file replace it with:

<?php get_sidebar(); ?>

Now, do the same thing with the footer. Copy the footer div and it’s contents, paste it in footer.php file, and then remove it in index.php with:

<?php get_footer(); ?>

You should have something like this:

<?php get_header(); ?>
 <div id="wrapper">
 <div id="content">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>
 </div>
 </div>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
</div>
</body>
</html>

Now you’re done with chopping the markup. We are going to create the page templates. We will create firstly the single template. Just save your index.php file as single.php. We won’t modify anything in this page yet. We will do it in part 2 where I will learn you how to create a comment form and how to list comments and other things like custom fields.

Now, for the static page, page template, delete the line where you have placed the meta data (the line with date, author and category tags). Then save the file as page.php. Being a page, we won’t need any info about the creation date or the author. We won’t even use comments on page because there is no point in it.

The last move we need to do is to print screen our template and save it in a canvas of 300 x 225 px and save it as screenshot.png in the root directory of your theme. This will be used in WordPress theme menu.

Well, we’re done with the first part. Go ahead and test your theme. If there is something you want to ask, do it via comments. Don’t forget that you can download the source files too.

To be continued

There are a lot of things to cover about WordPress. Making a theme isn’t so difficult, you just need to be patient. There are a lot of things that are needed to make a fully functional WordPress theme. That’s why, this tutorial will have a Part 2. Maybe there will be more parts, but i will let you know what I will be covering in the next part:

• Widgetizing the sidebar
• Using the single page template: comments, custom fields, author details
• Using custom fields for showing an image for each article
• Making a nice and working search form

Stay Tuned.

These themes are great for any type of Firefox user so without a doubt you will find one that’s suitable to your needs. Bring some color into your Firefox Browser and Enjoy!

1. Ambient

2. Chromifox Basic

3. Chromifox Extreme

4. Chromifox Carbon

5. Black Stratini

6. Past Modern

7. SilverMel

8. Aluminium Kai 2

9. Anthem

10. Camifox

11. VFox3

12. Midnight Fox

13. Midnight Foxy

14. iTunes Fox

15. Glaze Black

16. Abaca Classic

17. Dark Revisited

18. Devious Green

19. Bluetacular

20. Operetta Advance

21. iAqua

22. Purity

23. Phoenity

24. Minty Fresh

25. GrApple Yummy

26. SoCool-Calx

27. W3 V8

28. Aero Fox XL

29. Strata40

30. MacOSX Theme

31. Nuvola FF

32. Modern Modoki

33. NetFox

34. Gradient iCool

35. Vista AERO

36. My Fire Fox

37. Noia

38. Aeon

39. WhiteHart

40. Pimp Zilla

41. iPox

42. GrayModern

43. Old Factory

44. FoxScape

45. BlackX

46. Nasa Night Launch

47. Sky

48. OWN

49. MozXP

50. Kempelton

51. Kempelton Large

52. Simple Green

53. Phoenity Aura

54. Vista on XP

55. GNome Classic

56. Firefox 2 For Firefox 3

57. xBox Fox

58. Full Flat

59. Utopia White

60. Rein

61. Crystal Fox

62. Alienware Invader

63. zBlack

64. Office Black

65. Strata O Various

66. AvantGarde Nightlife

67. MonoChrome

68. Arctic Glow

69. MonGrel

70. SkyPlus

71. SlikerFox

That’s it! Don’t forget to subscribe to our RSS Feed in order to get latest design related stories and resources.

E-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.

1. Sigyn SM

2. Fitness Magento Theme

3. Everson Store

4. Blue Skin

5. FreePop

6. HM Modern

7. Magento Classic

8. OutDoor

9. Cogzidel Electronic Store

10. Yoast Blank SEO Theme

11. Pet Store Theme

12. Iphone Theme

13. Magento Connect

14. Mobile Theme

15. Girly Store

16. Telescope Theme

17. Linen Theme

18. Basic Theme

19. Siam Blue

20. HM Modern – White

21. Absolute Theme

22. Red Theme

23. HardWood

24. Auto Theme

25. Glam

26. GrayScale

27. Foot Prints

28. Teal

PREMIUM Themes

29. Uno Store

30. The Wear Store

31. Hello Simple Store

32.  Hello Clean Store

33. Grunge Theme

34. Brage Theme

35.  Photo Store

That’s all! You can easily start to create your E-commerce website based on Magento, the most popular and powerful CMS for creating online-based stores.

E-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates.