Widget Flag Counter

A Widget Flag Counter can be a benefit to your website, especially if you are a WordPress beginner or if this is a new website.

I decided to add a visitor counter to Money Making Entrepreneur. I will put this in a Widget in the Theme. This will show me what country most of my visitors are coming from. It will also give me something pretty to decorate my site with. I will recommend flagcounter.com because I have used them on a number of sites and they have performed okay. I also like them because they allow you to make a number of settings to give you the feel they are a part of your website. Finally, I like them because of their ease of use.

I am going to put my counter in the sidebar, so first of all I need to know what is the color of my sidebar and text. For this I will check my theme options.

Getting the Colors

Appearance => Theme Options => Sidebars & Widgets => Style & configure SIDEBARS => LEFT sidebar style

  • border-right: solid 1px #85BB65;

This is my Widget Border Color 85BB65

Appearance => Theme Options => Sidebars & Widgets => Style WIDGETS => Widget List Items => Link Text Color

  • 417721

This is my text color 417721

Getting the Flag

Now I will head on over to flagcounter.com and make my counter.

First of all, do not sweat the settings. Any of the settings can be changed later…

First of all notice the small set of flags at the bottom, this is a sample of what will display on your site. However, it will only display the number of flags from the actual visitors to your site. At first that will only be one flag, you! My top sites have about 90 flags. Now let’s make some settings.

Maximum Flags to Show

This is the Maximum number of flags. Go ahead and set it at 248! As I said, the number I have reached is only 90! If you want to limit the number to say, your top 20 countries, then set that number.

If you set it at 248 you will notice the display at the bottom changes, but again, this is the flags that flagcounter.com has collected.

Columns of Flags

2 works ok for me.

Label on Top of Counter

For the TuKod / Atahualpa Themes, I set it to “none” because I will put it in a widget that is styled with my theme style. This gets rid of the word “Visitors” in the flag counter below…

Background Color #

I left this as white (FFFFFF) to match my sidebar’s background.

Text Color #

I changed this to 417721 to match my Widget Text Color above. I noticed the letters in the example changed to my Widget Text Color (for me that is a green).

Border Color #

I changed this to 85BB65 to match my Widget Border Color above. I noticed the Border in the example changed to my Widget Border Color (for me that is a darker green).

Show Country Codes

I checked this box because I am not an expert of all the flags in the world. Notice that this gives you the two letter country code in your display. I am much more familiar with these and they are easy to look up.

Show Pageview Count

I checked this box because I really wanted to see a Pageview Count at a glance. This actually counts the number of request for the image file, which should be equal to the number of pages of your site viewed.

Notice you now have a display that shows the number of page views.

Show Number of Flags

I clicked this box because I wanted to see how many different countries had come to my site. This may be very useful say if I displayed the top 20 countries flags only… It would still tell me the total number of different countries.

Get Your Flag Counter

Now it is time to generate the flag counter for our site. Click on Get Your Flag Counter!

Code for websites:

I copied the code in the box marked Code for websites: This is the code you will use for your website. The other code is for forums.

Warning: You may have noticed where is says Quick Post and there is WordPress. That is for WordPress.com, not for a self hosted WordPress. If you are using WordPress.Com go ahead and give it a try and post your results below. On the other hand, if you are using WordPress.Com you are not using either of the TuKod / Atahualpa Themes. They are too advanced for WordPress.Com to host!

Do not worry, remember this code can be regenerated at any time.

The Flag Counter Widget

Now that we have our Flag Counter Code, it is time to add it to our website in the form of a text widget.

Appearance => Widgets

Text

On the right, find the “Left Sidebar” and click (open) the drop down list. These are the widgets you have on your left sidebar! Duh! We are going to put our counter at the top!

On the left (middle?) area marked, “Available Widgets” Find one labeled “Text” and drag it to the right into the top of the “Left Sidebar” list!

If it didn’t automatically open for you, click the down arrow on the Text Widget.

Title:

In the Widget Box labeled “Title:” write something clever, or, if you are not clever, just write “Visitors”. For this site, I am assuming that every visitor is an Entrepreneur (or at least a would be Entrepreneur). So my Title is (go ahead and guess!) Entrepreneurs!

Paste the Flag Counter Code

In the Widget Box, just below the “Title:” you just added, you will paste your Flag Counter Code.

Save and Close

Most important is to Click Save at the bottom of the Text Widget box. After is completes the save, then you can click Close.

That’s it, your Flag Counter is now on your website! Of course, if you were to drag the widget to the bottom of the Left Sidebar, or the Right Sidebar, it would appear where ever you place it.

Funny Footnote: I was actually doing this while writing this post. At least updating the Flag Counter I had placed there before. And when I went to check the Money Making Entrepreneur website, the only change I had was the location! It was still gray! The reason, yes, I had done all the work… But I forgot to click Save! So I did it “again” and everything worked fine!

One thought on “Widget Flag Counter

Leave a Reply

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