E.Share

Quick info 3 Columns Widget Ready Right Sidebar Preview Download (240 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

Quick info Magazine Style Ajax/Widgets Content Slider Preview Download (156 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

Quick info Magazine Style Ajax/Widgets Content Slider Preview Download (160 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

Quick info Magazine Style Ajax/Widgets Content Slider Preview Download (630 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

Quick info Magazine Style Ajax/Widgets Content Slider Preview Download (77 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

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

And now onto the features in more detail…

Widgetized Areas

Included in the theme are five widgetized areas.

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

Color Schemes

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

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

Post Thumbnails

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

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

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

Further the_post_thumbnail() resources:

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

Conclusion

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

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

Related posts:

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

A new premium WordPress plugin store launched the other day called PluginBuddy, the same people behind iThemes. Their latest plugin is called BackupBuddy which describes itself as an “all-in-one solution for backups, restoration, and migration”.

You can check out my quick video tour below where I go through all the menus and take a (surprisingly) quick database backup of Theme Lab.

Features

• Backs up your entire WordPress install (including all files) or just the database
• Use the restore feature to quickly reinstall a previously made backup
• Migrate a full WordPress site to a new web host
• Backup scheduling, includes email and FTP options

The Giveaway + How to Enter

Cory Miller of PluginBuddy was kind enough to donate one single use license ($25 value) and one developer license ($150 value) for a couple of lucky Theme Lab readers.

To enter, we’ll use similar rules to our last giveaway.

• Tweet a link back to this post saying you just entered the contest to win a BackupBuddy license, along with @themelab (my Twitter username). If you need a short URL, use this: http://www.themelab.com/1671. For example: I just entered a contest at @themelab to win a copy of the BackupBuddy plugin – http://www.themelab.com/1671
• Post a comment here with the permalink of the tweet you just made. It should be in a similar format to this: http://twitter.com/themelab/status/10079435298
• That’s it!

Please, only one entry per person. If I catch you trying to cheat, you’ll be disqualified.

On Saturday, March 13, 2010 at 12:00 PM EST this content will be closed to new entries, and I’ll pick two winners at random.

You’ll be contacted through the e-mail address you leave in your comment, so please leave a valid email address, otherwise I’ll have to bother you on Twitter.

Conclusion

You should already know the importance of backing up your WordPress site, and while there are other free backup plugins on the market, nothing quite comes close to this one, plus it’s actively developed and supported.

If you’re not feeling lucky, you can go ahead and purchase BackupBuddy now. Otherwise, go ahead and make your tweet, and enter the contest below. Please only comment unless you’re entering the contest. Good luck!

Related posts:

1. WPShift Launches, Two ShiftNews Theme Licenses Up For Grabs
2. To WordPress Plugin Authors – Add Changelogs
3. WordPress Theme Tweaker Plugin Review

Today I want to go over some of the do’s and don’ts of WordPress theming. Regardless if you’re building a WordPress theme for yourself or if you’re building one for release so others can use it, you should be following these do’s and don’ts as closely as possible.

1. Do not hard code full URL’s into your themes

When you’re building your themes, there may be times where images are used, for social media icons or RSS feed icons, and during these points in your coding, you may want to code the full url out (ie: /wp-content/themes/your-theme-name/images/image.jpg) but this will cause errors in the website whenever the person using your theme changes their theme folder name.

The proper codes to use in order to pull the full URL’s dynamically are below.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Do utilize the template tags as much as possible

WordPress does an awesome job of laying out all of the template tags you can use, so do yourself a favor (as well as the rest of the people who may use your themes) and learn the WordPress template tags – then utilize them as much as possible. By using template tags, you’re able to ensure that your themes don’t break or cause errors when the end user sets it up and gets it running.

3. Do not forget navigation drop down codes

When you’re building your WordPress theme, one item that seems to be overlooked is the drop down codes for your navigation. Sure, some themes might have the navigation set up to not utilize the multi level ul’s, keeping everything in one single row, but what about for those of us who have multiple child pages for each main parent page?

There’s a solution for that. You can check out some of the tutorials below on how to code multi-level drop down menus.

• How to implement a perfect multi-level navigation bar
• Multi-level drop down navigation menus: Examples and tutorials
• Multi-level menus with jquery and css

4. Do make your theme widget ready

In my opinion, as an end user, there’s nothing worse than deploying a theme and getting ready to set everything up, only to notice that I am now faced with the task of trying to customize sections of my themes by hard coding information into them. Your sidebars and various other places in your theme (do you have a three column footer? widgetize it!) should be as easy to edit as possible. It’s one of the easiest things to do to your themes, and will benefit your theme’s users a lot.

Automattic has a great tutorial on how to widgetize your theme. Check it out here.

Also be sure to check out the widgetizing themes tutorial here at Theme Lab.

5. Do not make users rely on numerous plugins for your theme to work

If you’re releasing themes for free or creating commercial WordPress themes, you should take your end users best interest into play with you’re building your themes. Cluttering your themes with 5-10 needed plugins will not only cause people to be frustrated when downloading and setting up your theme on their site, it will also cause a lot of people to not download it at all because, lets face it, people don’t have attention spans of more than 2-3 seconds.

For instance, if you’re going to set up pagination in your theme, why not utilize this article to learn how to set it up in your theme automatically. Cats Who Code has a pretty good tutorial on how to add pagination into your theme without needing to activate a plugin.

6. Do show the search term on the search results page

For some reason, this is an often overlooked tip that you can (and should) implement into your themes. It’s a simple, one line code that allows your theme to remind the visitor what they just searched for. It may seem trivial, but it is helpful so if the results bring back zero posts, the visitor knows the exact phrase they searched for and can then type in a different search term.

Below is the code used to replace your current “Search Results” title in your theme.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Do not half ass your 404 error pages

Instead of just leaving your 404 page to say “404 – page not found”, why not give your visitors some more options? Adding in a category list, recent posts, popular posts, a search box and (if you’d like to monetize your 404 page) an advertisement can give your 404 page some spice compared to the dull, useless ones found in most WordPress themes.

If you’re looking for 404 page inspiration, Smashing Magazine has a killer showcase of 404 pages from around the web that is worth checking out.

8. Do make sure you have all of the basic files in your theme folder

When you’re building a WordPress theme, making sure you can customize it as much as possible right from the get-go is essential. Starting out with an index.php, header.php, sidebar.php and footer.php file combo might seem like a good idea to the minimalists out there, but I’d suggest starting out with all of the basics below in order to give you a bit more control over what is displayed – when, where and how.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

For more information about these template files and what they do, check out the template hierarchy page on WordPress.org.

9. Do not forget the RSS integration

When you’re building your blog, one of the items that draw peoples attention the most is the ability to subscribe to your blog via an RSS reader. So, instead of requiring your theme users to add this information in themselves, why not take the steps to add in a subscribe to rss box just like you do the search box. Add a RSS button, a subscribe via email option and you can also even add in the subscriber count in text by adding this bit of code to your theme where you’d like it to be displayed (replace “feedburner-id” with your own FeedBurner ID – if you’re releasing this theme in the wild, take a look at #11 on our list and make sure you have this as an option).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Do add CSS styles for threaded comments

If you’re building a theme, you should always be prepared for threaded comments. It’s a feature in WordPress that a lot of blogs use in order to build interaction in their comments section. So, preparing your stylesheet for threaded comments is a great idea. Chris has a great post on CSS codes for the default CSS classes that WordPress spits out in their comments section, giving your theme a stylized comments section without needing to touch the comments.php file.

11. Do not release a theme without an options panel

Some people might not agree with this, but I believe it’s a part of the natural progression of WordPress theming. If your theme isn’t running some kind of WordPress options panel with the ability to edit, customize and change items in your theme without having to edit codes, you’re doing something wrong.

If you’re not sure how to go about creating your own theme options panel, the links below will show you how to do it.

• Create custom option panels with WordPress 2.9
• How to create a better WordPress options panel

12. Do make sure your themes work out of the box

This goes hand in hand with #5 on out list – you should always make sure your themes work right out of the box. Some themes I’ve seen require 5-6 steps before the theme is workable on the site, including, but not limited to, plugin activation and theme option panel editing/saving. If the theme requires certain things, make sure there’s a backup default item used.

For instance, in your theme options panel you’re building and/or using, make sure there’s default information in each section, so things are showing up, regardless if the end user has updated them or not. The same goes with plugins, if you’re using a WordPress pagination plugin in your theme, why not code it in so that the theme reverts back to the previous/next links if the plugin isn’t active.

13. Do not make excessive use of custom fields

Yes, most magazine style WordPress themes from a couple years ago were built utilizing custom fields at every turn, but most people will not want to actually fill out 3, 4 or 5 custom fields for each post. So, make things easier for them. If you’re going to show an image from the post on the home page of your theme, take this handy piece of code and add it into your themes functions.php file and it will automatically the posts first image, without the need of a custom field.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Once you’ve added that code in, just add <?php echo catch_that_image(); ?> in your theme’s files wherever you’d like the image to show up.

Thanks to the good ol’ WordPress support forums for this handy tip.

14. Do SEO your <title> tag

A great way to ensure your theme is as SEO ready as possible is to remove the default <title> tag found in your themes header.php file and replace it with the codes below. It will give your theme’s titles a bit more juice and help the SEO efforts that your themes users will want to put into practice – all without requiring them to touch a thing.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Do not forget about breadcrumbs

As an added piece of navigation in your themes, breadcrumbs (in my opinion) should be utilized as much as possible. It is not only good for SEO purposes, but it also allows the visitor to navigate through your site much quicker. There are WordPress plugins for breadcrumbs, but thanks to Cats Who Code, we now know how to add a breadcrumb function into our WordPress themes.

First, add the below codes into your themes functions.php file (customized a bit from the original Cats Who Code post, linked above).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}

	echo '</ul>';
}

Next, place this piece of code anywhere you want your breadcrumbs to display.

<?php the_breadcrumb(); ?>

Thanks for reading over the article

Thank you for taking the time to read the article. I hope you enjoyed it and learned a thing or two along the way - I know I did. If you liked the post or have anything to add, let us know in the comments.

Related posts:

1. The Ultimate Guide to WordPress Conditional Tags
2. How to Create a Comments Central Page Template in WordPress
3. 5 Quick Ways to Fix Up Your WordPress Theme

I just came across a post published today which goes over “the right way” to highlight author comments in WordPress. Basically, instead of the usual code that inserts the “admincomment” class for just the first user (user ID 1). In the post, that code is adapted for any post author, no matter what the user ID is, which can be especially useful to multi-author blogs.

Ever since WordPress 2.7 was released over a year ago, a new function was introduced to display comments called wp_list_comments which is known for supporting threaded comments as well. In addition to threaded commments, it also outputs a class automatically which can be used to style author comments in WordPress 2.7.

Screencast

In this screencast, I go over the various classes added to a comment made by a post author. I also go over how to style the .bypostauthor class.

Code Examples in Video:

• .bypostauthor { background: #000; } /* Sets a black background on post author comments. */
• .bypostauthor { background: #000 !important; } /* Overrides any other background colors. */
• .commentlist .bypostauthor { background: #000; } /* Another way to override other background colors (depends on how your theme is coded) */

In case you’re wondering, I was using the Firebug Firefox extension to inspect the element as well as test out the CSS code. Definitely a must-have addon for coders.

Custom Callback?

If you’re using a custom callback in conjunction with wp_list_comments, all you need to do is make sure the comment_class function is present in your callback, which will generate the same classes on each comment.

For an example of this, check out ThemeShaper’s tutorial on creating a comments template, check out where <?php comment_class() ?> is added, and copy it in the same place of your own custom callback (assuming it’s not already there).

Conclusion

If you’re using an outdated theme that does not use wp_list_comments, the code from the first link should be just fine. If you’re using wp_list_comments, this is a much better and easier solution to implement, as you probably won’t have to modify any PHP in your theme (unless of course you have a custom callback).

Anyway, hope you liked the CSS tip. Let me know what you think in the comments. Also, do you prefer screencasts plus text, or just text?

Related posts:

1. Change Your WordPress Author Name…Please
2. How to Create a Comments Central Page Template in WordPress
3. Add Gravatar Support to Your WordPress Comments

Recently there’s been a WordPress hack going around which has been using cloaking to target Google IP addresses. That means, the spammers/hackers are somehow getting into your WordPress blog, and generating a bunch of spam content and links that only Google can see.

This particular hack uses some particularly dirty methods which include inserting spam keywords into your own content, which is probably to control your keyword density.

Also they don’t seem to place more than a couple spam links on the page, which is probably because they don’t want you to get banned (so you can still pass link juice to them). Kind of like a parasite not trying to kill it’s host.

I’ve made a quick screencast to go over what the hack does and how to see if it’s happened to your site.

What We Know So Far

• Altered content is only visible to search engines like Google and Yahoo, regular visitors won’t notice.
• There are probably “rogue” files on somewhere on your WordPress install that need to be deleted.
• Existing WordPress files may be altered with encrypted code added.
• There might be duped admin accounts on your WordPress install as well that need to be removed.
• Update: There is a discussion going on about this hack at the WP Tavern forums.

If you have any other information, please leave a comment below. I’ll update this post with new information periodically.

Related posts:

1. Optimizing WordPress for Search Engines
2. WordPress Security Alert – Vulnerability in 2.3.3
3. Stop Downloading WordPress Themes from Shady Sites