Crafty Cart is amongst the most opted and fun to use WordPress theme that has been designed to provide users with an easy way to create online shops. This theme neatly integrates with the e-commerce plug-in to create a highly practical e-commerce solution. Crafty Cart features a spanking new retro style that is one of the best to sell out various handmade items such as t-shirts, etc. from an online shop. Crafty cart is a two column SEO optimized WordPress theme available in soft pink shades. This theme has 2 widget ready side bars and Gravatar support which makes it completely advertisement ready.

Crafty cart features one bio box that can be easily edited independently on both the side bars and remains completely unaffected if any of the widgets are used. Crafty cart theme holds complete compatibility with WordPress 2.6+. Check out a sleek preview of Craft Cart.

Some salient features of this Free WordPress theme include;

• Crafty cart provides with the facility to keep both the code tidily and clearly organized to go ahead with ones styling preferences.
• With Gravatars and separate Pingbacks, Crafty cart allows freedom from the hassles of updating a theme or redoing the various template hacks.
• Crafty cart requires a WordPress e-commerce plugin to start the shopping cart functionality and work as a completely functional blog on its own.
• The typeface choice for the various headers is a real nice option.
• Theme supports most HTML tags like – <cite>, <abbr>, <del>, <ins> and <dt>.
• The comment area of Crafty cart has been done in a nice way and one has various styling of comments for both odd and even.
• The blog title area is quite big enough and has been has enough space to form two lines.
• The anchor texts that are present on the sidebar provide a bold styling to the text which at the same time gives a jumpy effect to the rest of the sidebar also.

After trying to Crafty Cart for a small initiative, I could convey that it’s a nice theme for wannabe sellers to get the e-commerce rolling.

Just 3 easy steps and you shall set it rolling;

1. Download the FREE theme and e-commerce plugin.
2. Install the theme and plugin to activate the same.
3. Add your PayPal or Google Checkout details in the settings option.
4. There is no 4th step!

Stay tuned for more themes and plugins!

More than 24 themes available in their gallery (plus all future themes) for just $19.95 / year. All the themes are gorgeous in their own right. Plus, these are not like the basic free themes – they come with their own options page and some advanced features depending on the purpose of the theme.

At less that $1 per theme, this is perhaps the best value for money you’ll get if you’re looking for affordable premium WordPress themes. Take a look at their entire collection here: Elegant Themes

So how about spreading this tweet that a new WordPress theme called LiveTwit is up for grabs? This is made simple by the theme itself which allows streaming live news of a topic or streaming tweets from a particular twitter user. All we are required to do is configure the theme to do its bit.

Layout

• LiveTwit is a typical two column layout theme with the left column making up the descriptive part of the website, i.e.; it contains the logo and a message to convey the highlight of the site. Also we would find the FriendMeUp box where the user may provide links to some external social media profiles.
• The right column is where all the streamed tweets are posted. This is continuously updated ensuring the reader follows the tweets as and when they are posted.
• The theme also has 5 vibrant color schemes to choose from depending upon the mood of the topic posted on the site.

Control Panel

Now to the all important question- how do we configure the theme to spread the word? This is very simple, just manipulate some 100 lines of code and we are all set to go. Already thinking of disowning this theme?

Well manipulating 100 lines of code is definitely not the way to go, for this very reason this theme offers a very simple built-in theme control panel which helps the user to setup and change any aspect of the theme. A few tweaks in the color scheme, search criterion – be it a particular topic or a particular twitter user, logo URL and the social media links and the site is up and running with all the tweets related to the search criterion being displayed.

This theme is definitely the easiest way to create a quick site to give a heads-up on some hot ongoing topics, events or even businesses.

View the demo of this theme and ofcourse it is free, so go ahead and download it.

Tweet!

Just select an image from your computer and upload, or specify a URL to the banner image. It’s pretty simple.

No need for additional plugins, so even less headaches for you. These two themes are suitable for almost any type of blog.

First, select your search criteria. You can find themes by your favourite color, number of columns, and other criteria.

You can then preview the theme first. If you like how it really looks, you can easily install the theme to your WordPress blog.

Then just enter your FTP details (not your blog details) and the theme will be downloaded, unzipped and installed automatically. You can then choose to activate it or leave it in your personal collection of themes.

So by now, you can install both themes and plugins automatically. WordPress is getting easier and easier to use, and I’m sure a lot of newbies will find this new feature very appealing.

