E.Share

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

For anyone who uses the WordPress.com stats plugin, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats.

Some people might think this little smiley face is “cute”. The rest of you will find the smiley image unsightly (and possibly evil looking) and will look for ways to remove it. This post will go over:

• First of all, what not to do when hiding the smiley
• How to properly hide it, with some extra absolute position goodness for certain layouts
• If you’d rather not hide it, how to easily center the smiley image

What Not to Do

Don’t ever use display:none to hide the WP Stats Smiley.

First of all, I want to go over the one thing you shouldn’t do when attempting to hide the WP Stats Smiley, and that’s use: display:none. Yeah, I said that twice, but I was just making sure you didn’t miss it.

Yeah, that’s the same code you can use to get a CSS Killswitch effect, but it’s definitely not something you want to be using to not display an image, which needs to be loaded to accurately display stats.

What to do instead

According to this post, the developer recommends to use the following code to your stylesheet (i.e. style.css) if you wish to hide the smiley:

img#wpstats{width:0px;height:0px;overflow:hidden}

Something similar to the above code would be the following:

img#wpstats{visibility:hidden}

The difference between visibility:hidden and display:none is visibility:hidden will still take up space in the design, while display:none will not (and remember, you can’t use display:none unless you want your stat tracking to be borked).

On certain layouts, there is a small problem with this code taking up space below the footer, so I’ve thought of a more creative solution.

Here’s an example of what I’m talking about, notice the smiley in the lower left corner which is causing the footer layout to break.

With the two above examples, the image, while not visible, would still take up space in the layout causing that light gray bar (which is the background color) to appear in the footer.

Absolute Positioning

A combination of absolute positioning plus the code above is a good way to eliminate this issue. You could try something like this:

img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}

Centering the Image

Depending on your layout, instead of hiding it, it may look somewhat better if the smiley image was centered. You can easily do this with the following snippet of code.

img#wpstats{display:block;margin: 0 auto}

Explanation:

• Sets the image to display as block (instead of inline, by default).
• Sets the left and right margins to automatic to effectively center the now block image.

You can use this CSS to properly center pretty much any “img” tag without using additional markup.

Conclusion

By the way, if you use the WP Stats Smiley Remover plugin, don’t. Because all it does it add the “display:none” CSS to your header. The exact thing you’re not supposed to do.

Hope you liked the WordPress/CSS tip. Like the last one, I know this was relatively simple. I can do more advanced ones, so if you have any requests for quick CSS tips like this, let me know in the comments.

Related posts:

1. WordPress Smiley Spam Technique

One way to increase visitor engagements is to reward their comments by showcasing them on your website. Additionally, you can also feature the top commenters as well, linking back to their website in the process. Here we’ll create a dedicated Page Template to display those comments and commenters in one place.

In short, this tutorial will teach you how to:

1. create a Page Template,
2. use SQL queries in your code to fetch comments with varying parameters,
3. create a section of the Page that’s only viewable by Admin,
4. add support for a comment-related plugin.

Creating a Page Template

The easiest way to create a Page Template is to open the page.php file in your theme, which will roughly look like this:

<?php get_header(); ?>
  <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">

    <h2 class="page_title"><?php the_title(); ?></h2>
      <?php the_content(); ?>
    </div>
    <?php comments_template(); ?>
    <?php endwhile; endif; ?>
  </div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Copy and paste page.php’s content and add this to the very top:

<?php
/*
Template Name: Comments Central
 */
?>

And save it. There’s no real rules on naming a Page Template file, but it’s a good idea to go with a prefix to make it recognizable, say “pt-comment-central.php”. We haven’t added anything into this Page Template, but it’s up and running and selectable on the write new Page dashboard area.

Fetching Comments

For this Page Template, we’ll feature four different aspects of comments:

• Recent Comments,
• Recent Trackbacks / Pingbacks,
• Top Commenters,
• Most Commented Posts,

First, we’ll do Recent Comments:

<h3>Recent Comments</h3>
<ul id="cc-recent-comments">
<?php
  $max = 7; // number item to get
  global $wpdb;
  $sql = "SELECT c.*, p.post_title FROM $wpdb->comments c INNER JOIN $wpdb->posts p ON (c.comment_post_id=p.ID) WHERE comment_approved = '1' AND comment_type not in ('trackback','pingback') ORDER BY comment_date DESC LIMIT $max";
  $results = $wpdb->get_results($sql);

  $template = '%g <a href="%au">%an</a> on <a href="%pu#comment-%cid">%pt</a>';

  $echoed = 0;
  foreach ($results as $row) {
    $tags = array('%ct','%cd','%g','%pt','%pu','%au','%an','%cid');
    $replacements = array($row->comment_title,$row->comment_date,get_avatar($row->comment_author_email,'32'),$row->post_title,get_permalink($row->comment_post_ID),$row->comment_author_url,$row->comment_author,$row->comment_ID);
    echo '<li>' . str_replace($tags,$replacements,$template) . '</li>';
    $echoed = 1;
  }
  if ($echoed==0)
      echo '<li>No comment found.</li>';
