WordPress Tip: Put Your Stats Code into a Widget

Posted By on Dec 14, 2007 | 1 comment


Have you ever thought to yourself, “I’d like to try out a new theme, but I’ve spent so much time putting custom code (counters, plugins, etc.) into my current theme, that it’s too much work to switch?”

This WordPress tip is designed to make it much easier to change themes, which will benefit established bloggers doing an upgrade, but especially new bloggers who are just starting out and experimenting with different looks for their blog.

One day while playing around with my site and inserting my StatCounter code into my footer, I had a thought, “What if I stuck this into a widget?”

I gave it a try and sure enough it worked, the counter kept tracking my stats. Then I tried it with Google Analytics and everything else that I had cluttering my footer.php file and they all worked.

How To Set Up A Stats Widget

The process is really simple. In short, we just need to grab all the html or JavaScript code that you have added to your theme’s footer and place it into a WordPress widget.

What You Can Place in a Widget

  • Google Analytics
  • Stats and counters
  • My Blog Log tracking code
  • Hittail or similar code
  • Quantcast
  • Any other code that doesn’t actually display on your page

What Won’t Work

  • Custom php code (anywhere you see <?php ?> tags)
  • If you have AdSense in your footer, don’t move it.

Let’s get started…

Step 1 – Remove the Code from Your Footer

Go to your blog’s dashboard and navigate to the Theme Editor. Scroll down the list of files on the right hand menu and click on “Footer” (in some cases it will be called footer.php).

Search around in that file and cut out (remove) all the code snippets that you have added to it. Chances are they will use the <script> tag. I recommend putting them all into Notepad temporarily.

After they are all removed, then click “Update File” to save the footer file without your code in it.

Do step 2 right away so you don’t miss any stats.

Step 2 – Put the Code into a Widget

First you’ll need to make sure your blog has widgets available. WordPress 2.2 and later has them by default but with any previous version of WordPress, you’ll need to download and install the Widgets plugin. Or even better, upgrade your WordPress installation.

Navigate to the Widgets area of the admin panel. Drag a “Text” widget from the “Available Widgets” area, over to one of your columns. I prefer to put in at the bottom of the right hand column. If there aren’t any Text widgets in the “Available Widgets” panel, then create a new one, in the box just below that panel.

Click the little configuration box on the right hand side of the new text widget to pop open the widget entry box.

Copy and paste all the code the you removed from your footer into the body of the box. Leave the title blank (if you put anything in there, it will show up on your page, which you don’t want).

Close the widget by clicking the “X” at the top right corner.

Click “Save Changes” to update your widget settings.

That’s it. I recommend that you take a look at your stats counter (and any other services) to make sure they are working and tracking visitors. All it takes is a missed “>” in the copy and paste process and they won’t function correctly.

Now when you want to change your theme, you don’t have to worry about forgetting to move your counter and other tracking codes.

The Downside

There is one possible drawback when putting your stats code into a widget. If for some reason the code takes an unusual amount of time to load, your footer may not appear until the code is finished loading. I’ve noticed sometimes Google Analytics can hang up and take a while to finish loading. When the code is at the end of your page just before the /body tag, this won’t cause a problem with your page being visible to the user. On the other hand, when the code is placed in the sidebar, the footer may end up not loading until the stats code is finished loading. This is rare and will usually not be a problem, but I thought it worth mentioning.

One Small Step Towards Theme Independence

This tip will allow you to move one step closer to having theme freedom. My ultimate setup for WordPress would be to never have to add code into the theme files manually. This would mean that if a new version of your theme is released or if you change your theme you won’t need to migrate any code.

It seems to me that more and more plugin designers are climbing on the bandwagon and creating plugins that integrate automatically into posts and pages without needing to add the code manually.

This has been just a tiny tip that can hopefully save you some headaches in the long run make blogging easier and more fun.

1 Comment

  1. This would mean that if a new version of your theme is released or if you change your theme you won’t need to migrate any code.

    Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>