E.Share

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

Quick info 2 Columns Ajax Powered Navigation Extremely Fast Loading Preview Download (103 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 3 Columns Automatic Thumbnails Creation Ready for Social Bookmarks Preview Download (212 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 2 Columns Widget Ready Magazine Modern Web 2.0 Design Preview Download (206 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

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

Quick info 2 Columns Widget and Ads Ready Magazine Style CMS Preview Download (300 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 2 Columns Widget Ready Magazine Theme Ajax Powered Menu Preview Download (352 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 2 Columns Widget Ready Magazine Theme Right Sidebar Preview Download (206 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 Inbuilt Ajax Gallery Widget Ready Twitter and Social Bookmarks Ready Preview Download (328 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

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