Free WordPress Theme - Versatility Lite

22 January 2010 Friday

This application was viewed 1055 times

1

Free WordPress Theme - Versatility Lite

So here it is! Our second free WordPress theme. And don’t worry, I have plenty more planned :) For this theme, I collaborated with a good friend of mine who runs Qkin Web Development. So this theme was designed by yours truly and hand-coded by the very talented Qkin. We hope ya like it! Below I am attaching a more detailed description of theme, and step by step instructions on customization.

Versatility Lite is a two column, ad-ready, widgetized theme. The theme includes a ‘Featured Post’ section, drop down CSS menus, integrated related posts, social bookmarking buttons, and much more.

DEMO

Installation:

- To install, upload the Versatility Lite folder into your "Themes" folder.
- From your WordPress dashboard, activate "Versatility Lite"
And that’s really it!

To Create the Thumbnails for the Post:

To create the thumbnails for the post, you’ll need to use the "Custom Fields" area while posting. Enter a "Key" of "thumbnail" and make the "Value" the path to the image you would like to use for your thumbnail. The theme has an image re-sizer, so it will re-size any image to the appropriate size. The thumbnails will be 125px by 90px however, so for the best results, try to keep create your thumbnail with the same proportions.

To Make a "Featured Post":

The theme comes with a "Featured Post" section at the top. All you have to do make an article go there, is to give it a tag of "featured." The Featured section at the top will show the latest post with the tag of "featured."

To Edit Welcome Message:

There is a "Welcome" section at the top to the left of the "Featured Post" Section. To change the text, open the file "featured-block.php."

Here you will see code that looks like:

<div id="about-us"><span class="blue-text">Welcome</span><br/>Here is where you could put something about you. You can edit this text in "featured-block.php" in the theme directory. </div>

You can just edit the text starting with "Here is where…" and then save.

To Set Up Admin Comments:

The theme comes with a variation between Admin comments, and normal blog visitors. You will just have add your admin email address to make them display properly.

Open ‘comments.php’ and find the area of code that looks like:

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == ‘comment’) { ?>
<div class="comment <?php if ($comment->comment_author_email == "gen3mail@gmail.com") echo ‘admin’; else echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Replace the default email address "gen3mail@gmail.com" to your admin email address. Thats it!

To Set up RSS Email Info:

There is a built in "Subscribe" section in the sidebar. The RSS feed will need no changing on your part to work, however you will have to insert the link provided by Feedburner (or whatever service you use) for ‘Email Updates.’ That information will be found in your FeedBurner account. Once you have the link, you will need to open "sidebar.php"

In "sidebar.php" you will see a section that looks like the following:

<div class="side-box">
<h3>Subscribe <a href="<?php bloginfo(’rss2_url’); ?>" class="rss">RSS</a><a href="#" class="email">Email</a></h3>
</div>

Find that part of the code that looks like:

<a href="#" class="email">Email</a></h3>

Simply replace the "#" in the above code with your "Subscribe by Email" link.

To Set Up Ad Space:

The theme comes with 2 areas for you to put ads, both in the sidebar. To edit this area and insert your ads, once again open "sidebar.php"

You will see a code that looks like this:

<div class="side-box">
<a href="#"><img src="<?php bloginfo(’stylesheet_directory’); ?>/images/ad-spots/ad-spot1.gif" alt="ad1" height="125" width="125"/></a>
<a href="#"><img src="<?php bloginfo(’stylesheet_directory’); ?>/images/ad-spots/ad-spot2.gif" alt="ad2" height="125" width="125"/></a>
<a href="#"><img src="<?php bloginfo(’stylesheet_directory’); ?>/images/ad-spots/advertise.gif" alt="adv" height="125" width="57"/></a>
</div>

This is the ad code. To have your ads appear, simply override the current "ad-spot1.gif" & "ad-spot2.gif" files with your ad files. Then, you will just need to add the link for the add. Find the code that looks like this:

<a href="#"><img src="<?php bloginfo(’stylesheet_directory’); ?>/images/ad-spots/ad-spot1.gif" alt="ad1" height="125" width="125"/></a>

Replace the "#" with the link for the correct ad.

There is also an "Advertise Here" button to the right of the ad space. This can also be changed in the above code:

<a href="#"><img src="<?php bloginfo(’stylesheet_directory’); ?>/images/ad-spots/advertise.gif" alt="adv" height="125" width="57"/></a>

I would recommend replacing this "#" with a link to your "Advertise" page, or with a link to contact you.