The default Tabber look and feel is acceptable. I did not need to make a lot of changes to make it look good on my web site. Compared to MooTabs, Tabber requires a lot less work to customize.

Step 1: Download Tabber

Go to Tabber’s web site and download the latest version of Tabber.

Step 2: Upload Tabber to Your WordPress Theme’s Folder

I like to store my Javascript files in a folder called “js”. For my CSS files, I like to store them in a folder called “css”. Let’s assume my template folder is called “cooltemplate”, you should upload the Tabber files in the following manner:

1. /wp-content/themes/cooltemplate/css – Upload example.css here. Alternatively, copy and paste all the contents of example.css into your theme’s style.css.
2. /wp-content/themes/cooltemplate/js – Upload tabber.js here.

Step 3: Add Tabber References to Your WordPress Theme’s header.php

Add the following code to your theme’s header.php file in between the head tags.

1
2

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>

If you only display Tabber on the blog pages, do this to prevent the loading of the Tabber files on non-blog pages.

1
2

<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber { display: none; }<\/style>');</script>

Step 4: Add Tabber Code into Your WordPress Theme’s sidebar.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="tabber">
 
     <div class="tabbertab">
	  <h2>Tab 1</h2>
	  <p>Tab 1 content.</p>
     </div>
 
 
     <div class="tabbertab">
	  <h2>Tab 2</h2>
	  <p>Tab 2 content.</p>
     </div>
 
 
     <div class="tabbertab">
	  <h2>Tab 3</h2>
	  <p>Tab 3 content.</p>
     </div>
 
</div>

This is the default code of the Tabber. The text between the h2 tags will be displayed as the titles of each tab. You don’t have to display the content of each tab in the between the p tags. I did it with the HTML list tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="tabber">
	<div class="tabbertab">
		<h2>Recent</h2>
 
	</div>
 
	<div class="tabbertab">
		<h2>Popular</h2>
 
	</div>
 
	<div class="tabbertab">
		<h2>Most Commented</h2>
		<ul></ul>
	</div>
</div>

The Tabber is a great place to insert all the comments and post lists. I personally use it to display the recent posts, popular posts, most commented posts, recent comments and top commenters.

For now, let’s take a look at what reddit has to offer…

reddit has a larger list of buttons than Digg. For this post, I shall use the button that looks most like the default buttons you see on reddit.com. Again, I selected this button for usability reasons because I want people who are familiar with reddit to feel comforable with the reddit buttons on my web site.

Here’s How the reddit Button Will Look on Your Web Site…

If your blog post has been submitted to reddit, you should see a reddit number and a “reddit” text in your reddit button.

If you or someone else has not submitted your blog post to reddit, you won’t see any redditnumber but you will see the option to submit your blog post to reddit.

reddit’s Integration Code

1
2
3

<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>

WordPress Default Theme’s index.php Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

What We Need to Do

We need to replace reddit integration code’s [URL] and [TITLE] with WordPress’ <?php the_permalink() ?> and <?php the_title(); ?> respectively somewhere within the WordPress Loop.

Basic Example of reddit Integration with WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

This alone wouldn’t look good on your web site. We need some CSS style to spice things up!

reddit Integration with WordPress with HTML and CSS

1
2
3
4
5

<div class="social_news">
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>
</div>

1
2
3
4
5
6

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}

1
2
3
4
5
6

.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the reddit code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
		</div>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.

• “Digg This” with Submit Capability
• Simple “Digg This” with Digg Count (original version)
• Custom Submission-Only Button

I think the 1st option makes the most sense. I want a Digg voting button on all my WordPress posts. If I only want a Digg submission button, I can simply use ShareThis, which takes up less space.

Here’s How the “Digg This” with Submit Capability Digg Button Will Look on Your Web Site…

If your blog post has been submitted to Digg, you should see a Digg number and a “digg it” text in your Digg button.

If you or someone else has not submitted your blog post to Digg, you won’t see any Digg number but you will see the option to submit your blog post to Digg.

I would refrain from using another style of Digg buttons because this style is consistent with the Digg buttons on Digg.com. I would not want to confuse my readers by using an Digg button style that they are not used to.

Digg’s Integration Code

1
2
3
4

<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

WordPress Default Theme’s index.php Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

What We Need to Do

We need to replace Digg integration code’s WEBSITE_URL with WordPress’ <?php the_permalink() ?> somewhere within the WordPress Loop.

Basic Example of Digg Integration with WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript">
		digg_url = '<?php the_permalink() ?>';
		</script>
		<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

The problem with this basic example is it would look like rubbish in your WordPress blog. A little CSS and HTML is required to display it properly.

Digg Integration with WordPress with HTML and CSS

1
2
3
4
5
6

<div class="social_news">
<script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>

1
2
3
4
5
6

.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}

1
2
3
4
5
6

.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the Digg code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript">
		digg_url = '<?php the_permalink() ?>';
		</script>
		<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
		</div>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.

Most of us are familiar with HTML – the markup language that websites are written in. However, although it’s been around for a long time, we might not know as much about XHTML. What’s the “X” stand for? XHTML is an acronym for eXtensible Hypertext Markup Language. It has the same depth of expression offered by HTML, but it conforms to XML syntax. There are a lot of benefits to converting your old HTML page to XHTML.

There are a few versions of XHTML. The first is XHTML 1.0 Strict. This works almost the same as HTML 4.01, but XML syntax rules are enforced, resulting in greater readability, faster load timesand better search engine indexing. XHTML 1.0 Transitional uses the same syntax as Strict, but it lets you do more, too. You can use a number of extra elements and attributes, which helps people who are still using older versions of HTML (3.2 and earlier) make the change. That means you can still use the <center>, <u>, <applet> and <strike> tags.

Benefits of XHTML 1.0 Over HTML 4

Unlike HTML 4, XHTML provides a lot more accessibility. That means that even people who are disabled can view your page, sometimes using special devices. Accessible websites are actually part of the Disability Discrimination Actand now we have the ability to create it. Complying with XHTML standards makes it easy for blind or vision impaired people to read your website without a problem. However, that’s not the only thing that’s great about it.

If you convert your old page to XHTML, search engines will have an easier time finding it. Using XHTML compliant code means that your site is well structuredand spiders from your favorite search engine can index it more effectively. That improves your search rankings. In fact, just upgrading your site could give you a better position without any other changes. For many businesses, this is a significant benefit.

Since XHTML enforces better code standards, file sizes are smaller and load times are faster. If you combine your XHTML page with CSS, you’ll see even faster load time. Since a slow site turns many users off, this can allow you to keep more visitors.

When Should You Use XHTML Strict or XHTML Transitional?

Pages that are being adjusted from HTML 4.01 should use strict, since the basic content is the same. If you’re using older “presentational” elements, try using Transitional instead, to ease your way into the new language. Of course, if you’re not comfortable with all the ins and outs of coding in XHTML, talk to a professional. A skilled web developer will know what to use and when to use itand can help you make the transition smoothly, producing a lean, speedy, easy to index page that’s fully XHTML compliant.

If you’re still using a page that runs on older code, think about making the change. XHTML pages load faster and are better for users. They even allow leaner, faster browsers that don’t take up as much memory. There’s no reason to stick with an old fashioned webpage when XHTML can make things better for all of us.