Looking at the statistics online, a lot of you are still using MySpace (mostly the younger generation) and I am sure you would love some new sources for free MySpace templates. I will run down a few sites my younger cousin uses for just that.
We will start off with FreeLayouts. When you arrive at their site you will see templates for normal websites, blogs, as well as MySpace. Click on MySpace Layouts in the main navigation menu and then you will see more specific sections.
The sections are CSS< XHTML, 2 Column, Fixed Width and eleven different colors as you can see below from the screenshot.
Here are some of the free MySpace templates that were displayed on the homepage while I was checking it out. Notice a lot of themes surrounding holidays. Valentines Day that just passed and St. Patrick’s Day which is coming up.
You can click on preview to see a close up view of what the template really looks like. That will bring up this window:
You can click on the Get Code button to retrieve the code you will need to integrate the template like so:
Simply highlight the code and paste it into your About Me section of your MySpace profile to get started. I clicked on the box, hit control A to select all of it, and then control C to copy it and finally control V to paste it where it needs to go.
You also have the option of setting up an account and creating favorites that you can refer back to.
The next website for free MySpace templates we will be looking at is called MySpaceLibrary.
I scrolled down and chose layouts and started browsing around what they had to offer.
Looking around they have a little something for everyone. I found sports templates, music templates, geeky templates…seriously if you use MySpace you will be able to find something here!
After finding the template that you like, click on the link below it that says Click to view large and get MySpace codes.
That will take you to this page:
Just like before, if you want to use it copy the code and paste it into your About Us page on MySpace. To view the template click on the preview button below the picture of the image. That will show it to you like this:
The last site we will be checking out is called MySpaceSkins.
Scroll down when you get to the site and you will see the templates. The first section is called Girly MySpace Layouts followed by grunge, fashion and beach layouts as you can see below:
Click on one of the layouts or on a More [Category] MySpace Layouts button to see more related layouts. After selecting a layout you will see something that looks like this:
You can grab the layout code as we have before for the other sites but here we have some other choices like customizing the layout with their online MySpace profile editor.
or adding a custom Google search box on the page.
If you have other sites and resources hook us up and leave the URLs in the comments!
Did you like the post? Please do share your thoughts in the comments section!
First I want to welcome you to my very first article for 1stwebdesigner. Today I’ll show you how to create a very nifty looking dynamic shadow with a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base. I’ll explain every line of used code, so you can easily follow along and create your own awesome looking dynamic shadow powered by jQuery.
Introduction
When I first published my jQuery shadow experiment, I got a huge response from the community and a lot of people asked me, how I achieved this effect and if I’m going to write a tutorial for it – So here it is now!
First we need to prepare all PNG files we’re going to use. We’ll need following image elements:
The on/off switch (needs two states)
The light source (in this case, a sexy light bulb – also with two states)
The object which is going to drop the shadow (here it’s going to be a logo)
and last but not least, the matching shadow of our logo
We’re going to use the CSS sprite technique for reducing HTTP requests. So we’ll need 3 images (otherwise we would need 6 separate images and twice as much HTTP requests).
1st PNG Image: The Light-Switch Sprite
2nd PNG Image: The Light-Bulb Sprite
3rd PNG Image: The Logo Sprite
I’m not going to explain how to create those images, as I’ll concentrate on the source code. If you want to use your own images, just make sure to save your images as PNG 24 , so your transparency gets saved too.
Step 2: Preparing our HTML, CSS & JS files
To make your files well-arranged, we’re going to create following folder structure for our files now:
The root folder (dynamicShadow) will contain our index.html with all layout containers inside of it. Inside of the img folder, you should put all three PNG image files you created or copied from step 1 above. Inside the css folder create a file named style.css. There we’ll style all layout elements we used in the html file. And the magic will happen inside of the js folder. There we’ll create a file named script.js. It will contain our jQuery JavaScript code.
If you have done those two steps above, we are now ready to go on and finally let the magic happen!
Step 3: Writing the HTML file with all containers we will use
First we need to include the files we created in the previous step, into the header part of our HTML.
Last but not least we need to attach our JavaScript file (script.js):
Our header should look something like this now:
We can start with the body part of our HTML now:
We’re going to need following div’s with the same id’s for the next step, where we are going to style our containers.
Please activate JavaScript!
For explenation:
“switch” will be our element, which is going to turn the light bulb on and off.
”light-bulb” and “light-bulb2” are our containers with the actual light bulb (I’ll explain later why we need it twice). Just make sure you don’t forget to add the “off” class to the outer light-bulb container.
”logo” is our element which is going to drop the shadow.
”logosh” will contain the appropriate shadow for the object.
”infobox” is just a bonus and not mandatory for our effect. It will contain some status messages. Additionally it contains a message for all (bad, bad) users, who are visiting your site with deactivated JavaScript. You can write them a message there. Take care at your diction, don’t be too evil to them .
Step 4: Let’s get some colors into our HTML file!
Now we’re ready to style our HTML with the CSS file we included into our header.
We will start with the info box. If you have chosen to include it, here is a styling suggestion:
For the #infobox we are using some CSS3 to make it prettier. The background is black and 50% transparent with the awesome rgba attribute and the corners are rounded with a 15px wide diameter through the mozilla and webkit specific attributes. The box will be 340 pixels wide (300 + 2 x 20) and placed centered on the bottom of our page. With the z-index set to 999 it will be the topmost element in our page so it does not get covered from our logo, the shadow or the light bulb.
It will be absolute positioned to the bottom left corner of our page. The backgrounds X position is set to –80px. There we are using the CSS sprite technique the first time. The cursor is going to be a pointer, so the user knows that he can click it. z-index to 100. The logo, the shadow and the light bulb must get a higher z-index, so they don’t disappear behind the switch.
The backgrounds X position of the main light bulb container is set to –150px. This is the “turned off” state of our sprite-image. The “inner light bulb” (light-bulb2) is set to “top left” (0 0), so it is the “turned on” state of the sprite. Later we will animate the opacity of it from 0% to 100% and create a smooth blend effect from the on to the off state and reverse. z-index to 800: It will be above the switch, above the logo and above the shadow but behind the info box. The cursor attribute is set to “move”. This way the user will get a nice, OS-based cursor which tells him he can move this object around.
Our last two containers are the logo with his shadow:
The main logo containers gets also the “move” cursor and the background position is set to “top left” again. This will show the main part of our logo sprite. z-index to 700. It’ll be above the shadow and above the switch, but behind the light bulb and the info box.
The shadow container gets z-index of 600 and the backgrounds Y position is set to –150px. It’s the shadow part of our logo sprite-image.
If you came this wide, your index.html file should look something like this in your browser (of course only, if you used the same image files of this tutorial):
Now let’s get this party started and add some spice to our page. We will write some JavaScript now!
Step 5: The magic starts to happen now!
Ok now let’s go with the interesting part of this whole tutorial. First we start with the jQuery’s main function:
$(function(){
});
This is the short hand code for jQuery’s document.ready(). Our whole script needs to be inside of this function, so it gets loaded, as soon as the DOM is ready.
Next we’ll define some variables and set the default text of our info box. The descriptions are inline as comments:
// shadow offset
var shadowOffset = 1.08;
// the light switch
var lightswitch = $("#switch");
// outer light bulb
var lightbulb = $("#light-bulb");
// inner light bulb
var lightbulb2 = $("#light-bulb2");
// center of light - X-axis
var lightCenterX = parseInt(lightbulb.width()/2);
// center of light - Y-axis
var lightCenterY = parseInt(lightbulb.height()/2);
// logo container
var logo = $("#logo");
// light and logo containers
var lightAlogo = $("#light-bulb, #logo");
// center of logo - X-axis
var logoCenterX = parseInt(logo.width()/2);
// center of logo - Y-axis
var logoCenterY = parseInt(logo.height()/2);
// shadow container
var logoshadow = $("#logosh");
// center of shadow - X-axis
var logoShdwCenterX = parseInt(logoshadow.width()/2);
// center of shadow - Y-axis
var logoShdwCenterY = parseInt(logoshadow.height()/2);
// info-box text container
var statustext = $("#infobox p");
// info-box default text
var defaulttxt = "Drag the light-bulb or the logo!";
// info-box text for hovering switch while state is "off"
var ontxt = "Let there be light!";
// info-box text for hovering switch while state is "on"
var offtxt = "Switch off the light!";
// set info-box text to default text
statustext.text(defaulttxt);
// start our main function (will be used later)
moveShadow();
For now, you can comment the last line out. moveShadow(); will be our main function which will change the position of the shadow.
// making the light and the logo draggable
lightAlogo.draggable({
drag: function(event, ui){
// change the statustext do "dragging + element id" state
statustext.text("dragging " + $(this).attr("id"));
// our main function which will move the shadow
moveShadow();
},
stop: function(event, ui){
// switching to default text when stoped draging
statustext.text(defaulttxt);
}
});
While dragging, we’re going to set the status text of our info box to “dragging” + the id of the current element. So in our case it will be logo or light-bulb. When we release the mouse and stop dragging the current object, we revert the text to our default value.
Our two objects should now be draggable! Isn’t it easy with jQuery UI?
(There comes the “write less, do more” from, which is jQuery’s slogan.)
Again you can comment out the moveShadow(); function for now, if you want to try your code in the browser. This will be the main function which makes the dynamic shadow moving, while you drag either the light bulb or the logo.
With the following function, we’re going to change the default text of the info box to our on or off text when hovering:
// changing the infotext when hovering the switch
lightswitch.hover(function(){
if(lightbulb.hasClass("off")){
// when lightbulb has the class "off" show this text
statustext.text(ontxt);
}else{
// otherwise show this text
statustext.text(offtxt);
}
},function(){
// hovering out will show the default text again
statustext.text(defaulttxt);
});
If the light bulb has the class “off”, then show the “on text”, else show the “off text”. When hovering out, the default text will be shown again. Still easy, right?
Next is our function for calculating the opacity of our logo shadow, according to the distance of the light source. In our case the light bulb:
// calculating the shadow opacity according to the light bulb distance
function setOpacity(getDistance){
if(lightbulb.hasClass("off")){
// if the lightbulb has the class "off", opacity = 0 (no shadow)
return 0;
}else{
// otherwise we calculate a suitable shadow opacity with this formular
return (1.2 - getDistance /1000);
}
}
If our light bulb has the class “off”, we’ll return “0″, which stands for zero opacity. No light, no shadow. Sounds logical, right? More interesting is the “else” part, where we’re going to use this formula “1.2 – getDistance / 1000” to calculate a shadow which will look quite good. getDistance /1000 will just move the decimal point 3 points to the left, giving us a usable number for the next calculation, where we are going to subtract it from 1.2 (which would be 120% theoretically).You can experiment with this value, if you are not satisfied with the results.
The next what we are going to do is to assign the things which should happen, when the user clicks on our light switch:
// asinging the things, which should happen, when clicking the light switch
lightswitch.click(function(){
// when the light bulb has the class "off" do following:
if(lightbulb.hasClass("off")){
// first remove the class "off"
lightbulb.removeClass("off");
// change the background position of the CSS sprite
lightswitch.css("backgroundPosition","0 0");
// showing the shadow of the logo with a fading animation
logoshadow.stop().fadeTo(750,setOpacity(shadowDistance));
// fade in the inner light bulb container (light is turned on!)
lightbulb2.stop().fadeTo(750,1);
// changing the status text to the "off text"
statustext.text(offtxt);
// else do following:
}else{
// adding the class "off"
lightbulb.addClass("off");
// move the background position of the switch back to original position
lightswitch.css("backgroundPosition","-80px 0");
// fade out the logo shadow
logoshadow.stop().fadeTo(750,0);
// fade out the turned on light (no more lights now)
lightbulb2.stop().fadeTo(750,0);
// changing the status text to the "on text"
statustext.text(ontxt);
}
});
A few things are happening now. Let’s get through it line by line.
First we need to differentiate if the lights should be turned on or off. For this we will check once again if the light bulb has the class “off” or not. If it has it, we’ll do following:
We will remove it right again.
Then we make use of our sprite image of the light switch and move it to the “on” position, which is “0 0″ / “top left”.
After this we are going to fade in the shadow of the logo. We are doing this with the setOpacity function, described before. For now you have to change “shadowDistance” to “1”, if you want to try it. We will get the variable “shadowDistance” in the next function.
Last things to do is to fade in our inner light bulb which is positioned via our CSS to get the “energized” part of the sprite image
and change the status text to the “off state”.
If the light bulb has not a class named “off”, we will do the opposite of above which is following:
add class “off” to our light bulb
move the image of the light switch up by 80 pixels, so it is turned off again
fade out the shadow
fade out the inner light bulb (the lighten up one)
and changing the status text to the “on state”
The last function we need is finally the one, which will move our shadow (and probably the most interesting one):
// the main function - our shadow mover
function moveShadow(){
// save the current X position of the light bulb
lightX = parseInt(lightbulb.offset().left) + lightCenterX;
// save the current Y position of the light bulb
lightY = parseInt(lightbulb.offset().top) + lightCenterY;
// save the current X position of the logo
logoX = parseInt(logo.offset().left) + logoCenterX;
// save the current Y position of the logo
logoY = parseInt(logo.offset().top) + logoCenterY;
// save the value how far the logo is away from the light bulb on the X-axis
distanceX = logoX - lightX;
// save the value how far the logo is away from the light bulb on the Y-axis
distanceY = logoY - lightY;
// calculating and saving the value of the square root of those two distance values
distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
// calculating and saving the shadow distance with the offset we defined in our variables
shadowDistance = distance * shadowOffset;
// preparing the CSS value to put into the "left" attribute of the shadow container
shadowPosLeft = (distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px";
// preparing the CSS value to put into the "top" attribute of the shadow container
shadowPosTop = (distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px";
// finaly using the results of all above calculations to position our shadow and set the opacity
logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) });
}
This may looks a little bit weird and strange to you on the first sight, but it’s really not so difficult to understand and I used only some basic math formula for the calculations which I will describe you now.
Let’s get through it, line by line again:
lightX: Getting the current X position of our light bulb
lightY: Getting the current Y position of our light bulb
logoX: Same like 1. only with the logo container
logoY: Same like 2. only with the logo container
distanceX: Calculating how far the logo is away from the light bulb on the X-axis
distanceY: Calculating how far the logo is away from the light bulb on the Y-axis
distance: Calculating the square root of distanceX and distanceY using the Math.sqrt(); function and for the two values the Math.pow(); function, which stands for exponential power. The first parameter, in our case distanceX or distanceY is the parameter for the base and the second parameter stands for the power. For making it clear: On the paper you would write: distanceX² and distanceY²
shadowDistance: Multiplying the actual distance with the offset we defined at the top of our script where the variables are defined. We used this variable on click function of the light switch. So if you changed “shadowDistance” to “1”, you can now change it back to this variable.
shadowPosLeft: Making the left offset of the shadow ready, to use it in our last line.
shadowPosTop: Making the top offset of the shadow ready, to use it in our last line.
logoshadow.css(): finally we are changing the CSS of our shadow container so it gets correct positioned and has the proper opacity
That’s it!
The last thing you need to do is to uncomment the moveShadow(); function twice (only if you have commented it out). At first at the variables section and at last in the jQuery UI’s draggable function.
Your shadow is now dynamic positioned and also has a cool looking dynamic opacity, depending on the distance and position of both: The light bulb and the logo.
I hope you liked this tutorial and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this: DEMO.
If you had some troubles with any step or need further instructions or help, feel free to write your question into the comments section of this post so I can take a look at your question and help you out!
Thanks for reading and have fun trying and using it in your next project!
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.
/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.
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.
Search Results for
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).
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.
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('//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 in your theme’s files wherever you’d like the image to show up.
14. Do SEO your tag</h3>
<p>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.</p>
<p><code></p>
<pre><?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'); ?><!--formatted--></code></pre>
<h3>15. Do not forget about breadcrumbs</h3>
<p>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 <a href="http://www.catswhocode.com/blog/how-to-breadcrumb-function-for-wordpress">Cats Who Code</a>, we now know how to add a breadcrumb function into our WordPress themes.</p>
<p>First, add the below codes into your themes functions.php file (customized a bit from the original Cats Who Code post, linked above).</p>
<pre><code>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>
';
}<!--formatted--></code></pre>
<p>Next, place this piece of code anywhere you want your breadcrumbs to display.</p>
<p><code></p>
<pre><?php the_breadcrumb(); ?></pre>
<p><!--formatted--></code></p>
<h3>Thanks for reading over the article</h3>
<p>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.</p>
<p>Related posts:
<ol>
<li><a href="http://www.themelab.com/2008/04/14/the-ultimate-guide-to-wordpress-conditional-tags/" rel="bookmark" title="Permanent Link: The Ultimate Guide to WordPress Conditional Tags">The Ultimate Guide to WordPress Conditional Tags</a></li>
<li><a href="http://www.themelab.com/2010/02/24/how-to-create-a-comments-central-page-template-in-wordpress/" rel="bookmark" title="Permanent Link: How to Create a Comments Central Page Template in WordPress">How to Create a Comments Central Page Template in WordPress</a></li>
<li><a href="http://www.themelab.com/2008/04/22/5-quick-ways-to-fix-up-your-wordpress-theme/" rel="bookmark" title="Permanent Link: 5 Quick Ways to Fix Up Your WordPress Theme">5 Quick Ways to Fix Up Your WordPress Theme</a></li>
</ol>
<div>
<a href="http://feeds.feedburner.com/~ff/ThemeLab?a=gAyFOjmjB_Y:zc1I_8bYRpA:hJo_UCMZ9e0"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=hJo_UCMZ9e0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=gAyFOjmjB_Y:zc1I_8bYRpA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ThemeLab?i=gAyFOjmjB_Y:zc1I_8bYRpA:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=gAyFOjmjB_Y:zc1I_8bYRpA:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/ThemeLab?i=gAyFOjmjB_Y:zc1I_8bYRpA:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=gAyFOjmjB_Y:zc1I_8bYRpA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=gAyFOjmjB_Y:zc1I_8bYRpA:3Nb2VdUv6vk"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=3Nb2VdUv6vk" border="0"></img></a>
</div>
</p>
<p>Go here to see the original:<br />
<a target="_blank" href="http://www.themelab.com/2010/03/04/effective-wordpress-theming/" title="15 Do’s and Don’ts of Effective WordPress Theming">15 Do’s and Don’ts of Effective WordPress Theming</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/article/" rel="tag">article</a>, <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/coding/" rel="tag">coding</a>, <a href="http://sonofbyte.com/tag/home/" rel="tag">home</a>, <a href="http://sonofbyte.com/tag/image/" rel="tag">image</a>, <a href="http://sonofbyte.com/tag/information/" rel="tag">information</a>, <a href="http://sonofbyte.com/tag/main/" rel="tag">Main</a>, <a href="http://sonofbyte.com/tag/opinion/" rel="tag">opinion</a>, <a href="http://sonofbyte.com/tag/person/" rel="tag">person</a>, <a href="http://sonofbyte.com/tag/search/" rel="tag">search</a>, <a href="http://sonofbyte.com/tag/seo/" rel="tag">seo</a>, <a href="http://sonofbyte.com/tag/time/" rel="tag">time</a>, <a href="http://sonofbyte.com/tag/tutorials/" rel="tag">tutorials</a><br /> Posted in <a href="http://sonofbyte.com/category/news/wordpress2/themes/" title="View all posts in Themes" rel="category tag">Themes</a> | <a href="http://sonofbyte.com/2010/03/15-do%e2%80%99s-and-don%e2%80%99ts-of-effective-wordpress-theming/#respond" title="Comment on 15 Do’s and Don’ts of Effective WordPress Theming">No Comments »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-9049 post hentry category-main tag-application tag-article tag-china tag-code tag-myspace tag-news tag-people tag-privacy tag-project tag-service tag-stalker tag-web-apps">
<h3 id="post-9049"><a href="http://sonofbyte.com/2010/03/the-truth-about-the-stalker-tracker-on-facebook/" rel="bookmark" title="Permanent Link to The Truth About the Stalker Tracker on Facebook">The Truth About the Stalker Tracker on Facebook</a></h3>
<small>Monday, March 1st, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F03%2Fthe-truth-about-the-stalker-tracker-on-facebook%2F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22The%20Truth%20About%20the%20Stalker%20Tracker%20on%20Facebook%22%20%7D);"></div>
<p>
<p><img style="border: 0px none; margin-right: 20px; margin-bottom: 20px;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stalker.jpg" alt="" vspace="5" align="left" />Recently, I discovered yet another method that scammers are getting people to cough up their Facebook passwords. After hearing from a few friends that their Facebook accounts were hijacked through one method or another, I realized that it’s high time to at least try and put a lid on one particular method of Facebook scamming known as the “Stalker Tracker” on Facebook.</p>
<p>Additionally, I’m going to try to satisfy the demand for legitimate services that might not be “Stalker Tracker” on Facebook, but it provides at least some of the visitor tracking features you may be looking for. And anyway, I really should write something nice to make up for writing that article about how to use social engineering to <a href="http://www.makeuseof.com/tag/how-to-view-private-facebook-profiles/">view someone’s private Facebook profile</a>.</p>
<p><span></span><br />
The most important message I’d like to convey with this article is this – there is <strong>no such thing as a Stalker Tracker on Facebook</strong>, and <strong>no such thing as a Profile Tracker</strong> or any other service that promises to show you who has viewed your profile. Now, this isn’t to say that there was <em>never</em> such a feature offered by Facebook. For a very short period, there was an app called <a href="http://news.cnet.com/8301-13577_3-9943285-36.html">Gawker</a>, which created a sort of “Stalker List” for Facebook visitors on your profile – showing who visited your profile most often.</p>
<p>In a very short time frame, the app was removed from Facebook due to serious privacy concerns. At this point, Facebook will not allow any service or code on anyone’s profile that violates the privacy of Facebook members – and that includes the privacy people feel entitled to when they view your profile. This is unfortunate, because even if you follow the sort of rules <a href="http://www.makeuseof.com/tag/3-polite-ways-to-end-online-relationships-without-getting-stalked/">Tina outlined to avoid getting stalked</a>, sometimes stalking happens, and it would be good to know so that the person can be blocked.</p>
<h3>The History of Stalker Tracker on Facebook</h3>
<p>The major push of the Stalker Tracker sort of scams took place in 2007 when the Blue China Group ran a scam against MySpace users called Stalker Tracker. Operating from a website called StalkerTrack.com (no longer active), the group offered MySpace members the promise of seeing what users were “stalking” their profile most often. As with many of these sorts of scams, the site lists the service as in “Beta” testing, or otherwise not yet active, but users can sign up for the service using their MySpace (or in today’s version, Facebook) ID and password. Newer versions go by Facebook Profile Tracker, Profile Tracker, Stalker Tracker for Facebook, or some other variation.</p>
<p>Ultimately, every one of these apps is set up to do one thing and one thing only – scam you and hijack your account. Let me make this very clear – <em>Facebook Privacy Rules do not allow for publicly opening up member viewing activities.</em> There’s no getting around this rule, no matter what some third party application vendor promises.</p>
<h3>Are There Any Facebook Profile Trackers That Work?</h3>
<p>Even though there’s no way to see who’s viewing your profile, there’s still a tremendous demand out there, particular among the growing population of Facebook users, for some kind of tool to see who’s viewing your profile. There <em>are ways</em> to see some of the activity that takes place on your profile page, but the solutions are by no means going to show you the identity of your visitors. At one point, there was even a solution called Stalker Checker, or Stalker Check, which really did allow you to see which members were most active on your profile. It was called the <a href="http://apps.facebook.com/stalkercheck/">Facebook StalkerCheck</a>.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stalkercheck1.jpg" alt="stalker tracker on facebook" width="569" height="524" /></p>
<p>While the application couldn’t show you who was <em>viewing</em> your account, it did show you the people who were posting or otherwise most active on your account. Now, this isn’t exactly telling you anything you don’t already know, but it had a number of people up in arms because it did show a spouse or significant other whether or not particular people (like a former girlfriend) were constantly keeping in touch with you on Facebook through profile or photo comments. Not exactly a privacy issue per se, but apparently Facebook has once again decided to pull the plug on yet another application that monitors user activity in some way.</p>
<p>On August 19th of last year, Stalker Checker posted the following comment to their fan page:</p>
<p><em>“(To all old fans) Facebook have done something to the Stalker Check group. We dont know what has happend, but are trying to get contact whit someone from the facebook office. The group was totaly gone this morning. We have now restarted the group. And hope you all can join again! We had alot of fans so if you out there… could help us bring some fans back it would be great! Thanks!”</em></p>
<p>Clicking on the application link for Stalker Checker turns up the following error.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stalkercheck2.jpg" alt="stalker tracker on facebook" width="536" height="197" /></p>
<p>It appears that even an app that simply aggregates user activity on your profile is no longer allowed on Facebook. However, being the crafty geek that you are, you know that wherever HTML is allowed (like on your wall), there’s a way to monitor user view counts, at least.</p>
<h3>Monitoring Your Profile View Count With StatTracker</h3>
<p>Any free tracking app that lets you embed HTML onto your web page to accumulate view count will work on your Facebook profile. The key is that you can’t use Javascript. So long as the code is only HTML, you’re good to go. In my case I chose <a href="http://www.statcounter.com/">StatTracker</a> because it’s free and easy to use.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stattrack1.jpg" alt="stalker tracker on facebook" width="551" height="457" /></p>
<p>Just sign up and then fill in the project settings (none of it really matters, you’ll need need to remember the title you define here for when you want to check your stats). Next, make sure you choose the invisible tracker.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stattrack2.jpg" alt="stalker tracker" width="546" height="411" /></p>
<p>This way no one sees that you’re keeping track of your visitor count! Next, make sure that you choose the HTML counter only. As the instructions advise, you won’t be able to track the visitor IP info or other identifying information, but that’s part of the reason Facebook doesn’t allow Javascript. At least you can see how many people are visiting your profile with the HTML counter!</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stattrack41.jpg" alt="stalker tracker" width="443" height="300" /></p>
<p>Finally, you’ve got your code. Now let’s just go into Facebook and figure out where to insert that snippet. In your Facebook profile, if you don’t yet have the ability to insert “boxes” or otherwise add sidebar HTML onto your profile, you’ll need to add an application like <a href="http://www.makeuseof.com/www.facebook.com/applications/My_Stuff">“MyStuff” by Gigya</a>, which is what I use. In “My Stuff,” you simply click “Add Code” and you can paste the code that will get added to your profile in the side Nav bar.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stattrack5.jpg" alt="stalker tracker" width="440" height="316" /></p>
<p>Once you’re done, everyone who visits your profile page will see a small, empty space.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stattrack6.jpg" alt="facebook stalker app" width="341" height="289" /></p>
<p>Once you have this HTML pasted on your profile like this, any time someone visits your profile page, you’ll see the StatCounter numbers increase. Your stats page shows you how many visitors you’ve had up to a month back in time.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/stattrack7.jpg" alt="facebook stalker app" width="549" height="123" /></p>
<p>While this particular technique doesn’t exactly live up to the grand promises of apps like the Stalker Tracker on Facebook – there’s a big difference. This technique isn’t a scam. And while it won’t show you who’s stalking you on Facebook, it’ll at least show you how popular you are…or not!</p>
<p>Do you know of any other ways to see how many people viewed your Facebook profile? Do you know of any Facebook apps that accomplish the same thing? Share your insight in the comments section below.</p>
<p>em><strong>Got Tech Questions? Ask Them on <a href="http://www.makeuseof.com/answers/">MakeUseOf Answers</a>!</strong></em></p>
<p> <em><br />
<h4>Related posts</h4>
<p></em></p>
<ul>
<li>(148)<a href="http://www.makeuseof.com/tag/how-to-view-private-facebook-profiles/" title="How to View Private Facebook Profiles (May 14, 2009)">How to View Private Facebook Profiles</a> </li>
<li>(29)<a href="http://www.makeuseof.com/tag/the-top-4-risks-you-face-when-you-use-facebook/" title="The Top 4 Risks You Face When You Use Facebook (December 4, 2009)">The Top 4 Risks You Face When You Use Facebook</a> </li>
<li>(10)<a href="http://www.makeuseof.com/tag/prevent-remove-facebook-malware-or-virus/" title="How To Prevent & Remove Facebook Malware or Virus (February 10, 2010)">How To Prevent & Remove Facebook Malware or Virus</a> </li>
<li>(66)<a href="http://www.makeuseof.com/tag/how-to-hack-your-facebook-account-with-greasemonkey-javascript/" title="How To Hack Your Facebook Account with Greasemonkey & Javascript (October 11, 2009)">How To Hack Your Facebook Account with Greasemonkey & Javascript</a> </li>
<li>(74)<a href="http://www.makeuseof.com/tag/facebook-tip-how-to-safely-friend-a-colleague-or-relative-without-showing-them-all-your-business/" title="How to “Friend” Someone on Facebook & Hide It From Your Status Updates (March 11, 2009)">How to “Friend” Someone on Facebook & Hide It From Your Status Updates</a> </li>
</ul>
<p><a href="http://feedads.g.doubleclick.net/~a/e6WP_byG64PtFCYHMxb2hfnXbQQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/e6WP_byG64PtFCYHMxb2hfnXbQQ/0/di" border="0" ismap="true"></img></a><br/><br />
<a href="http://feedads.g.doubleclick.net/~a/e6WP_byG64PtFCYHMxb2hfnXbQQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/e6WP_byG64PtFCYHMxb2hfnXbQQ/1/di" border="0" ismap="true"></img></a></p>
<div>
<a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Makeuseof?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=mY4vXgzFvxY:Mat9Gf-KRSs:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=mY4vXgzFvxY:Mat9Gf-KRSs:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=mY4vXgzFvxY:Mat9Gf-KRSs:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/Makeuseof?d=I9og5sOYxJI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Makeuseof?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=mY4vXgzFvxY:Mat9Gf-KRSs:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=mY4vXgzFvxY:Mat9Gf-KRSs:D7DqB2pKExk" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/Makeuseof/~4/mY4vXgzFvxY" height="1" width="1" /></p>
<p><img src="http://sonofbyte.com/wp-content/uploads/2010/03/7089170f06talker.jpg-134x180.jpg" /></p>
<p>Follow this link:<br />
<a target="_blank" href="http://feedproxy.google.com/~r/Makeuseof/~3/mY4vXgzFvxY/" title="The Truth About the Stalker Tracker on Facebook">The Truth About the Stalker Tracker on Facebook</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/application/" rel="tag">application</a>, <a href="http://sonofbyte.com/tag/article/" rel="tag">article</a>, <a href="http://sonofbyte.com/tag/china/" rel="tag">china</a>, <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/myspace/" rel="tag">myspace</a>, <a href="http://sonofbyte.com/tag/news/" rel="tag">News</a>, <a href="http://sonofbyte.com/tag/people/" rel="tag">people</a>, <a href="http://sonofbyte.com/tag/privacy/" rel="tag">privacy</a>, <a href="http://sonofbyte.com/tag/project/" rel="tag">project</a>, <a href="http://sonofbyte.com/tag/service/" rel="tag">service</a>, <a href="http://sonofbyte.com/tag/stalker/" rel="tag">stalker</a>, <a href="http://sonofbyte.com/tag/web-apps/" rel="tag">web apps</a><br /> Posted in <a href="http://sonofbyte.com/category/main/" title="View all posts in Main" rel="category tag">Main</a> | <a href="http://sonofbyte.com/2010/03/the-truth-about-the-stalker-tracker-on-facebook/#comments" title="Comment on The Truth About the Stalker Tracker on Facebook">1 Comment »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-6349 post hentry category-themes tag-a-small-problem tag-a-small-smiley tag-code tag-css-tips tag-design tag-footer tag-hide-the-smiley tag-image tag-killswitch tag-permanent-link tag-press-smiley tag-wordpress tag-wordpress-plugins tag-wordpress-tips">
<h3 id="post-6349"><a href="http://sonofbyte.com/2010/02/how-to-hide-the-wordpress-stats-smiley-the-right-way/" rel="bookmark" title="Permanent Link to How to Hide the WordPress Stats Smiley the Right Way">How to Hide the WordPress Stats Smiley the Right Way</a></h3>
<small>Saturday, February 27th, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F02%2Fhow-to-hide-the-wordpress-stats-smiley-the-right-way%2F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22How%20to%20Hide%20the%20WordPress%20Stats%20Smiley%20the%20Right%20Way%22%20%7D);"></div>
<p>
<p><img src="http://www.themelab.com/wp-content/uploads/smiley.jpg" alt="Smiley" style="float:left;margin-right:10px" />For anyone who uses the <a href="http://wordpress.org/extend/plugins/stats/">WordPress.com stats plugin</a>, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats.</p>
<p>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:</p>
<ul>
<li>First of all, what <strong>not</strong> to do when hiding the smiley</li>
<li>How to properly hide it, with some extra absolute position goodness for certain layouts</li>
<li>If you’d rather not hide it, how to easily center the smiley image</li>
</ul>
<p><span></span></p>
<h3>What Not to Do</h3>
<p><strong>Don’t ever use <span>display:none</span> to hide the WP Stats Smiley.</strong></p>
<p>First of all, I want to go over the one thing you <strong>shouldn’t do</strong> when attempting to hide the WP Stats Smiley, and that’s use: <code>display:none</code>. Yeah, I said that twice, but I was just making sure you didn’t miss it.</p>
<p>Yeah, that’s the same code you can use to get a <a href="http://www.themelab.com/2010/02/14/get-a-css-killswitch-effect-with-only-one-line-of-code/">CSS Killswitch effect</a>, 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.</p>
<h3>What to do instead</h3>
<p>According to <a href="http://andy.wordpress.com/2007/05/05/automattic-stats-for-self-hosted-wordpress/">this post</a>, the developer recommends to use the following code to your stylesheet (i.e. <code>style.css</code>) if you wish to hide the smiley:</p>
<pre><code>img#wpstats{width:0px;height:0px;overflow:hidden}</code></pre>
<p>Something similar to the above code would be the following:</p>
<pre><code>img#wpstats{visibility:hidden}</code></pre>
<p>The <a href="http://webdesign.about.com/od/css/f/blfaqhidden.htm">difference between visibility:hidden and display:none</a> 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).</p>
<p>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.</p>
<p>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.</p>
<p><img src="http://www.themelab.com/wp-content/uploads/slick-smiley-before.gif" alt="Evil Smiley" /></p>
<p>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.</p>
<h3>Absolute Positioning</h3>
<p>A combination of absolute positioning plus the code above is a good way to eliminate this issue. You could try something like this:</p>
<pre><code>img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}</code></pre>
<h3>Centering the Image</h3>
<p>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.</p>
<pre><code>img#wpstats{display:block;margin: 0 auto}</code></pre>
<p><strong>Explanation:</strong></p>
<ul>
<li>Sets the image to display as block (instead of inline, by default).</li>
<li>Sets the left and right margins to automatic to effectively center the now block image.</li>
</ul>
<p>You can use this CSS to properly center pretty much any “img” tag without using additional markup.</p>
<h3>Conclusion</h3>
<p>By the way, if you use the <a href="http://wordpress.org/extend/plugins/wordpresscom-stats-smiley-remover/">WP Stats Smiley Remover</a> plugin, don’t. Because all it does it add the “display:none” CSS to your header. The exact thing you’re <strong>not supposed to do</strong>.</p>
<p>Hope you liked the WordPress/CSS tip. Like the <a href="http://www.themelab.com/2010/02/14/get-a-css-killswitch-effect-with-only-one-line-of-code/" title="Get a CSS Killswitch Effect With Only One Line of Code">last one</a>, 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.</p>
<p>Related posts:
<ol>
<li><a href="http://www.themelab.com/2008/09/03/wordpress-smiley-spam-technique/" rel="bookmark" title="Permanent Link: WordPress Smiley Spam Technique">WordPress Smiley Spam Technique</a></li>
</ol>
<div>
<a href="http://feeds.feedburner.com/~ff/ThemeLab?a=sYiDnjsHua8:tk3X23dilfg:hJo_UCMZ9e0"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=hJo_UCMZ9e0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=sYiDnjsHua8:tk3X23dilfg:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ThemeLab?i=sYiDnjsHua8:tk3X23dilfg:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=sYiDnjsHua8:tk3X23dilfg:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/ThemeLab?i=sYiDnjsHua8:tk3X23dilfg:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=sYiDnjsHua8:tk3X23dilfg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=sYiDnjsHua8:tk3X23dilfg:3Nb2VdUv6vk"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=3Nb2VdUv6vk" border="0"></img></a>
</div>
</p>
<p><img src="http://www.themelab.com/wp-content/uploads/smiley.jpg" /></p>
<p>Go here to read the rest:<br />
<a target="_blank" href="http://www.themelab.com/2010/02/27/hide-the-wordpress-stats-smiley/" title="How to Hide the WordPress Stats Smiley the Right Way">How to Hide the WordPress Stats Smiley the Right Way</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/a-small-problem/" rel="tag">a-small-problem</a>, <a href="http://sonofbyte.com/tag/a-small-smiley/" rel="tag">a-small-smiley</a>, <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/css-tips/" rel="tag">css tips</a>, <a href="http://sonofbyte.com/tag/design/" rel="tag">Design</a>, <a href="http://sonofbyte.com/tag/footer/" rel="tag">footer</a>, <a href="http://sonofbyte.com/tag/hide-the-smiley/" rel="tag">hide-the-smiley</a>, <a href="http://sonofbyte.com/tag/image/" rel="tag">image</a>, <a href="http://sonofbyte.com/tag/killswitch/" rel="tag">killswitch</a>, <a href="http://sonofbyte.com/tag/permanent-link/" rel="tag">permanent-link</a>, <a href="http://sonofbyte.com/tag/press-smiley/" rel="tag">press-smiley</a>, <a href="http://sonofbyte.com/tag/wordpress/" rel="tag">wordpress</a>, <a href="http://sonofbyte.com/tag/wordpress-plugins/" rel="tag">wordpress plugins</a>, <a href="http://sonofbyte.com/tag/wordpress-tips/" rel="tag">wordpress tips</a><br /> Posted in <a href="http://sonofbyte.com/category/news/wordpress2/themes/" title="View all posts in Themes" rel="category tag">Themes</a> | <a href="http://sonofbyte.com/2010/02/how-to-hide-the-wordpress-stats-smiley-the-right-way/#respond" title="Comment on How to Hide the WordPress Stats Smiley the Right Way">No Comments »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-8175 post hentry category-main tag-code tag-feed tag-how-to tag-lifestream tag-online tag-personal tag-php tag-social-bookmarking tag-wordpress tag-yahoo">
<h3 id="post-8175"><a href="http://sonofbyte.com/2010/02/how-to-create-your-own-lifestream-on-a-wordpress-blog-in-3-easy-steps/" rel="bookmark" title="Permanent Link to How To Create Your Own Lifestream On A Wordpress Blog In 3 Easy Steps">How To Create Your Own Lifestream On A Wordpress Blog In 3 Easy Steps</a></h3>
<small>Thursday, February 25th, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F02%2Fhow-to-create-your-own-lifestream-on-a-wordpress-blog-in-3-easy-steps%2F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22How%20To%20Create%20Your%20Own%20Lifestream%20On%20A%20Wordpress%20Blog%20In%203%20Easy%20Steps%22%20%7D);"></div>
<p>
<p><img style="border: 0px none; margin-right: 20px;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/hose1.jpg" alt="hose" vspace="5" align="left" />Most of us have heard of <a href="http://www.makeuseof.com/tags/lifestream/">lifestreaming</a> before. Some refer to it has a logging of your entire life online (maybe in a blog or YouTube or something similar). You can also use the word <strong>lifestreaming</strong> to refer to a stream containing all of your online activity. For instance, you may have content on a <a href="http://www.makeuseof.com/tags/blogging/">blog</a> or two, <a href="http://www.makeuseof.com/tags/Flickr/">Flickr</a>, <a href="http://www.makeuseof.com/tag/start-your-own-personal-photo-blog-the-dead-simple-way-with-posterous/">Posterous</a>, <a href="http://www.makeuseof.com/tags/Twitter/">Twitter</a> (<a href="http://www.makeuseof.com/tag/the-complete-guide-to-twitter-pdf/">get the MakeUseOf guide!</a>), <a href="http://www.makeuseof.com/tags/YouTube/">YouTube</a>, etc. If you want all of that streamed into one place online, you’ll be wanting a lifestream.</p>
<p>With the tools and steps I will share with you in this article, you too can start lifestreaming on your Wordpress blog! I know there are tools out there (such as <a href="http://www.makeuseof.com/tag/3-easy-steps-to-lifestream-with-storytlr/">StoryTlr</a>) that make this quite simple. My specific needs weren’t easily met by many of them. I wanted my lifestream found directly on my blog.</p>
<p><span></span><br />
You see, I have been posting less often to my personal blog because of my commitments elsewhere online (paid blogging, <a href="http://twitter.com/timmyjohnboy">Twitter</a> usage, photo blogging on <a href="http://timmyjohnboy.posterous.com">Posterous</a>, some future YouTube publishing, and future ministry-type blogging on a <a href="http://www.ministryfromtheheart.com/">blog</a> masterminded by my beautiful wife). I wanted to make my personal blog more of a launching pad to the rest of my online content, instead of competing with it. Well, here’s how I did it with <a href="http://timmyjohnboy.com/lifestream/">my lifestream</a> on my Wordpress blog!</p>
<h3>The right tools for lifestreaming to Wordpress</h3>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/hammar.jpg" alt="lifestreaming wordpress" width="580" height="150" /></p>
<p><strong>First of all</strong>, you’ll need some <a href="http://www.makeuseof.com/tags/wordpress-plugins/">plugins</a> for your Wordpress blog. Remember that if you have a current installation of Wordpress, you can install these plugins directly from the “Install Plugins” section of the Admin of your Wordpress blog. I will also link to the plugins’ pages so you can get an idea of what to search for and how to install them.</p>
<ol>
<li><a href="http://wordpress.org/extend/plugins/simplepie-core/">SimplePie Core</a> (needed for “SimplePie” plugin for Wordpress)</li>
<li><a href="http://wordpress.org/extend/plugins/simplepie-plugin-for-wordpress/">SimplePie plugin for Wordpress</a></li>
<li><a href="http://wordpress.org/extend/plugins/exec-php/">Exec-PHP</a> (gives you the ability to run PHP code in text widgets, posts and pages)</li>
</ol>
<p><strong>Secondly</strong>, if you want to stream your tweets from Twitter, you may want to filter out the <strong>@ replies</strong> to cut down on the clutter. Many people just want the original content tweets and choose to skip the conversations going on with other twits. For this, I found a Yahoo Pipe that suite my fancy called <a href="http://pipes.yahoo.com/pipes/pipe.info?_id=mgAGWe6_3RGl_C_tPxJ3AQ">Twitter – no @ replies</a>. If you know of a better option, let me know:)</p>
<h3>Steps to applying your lifestream on your Wordpress blog</h3>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/steps.jpg" alt="lifestreaming wordpress" width="580" height="150" /></p>
<p><strong>1. Install the plugins</strong> – Like I said earlier, with the current Wordpress installation, you can now easily install plugins from within the Admin area of your blog. Visit the plugin pages for more information about them and some instructions as to how to use them (SimplePie Core won’t need you to do anything because it is only needed to make SimplePie plugin for Wordpress work). Also, before the next step, please make sure the Exec-PHP plugin is installed or the code you’ll be inserting into the page/post/widget will only laugh at you (my way of saying it won’t work)!</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/lifestream_installplugins.jpg" alt="lifestreaming wordpress" width="580" height="230" /></p>
<p><strong>2. Add code and feeds where you want them</strong> – I am highlighting this step <strong>before</strong> the plugin configuration step because we want the stream up and running before we tweak how it looks. The code I used was simple because I just grabbed it from the documentation on the <a href="http://simplepie.org/wiki/plugins/wordpress/simplepie_plugin_for_wordpress/usage">SimplePie website</a>! Here’s the code I copied and pasted (<strong>make sure you are in HTML mode and not Visual mode in Wordpress</strong>):</p>
<blockquote><p><?php<br />
echo SimplePieWP(array(<br />
‘http://www.makeuseof.com/tag/author/TimLenahan/feed/’,<br />
‘http://feedproxy.google.com/timmyjohnboy’,<br />
‘http://timmyjohnboy.posterous.com/rss.xml’,<br />
‘http://pipes.yahoo.com/pipes/pipe.run?Twitternick=timmyjohnboy&_id=mgAGWe6_3RGl_C_tPxJ3AQ&_render=rss’<br />
), array(<br />
‘cache_duration’ => 1800,<br />
‘date_format’ => ‘j M Y, g:i a’,<br />
‘items’ => 20,<br />
));<br />
?></p>
</blockquote>
<p>Insert your own feed URLs in place of mine! Notice that there is a comma at the end of each line containing the feed. Check out the <a href="http://simplepie.org/wiki/plugins/wordpress/simplepie_plugin_for_wordpress/usage">documentation page</a> for more information but this worked fine for me.</p>
<p>Before adding your Twitter feed, decide whether or not you want to filter out the @ replies. If you do, visit this <a href="http://pipes.yahoo.com/pipes/pipe.info?_id=mgAGWe6_3RGl_C_tPxJ3AQ">Yahoo Pipes page</a> to get the feed. All you’ll have to do is add your Twitter ID (must be public) and grab the feed it gives you. If you don’t care to filter them out, just visit your Twitter page and grab the feed from there.</p>
<p><strong>3. Configure the SimplePie plugin</strong> – SimplePie for Wordpress will need some configuration to make the feed look the way you want it to. To configure the plugin, go to the Settings menu and you should find SimplePie for WP there.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/lifestream_simplepieconfig.jpg" alt="lifestream_simplepieconfig" /></p>
<p>There are several options here including the Layout Template section that dictates how the feed will look on your site. If you’re into it, you can actually modify the templates to your liking but for the sake of simplicity, I just used the “Blog style with enclosures” template because I wanted to dedicate an entire page to my lifestream.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/lifestream_layouttemplate.jpg" alt="lifestream_layouttemplate" /></p>
<p>You’ll probably want your multiple feeds to show up in chronological order, the goal being a lifestream and all. Look for “reorder items by date” and make sure “yes” is selected.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/lifestream_reorderitemsdate.jpg" alt="lifestream_reorderitemsdate" /></p>
<p>You can also choose how many items show up in your stream including how many options from each feed.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/lifestream_numofitems.jpg" alt="lifestream_numofitems" /></p>
<p>Some of these setting depend on how and where you want to use your lifestream on your blog. If you want it in a text widget in the sidebar for instance, you’ll probably want not much more that the content’s title and maybe the date/time to show. If you’re like me and want the stream on a whole page, you can stream more of the content, including pictures and paragraphs. You MAY also want to disable comments if you are creating a page or a post for your lifestream.</p>
<p><img class="aligncenter" style="border: 0pt none;" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/02/lifestream_mylifestreamexample.jpg" alt="lifestream_mylifestreamexample" /></p>
<p>Notice the screen shot shows three feed sources I have streamed together in chronological order: my <a href="http://www.makeuseof.com/tag/author/timlenahan/">MakeUseOf author</a> feed, my <a href="http://timmyjohnboy.com">blog</a> feed, and <a href="http://timmyjohnboy.posterous.com">my Posterous</a> feed (which I’m using as a <a href="http://www.makeuseof.com/tag/start-your-own-personal-photo-blog-the-dead-simple-way-with-posterous/">make-shift photo blog</a>).</p>
<p>The cool part is it’s up to you! You can pretty much make your stream look any way you want! Do you lifestream your online content? How do YOU do it?</p>
<p>Did you like the post? Please do share your thoughts in the comments section!</p>
<p><a href="http://www.facebook.com/connect/connect.php?api_key=8ac25c7e080e1d2db91fed7391552f2a&id=27517455413&connections=20&stream=&css="><img src="http://www.makeuseof.com/wp-content/uploads/2009/12/facebook-rss-footer.png" /></a></p>
<p> <em><br />
<h4>Related posts</h4>
<p></em></p>
<ul>
<li>(13)<a href="http://www.makeuseof.com/tag/2-ways-to-add-social-bookmarking-buttons-to-your-blog/" title="2 Ways To Add Social Bookmarking Buttons To Your Blog (November 26, 2009)">2 Ways To Add Social Bookmarking Buttons To Your Blog</a> </li>
<li>(8)<a href="http://www.makeuseof.com/tag/top-5-free-ways-guestbook-website/" title="Top 5 Free Ways To Get a Guestbook For Your Website (February 15, 2010)">Top 5 Free Ways To Get a Guestbook For Your Website</a> </li>
<li>(11)<a href="http://www.makeuseof.com/tag/start-your-own-personal-photo-blog-the-dead-simple-way-with-posterous/" title="Start Your Own Personal Photo Blog The Dead Simple Way With Posterous (January 1, 2010)">Start Your Own Personal Photo Blog The Dead Simple Way With Posterous</a> </li>
<li>(2)<a href="http://www.makeuseof.com/tag/live-blogging-and-instant-updates-of-just-about-anything-with-scribblelive/" title="ScribbleLive- No Hassle Blog For Live Blogging (June 16, 2009)">ScribbleLive- No Hassle Blog For Live Blogging</a> </li>
<li>(26)<a href="http://www.makeuseof.com/tag/psst-do-you-plurk/" title="Psst…Do You Plurk? (June 18, 2008)">Psst…Do You Plurk?</a> </li>
</ul>
<p><a href="http://feedads.g.doubleclick.net/~a/SfOLoSNUPSX82qtQbNnRcszQbn4/0/da"><img src="http://feedads.g.doubleclick.net/~a/SfOLoSNUPSX82qtQbNnRcszQbn4/0/di" border="0" ismap="true"></img></a><br/><br />
<a href="http://feedads.g.doubleclick.net/~a/SfOLoSNUPSX82qtQbNnRcszQbn4/1/da"><img src="http://feedads.g.doubleclick.net/~a/SfOLoSNUPSX82qtQbNnRcszQbn4/1/di" border="0" ismap="true"></img></a></p>
<div>
<a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Makeuseof?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=lQ1xio9f9wU:l4ELdJI3oJo:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=lQ1xio9f9wU:l4ELdJI3oJo:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=lQ1xio9f9wU:l4ELdJI3oJo:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:I9og5sOYxJI"><img src="http://feeds.feedburner.com/~ff/Makeuseof?d=I9og5sOYxJI" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Makeuseof?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Makeuseof?a=lQ1xio9f9wU:l4ELdJI3oJo:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Makeuseof?i=lQ1xio9f9wU:l4ELdJI3oJo:D7DqB2pKExk" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/Makeuseof/~4/lQ1xio9f9wU" height="1" width="1" /></p>
<p><img src="http://sonofbyte.com/wp-content/uploads/2010/02/02c942da95-180x171.jpg" /></p>
<p>Continued here:<br />
<a target="_blank" href="http://feedproxy.google.com/~r/Makeuseof/~3/lQ1xio9f9wU/" title="How To Create Your Own Lifestream On A Wordpress Blog In 3 Easy Steps">How To Create Your Own Lifestream On A Wordpress Blog In 3 Easy Steps</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/feed/" rel="tag">feed</a>, <a href="http://sonofbyte.com/tag/how-to/" rel="tag">how to</a>, <a href="http://sonofbyte.com/tag/lifestream/" rel="tag">lifestream</a>, <a href="http://sonofbyte.com/tag/online/" rel="tag">online</a>, <a href="http://sonofbyte.com/tag/personal/" rel="tag">personal</a>, <a href="http://sonofbyte.com/tag/php/" rel="tag">php</a>, <a href="http://sonofbyte.com/tag/social-bookmarking/" rel="tag">social-bookmarking</a>, <a href="http://sonofbyte.com/tag/wordpress/" rel="tag">wordpress</a>, <a href="http://sonofbyte.com/tag/yahoo/" rel="tag">yahoo</a><br /> Posted in <a href="http://sonofbyte.com/category/main/" title="View all posts in Main" rel="category tag">Main</a> | <a href="http://sonofbyte.com/2010/02/how-to-create-your-own-lifestream-on-a-wordpress-blog-in-3-easy-steps/#comments" title="Comment on How To Create Your Own Lifestream On A Wordpress Blog In 3 Easy Steps">1 Comment »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-12828 post hentry category-featured category-main tag-code tag-design tag-development tag-information tag-main tag-real-estate tag-usability tag-user tag-validation tag-web-design tag-website tag-work">
<h3 id="post-12828"><a href="http://sonofbyte.com/2010/02/best-practices-for-hints-and-validation-in-web-forms/" rel="bookmark" title="Permanent Link to Best Practices for Hints and Validation in Web Forms">Best Practices for Hints and Validation in Web Forms</a></h3>
<small>Thursday, February 25th, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F02%2Fbest-practices-for-hints-and-validation-in-web-forms%2F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2F9fdhzS%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Best%20Practices%20for%20Hints%20and%20Validation%20in%20Web%20Forms%22%20%7D);"></div>
<p>
<p>Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time.</p>
<p>Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart.</p>
<p><a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/"><img src="http://images.sixrevisions.com/2010/02/27-19_hints_validation_lead_image.jpg" width="550" height="200" alt="Best Practices for Hints and Validation in Web Forms" /></a></p>
<p><span></span></p>
<p>Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form.</p>
<p>Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even <em>enjoy</em> filling out.</p>
<h3>Hints in Web Forms</h3>
<p>Validation is frequently used to provide users with a response on what information they should have entered when an error occurs.</p>
<p>By using a number of helpful hints, we can provide much of this information before they even enter their name. By showing more information before a user submits a form, we can reduce the chance of an error happening.</p>
<p>Information available prior to submission can come in three forms:</p>
<p><strong>Labels:</strong> These should quickly describe what information should be entered into an input field—this could be their username, password, email, etc.</p>
<p><strong>Required or optional information:</strong> an input field should be denoted as required or optional, usually by an asterisk (*) or any cues or text-based hints that tell the form user they can’t leave a field blank.</p>
<p><strong>Help hints:</strong> Help hints function to give the user additional tips on how to format their information. For example, a help hint might tell a user what the password requirements are (as shown below).</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-01_typesofhints.jpg" width="550" height="471" alt="http://bc-partners.net/contact/" /></p>
<h3>Alignment of Labels</h3>
<p>Of course, all information should be placed in such a way that it is clearly associated to a given input field, but the alignment of a label can actually affect not only a successful submission, but also the speed of completion.<br />
The alignment of a label is typically either left, right or top; there are benefits and disadvantages to each alignment:</p>
<p><strong>Top labels</strong>: Positioning a label at the top of input fields improves the association between the label and field, but does tend to give the impression of a longer form.</p>
<p><strong>Right labels:</strong> Labels at the right of the input fields reduces the vertical space of the web form, and improves the association between the label and input. However, right labels can reduce the readability and scanability of web forms.</p>
<p><strong>Left labels:</strong> Labels at the left of form fields can make for easier reading of the labels, and also makes the web form vertically shorter. However, it tends to affect the association of labels to inputs.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-02_labelalignment.jpg" width="550" height="550" alt="Alignment of Labels" /></p>
<p>Choosing the alignment of labels in a form can depend on the type of web form you are creating, the available space you have for your web form and which of the disadvantages are of greater concern to you in the given situation.</p>
<h3>Labels inside Inputs</h3>
<p>Some forms will use placeholders to indicate suitable examples of information within an input field, but in some instances, when screen real estate is at a premium, developers will use labels within the input fields.</p>
<p>This doesn’t pose too many issues on shorter forms, but as the form grows, this becomes an issue. By using the label within the input, it means that once a user enters any data, the label disappears and cannot be referred back to when reviewing the form either before or after submission.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-03_labelsinsideinputs.jpg" width="550" height="261" alt="Labels inside Inputs" /></p>
<p>Hints within inputs should be used only where sufficient information still exists to indicate an input’s purpose or requirements after the user has entered their information and the original hint has disappeared.</p>
<p>Additionally, labels inside input fields can be troublesome if done incorrectly, as they often rely on client-side scripting such as JavaScript.</p>
<p>One potential solution to the downsides of labels within inputs is using the <a href="http://www.csskarma.com/blog/sliding-labels/">sliding labels technique</a>—proposed by CSSKarma—where the labels move to the side and remains visible when the user focuses and enters text into the fields. However, this technique still doesn’t solve space limitations.</p>
<h3>Dynamic Hints</h3>
<p>If space is at a premium or your form looks too cluttered with hints beside each input field, then you can make them dynamic. A hint can appear as a tooltip based on user action either when the user focuses on the input field or when the user hovers over a help icon placed near the input field.</p>
<p>Using dynamic hints allows for more descriptive information to be communicated as the character limit isn’t restricted by the available space around the input field.</p>
<p><a href="http://gowalla.com/join"><img src="http://images.sixrevisions.com/2010/02/27-04_dynamichints.jpg" width="550" height="261" alt="Dynamic Hints" /></a></p>
<h3>Data Validation in Web Forms</h3>
<p>Given sufficient and correct use of hints, it may be possible that the majority of users will never see any validation, but this does not mean validation is not vitally important.</p>
<p>Validation provides a safety net for many users as well as a system to ensure the website is gathering the correct information required.</p>
<p>The structure on which the web is constructed allows us two methods by which we can validate a user input:</p>
<h4>Server-side Validation</h4>
<p>When using server-side validation, any information entered by the user is sent to the server to be checked rather than anything happening locally on an individual’s own computer. With the exception of using Ajax server-side form validation, this is a slower form of validation as it requires the user to first submit the form and then wait for the server to validate the data before reloading the page in order to provide a response.</p>
<p>However, what you lose in speed, you gain in security, as this process is not easily bypassed like client-side validation.</p>
<h4>Client-side Validation</h4>
<p>Although HTML5 will change the way we undertake client-side validation, JavaScript is commonly the language used for client-side validation today. Because users can disable JavaScript in their browser, a website cannot rely solely on JavaScript as a method of validation.</p>
<p>Instead, client-side validation should be seen as an extra layer on top of server-side validation.</p>
<h4>Real-time Validation</h4>
<p>Real-time validation is one of these server-side validation disadvantages that client-side validation allows us to solve. Although client-side validation can be activated via a submit button too, there is also the opportunity to use real-time validation as users enter data into the form.</p>
<p>Real-time validation is where JavaScript can be used to provide an instant response to a user action. So rather than having to fill out the entire form and pressing submit, the user gets an instant response as they are typing so that they can make immediate corrections if necessary.</p>
<p>One example of real-time validation would be a password strength indicator where each key stroke triggers the validation and sends a response to indicate to a user how weak or strong that website thinks the password they have chosen is.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-05_realtimevalidation.jpg" width="550" height="178" alt="http://gowalla.com/join" /></p>
<h3>The Good, the Bad and the Ugly of Web Form Validation</h3>
<p>Validation isn’t all bed of roses.</p>
<h4>The Good</h4>
<p>Just why do we use validation exactly? It’s not exactly the easiest thing to code, especially if you duplicate the work by using client-side and server-side web form validation.</p>
<p><strong>For users:</strong> Of course, it’s pretty obvious that we do validation for our users. By using validation correctly, we create a user-friendly form that makes the process as easy and quick as possible.</p>
<p><strong>For obtaining</strong> <strong>correct information:</strong> It might create a usable experience for users but it also ensures the website receives the correct information it requires and in the format necessary to store it in a database for future use.</p>
<p><strong>For <strong>spam protection:</strong></strong> By validating for specific information, we can cut out some of the spam that a form may otherwise receive. However, keep in mind that any validation we put in place for spam should never affect the user experience. Remember that users are unconcerned with the level of spam you may receive.</p>
<h4>The Bad</h4>
<p>Validation isn’t all good though, as developers and clients alike have been known to abuse forms, forgetting the original purpose of the form and creating something that isn’t all too user-friendly:</p>
<p><strong>Unusual required fields:</strong> Rather than creating a form with only the information a user truly needs to continue, we enter optional fields. Sometimes these are useful for the user, such as extra address fields or additional information text areas. In other cases they might help site owners gather such information as “Where did you hear about us?”</p>
<p>When these traditionally optional fields are required by the validation, they create a barrier for completion and causes the user to wonder why such information is requested of them.</p>
<p><strong>Restrictive formats:</strong> Where possible, we will ensure users enter information in the format we expect. But at times, validation goes too far and constricts the user to a given format that causes validation errors where they shouldn’t exist. This usually forces a user to jump through hoops to meet the specific criteria laid out to suit the system. One example would be the requirement of no spaces in a phone number. This is something that should be amended by the code, not the user. Another example of this is having too many requirements for the type of password you need (e.g. “Must have three numbers, a capital letter, and must be between 6-12 characters only”).</p>
<h4>The Ugly</h4>
<p>As we all know, some malicious users on the Web are out to cause mischief by bringing down websites. When developers are a little lax with their validation, it allows some of these people the opportunity to abuse exploits like <a href="http://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank">cross-site scripting</a> (abbreviated as XSS) to break a website or gain access to areas or information they shouldn’t be accessing. It’s an unfortunate reality of the web, and something that can be addressed with validation techniques.</p>
<p>By protecting your site against such attacks you ensure the website is always live for you and your users and that your users’ information is always safe.</p>
<p>For more information on XSS, visit <a href="http://ha.ckers.org/xss.html" target="_blank">XSS (Cross Site Scripting) Cheat Sheet</a> on ha.ckers.org.</p>
<h3>Validation Responses</h3>
<p>Simply outputting hints and validation isn’t enough. Design plays its part too, helping communicate and reinforce the messages any validation is outputting.</p>
<p>Many different factors help towards ensuring that a user, if they do get an error on their first attempt, can correct their submission and get the form sent in second time around.</p>
<h4>Colour</h4>
<p>Colour is a great design element to use in order to reinforce a message. Commonly, red would be used in the instance of an error, and green for success. The use of colour clearly indicates to a user even before they read any textual responses that result from form validation.</p>
<p>Colour can be used in multiple ways within a web form to highlight a particular error. As well as using colour for any validation response, you can reinforce what specific inputs have errors by using colour to alter the label, border or background of a given input field.</p>
<p>However, it’s best to get a balance as we’re only trying to clearly indicate errors to a user, not beat them over the head with them.</p>
<p>As much as colour is a useful tool to communicate a given message, it can never be used independently to convey a message for accessibility reasons. Blind, low-vision and colour-blind users will have issues in determining where errors have occurred if colour was the only method for indicating where errors have occurred.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-06_colour.jpg" width="550" height="550" alt="Colour" /></p>
<h3>Positioning</h3>
<p>How you position any validation elements can also have an effect on how usable a form is, especially when it comes to longer forms:</p>
<p><strong>Top of the page:</strong> This is a validation response placed at the top of the page, most frequently directly above the form. For server-side validation without Ajax, this is great for screen-reader users if done correctly, because it can be the first element they read when the page reloads.</p>
<p><strong>Inline:</strong> Any validation placed in close proximity to the input where an error has occurred is considered “inline”. This can work well for real-time validation and for longer web forms.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-07_positioning.jpg" width="550" height="550" alt="Positioning" /></p>
<p>If you have a long form that disappears below the fold, then using both of these techniques is a good idea.</p>
<p>For example, if an error occurred towards the bottom of the form, and you use both techniques, then the user may quickly see a response that clearly gives them a hint for correcting the mistake when scrolling through the form.</p>
<p>If you are using real-time validation, then the use of a top of the page response would be unnecessary, as the user would only require inline validation in this instance.</p>
<h4>Using Icons and Visual Cues</h4>
<p>Although they aren’t as instantly recognizable as colour, icons are again a way of communicating a message before a user has a chance to read any textual response. Icons are a great way of displaying inline validation where screen real estate is at a minimum, but only works to reinforce any textual response at the top of the page.</p>
<p>Examples of good icons to use in validation would be a tick mark (checkmark) for success, or a red cross (X) for an error.</p>
<h4>Other Styling Techniques for Validation Responses</h4>
<p>There is a wealth of other style elements that you can add to particular responses, such as borders, font weights, backgrounds, etc. The use of these would depend on the positioning of your errors, how you are displaying the errors, and what suits the design of your website.</p>
<p>Although any response messages should have a level of differentiation with surrounding elements in order to be recognizable—there is no reason they should not be symbiotic to the rest of the website design.</p>
<h3>Web Form Validation Response Messages</h3>
<p>Styling and positioning only helps indicate that an error has occurred, and where it has occurred. It is the textual responses the website outputs that communicate what is necessary to a user.</p>
<p>Any error message should communicate the following as best it can:</p>
<p><strong>List all errors:</strong> To make sure a user gets the form on the next attempt, all the errors should be displayed in close proximity to each other for convenience. This allows the user to go to that list, instead of hunting it down throughout the web form.</p>
<p><strong>Where the errors are:</strong> An error response should mention what input field the error relates to. When referring to an input, you would traditionally use the label of that input as this is how users will identify with particular inputs best.</p>
<p><strong>How an error may be fixed:</strong> If the error is complex —more intricate than simply letting the user know they missed a required field—it’s always best to communicate what the solution might be. If a telephone number can’t accept alphabetic characters, then tell the user. If a user didn’t enter their email address in the correct format, you might show them an example of what the correct format is.</p>
<h4>Sticky form information</h4>
<p>When submitting a form with errors, a user will expect that the form enable them to adjust their previous responses, rather than having to fill out the entire form again. Not having the form retain previous user entry could lead to dropped forms.<br />
Making sure the data a user has entered is “sticky” allows them to more easily understand the error that has occurred.</p>
<h4>Don’t Use Alert Dialog Boxes for Validation Responses</h4>
<p>Primarily used with client-side validation, <a href="http://en.wikipedia.org/wiki/Alert_dialog_box">Alert dialog boxes</a> issue problems for users, often creating a barrier for completion. Here are a few reasons why:</p>
<p><strong>Alert dialog boxes are temporary:</strong> When an alert box is displayed, it must first be closed before returning to the form. Once closed, the only way to view the error again is to re-submit the form. This gives the user no information to refer back to. Unless you are catering exclusively to people with extraordinary memory skills, it is a safe assumption to say that most Web users have a short attention and memory span. </p>
<p><strong>Alert dialog boxes are troublesome for a submitted form with multiple errors:</strong> When using alert boxes and popup windows, it is common that only the first error found is displayed, rather than a full list of errors. The form is then re-submitted by the user multiple times to discover multiple different errors.</p>
<p><strong>Alert dialog boxes are text-only:</strong> Alert boxes can only display text to communicate a message so no other design elements can be used to create a different style depending on an error or success message.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-08_popup.jpg" width="550" height="273" alt="Positioning" /></p>
<h3>Don’t Use Error Pages for Validation Responses</h3>
<p>Another poor form of validation is when using error pages. This is where the form sends the information to a separate page to validate, and any errors that do exist get output on this page without the original form. This means the user must navigate back to the form where they may lose the information they previously entered, as well as the errors they need to correct.</p>
<p><img src="http://images.sixrevisions.com/2010/02/27-09_errorpages.jpg" width="550" height="211" alt="Don't Use Error Pages for Validation Responses" /></p>
<h3>Examples of Good Forms with Hints and Validation</h3>
<p><img src="http://images.sixrevisions.com/2010/02/27-10_twitter.jpg" width="550" height="450" alt="https://twitter.com/signup" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-11_dribbble.jpg" width="550" height="450" alt="http://dribbble.com/session/new" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-12_freegobbler.jpg" width="550" height="450" alt="http://www.freegobbler.com/" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-13_phynk.jpg" width="550" height="450" alt="http://www.phynk.net/" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-14_picnik.jpg" width="550" height="450" alt="http://www.picnik.com/app#/home/welcome" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-15_versions.jpg" width="550" height="450" alt="https://register.madebysofa.com/versions/buy?referrer=versionsapp.com" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-16_unleashedideas.jpg" width="550" height="450" alt="http://www.unleashedideas.com/contact" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-17_notaapp.jpg" width="550" height="450" alt="http://notaapp.com/" /></p>
<p><img src="http://images.sixrevisions.com/2010/02/27-18_ommwriter.jpg" width="550" height="450" alt="http://www.ommwriter.com/en/contact-and-feedback.html" /></p>
<h3>Conclusion</h3>
<p>Forms are can be a complex feature of any website for both the developer and user, but they are the only method in which the user and the website can interact with one another.</p>
<p>This is why web forms have to be given careful consideration—unusable forms can seriously affect your business and your profits.</p>
<p>Sometimes the effort that goes into a web form and validation design is minuscule, even on the best-designed sites. Outputting a text error simply isn’t enough—you need ensure it provides sufficient information in both content and design to achieve the best user experience.</p>
<p>So rather than thinking of your form and validation as just another thing to get finished, consider spending more time creating web forms that are as perfect as the rest of your website.</p>
<h3>Related Content</h3>
<ul>
<li><a href="http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/">25 Stylish Examples of Web Forms</a></li>
<li><a href="http://sixrevisions.com/usabilityaccessibility/five-simple-but-essential-web-usability-tips/">Five Simple but Essential Web Usability Tips</a></li>
<li><a href="http://sixrevisions.com/usabilityaccessibility/10-simple-web-accessibility-tips-you-can-do-today/">10 Simple Web Accessibility Tips You Can Do Today</a></li>
<li><em>Related categories</em>: <a href="http://sixrevisions.com/category/user-interface/">User Interface</a> and <a href="http://sixrevisions.com/category/web-development/">Web Development</a></li>
</ul>
<h3>About the Author</h3>
<p><img src="http://images.sixrevisions.com/authors/kean_richmond_small.jpg" alt="" width="80" height="80" /><span><strong>Kean Richmond</strong> is a full-time web designer and developer based in Yorkshire, UK. Working as a generalist in most areas of web design and development he currently works at <strong><a href="http://www.bronco.co.uk/">Bronco</a></strong>, tweets as <strong>@<a href="http://www.twitter.com/keanrichmond.com">keanrichmond</a></strong> and rants on his <strong><a href="http://www.keanrichmond.com/">personal blog</a></strong>.</span></p>
<div>
<a href="http://feeds.feedburner.com/~ff/SixRevisions?a=XKwm2ehRZQc:2QOOiGF1_wU:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/SixRevisions?i=XKwm2ehRZQc:2QOOiGF1_wU:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=XKwm2ehRZQc:2QOOiGF1_wU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SixRevisions?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=XKwm2ehRZQc:2QOOiGF1_wU:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SixRevisions?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=XKwm2ehRZQc:2QOOiGF1_wU:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SixRevisions?i=XKwm2ehRZQc:2QOOiGF1_wU:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=XKwm2ehRZQc:2QOOiGF1_wU:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/SixRevisions?d=7Q72WNTAKBA" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/SixRevisions/~4/XKwm2ehRZQc" height="1" width="1" /></p>
<p><img src="http://sonofbyte.com/wp-content/uploads/2010/03/0d671cfa6fimage.jpg-180x65.jpg" /></p>
<p>Go here to see the original:<br />
<a target="_blank" href="http://feedproxy.google.com/~r/SixRevisions/~3/XKwm2ehRZQc/" title="Best Practices for Hints and Validation in Web Forms">Best Practices for Hints and Validation in Web Forms</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/design/" rel="tag">Design</a>, <a href="http://sonofbyte.com/tag/development/" rel="tag">development</a>, <a href="http://sonofbyte.com/tag/information/" rel="tag">information</a>, <a href="http://sonofbyte.com/tag/main/" rel="tag">Main</a>, <a href="http://sonofbyte.com/tag/real-estate/" rel="tag">real-estate</a>, <a href="http://sonofbyte.com/tag/usability/" rel="tag">usability</a>, <a href="http://sonofbyte.com/tag/user/" rel="tag">user</a>, <a href="http://sonofbyte.com/tag/validation/" rel="tag">validation</a>, <a href="http://sonofbyte.com/tag/web-design/" rel="tag">web-design</a>, <a href="http://sonofbyte.com/tag/website/" rel="tag">website</a>, <a href="http://sonofbyte.com/tag/work/" rel="tag">work</a><br /> Posted in <a href="http://sonofbyte.com/category/featured/" title="View all posts in Featured" rel="category tag">Featured</a>, <a href="http://sonofbyte.com/category/main/" title="View all posts in Main" rel="category tag">Main</a> | <a href="http://sonofbyte.com/2010/02/best-practices-for-hints-and-validation-in-web-forms/#comments" title="Comment on Best Practices for Hints and Validation in Web Forms">1 Comment »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-6357 post hentry category-themes tag-case tag-code tag-cool tag-front tag-page tag-permanent-link tag-template tag-tutorials tag-website">
<h3 id="post-6357"><a href="http://sonofbyte.com/2010/02/how-to-create-a-comments-central-page-template-in-wordpress/" rel="bookmark" title="Permanent Link to How to Create a Comments Central Page Template in WordPress">How to Create a Comments Central Page Template in WordPress</a></h3>
<small>Wednesday, February 24th, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F02%2Fhow-to-create-a-comments-central-page-template-in-wordpress%2F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22How%20to%20Create%20a%20Comments%20Central%20Page%20Template%20in%20WordPress%22%20%7D);"></div>
<p>
<p>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.</p>
<p>In short, this tutorial will teach you how to:</p>
<ol>
<li>create a Page Template,</li>
<li>use SQL queries in your code to fetch comments with varying parameters,</li>
<li>create a section of the Page that’s only viewable by Admin,</li>
<li>add support for a comment-related plugin.</li>
</ol>
<p><span></span></p>
<h3>Creating a Page Template</h3>
<p>The easiest way to create a Page Template is to open the page.php file in your theme, which will roughly look like this:</p>
<pre>
<?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(); ?>
</pre>
<p>Copy and paste page.php’s content and add this to the very top:</p>
<pre>
<?php
/*
Template Name: Comments Central
*/
?>
</pre>
<p>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.</p>
<h3>Fetching Comments</h3>
<p>For this Page Template, we’ll feature four different aspects of comments:</p>
<ul>
<li>Recent Comments,</li>
<li>Recent Trackbacks / Pingbacks,</li>
<li>Top Commenters,</li>
<li>Most Commented Posts,</li>
</ul>
<p>First, we’ll do <strong>Recent Comments</strong>:</p>
<pre>
<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>
</pre>
<p>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:</p>
<p><img src="http://www.themelab.com/wp-content/uploads/a7ud5.png" alt="List of Recent Comments" /></p>
<p>With a little CSS we can straighten that to look better:</p>
<pre>
#cc-recent-comments li {
width: 100%;
float: left;
list-style-type: none;
}
#cc-recent-comments li img {
float: left;
margin-top: -5px;
}
</pre>
<p><img src="http://www.themelab.com/wp-content/uploads/lEXPU.png" alt="List of Recent Comments with proper CSS" /></p>
<p>$template determines how the actual text will be written; this is based on the format made by <a href="http://wordpress.org/extend/plugins/wp-comment-remix/">WP Comment Remix</a>, and you can follow that link to learn more on customizing it (look for ‘tokens’).</p>
<p>Next is <strong>Recent Pingbacks / Trackbacks</strong>:</p>
<pre>
<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>
</pre>
<p>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:</p>
<p><img src="http://www.themelab.com/wp-content/uploads/pDLJE.png" alt="List of Recent Pingbacks and Trackbacks" /></p>
<p>Here’s the code for <strong>Top Commenters</strong>:</p>
<pre>
<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>
</pre>
<p>Nothing too mind-blowing there. Do notice the cool <a href="http://codex.wordpress.org/Function_Reference/get_avatar"><code>get_avatar()</code></a> 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:</p>
<pre>
#cc-top-commenters li {
width: 100%;
float: left;
list-style-type: none;
}
#cc-top-commenters li img {
float: left;
margin-top: -5px;
}
</pre>
<p><img src="http://www.themelab.com/wp-content/uploads/YiAJV.png" alt="List of Top Commenters" /></p>
<p>Last is <strong>Most Commented Posts</strong>:</p>
<pre>
<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>
</pre>
<p><img src="http://www.themelab.com/wp-content/uploads/FWJet.png" alt="List of Most Commented Post" /></p>
<p>And that’s it. Next, we’ll add some extra coolness by adding some stuff that only the admin can see.</p>
<h3>Admin-only Information</h3>
<p>To show stuff only for the admins, we can use this code snippet from <a href="http://www.themelab.com/wpcandy.com/articles/tutorials/tutorial-content-for-admin-only.html">WPCandy</a>:</p>
<pre>
<?php
global $user_ID;
if( $user_ID ) :
if( current_user_can('level_10') ) :
// admin-only stuff here.
endif;
endif; ?>
</pre>
<p>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:</p>
<pre>
<?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>
</pre>
<p><img src="http://www.themelab.com/wp-content/uploads/QmTkK.png" alt="Admin" /></p>
<p><code>wp_count_comments()</code> is a neat function that returns an array of various comment stat numbers. We’re adding links to the respective comment administration area too.</p>
<h3>Adding Some Sparks</h3>
<p>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 <a href="http://wordpress.org/extend/plugins/activitysparks/">Activity Sparks</a> plugin, which can “display a ’sparkline’ style graph in your sidebar indicate post and/or comment activity. ” Sounds great to me.</p>
<p>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:</p>
<pre>
<?php
if(function_exists('activitysparks')) {
activitysparks(array('dataset'=>'legend','height_px'=>100,'width_px'=>600,'period'=>30, 'ticks'=>24));
}
?>
</pre>
<p><img src="http://www.themelab.com/wp-content/uploads/V6LDW.png" alt="ActivitySparks plugin" /></p>
<p><a href="http://codex.wordpress.org/Managing_Plugins#Hiding_Plugins_When_Deactivated"><code>function_exists()</code></a> checks whether a particular function is available; in our case, the <code>activitysparks</code> 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).</p>
<h3>Result and Example</h3>
<p>An example of this Page Template is <a href="http://www.wplover.com/comments-central">available here</a>. 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 <a href="http://pastebin.com/u4wBFcYL">is available at Pastebin</a>.</p>
<h3>Credits and Further Readings</h3>
<ul>
<li>
The codes used to display the various recent and top comments are taken from <a href="http://wordpress.org/extend/plugins/wp-comment-remix/">WP Comment Remix</a> 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 <code>$template</code> we use to format the output can be learned more from that page, too.
</li>
<li><a href="http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates">Creating Your Own Page Template</a> on the WordPress Codex.</li>
<li><a href="http://www.themelab.com/wpcandy.com/articles/tutorials/tutorial-content-for-admin-only.html">Displaying admin-only content tutorial</a> on WPCandy.</li>
<p>Related posts:
<ol>
<li><a href="http://www.themelab.com/2008/05/09/add-gravatar-support-to-your-wordpress-comments/" rel="bookmark" title="Permanent Link: Add Gravatar Support to Your WordPress Comments">Add Gravatar Support to Your WordPress Comments</a></li>
<li><a href="http://www.themelab.com/2008/04/28/you-dont-need-a-blog-on-your-front-page/" rel="bookmark" title="Permanent Link: You Don’t Need a Blog On Your Front Page">You Don’t Need a Blog On Your Front Page</a></li>
<li><a href="http://www.themelab.com/2009/12/15/spectacu-la-releases-threaded-comments-plugin/" rel="bookmark" title="Permanent Link: Spectacu.la Releases Threaded Comments Plugin">Spectacu.la Releases Threaded Comments Plugin</a></li>
</ol>
<div>
<a href="http://feeds.feedburner.com/~ff/ThemeLab?a=FzMhT577WR4:ov1NlkisCNA:hJo_UCMZ9e0"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=hJo_UCMZ9e0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=FzMhT577WR4:ov1NlkisCNA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ThemeLab?i=FzMhT577WR4:ov1NlkisCNA:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=FzMhT577WR4:ov1NlkisCNA:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/ThemeLab?i=FzMhT577WR4:ov1NlkisCNA:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=FzMhT577WR4:ov1NlkisCNA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ThemeLab?a=FzMhT577WR4:ov1NlkisCNA:3Nb2VdUv6vk"><img src="http://feeds.feedburner.com/~ff/ThemeLab?d=3Nb2VdUv6vk" border="0"></img></a>
</div>
</p>
<p><img src="http://sonofbyte.com/wp-content/uploads/2010/02/7e2622cd2e-180x149.png" /></p>
<p>More:<br />
<a target="_blank" href="http://www.themelab.com/2010/02/24/how-to-create-a-comments-central-page-template-in-wordpress/" title="How to Create a Comments Central Page Template in WordPress">How to Create a Comments Central Page Template in WordPress</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/case/" rel="tag">case</a>, <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/cool/" rel="tag">cool</a>, <a href="http://sonofbyte.com/tag/front/" rel="tag">front</a>, <a href="http://sonofbyte.com/tag/page/" rel="tag">page</a>, <a href="http://sonofbyte.com/tag/permanent-link/" rel="tag">permanent-link</a>, <a href="http://sonofbyte.com/tag/template/" rel="tag">template</a>, <a href="http://sonofbyte.com/tag/tutorials/" rel="tag">tutorials</a>, <a href="http://sonofbyte.com/tag/website/" rel="tag">website</a><br /> Posted in <a href="http://sonofbyte.com/category/news/wordpress2/themes/" title="View all posts in Themes" rel="category tag">Themes</a> | <a href="http://sonofbyte.com/2010/02/how-to-create-a-comments-central-page-template-in-wordpress/#respond" title="Comment on How to Create a Comments Central Page Template in WordPress">No Comments »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-5147 post hentry category-news tag-a-quick-search tag-code tag-constantly-edit tag-css tag-customization tag-design tag-footer-stuff tag-form-containing tag-have-the-skills tag-insert-it-into tag-insert-the-code tag-source tag-wordpress-plugins">
<h3 id="post-5147"><a href="http://sonofbyte.com/2010/02/footer-stuff-allows-you-to-seamlessly-add-content-to-themes/" rel="bookmark" title="Permanent Link to Footer Stuff Allows You To Seamlessly Add Content to Themes">Footer Stuff Allows You To Seamlessly Add Content to Themes</a></h3>
<small>Saturday, February 20th, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F02%2Ffooter-stuff-allows-you-to-seamlessly-add-content-to-themes%2F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Footer%20Stuff%20Allows%20You%20To%20Seamlessly%20Add%20Content%20to%20Themes%22%20%7D);"></div>
<p>
<p>The biggest reason many of us require to edit themes is to add JavaScript libraries, CSS codes or analytics tracking code. However, the problem with editing themes is that you will lose all your customization when you decide to change your theme or redesign it.</p>
<p>Most analytics software do provide users with plugins to insert code into themes, but why use plugins to insert simple HTML code into your theme? I have been using a very useful plugin called <a href="http://www.roytanck.com/2008/12/22/footer-stuff-is-ready-to-make-your-life-easier/" target="_blank">Footer Stuff</a> (<a href="http://wordpress.org/extend/plugins/footer-stuff/" target="_blank">WP repo link</a>) which allows me to add code to the header and the footer of the site without having to manually edit the theme.</p>
<p>The best part of the plugin though is the fact that it will insert the code into the theme no matter how often I change the theme without having to constantly edit the theme.</p>
<h3>Footer Stuff Walkthrough</h3>
<p>Head over to the plugins page in your admin dashboard and do a quick search for footer stuff, install and activate the plugin and you are ready to add code to your theme.</p>
<p>An option to personalize footer stuff is present under Appearance. Clicking on the Footer Stuff link will display a HTML form containing two text boxes. The box on the top is to add content to your footer, and the second one is to add content to your header.</p>
<p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/a-quick-search/" rel="tag">a-quick-search-</a>, <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/constantly-edit/" rel="tag">constantly-edit</a>, <a href="http://sonofbyte.com/tag/css/" rel="tag">CSS</a>, <a href="http://sonofbyte.com/tag/customization/" rel="tag">customization</a>, <a href="http://sonofbyte.com/tag/design/" rel="tag">Design</a>, <a href="http://sonofbyte.com/tag/footer-stuff/" rel="tag">footer-stuff</a>, <a href="http://sonofbyte.com/tag/form-containing/" rel="tag">form-containing</a>, <a href="http://sonofbyte.com/tag/have-the-skills/" rel="tag">have-the-skills</a>, <a href="http://sonofbyte.com/tag/insert-it-into/" rel="tag">insert-it-into</a>, <a href="http://sonofbyte.com/tag/insert-the-code/" rel="tag">insert-the-code</a>, <a href="http://sonofbyte.com/tag/source/" rel="tag">source</a>, <a href="http://sonofbyte.com/tag/wordpress-plugins/" rel="tag">wordpress plugins</a><br /> Posted in <a href="http://sonofbyte.com/category/news/" title="View all posts in News" rel="category tag">News</a> | <a href="http://sonofbyte.com/2010/02/footer-stuff-allows-you-to-seamlessly-add-content-to-themes/#respond" title="Comment on Footer Stuff Allows You To Seamlessly Add Content to Themes">No Comments »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="post-7741 post hentry category-design category-featured tag-a-question-yet tag-answers tag-code tag-coding tag-css tag-design tag-display-their tag-html tag-javascript tag-jquery tag-php tag-reviver-answers tag-web-design">
<h3 id="post-7741"><a href="http://sonofbyte.com/2010/02/a-selection-of-code-snippets-from-design-reviver-answers/" rel="bookmark" title="Permanent Link to A Selection of Code Snippets from Design Reviver Answers">A Selection of Code Snippets from Design Reviver Answers</a></h3>
<small>Friday, February 19th, 2010</small>
<div class="entry">
<div style="float:right;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=350;
hopfeed_width=250;
hopfeed_cellpadding=5;
hopfeed_rows=5;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#000000';
hopfeed_border_color='#FFFFFF';
hopfeed_link_font_color='#273448';
hopfeed_link_font_hover_color='#273448';
hopfeed_background_color='#FFFFFF';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
<div class="topsy_widget_data topsy_theme_blue" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%3A%2F%2Fsonofbyte.com%2F2010%2F02%2Fa-selection-of-code-snippets-from-design-reviver-answers%2F%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22A%20Selection%20of%20Code%20Snippets%20from%20Design%20Reviver%20Answers%22%20%7D);"></div>
<p>
<p>Everyday Design Reviver Answers is offering solutions via useful snippets of code, helpful resources and general tips for all your web design issues. And as such we would like to share with you our favorite code snippets from this last week.</p>
<p><span></span></p>
<p>It has been yet another good week, thanks for your support!</p>
<p><strong><em>“<a href="http://answers.designreviver.com/">Have you asked a question yet?</a>“</em></strong></p>
<h4><a href="http://answers.designreviver.com/2238/">How Can I Display More Than One Twitter Feed On My WordPress Blog?</a></h4>
<blockquote><p>We do this by accessing the persons Twitter account RSS feed, then fetching it and embedding it on your site.</p>
<p>Replace the example RSS’s with the ones you’d like.</p>
<p><code>get_item_quantity(3);<br />
$rss_items = $rss->get_items(0, $maxitems);<br />
?></p>
<ul>
<?php if ($maxitems == 0) echo '</p>
<li>No items.</li>
<p>';<br />
else<br />
// Loop through each feed item and display each item as a hyperlink.<br />
Foreach ( $rss_items as $item ) : ?></p>
<li>
<a href='get_permalink(); ?>'><br />
get_title(); ?><br />
</a>
</li>
</ul>
<p></code></p>
</blockquote>
<h4><a href="http://answers.designreviver.com/2237/">I Have Multiple Authors On My Site, How Can I Display Their Info?</a></h4>
<blockquote><p>If you want to display their info at the bottom or beginning of the post, then use this and place it in the corresponding area of your WordPress files. (i.e. Single.PHP or Comments.PHP)</p>
<p><code></p>
<div>
<div></div>
<div></div>
<div></div>
</div>
<p></code></p>
<p>Edit the author box as necessary.</p>
</blockquote>
<h4><a href="http://answers.designreviver.com/2236/">How Can I Display Someone Else’s FeedBurner Post On My Site?</a></h4>
<blockquote><p>You can add the following jQuery code anywhere you want on the site (i.e. Sidebar, footer, etc.) Just remember to replace and specify which feed you’ll be recalling.</p>
<p><code>$(document).ready(function(){<br />
$.ajax({<br />
type: "GET",<br />
url: "http://feeds.feedburner.com/examplefeed",<br />
success: Function(data){<br />
$("#date").text($(data).find("item:first>pubDate:first").text());<br />
$("#title").html("link:first").text()+"'>"+$(data).<br />
find("item:first>title:first").text()+"");<br />
$("#description").html($(data).<br />
find("item:first>description:first").text());<br />
}</code></p>
</blockquote>
<h4><a href="http://answers.designreviver.com/2225/">What Can I Use To Place A Shadow Behind My Images And Outlines?</a></h4>
<blockquote><p>If you’re refering to having your images and boxes with a drtop shadow, then you need the Box Shadow CSS feature to work for you. Here’s what you need to place in your CSS:</p>
<p><code>.shadow {<br />
box-shadow: 3px 3px 3px #f2f2f2;<br />
-moz-box-shadow: 3px 3px 3px #f2f2f2;<br />
-webkit-box-shadow: 3px 3px 3px #f2f2f2;<br />
}</code></p>
</blockquote>
<h4><a href="http://answers.designreviver.com/2235/">What’s The Easiest Way To Redirect A Specific Page On My Site?</a></h4>
<blockquote><p>If you want to redirect users to another site once they enter a specific area on your site then you just have to use some of this Javascript code in the page to be redirected from:</p>
<p><code></p>
<p></code></p>
<p>Replace the www.google.com with the URL address you wish to redirect to.</p>
</blockquote>
<h4>Unanswered Questions</h4>
<p>There are always some questions that seem to get through the net, can you help us answer them?</p>
<ol>
<li><a href="http://answers.designreviver.com/3510/">What Is A Good Resource To Create Style Sheets For Multiple Web Browsers?</a></li>
<li><a href="http://answers.designreviver.com/3448/">How To Create A Profile Which Can Be Navigated, Without Using HTML Or Flash?</a></li>
<li><a href="http://answers.designreviver.com/3435/">How Do You Find New Clients?</a></li>
<li><a href="http://answers.designreviver.com/3434/">What Are Your Top Usability Tips For Web Designs?</a></li>
<li><a href="http://answers.designreviver.com/3433/">What’s A Good Mobile Framework To Use?</a></li>
<li><a href="http://answers.designreviver.com/3432/">How Can I Integrate ECommerce On My Site Without Any Coding?</a></li>
</ol>
<p>Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.</p>
<p><img src="http://feeds.feedburner.com/~r/DesignReviver/~4/-y6iFe307z8" height="1" width="1" /></p>
<p>More:<br />
<a target="_blank" href="http://feedproxy.google.com/~r/DesignReviver/~3/-y6iFe307z8/" title="A Selection of Code Snippets from Design Reviver Answers">A Selection of Code Snippets from Design Reviver Answers</a></p>
</div>
<p class="postmetadata">Tags: <a href="http://sonofbyte.com/tag/a-question-yet/" rel="tag">a-question-yet</a>, <a href="http://sonofbyte.com/tag/answers/" rel="tag">answers</a>, <a href="http://sonofbyte.com/tag/code/" rel="tag">code</a>, <a href="http://sonofbyte.com/tag/coding/" rel="tag">coding</a>, <a href="http://sonofbyte.com/tag/css/" rel="tag">CSS</a>, <a href="http://sonofbyte.com/tag/design/" rel="tag">Design</a>, <a href="http://sonofbyte.com/tag/display-their/" rel="tag">display-their</a>, <a href="http://sonofbyte.com/tag/html/" rel="tag">html</a>, <a href="http://sonofbyte.com/tag/javascript/" rel="tag">javascript</a>, <a href="http://sonofbyte.com/tag/jquery/" rel="tag">jquery</a>, <a href="http://sonofbyte.com/tag/php/" rel="tag">php</a>, <a href="http://sonofbyte.com/tag/reviver-answers/" rel="tag">reviver-answers</a>, <a href="http://sonofbyte.com/tag/web-design/" rel="tag">web-design</a><br /> Posted in <a href="http://sonofbyte.com/category/design/" title="View all posts in Design" rel="category tag">Design</a>, <a href="http://sonofbyte.com/category/featured/" title="View all posts in Featured" rel="category tag">Featured</a> | <a href="http://sonofbyte.com/2010/02/a-selection-of-code-snippets-from-design-reviver-answers/#comments" title="Comment on A Selection of Code Snippets from Design Reviver Answers">1 Comment »</a></p>
<p><script type="text/javascript" class="owbutton" src="http://www.onlywire.com/btn/button_12650"></script></p>
</div>
<div class="navigation">
<div class="wp-pagenavi">
<span class="pages">Page 1 of 4</span><span class="current">1</span><a href="http://sonofbyte.com/tag/code/page/2/" class="page" title="2">2</a><a href="http://sonofbyte.com/tag/code/page/3/" class="page" title="3">3</a><a href="http://sonofbyte.com/tag/code/page/4/" class="page" title="4">4</a><a href="http://sonofbyte.com/tag/code/page/2/" class="nextpostslink">»</a></div>
</div>
</div>
<div id="sidebar" role="complementary">
<ul>
<li id="whos-online" class="widget VisitorMaps_visitor_maps_widget"><h2 class="widgettitle">Who's Online</h2><p>24 visitors online now<br />23 guests, 1 members</p></li><li id="pages-3" class="widget widget_pages"><h2 class="widgettitle">Navigation</h2> <ul>
<li class="page_item page-item-3952"><a href="http://sonofbyte.com/about-us/" title="About Us">About Us</a></li>
<li class="page_item page-item-4673 current_page_parent"><a href="http://sonofbyte.com/blog/" title="Blog">Blog</a></li>
<li class="page_item page-item-1231"><a href="http://sonofbyte.com/contact/" title="Contact">Contact</a></li>
<li class="page_item page-item-4671"><a href="http://sonofbyte.com" title="Home">Home</a></li>
<li class="page_item page-item-8615"><a href="http://sonofbyte.com/subscribe/" title="Subscribe">Subscribe</a></li>
</ul>
</li><li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">By Subject</h2> <ul>
<li class="cat-item cat-item-2634"><a href="http://sonofbyte.com/category/css/" title="View all posts filed under CSS">CSS</a> (7)
</li>
<li class="cat-item cat-item-2713"><a href="http://sonofbyte.com/category/design/" title="View all posts filed under Design">Design</a> (279)
</li>
<li class="cat-item cat-item-2501"><a href="http://sonofbyte.com/category/featured/" title="View all posts filed under Featured">Featured</a> (198)
</li>
<li class="cat-item cat-item-2779"><a href="http://sonofbyte.com/category/flash/" title="View all posts filed under Flash">Flash</a> (19)
</li>
<li class="cat-item cat-item-2735"><a href="http://sonofbyte.com/category/freebies/" title="View all posts filed under Freebies">Freebies</a> (85)
</li>
<li class="cat-item cat-item-1"><a href="http://sonofbyte.com/category/main/" title="View all posts filed under Main">Main</a> (494)
</li>
<li class="cat-item cat-item-9"><a href="http://sonofbyte.com/category/news/" title="View all posts filed under News">News</a> (976)
<ul class='children'>
<li class="cat-item cat-item-2913"><a href="http://sonofbyte.com/category/news/joomla/" title="View all posts filed under Joomla">Joomla</a> (48)
</li>
<li class="cat-item cat-item-2962"><a href="http://sonofbyte.com/category/news/oscommerce/" title="View all posts filed under osCommerce">osCommerce</a> (155)
</li>
<li class="cat-item cat-item-2880"><a href="http://sonofbyte.com/category/news/wordpress2/" title="View all posts filed under Wordpress">Wordpress</a> (275)
<ul class='children'>
<li class="cat-item cat-item-9446"><a href="http://sonofbyte.com/category/news/wordpress2/themes/" title="View all posts filed under Themes">Themes</a> (145)
</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-6270"><a href="http://sonofbyte.com/category/tutorials-videos/" title="View all posts filed under Tutorials">Tutorials</a> (152)
</li>
<li class="cat-item cat-item-2595"><a href="http://sonofbyte.com/category/videos/" title="View all posts filed under Videos">Videos</a> (159)
</li>
</ul>
</li> <li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Topics</h2> <ul>
<li><a href="http://sonofbyte.com/2010/03/klivekenny-flash-site-template/" title="KliveKenny – Flash Site Template">KliveKenny – Flash Site Template </a></li>
<li><a href="http://sonofbyte.com/2010/03/business-co-flash-site-template/" title="Business.co – Flash Site Template">Business.co – Flash Site Template </a></li>
<li><a href="http://sonofbyte.com/2010/03/spring-vector-mix/" title="Spring Vector Mix">Spring Vector Mix </a></li>
<li><a href="http://sonofbyte.com/2010/03/asadal-vector-design-flowers-3/" title="Asadal Vector Design – Flowers 3">Asadal Vector Design – Flowers 3 </a></li>
<li><a href="http://sonofbyte.com/2010/03/apple-production-vector-mix/" title="Apple Production Vector Mix">Apple Production Vector Mix </a></li>
<li><a href="http://sonofbyte.com/2010/03/crystalline-v1-5-3-update-rockettheme-template/" title="Crystalline v1.5.3 Update – RocketTheme Template">Crystalline v1.5.3 Update – RocketTheme Template </a></li>
<li><a href="http://sonofbyte.com/2010/03/artworks-by-tyler-edlin/" title="Artworks by Tyler Edlin">Artworks by Tyler Edlin </a></li>
<li><a href="http://sonofbyte.com/2010/03/cool-websites-and-tools-march-11th/" title="Cool Websites and Tools [March 11th]">Cool Websites and Tools [March 11th] </a></li>
<li><a href="http://sonofbyte.com/2010/03/how-to-install-windows-7-on-your-netbook-from-a-usb-flash-drive/" title="How To Install Windows 7 On Your Netbook From A USB Flash Drive">How To Install Windows 7 On Your Netbook From A USB Flash Drive </a></li>
<li><a href="http://sonofbyte.com/2010/03/best-tax-preparation-tool-hive-five-call-for-contenders/" title="Best Tax Preparation Tool? [Hive Five Call For Contenders]">Best Tax Preparation Tool? [Hive Five Call For Contenders] </a></li>
<li><a href="http://sonofbyte.com/2010/03/remains-of-the-day-the-inventor-of-the-cellphone-likes-android-edition-for-what-its-worth/" title="Remains of the Day: The Inventor of the Cellphone Likes Android Edition [For What It's Worth]">Remains of the Day: The Inventor of the Cellphone Likes Android Edition [For What It's Worth] </a></li>
<li><a href="http://sonofbyte.com/2010/03/6-scary-emails-to-send-to-friends-as-a-practical-joke/" title="6 Scary Emails To Send To Friends As A Practical Joke">6 Scary Emails To Send To Friends As A Practical Joke </a></li>
<li><a href="http://sonofbyte.com/2010/03/use-two-computers-to-keep-your-work-and-home-life-totally-separate-productivity/" title="Use Two Computers to Keep Your Work and Home Life Totally Separate [Productivity]">Use Two Computers to Keep Your Work and Home Life Totally Separate [Productivity] </a></li>
<li><a href="http://sonofbyte.com/2010/03/check-the-status-of-your-federal-tax-refund-online-taxes/" title="Check the Status of Your Federal Tax Refund Online [Taxes]">Check the Status of Your Federal Tax Refund Online [Taxes] </a></li>
<li><a href="http://sonofbyte.com/2010/03/5-websites-to-help-you-manage-your-grocery-list/" title="5 Websites To Help You Manage Your Grocery List">5 Websites To Help You Manage Your Grocery List </a></li>
</ul>
</li><li id="text-3" class="widget widget_text"> <div class="textwidget"><div style="padding:10px;">
<script type="text/javascript">
hopfeed_template="";
hopfeed_align='LEFT';
hopfeed_type='IFRAME';
hopfeed_affiliate_tid='';
hopfeed_affiliate='sonofbyte';
hopfeed_fill_slots='true';
hopfeed_height=530;
hopfeed_width=265;
hopfeed_cellpadding=5;
hopfeed_rows=10;
hopfeed_cols=1;
hopfeed_font='Verdana, Arial, Helvetica, Sans Serif';
hopfeed_font_size='8pt';
hopfeed_font_color='#EEEEEE';
hopfeed_border_color='#273448';
hopfeed_link_font_color='#FFFFFF';
hopfeed_link_font_hover_color='#EFEFEF';
hopfeed_background_color='#273448';
hopfeed_keywords='google, traffic, blog, web';
hopfeed_path='http://sonofbyte.hopfeed.com';
hopfeed_link_target='_blank';
</script>
<script type="text/javascript" src='http://sonofbyte.hopfeed.com/script/hopfeed.js'></script>
</div>
</div>
</li><li id="tag_cloud-4" class="widget widget_tag_cloud"><h2 class="widgettitle">Tags</h2><div><a href='http://sonofbyte.com/tag/article/' class='tag-link-2410' title='49 topics' style='font-size: 10.5168539326pt;'>article</a>
<a href='http://sonofbyte.com/tag/browser/' class='tag-link-2446' title='35 topics' style='font-size: 8.31460674157pt;'>browser</a>
<a href='http://sonofbyte.com/tag/code/' class='tag-link-2912' title='34 topics' style='font-size: 8pt;'>code</a>
<a href='http://sonofbyte.com/tag/css/' class='tag-link-2634' title='96 topics' style='font-size: 15.0786516854pt;'>CSS</a>
<a href='http://sonofbyte.com/tag/design/' class='tag-link-2713' title='269 topics' style='font-size: 22pt;'>Design</a>
<a href='http://sonofbyte.com/tag/downloads/' class='tag-link-2437' title='37 topics' style='font-size: 8.62921348315pt;'>downloads</a>
<a href='http://sonofbyte.com/tag/facebook/' class='tag-link-2561' title='45 topics' style='font-size: 9.88764044944pt;'>facebook</a>
<a href='http://sonofbyte.com/tag/featured/' class='tag-link-2501' title='42 topics' style='font-size: 9.41573033708pt;'>Featured</a>
<a href='http://sonofbyte.com/tag/firefox/' class='tag-link-2432' title='45 topics' style='font-size: 9.88764044944pt;'>firefox</a>
<a href='http://sonofbyte.com/tag/flash/' class='tag-link-2779' title='56 topics' style='font-size: 11.4606741573pt;'>Flash</a>
<a href='http://sonofbyte.com/tag/free/' class='tag-link-2414' title='80 topics' style='font-size: 13.8202247191pt;'>free</a>
<a href='http://sonofbyte.com/tag/freebies/' class='tag-link-2735' title='46 topics' style='font-size: 10.0449438202pt;'>Freebies</a>
<a href='http://sonofbyte.com/tag/google/' class='tag-link-2267' title='112 topics' style='font-size: 16.0224719101pt;'>google</a>
<a href='http://sonofbyte.com/tag/graphic/' class='tag-link-6510' title='55 topics' style='font-size: 11.3033707865pt;'>graphic</a>
<a href='http://sonofbyte.com/tag/home/' class='tag-link-2326' title='39 topics' style='font-size: 8.94382022472pt;'>home</a>
<a href='http://sonofbyte.com/tag/image/' class='tag-link-2675' title='53 topics' style='font-size: 10.9887640449pt;'>image</a>
<a href='http://sonofbyte.com/tag/img-alt/' class='tag-link-2307' title='50 topics' style='font-size: 10.6741573034pt;'>img-alt</a>
<a href='http://sonofbyte.com/tag/information/' class='tag-link-2896' title='35 topics' style='font-size: 8.31460674157pt;'>information</a>
<a href='http://sonofbyte.com/tag/inspiration/' class='tag-link-2720' title='54 topics' style='font-size: 11.1460674157pt;'>inspiration</a>
<a href='http://sonofbyte.com/tag/internet/' class='tag-link-2761' title='42 topics' style='font-size: 9.41573033708pt;'>internet</a>
<a href='http://sonofbyte.com/tag/joomla/' class='tag-link-2913' title='47 topics' style='font-size: 10.202247191pt;'>Joomla</a>
<a href='http://sonofbyte.com/tag/left-image500/' class='tag-link-2625' title='49 topics' style='font-size: 10.5168539326pt;'>left-image500</a>
<a href='http://sonofbyte.com/tag/main/' class='tag-link-1' title='132 topics' style='font-size: 17.1235955056pt;'>Main</a>
<a href='http://sonofbyte.com/tag/media/' class='tag-link-2255' title='38 topics' style='font-size: 8.78651685393pt;'>media</a>
<a href='http://sonofbyte.com/tag/news/' class='tag-link-9' title='86 topics' style='font-size: 14.2921348315pt;'>News</a>
<a href='http://sonofbyte.com/tag/online/' class='tag-link-3721' title='45 topics' style='font-size: 9.88764044944pt;'>online</a>
<a href='http://sonofbyte.com/tag/oscommerce/' class='tag-link-2962' title='59 topics' style='font-size: 11.7752808989pt;'>osCommerce</a>
<a href='http://sonofbyte.com/tag/php/' class='tag-link-2726' title='68 topics' style='font-size: 12.7191011236pt;'>php</a>
<a href='http://sonofbyte.com/tag/post/' class='tag-link-2725' title='106 topics' style='font-size: 15.7078651685pt;'>post</a>
<a href='http://sonofbyte.com/tag/similar/' class='tag-link-9560' title='37 topics' style='font-size: 8.62921348315pt;'>similar</a>
<a href='http://sonofbyte.com/tag/similar-posts/' class='tag-link-9562' title='38 topics' style='font-size: 8.78651685393pt;'>similar-posts</a>
<a href='http://sonofbyte.com/tag/social/' class='tag-link-2716' title='41 topics' style='font-size: 9.25842696629pt;'>social</a>
<a href='http://sonofbyte.com/tag/thoughts/' class='tag-link-2266' title='50 topics' style='font-size: 10.6741573034pt;'>thoughts</a>
<a href='http://sonofbyte.com/tag/time/' class='tag-link-2583' title='52 topics' style='font-size: 10.8314606742pt;'>time</a>
<a href='http://sonofbyte.com/tag/tutorial/' class='tag-link-2742' title='59 topics' style='font-size: 11.7752808989pt;'>tutorial</a>
<a href='http://sonofbyte.com/tag/tutorials/' class='tag-link-2624' title='73 topics' style='font-size: 13.191011236pt;'>tutorials</a>
<a href='http://sonofbyte.com/tag/video/' class='tag-link-2670' title='50 topics' style='font-size: 10.6741573034pt;'>video</a>
<a href='http://sonofbyte.com/tag/videos/' class='tag-link-2595' title='41 topics' style='font-size: 9.25842696629pt;'>Videos</a>
<a href='http://sonofbyte.com/tag/web-design/' class='tag-link-3482' title='43 topics' style='font-size: 9.57303370787pt;'>web-design</a>
<a href='http://sonofbyte.com/tag/website/' class='tag-link-2566' title='46 topics' style='font-size: 10.0449438202pt;'>website</a>
<a href='http://sonofbyte.com/tag/white/' class='tag-link-5521' title='35 topics' style='font-size: 8.31460674157pt;'>white</a>
<a href='http://sonofbyte.com/tag/widget-ready/' class='tag-link-9356' title='39 topics' style='font-size: 8.94382022472pt;'>widget-ready</a>
<a href='http://sonofbyte.com/tag/windows/' class='tag-link-2271' title='92 topics' style='font-size: 14.7640449438pt;'>windows</a>
<a href='http://sonofbyte.com/tag/wordpress/' class='tag-link-2722' title='209 topics' style='font-size: 20.2696629213pt;'>wordpress</a>
<a href='http://sonofbyte.com/tag/work/' class='tag-link-2251' title='44 topics' style='font-size: 9.73033707865pt;'>work</a></div>
</li><li id="archives-3" class="widget widget_archive"><h2 class="widgettitle">By Month</h2> <ul>
<li><a href='http://sonofbyte.com/2010/03/' title='March 2010'>March 2010</a> (510)</li>
<li><a href='http://sonofbyte.com/2010/02/' title='February 2010'>February 2010</a> (550)</li>
<li><a href='http://sonofbyte.com/2010/01/' title='January 2010'>January 2010</a> (68)</li>
<li><a href='http://sonofbyte.com/2009/12/' title='December 2009'>December 2009</a> (68)</li>
<li><a href='http://sonofbyte.com/2009/11/' title='November 2009'>November 2009</a> (83)</li>
<li><a href='http://sonofbyte.com/2009/10/' title='October 2009'>October 2009</a> (57)</li>
<li><a href='http://sonofbyte.com/2009/09/' title='September 2009'>September 2009</a> (31)</li>
<li><a href='http://sonofbyte.com/2009/08/' title='August 2009'>August 2009</a> (19)</li>
<li><a href='http://sonofbyte.com/2009/07/' title='July 2009'>July 2009</a> (39)</li>
<li><a href='http://sonofbyte.com/2009/06/' title='June 2009'>June 2009</a> (11)</li>
<li><a href='http://sonofbyte.com/2009/05/' title='May 2009'>May 2009</a> (9)</li>
<li><a href='http://sonofbyte.com/2009/04/' title='April 2009'>April 2009</a> (15)</li>
<li><a href='http://sonofbyte.com/2009/03/' title='March 2009'>March 2009</a> (17)</li>
<li><a href='http://sonofbyte.com/2009/02/' title='February 2009'>February 2009</a> (23)</li>
<li><a href='http://sonofbyte.com/2009/01/' title='January 2009'>January 2009</a> (29)</li>
<li><a href='http://sonofbyte.com/2008/12/' title='December 2008'>December 2008</a> (22)</li>
<li><a href='http://sonofbyte.com/2008/11/' title='November 2008'>November 2008</a> (17)</li>
<li><a href='http://sonofbyte.com/2008/10/' title='October 2008'>October 2008</a> (22)</li>
<li><a href='http://sonofbyte.com/2008/09/' title='September 2008'>September 2008</a> (17)</li>
<li><a href='http://sonofbyte.com/2008/08/' title='August 2008'>August 2008</a> (13)</li>
<li><a href='http://sonofbyte.com/2008/07/' title='July 2008'>July 2008</a> (23)</li>
<li><a href='http://sonofbyte.com/2008/06/' title='June 2008'>June 2008</a> (5)</li>
<li><a href='http://sonofbyte.com/2008/05/' title='May 2008'>May 2008</a> (2)</li>
<li><a href='http://sonofbyte.com/2008/03/' title='March 2008'>March 2008</a> (3)</li>
<li><a href='http://sonofbyte.com/2008/02/' title='February 2008'>February 2008</a> (1)</li>
<li><a href='http://sonofbyte.com/2008/01/' title='January 2008'>January 2008</a> (13)</li>
<li><a href='http://sonofbyte.com/2007/12/' title='December 2007'>December 2007</a> (4)</li>
<li><a href='http://sonofbyte.com/2007/11/' title='November 2007'>November 2007</a> (5)</li>
<li><a href='http://sonofbyte.com/2007/10/' title='October 2007'>October 2007</a> (3)</li>
<li><a href='http://sonofbyte.com/2007/09/' title='September 2007'>September 2007</a> (2)</li>
<li><a href='http://sonofbyte.com/2007/08/' title='August 2007'>August 2007</a> (8)</li>
<li><a href='http://sonofbyte.com/2007/07/' title='July 2007'>July 2007</a> (6)</li>
<li><a href='http://sonofbyte.com/2007/06/' title='June 2007'>June 2007</a> (1)</li>
<li><a href='http://sonofbyte.com/2007/04/' title='April 2007'>April 2007</a> (3)</li>
<li><a href='http://sonofbyte.com/2007/03/' title='March 2007'>March 2007</a> (4)</li>
<li><a href='http://sonofbyte.com/2007/02/' title='February 2007'>February 2007</a> (1)</li>
<li><a href='http://sonofbyte.com/2007/01/' title='January 2007'>January 2007</a> (1)</li>
</ul>
</li> </ul>
</div>
<hr />
</div>
</div>
<div id="footer">
<p>
SonOfByte.com - Web Design & Development is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="http://sonofbyte.com/feed/">Entries (RSS)</a>
and <a href="http://sonofbyte.com/comments/feed/">Comments (RSS)</a>.
<!-- 54 queries. 1.171 seconds. -->
</p>
</div>
<script src="http://stats.wordpress.com/e-201010.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({blog:'8545980',v:'ext',post:'0'});
var load_cmc = function(){linktracker_init(8545980,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>
</body>
<!-- twitter follow badge by go2web20 -->
<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'sonofbyte';
tfb.label = 'follow-us';
tfb.color = '#273448';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->
</html>
Looking at the statistics online, a lot of you are still using MySpace (mostly the younger generation) and I am sure you would love some new sources for free MySpace templates. I will run down a few sites my younger cousin uses for just that.
.