As many of you may know, I make a great living online with my WordPress AdSense System product, and since 2006 this product alone has made me more than a six figure income. Although this is a complete system with an e-book guide and videos, one of the biggest selling points is the incredible 30 AdSense-ready WordPress themes I include in it.

Now, you can get Private Label Rights (PLR) to the entire themes collection, rebrand and modify it however you want, and sell them yourself for an incredible profit. You get:

• 30 niche WordPress theme designs
• Full source codes to the themes and images
• Full source documents for the instruction files
• Complete sales page to sell the entire collection
• Bonus collection of web software with sales page
• FREE updates and bug fixes

To secure your copy of Private Label Rights, just visit Instant AdSense Themes.

If you do not have Adobe Photoshop and do not want to spend for one, I highly recommend that you get GIMP, which works like Photoshop and is free.

There are plenty of places where you can find tutorials online on how to use Photoshop, but my personal favourite is <a href=”http://pixel2life.com”>Pixel2Life</a>. You can find a tutorial of almost anything you want there, including how to create different types of banners step-by-step from scratch.

Many of the tutorials will ask that you use different types of brushes to create effects, but not all of them will tell you where to get them. One of the best resources for brushes is DeviantArt. It’s also a great place to find texture and stock images.

A simple banner with a light gradient background works for virtually any type of blog and looks clean and professional. All you really need is one single image, and you can find plenty of royalty free images at sites such as iStockphoto.

Always opt for an image with either no background or a white background, which you can easily clean up to use on your banner. Just select your “Magic Wand” tool, click on the white background and hit delete. Unless you have the patience to clean up the image manually, never go for photo images.

Using the right fonts also affects how your banner will turn out. Avoid using the default set of fonts and go for something that has a different style. You can search and download new fonts for free from sites such as 1001FreeFonts.com and dafont.com.

Here’s an example of a simple banner image that I made in less than 5 minutes after finding a good image to use:

You can download the psd file for that banner here: Download header psd file

So, what does the final result of the theme looks like?

Here’s a screenshot:

You can download this theme directly from here and edit it any way you like: Download Free Action Theme

If you want to see a live blog running this theme, head on over to my upcoming Diablo 3 blog. I did a bit more editing to basic design of what we’ve created here and the result is as you can see it.

All professional bloggers are well versed with the relevance of their writing content to their blog theme and this is where the expertise of a top WordPress designer comes into play. Isaac Bashevis Singer aptly defined the psyche of a Designer when he says “Every creator painfully experiences the chasm between his inner vision and its ultimate expression”.

Some of the Top WordPress designers whom you can hire are:

1.Pearsonified

Chris Pearson is the founder who is into web development. This site is one of the oldest and widely read sites and it also has a large reader base. This is actually the site which made the famous ‘thesis’ theme and focuses on blog designing, wordpress functions and online businesses.

2. Men With Pens

This site is mainly offering online solutions to blogging, freelance writing, entrepreneurs, content publishing and web designing. Though the background color does not look professional, the site is uniquely featured in its contents and helps the readers to avail the desired services. It also has online contests, book store sections etc. which gets the maximum attention from readers.

3. Brian Gardner

Gardner’s site is a neatly maintained one with an electric blue colored homepage in which he blogs primarily about Internet, its applications, his themes etc. The site offers services such as Blog Designing, Website Strategy and Internet Marketing. The rates at which he offers his services viz. Blog Consulting and Custom WordPress themes are also mentioned. A list of highly recommended people by him are also mentioned in the ‘contacts’ section of the site. The main focus of the designer is on the services being offered by him which are considered to be one of the best in the business. The transformation from being an individual lacking basic knowledge about the web to one of the top WordPress designers within 2 years is really an inspiring one.

4. Nimbupani

The funny choice of the name reflects in the color combinations of the homepage which enables to bring a young and fresh look to it. Nimbupani focuses on web design, web standards, and accessibility. The homepage shows the current projects at different websites with a link to their design partners. The blog at this site is about books and authors, involving their analysis and reviews. A unique concept.

5. Cats Who Code