?>
</ul>

The SQL query asks for all approved comments sorted by date (latest first). $max is where we set the amount of comments to get, 7 in our case. The output of the code above will be an unordered list of recent comments:

With a little CSS we can straighten that to look better:

#cc-recent-comments li {
  width: 100%;
  float: left;
  list-style-type: none;
}

#cc-recent-comments li img {
  float: left;
  margin-top: -5px;
}

$template determines how the actual text will be written; this is based on the format made by WP Comment Remix, and you can follow that link to learn more on customizing it (look for ‘tokens’).

Next is Recent Pingbacks / Trackbacks:

<h3>Recent Pingbacks / Trackbacks </h3>
<ul id="cc-recent-trackbacks">
<?php
  $sql = "SELECT c.*, p.post_title FROM $wpdb->comments c INNER JOIN $wpdb->posts p ON (c.comment_post_id=p.ID) WHERE comment_approved = '1' AND comment_type not in ('trackback','pingback') ORDER BY comment_date DESC LIMIT $max";
  $results = $wpdb->get_results($sql);

  $template = '%g <a href="%au">%an</a> on <a href="%pu#comment-%cid">%pt</a>';

  $echoed = 0;
  foreach ($results as $row) {
    $tags = array('%ct','%cd','%g','%pt','%pu','%au','%an','%cid');
    $replacements = array($row->comment_title,$row->comment_date,get_avatar($row->comment_author_email,'32'),$row->post_title,get_permalink($row->comment_post_ID),$row->comment_author_url,$row->comment_author,$row->comment_ID);
    echo '<li>' . str_replace($tags,$replacements,$template) . '</li>';
    $echoed=1;
  }
  if ($echoed==0)
    echo '<li>No comment found.</li>';
?>
</ul>

The code above is very similar to the one we have for Recent Comments, the only differences being that we’re now asking for comments with ‘comment_type’ under ‘pingback’ / ‘trackback’, and the template is a bit different as well. Result:

Here’s the code for Top Commenters:

<h3>Top Commenters</h3>
<ul id="cc-top-commenters">
<?php
$sql = "SELECT comment_author, comment_author_url, comment_author_email, count(comment_ID) as comment_count FROM $wpdb->comments WHERE comment_approved = '1' AND comment_type not in ('trackback','pingback') GROUP BY comment_author, comment_author_url, comment_author_email ORDER BY comment_count DESC LIMIT $max";
$results = $wpdb->get_results($sql);

$template = '<a href="%au">%g %an</a> (%c comments)';

$echoed = 0;
foreach ($results as $row) {
    $tags = array('%g','%au','%an','%c');
    $replacements = array(get_avatar($row->comment_author_email,'32'),$row->comment_author_url,$row->comment_author,$row->comment_count);
    echo '<li>' . str_replace($tags,$replacements,$template) . '</li>';
    $echoed = 1;
}
if ($echoed==0)
    echo '<li>No commenter found.</li>';
?>
</ul>

Nothing too mind-blowing there. Do notice the cool get_avatar() function, though, which will give you the Gravatar for anyone whose email address you specify. In this case, we fetch the avatar image using the commenter’s e-mail address. With the CSS similar to the one we have for recent comments, we can have this result:

#cc-top-commenters li {
  width: 100%;
  float: left;
  list-style-type: none;
}

#cc-top-commenters li img {
  float: left;
  margin-top: -5px;
}

Last is Most Commented Posts:

<h3>Most Commented Posts</h3>
<ul id="cc-most-comments">
$sql = "SELECT p.*, c.comment_count FROM $wpdb->posts p INNER JOIN (SELECT comment_post_id, count(comment_ID) as comment_count from $wpdb->comments WHERE comment_approved='1' GROUP BY comment_post_id) c ON (c.comment_post_id=p.ID) ORDER BY c.comment_count DESC LIMIT $max";
$results = $wpdb->get_results($sql);

$template = '<a href="%pu">%pt</a> (%c comments)';