CatsWhoCode is owned by Jean-Baptiste Jung whose main services are web designing, web development, blogging and operating systems. The content of the site is actually very good with in depth focus on blogging tips on wordpress and web designing. With a good number of readers to its credit, the blog content is mainly focused on WordPress tricks, tips, functions, web hosting etc. With a unique featured section it also has a ‘contribute’ section in which they show their interests from readers under the topics Mootools, Wordpress plugins, Ubuntu tips, Adobe Photoshop, Wordpress themes, SEO, Open Source, Web design, development, etc.

6. Pro Blog Design

With an eye-catching sub title as “Design a Better Blog”, it is sure to get clients attracted to its services of web design and development. Along with it, the focus is also on the highlights of the site which are about their best designs on WordPress about various sub domains and their famous themes. They are particularly focused on blog designing, coding and WordPress. They also write enriching articles about various technicalities which should be known by a blogger, coding tricks, resource posts and various design related discussions.

7. Solostream

With few best WordPress designs to its credit, Solostream is a WordPress theme design company which caters to the needs of small businesses, organizations and individuals who yearn for simple, elegant and affordable designs. This web based media company creates easily accessible content and design services and also has lot of themes to demonstrate their services on their site. A reader can also access tutorials from their site on various WordPress topics, affiliate programs, supporters and partnerships and increase their knowledge to a great extent.

These were a few top notch design shops where you can think of getting a great design for your blog.

Don’t worry if you’re unfamiliar with css coding since being simple or minimalist can produce a great looking theme that functions well. You can also make use of this useful css generator tool. There is also a downloadable version of the css generator, and you can check out other available resources there to help you with css.

Top Navigation and Banner

<a href=”<?php echo get_settings(‘home’); ?>/”><img src=”http://anime.osiristeam.net/images/banner4e.jpg” border=”0″></a>

But before we begin, there is something else we need to add. You can actually just use normal text links for this, but I prefer something with a bit more flair. Check out the css menu section of the library, in particular, the horizontal css menu section.

Simply select one that you like (I’m going with Matt Black Tabs). Just copy the css part into your stylesheet and the html part into your header. They’ve made it easier by seperating the two for you. Remember to only copy the classes in the css and not the <style> </style> tags as well.

Paste the html part in your header.php, right above <?php wp_head(); ?> and if you haven’t done so already, remove the following tags (and anything else thats within them):

<div id=”topsection”><div class=”innertube”>
</div></div>

You can, of course, edit the links for your navigation here directly, but if you prefer to have it list all your pages as links here, edit it to look like this instead:

<div class=”mattblacktabs”>
<ul>
<li><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>
<?php wp_list_pages(‘title_li=&depth=2&sort_column=menu_order’); ?>
</ul>
</div>

Right after that, add the following:

<a href=”<?php echo get_settings(‘home’); ?>/”><img src=”http://YourBannerLocation.com/YourBanner.jpg” border=”0″></a>

Replace the URL with your actual banner. The banner’s width should be the same as your #maincontainer. Don’t worry if you don’t know how to create a banner or don’t have Photoshop. I’ll share with you some simple tips on creating a professional looking banner with little effort as well later.

And we’re done with the header.

Formating your link and fonts

You’ll need to add the following to your css:

a {
color: #2175BC; /*color of links*/
text-decoration: none;
}

a:hover {
color: #FF7400; /*color of links when mouse is hovering over the link*/
}

a:visited {
color: #2175BC; /*color of visited links*/
}

img {
border: 0;
}

h1, h2, h3 {
color: #FB9B4D; /*the color of header and titles*/
font-size: 1.5em; /*size of header title fonts*/
font-family: Georgia, “Helvetica Neue”, Tahoma, serif; /*header and title fonts*/
font-weight: normal;
letter-spacing: -1px;
margin: 0;
}

hr {
color: #FFF;
border: 1px dotted #969696;
margin-top: -13px;
}

Just edit according to the comments. Play around with the values and colors to see what works for you.

Formatting Your Sidebar

Add and edit these codes to control how your sidebar listing will look like:

#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#sidebar ul li {
border-bottom: 1px dotted #ddd;
margin-bottom: 0.3em;
padding: 0.3em;
}

#sidebar ul li ul{
list-style-type: square;
margin-left: 1.5em;
padding: 0;
border: 0;
}

These are fairly simple codes so just play around with it a little.

Formatting Your Titles

.entrytitle h2 {
font-size: 2.2em;
line-height: 1em;
}

.entrytitle h2 a {
color: #1B7AB8;
}

.entrytitle h2 a:hover {
color: #FF7400;
}