$echoed = 0;
foreach ($results as $row) {
  $tags = array('%pd','%pt','%pu','%c');
  $replacements = array($row->post_date,$row->post_title,get_permalink($row->ID),$row->comment_count);
  echo '<li>' . str_replace($tags,$replacements,$template) . '</li>';
  $echoed = 1;
}
if ($echoed==0)
    echo '<li>No commenter found.</li>';
?>
</ul>

And that’s it. Next, we’ll add some extra coolness by adding some stuff that only the admin can see.

Admin-only Information

To show stuff only for the admins, we can use this code snippet from WPCandy:

<?php
global $user_ID;
if( $user_ID ) :
  if( current_user_can('level_10') ) :
  // admin-only stuff here.
  endif;
endif; ?>

Now on the Dashboard, we get a quick glance of a site’s total, approved, pending review and spam comments. Let’s replicate this for our Page Template for easier, admin-only access:

<?php
  $num_comm = wp_count_comments();
?>
Total Comments: <a href="<?php bloginfo('wpurl'); ?>/wp-admin/edit-comments.php?"><?php echo $num_comm->total_comments; ?></a>
Approved: <a href="<?php bloginfo('wpurl'); ?>/wp-admin/edit-comments.php?comment_status=approved"><?php echo $num_comm->approved; ?></a>
Moderated: <a href="<?php bloginfo('wpurl'); ?>/wp-admin/edit-comments.php?comment_status=moderated"><?php echo $num_comm->moderated; ?></a>
Spam: <a href="<?php bloginfo('wpurl'); ?>/wp-admin/edit-comments.php?comment_status=spam"><?php echo $num_comm->spam; ?> </a>

wp_count_comments() is a neat function that returns an array of various comment stat numbers. We’re adding links to the respective comment administration area too.

Adding Some Sparks

Last, say you find a cool comment-related plugins you want to incorporate into this Page Template. Instead of adding more codes, let’s just add support for it. For this example, I’ll go with Activity Sparks plugin, which can “display a ’sparkline’ style graph in your sidebar indicate post and/or comment activity. ” Sounds great to me.

Usually, a plugin’s readme.txt file will teach you how to add it into your theme files. In our case, the code can be like this:

<?php
  if(function_exists('activitysparks')) {
    activitysparks(array('dataset'=>'legend','height_px'=>100,'width_px'=>600,'period'=>30, 'ticks'=>24));
  }
?>

function_exists() checks whether a particular function is available; in our case, the activitysparks function, which will be available if the plugin has been uploaded and activated. If it’s there, we show the graph. If not, then our Page Template won’t show anything (but it will still run just fine, no errors).

Result and Example

An example of this Page Template is available here. It uses the codes you see here with a few modifications, mostly to keep the HTML structure consistent with the rest of the website. The whole code for that Page Template is available at Pastebin.

Credits and Further Readings

• The codes used to display the various recent and top comments are taken from WP Comment Remix plugin. Take a look at its code to learn more things to do with comments, like excluding admin comments from top commenters or how to take into account recent comments only. The $template we use to format the output can be learned more from that page, too.
• Creating Your Own Page Template on the WordPress Codex.
• Displaying admin-only content tutorial on WPCandy.

Related posts:

1. Add Gravatar Support to Your WordPress Comments
2. You Don’t Need a Blog On Your Front Page
3. Highlight Author Comments in WordPress, The Easier Right Way

This WordPress theme is ported from the free CSS template of the same name by Rambling Soul. It’s a dark blog theme with a custom homepage template. It supports widgets and threaded comments. There are a few other features in the theme which will be gone over below.

Custom Homepage Template

Included in the theme is a custom page template designed to be used for your homepage. It includes the following:

• Gallery like post layout with optional custom thumbnails
• Widgetized areas above and below the post area

To use this page template as your homepage, you’ll need to do the following:

• Make a blank page called “Home” (or whatever else you want to call your homepage, doesn’t matter) and select the “Home Page Template”
• Make a blank page called “Blog” (or whatever else you want to call your blog, doesn’t matter)
• Go to Settings → Reading and select “Home” as your Front page, and “Blog” as your Posts page.

I used a similar technique in the Simply Minimal WordPress theme so you could have a clearly separated Home and Blog page regardless of your permalink structure.

Remember, you you don’t need a blog on your front page.

If you don’t want to use the custom homepage template, don’t worry about it. You’ll have a regular blog style layout as your homepage.

Custom Homepage Post Images