.entrytitle h5 {
color: #999;
font-size: 0.8em;
margin-top: 0px;
}

.entry {
margin-bottom: 1.5em;
}

.entry blockquote {
color: #3E3D3D;
margin: 20px 30px 20px 30px;
padding: 0 0 0 10px;
border: 2px solid #fff;
border-left: 2px solid #C3D9FF;
}

.entrymeta {
margin-top: 1em;
}

Again, you don’t really need to edit much except the color and size. Very straight forward.

Coloring Your Theme

You’ve probably had one of those coloring books back when you couldn’t even read properly. You just simply pick up a colored pencil and start coloring away in the blank between the lines of that drawing of a parrot, car or house.

We’ll be doing that now, only this time, our “drawing” is the theme and the color pencils are html color codes entered into the css.

In your body class within your css:

body{
background: #FFFFFF; /*background color for the site*/
font-family: Verdana, Arial, Georgia, Helvetica, Sans-Serif; /*fonts for the contents*/
padding:0;
line-height: 1.2em;
font-size: 80%;
margin: 0;
}

In your #contentcolumn:

#contentcolumn{
margin-right: 405px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)(ori 400px)*/
padding: 5px 0px 0px 5px;
overflow:hidden;
background: #FFFFCC; /*background color for the main content column area*/
}

Are you beginning to see a pattern here? All we’re doing is add an additional field in each of these classes. You can also alter the color of your sidebars by adding the following to your #leftcolumn, #rightcolumn, or #footer:

background: #FFFFFF;

Refer to the html color table for the color codes. A tip: If you have any image editing tool, such as Photoshop, you can also find the color codes by opening the color pallete. You will find a lot more colors at your disposal.

You can also use the css generator to help you if you want to try something more fancy such as borders. Do a backup and play around with it. It’s the best way to figure out what works and what doesn’t.

Footer

The footer can be really simple, like this:

<div id=”footer”>
<center>
© Your Name 2008 | Designed by <a href=”YourLink”>Your Name</a> | Proudly powered by <a href=”http://www.wordpress.org/”>WordPress</a>
</center>
</div

That’s it. Congratulations, you’ve just built your very own WordPress theme!

But we’re not really finished yet. There are still a few tips and tricks you can use to help you build your own theme, such as how to easily create a professional looking banner, which will be covered in the next post.

Main Index Template

In index.php, we need to remove all the leftover codes from what we’ve copied from the css library that we no longer need. Essentially, we only require the div tags, and anything outside these are unneeded. In the 2 column layout we are using right now, that would be the following:

<b>Content Column: <em>Fixed</em></b> <script type=”text/javascript”>filltext(45)</script>

Remove these and in its place we will paste in the WordPress codes:

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

<?php the_date(”,’<h2>’,'</h2>’); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
<div class=”meta”><?php _e(“Filed under:”); ?> <?php the_category(‘,’) ?> — <?php the_tags(__(‘Tags: ‘), ‘, ‘, ‘ — ‘); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__(‘Edit This’)); ?></div>

<div class=”entry”>
<?php the_content(__(‘(more…)’)); ?>
</div>

<div class=”commentlist”>
<?php wp_link_pages(); ?>
<?php comments_popup_link(__(‘Comments (0)’), __(‘Comments (1)’), __(‘Comments (%)’)); ?>
</div>

</div>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

<?php posts_nav_link(‘ — ‘, __(‘&laquo; Older Posts’), __(‘Newer Posts &raquo;’)); ?>

After saving, add these to your style.css:

.post {
margin: 0 0 40px;
text-align: justify;
}

.post hr {
display: block;
}

.entry ul li:before, #sidebar ul ul li:before {
content: “0BB 020″;
}