As mentioned above, there are optional custom post images you can use on the homepage template. They should be sized 185×100 (185 pixels wide, 100 pixels high).

I opted not to use something like TimThumb due to hosting compatibility issues that some hosts have. You’ll hopefully be able to easily crop the image yourself within the WordPress admin panel.

After cropping, simply input the full URL in the custom write panel on the posts page.

And save/publish, the custom homepage image will now appear on the post you selected.

Widgets

There are four widgetized areas in this theme.

• Two on the homepage template (top and bottom)
• Sidebar
• 404

The 404 template widget area isn’t pictured.

Theme Options

Included is a simple theme options page to control which pages are excluded on header and footer menus.

Depending on the length of your blog title, you may not have a lot of room for links in the header, so just input a comma separated list of page IDs you wish you exclude.

To find your page ID, go to the manage pages menu and hover over a link to edit a page. You should see something like com/wp-admin/page.php?action=edit&post=XX in your browser’s status bar, where “XX” is your page ID.

Optional Plugins

This theme has support for the following plugins.

• WP-PageNavi – For numbered pagination on index, archive, and search pages. Otherwise you get boring “Previous” and “Next” links.
• WP125 – For 125×125 ad management, will replace the static 125×125 ad links in the current template, or you can use widgets.
• Yoast Breadcrumbs – Adds breadcrumb navigation directly below the header. Highly recommended for SEO and user navigation purposes.

Remember, these are all optional plugins you can install for added functionality. You don’t need to add any integration code since I already included it with the theme, and the theme won’t break if you don’t have these plugins installed.

Conclusion

Hope you all like the theme, let me know what you think of it in the comments.

And of course, thanks once again to Roshan of Rambling Soul for the great template. You can check out all his other designs ported to WordPress on this page.

Related posts:

1. Splashtastic – Free WordPress Theme
2. RedPepper – Free WordPress Theme
3. RS11 – Free WordPress Theme

I recently came across a site on Twitter called CSS Killswitch. What is it exactly? According to their site: “CSS Killswitch lets you non-destructively black out a difficult client’s website with the click of a button.”

The Code

If you try out their “two second demo” you’ll see all it basically does it make your page go completely blank. You can accomplish pretty much the same thing by placing the following bit of CSS code in your stylesheet.

* { display: none; }

If you notice anything still visible, you probably have some !important things you need to take care of as well.

Explanation

• The asterisk selector (*) acts as a wildcard, and selects all elements within the page.
• The “display: none” means nothing will be displayed on that selector.
• Combined with the asterisk selector, effectively everything on the page is not displayed.

Downside

If your client knows anything about CSS, they’ll probably be able to easily identify this line of code and remove it. You can try to be creative with it and put it somewhere a client will not be likely to look.

According to the CSS Killswitch website, removing their method of hiding the page is as easy as identifying the offending CSS link and removing it.

Thoughts

I guess this is all done under the assumption that your clients are not aware of basic CSS techniques and therefore will be dumbfounded enough into finally paying you (the designer) for your work.

This might be useful if a client refuses to pay for work, but I’d only recommend using something like this as an absolute last resort.

Conclusion

Yeah, I know you CSS experts reading are probably already well aware of the asterisk selector and display: none. For everyone else, would you be interested in more if these quick CSS tip posts?

I’d be interested to hear your thoughts on more CSS tip posts, and the premise behind these methods of “disabling” pages for non-paying clients. What about the legality and ethics of doing such a thing?

Sound off in the comments.

Related posts:

1. Dipslaying Code In WordPress Posts
2. How to Hide the WordPress Stats Smiley the Right Way

Finally, I’m releasing the losing theme from theme battle #3. In case you forgot, the winning theme was the free Tasty Showcase theme which has now been coded for WordPress.

All Orange is a simple and clean, two column blog designed by Anto. Click the image below for a bigger preview.

Keep in mind this is an uncoded PSD and not a functional WordPress theme. It’s provided as-is with no support.

Do whatever you want with it, practice your coding skills, use it on a site, whatever. As per my rules for theme battles, I won’t be coding it. Ever.

For more free PSD goodness here at Theme Lab, check out the following:

• Massive Free PSD Template Giveaway #1
• Bravissimo – Free PSD + XHTML/CSS Template
• Green Shade – Free PSD Download

Let me know what you think in the comments! Would you like to see more PSD or HTML only themes here or would you rather just have more free WordPress themes?

Related posts:

1. Bravissimo – Free PSD + XHTML/CSS Template
2. Green Shade – Free PSD Download
3. OrangeWP – Free WordPress Theme