.entry ol {
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li {
margin: 0;
padding: 0;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

These are the div classes that corresponds to what we’ve just copied and pasted into the index.php. Again, this is taken from the WordPress default theme.

Single Page

Copy everything in your index.php and paste it into your single.php. Whenever you make changes to your index.php, you should do the same in single.php, unless you want your individual post or page to look different than your index.

You can also choose not to have a single.php file. This will result in WordPress using your index.php as the template. Doing this will save you time required to update your single.php file all the time, but it’s recommended to have a the single page file since some plugins requires you to edit that page.

Sidebar

It gets a little tricky here, since the theme we’re trying to create has 3 sidebars, but right now we only have one. But here is how a little ingenuity can actually help us get what we want. All we have to do is actually nest another 2 column layout into the single sidebar.

But rather than using the same 2 column layout codes from the css library, this time we’ll take the codes from the 3 column layout in order to make things a little simpler for us.

Before you start though, you should edit your style.css and sidebar to change the div class “leftcolumn” to “sidebar” instead. This is important because we do not want duplicate class names, which will mess up your theme. Right now you won’t see any duplicated class names, but the class “leftcolumn” also exist in the 3 column layout we’re about to copy from.

Following the steps from the previous post, copy and paste related codes from the library and into your theme. All you need is the codes for the 2 sidebars, so copy the rightcolumn and leftcolumn codes into your sidebar_right and sidebar_left pages as well as the corresponding css classes into your stylesheet.

Once that’s done, edit the css codes to fit with what you want:

#sidebar{
float: left;
width: 370px; /*Width of right column*/
margin-left: -400px; /*Set left margin to -(RightColumnWidth) */
background: #FFFFFF;
}

#leftcolumn{
float: left;
width: 185px; /*Width of left column in pixel*/
margin-left: -7px; /*Set margin to -(LeftColumnWidth + RightColumnWidth) 400*/
padding-left: 7px;
padding-top: 5px;
background: #FFFFFF;

}

#rightcolumn{
float: left;
width: 185px; /*Width of right column in pixels*/
margin-left: -7px; /*Set margin to -RightColumnWidth 200*/
background: #FBEAC5;
padding-left: 7px;
padding-top: 5px;
}

Earlier on, I’ve changed the width of my #maincontainer class to 960 pixels, which will be the total width of my theme. I’ve changed the sidebar width to 370px wide, and since I wanted both the left and right sidebar to be of equal size, I’ve set it to 185px each.

Take note that whenever you change the size of your sidebar, update the numbers in your contentcolumn class. The size should be the total size of your sidebar or slightly higher.

Play around with the background colors. If you’re not familiar with css, then check the html color code table.

Next, it’s time to widgetize your sidebars. Simply replace the non-div codes from your sidebars and add the following:

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(’sidebar_right’) ) : ?>
<?php endif; ?>

Don’t forget to change the sidebar name ’sidebar_right’ so you can tell which sidebar is which in your widgets tab.

Next, add these to your functions.php

<?php
if ( function_exists(‘register_sidebar’) ) {
register_sidebar( array(‘name’ => ’sidebar_left’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘<h2>’, ‘after_title’ => ‘</h2>’) );
register_sidebar( array(‘name’ => ’sidebar_right’, ‘before_widget’ => ”, ‘after_widget’ => ”, ‘before_title’ => ‘<h2>’, ‘after_title’ => ‘</h2>’) );
}
?>

The above are the codes required in order for widgets to work. Again, don’t forget to update the sidebar names to match what you’ve used.

Now you’ll need to link the different sidebars together under sidebar.php. As usual, remove any non-div codes in your sidebar.php and replace it with this:

<?php include (TEMPLATEPATH . ‘/sidebar_top.php’); ?>
<?php include (TEMPLATEPATH . ‘/sidebar_left.php’); ?>
<?php include (TEMPLATEPATH . ‘/sidebar_right.php’); ?>

What this does is call the 3 different files and open it within the file that contains the codes – your sidebar.

Now save and view your blog to make sure that everything is working correctly. If the sidebar appears to be stacking (the 2nd sidebar is under the 1st instead of 2 separate sidebars) try reducing the size of each sidebar (leftcolumn and rightcolumn) or increasing the size of the sidebar itself.

I recommend widgetizing your left and right sidebars, but hardcode the contents of the top sidebar by yourself if you know some html. This is where you should add your rss, opt-in box, sell ads and so on.

Comments and Search Form

Simply copy the codes from the default WordPress theme for both comments.php and search.php into your theme’s own.

One of the most time consuming part of using this copy-paste approach is looking for the corresponding css classes and copying them over. The comments and search usually have a rather long list of classes, but to make your life simple, just download this file and copy them into your style.css.

The theme is now halfway there and if you’ve managed to come this far, then give yourself a pat on the back. You’ve already created the structure of the theme itself. We’re pretty much done with the “creating” part, next it’s time to get creative and start to make it look like how we want it. It will be time to “dress” the theme up.