This is a typical Google search results page with 3 Google AdWords ads at the top and another 8 ads on the right. Every Google search results page has a maximum of 11 ads.

On a typical Google search page, there is no option to select the country. What you see is dependent on your current location in the world. If you’re searching from the USA, you should see USA ads. I did a search while I was in Singapore, using a Singapore ISP to connect to internet, hence, I see a list of .com.sg Google AdWords ads.

How to Display Country Specific Google Ads in Google

Google has a little known command to allow users to see country specific content on their search engine.

This is a typical search URL for “loans”:

http://www.google.com/#hl=en&q=”loans”&aq=&aqi=g-c10&aql=&oq=”loans”

By adding a 2-letter country code to the URL, we are able to see the results and ads for a specific country even if we are not there.

Let’s say I want to see the results and ads of the UK for the keyword “loans”, I type the following URL into my browser:

http://www.google.com/#hl=en&q=”loans”&aq=&aqi=g-c10&aql=&oq=”loans”&gl=gb

• gb is the country code for the UK. I guess it must refer to “Great Britain”.

This is what I see from Singapore for a Google search results page for the keyword “loans”.  I’m happy I don’t need to fly all the way to the UK to see this information. Neither do I need to find a UK proxy server to simulate searches from the UK.

Why Most Keyword Research Software Don’t Give You an Accurate Number of Google Ads

Most of the keyword research software in the market only allow you to select 1 country in the software settings. Usually, the default country is the USA. When you do a search and see a number of ads returned by these software, you only see the number of ads for the USA.

This is fine if you only intend to create Google AdWords ads for the USA market. What if you are trying to market to multiple countries? Yes, you could switch the country in your software settings and search again and total up the number of ads by yourself but that would still be very time consuming.

In other words, most keyword research software are not designed for getting data from multiple countries in an easy manner.

Why Would I Care About the Number of Google Ads?

For Google AdWords advertisers, the number of ads helps you to estimate the level of competition for your target keywords. The more advertisers, the higher the cost per click (CPC), which means it will cost more to create an ad for your target keywords. You may choose to pay the money or try to find other keywords with less competition.

For Google AdSense publishers, the number of ads helps you to estimate the profitability of display Google AdSense ads on your web site. The more advertisers, the higher the CPC, which means more money in your pocket from Google AdSense.

In general, if you see a lot of ads for a particular keyword, it proves that a lot of people are paying real money to advertise their products and services on Google. Pay attention to these niches because a lot of money can be made since a lot of money is being poured into them.

Counting the Number of Google Ads Manually

Now that you know how to display the Google ads for multiple countries, you can count the ads by totalling up the number of ads you see on the search pages. This is an extremely time consuming task because:

• You need to make sure there aren’t repeated ads, especially the ads at the top.
• You need to look through multiple search pages of multiple countries.

It is bearable if you only have a few keywords but if you’ve got hundreds or thousands of keywords to go through… I wouldn’t even try.

Counting the Number of Google Ads with the Maverick Keyword Researcher

This is how I count the number of Google Ads for my keywords.

Every country will display different ads and a different number of ads. The Maverick Keyword Researcher adds up the number of ads for me so that I don’t have to waste my time doing it manually. I wouldn’t do it any other way.

1. Simplified Menu

The menu system has been simplified into 3 main sections – Brainstorm, Suggestions and Statistics. All the keyword tools are either for brainstorming niches, keyword suggestions and keyword statistics. There are also sub menus indicated by “down arrows” in the menu. Once you move your mouse cursor over it, another list of options will appear for you to select.

2. Breadcrumb Trails for Dashboard

Previously, I didn’t have breadcrumb trail links for the Dashboard pages. That was a dumb thing to leave out and it really annoyed some of the beta testers because they felt kind of lost in the Dashboard section.

Now, I’ve included the project link in the sub header section of the Dashboard pages. In the screen shot above, you will see 2 links -  the Projects page link and the “Jaw Surgery projects” link.

3. Single-Step Installer

This is the first time I am showing the installer. I wish I could make the uploading of the Maverick Keyword Researcher easier because it is now a whopping 18 MB in size! Once you have uploaded it and edited the required folder/file permissions, you only need one tiny step to install the application on your web server.

4. Collapsible Quick Guidelines

After you have used the Maverick Keyword Researcher a couple of times, you might find the Quick Guidelines on the right a bit annoying because they tend to make the page length longer on some pages. I have created an option to hide them in the My Account page.

5. 6 New Google Tools

I created 6 new Google tools:

1. Google Ads
2. Google Average CPC
3. Google PageRank
4. Google Results
5. Google Searches
6. Google R/S & KEI

[Show as slideshow]

[View with PicLens]

To be honest, I simply split up the Google Analyzer tool into 6 tools, which is an all-in-one tool of the 6 tools above. All of the new tools I created, I must say the Google Ads tool is the most innovative tool because it gets you the number of Google AdWords ads of multiple countries. I’ll go over that in detail later on…

6. Quick Check Options for Countries

One of the reasons I created the Maverick Keyword Researcher was because most, if not all other keyword research software in the market do not allow you to select more than 1 country at a time.

Every country will return a different set of keyword suggestions, Google AdWords ads and search results. You can get so much more data by having the power to select more than 1 country for your keyword research.

With over 200 countries, which ones do you select? I made a “quick checker” to check the list of countries I need in a flash.

English Speaking Countries

• Check All English Speaking Countries
• Check IMF Advanced Economies
• Check World Bank High-Income Economies

Non-Language Specific Countries

• Check IMF Advanced Economies
• Check World Bank High-Income Economies

No disrespect to the countries that are not English speaking and have no advanced or high-income economies. I usually check on the “English Speaking IMF Advanced Economies option”, which is actually a list of 9 countries, for my keyword research.

In this tutorial, I will be integrating the jQuery UI Tabs widget into the sidebar of my WordPress theme. The reason I am using the jQuery UI is because I do not want to be reinventing the wheel by creating another widget when the amazing jQuery team already has one.

Include the jQuery Javascript Library into WordPress

I have covered this topic in great detail in my previous post, Include the Latest Version of jQuery in WordPress without Duplicates. Please refer to that post for more information on how to include jQuery into WordPress.

Download jQuery UI Files

The jQuery UI download page has so many options it can be really confusing. I downloaded all of the components of the latest “stable” release, which works with jQuery 1.4 and above.

Upload jQuery UI Files to Your WordPress Theme Directory

I created a “js” directory within my WordPress theme’s directory to store the jQuery UI files.

You only need to upload the following files:

1. jquery.ui.core.min.js
2. jquery.ui.widget.min.js
3. jquery.ui.tabs.min.js

Include jQuery UI Files into Your WordPress Theme

<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.tabs.min.js"></script>

Add the 3 lines above into your header.php template file. Replace the “TEMPLATE” text with your theme’s template folder name.

<?php
#DISPLAY TABS
if(!is_page())
{
?>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.tabs.min.js"></script>
<?php
}
?>

If you’re planning to display the tabs on the blog pages, you could use some WordPress conditional tags to control where they appear. Remember to replace the “TEMPLATE” text with your theme’s template folder name.

$(document).ready(function()
{
	$("#post_tabs").tabs();
});

Another thing I like to do is to create an external Javascript file to store the Javascript code that launches the tabs. I saved the code above into the Javascript file, jquery-initialise-tabs.js.

<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/TEMPLATE/js/jquery-initialise-tabs.js"></script>

I included the jquery-initialise-tabs.js file as an external Javascript file like the rest of the jQuery UI files.

Adding the jQuery UI Tabs to the Sidebar

<div id="post_tabs">
 
	<!-- TAB TITLES - START -->
	<ul class="post_tabs_title">
		<li title="Latest Posts"><a href="#latest-posts">Latest</a></li>
		<li title="Popular Posts"><a href="#popular-posts">Popular</a></li>
		<li title="Most Commented Posts"><a href="#most-commented-posts">Most Comments</a></li>
	</ul>
	<!-- TAB TITLES - END -->
 
	<!-- LATEST POSTS - START -->
	<div id="latest-posts">
		<ul class="tabs"><li><a href="#" rel="bookmark" title="">....</a></li></ul>
	</div>
	<!-- LATEST POSTS - END -->
 
	<!-- POPULAR POSTS - START -->
	<div id="popular-posts">
		<ul class="tabs"><li><a href="#" rel="bookmark" title="">....</a></li></ul>
	</div>
	<!-- POPULAR POSTS - END -->
 
	<!-- MOST COMMENTED POSTS - START -->
	<div id="most-commented-posts">
		<ul class="tabs"><li><a href="#" rel="bookmark" title="">....</a></li></ul>
	</div>
	<!-- MOST COMMENTED POSTS - END -->
 
</div>

The HTML code of the jQuery UI Tabs is pretty straightforward. You have create a div container to store your tabs and the content of the tabs. In my case, I created a div with the id of “post_tabs”. The Javascript code within my jquery-initialise-tabs.js file activates the jQuery UI Tabs.

The a tags point to another div, which houses the content of the that tab. For example, the “Latest Posts” tab is activated when you click on the “#latest-posts” link. You can display anything you want within the tab’s content area. In my case, I displayed a list of blog posts.

/* TABS */
#contents #sidebar #post_tabs
{
	height: auto;
	margin: 0px 0px 7px 0px;
	padding: 5px 0px 0px 0px;
}
 
#contents #sidebar #post_tabs ul.post_tabs_title
{
	width: 189px;
	margin: 0px;
	padding: 0px 0px 0px 13px;
	list-style-type: none;
	border-bottom: 1px solid #EDEDED;
	overflow: hidden;
}
 
#contents #sidebar #post_tabs ul.post_tabs_title li
{
	float: left;
	margin: 0px 3px 0px 0px;
	padding: 4px 3px 4px 3px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 9px;
	font-weight: bold;
	color: #333333;
	cursor: pointer;
	background-color: #EDEDED;
}
 
#contents #sidebar #post_tabs ul.post_tabs_title li.active, #contents #sidebar #post_tabs ul.post_tabs_title li.over
{
	color: #FFFFFF;
	background-color: #3A8BD4;
}
 
.ui-tabs .ui-tabs-panel
{
	display: block;
	margin: 0px;
	padding: 0px;
	background: none;
}
 
.ui-tabs .ui-tabs-hide
{
	display: none !important;
}
 
#contents #sidebar ul.tabs
{
	margin: 8px 0px 0px 27px;
	padding: 0px 20px 0px 0px;
	list-style-type: square;
}
 
#contents #sidebar ol.tabs2
{
	margin: 8px 0px 0px 39px;
	padding: 0px 20px 0px 0px;
}
 
#contents #sidebar ul.tabs li, #contents #sidebar ol.tabs2 li
{
	margin: 0px;
	padding: 0px 0px 3px 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
}

The CSS code is a bit tricky because jQuery UI Tabs’ documentation does not go into great detail about it. If you check out the jQuery UI Tabs demo and view its source code, you will see a link to an external style sheet file.

Actually the only required CSS for this jQuery UI Tabs to work is only this block of CSS code:

.ui-tabs .ui-tabs-hide {
     display: none;
}

The rest of the the CSS code I added above is just for styling it to suit my web site’s look and feel.

Overall, I find the jQuery UI Tabs relatively easy to install and customise but it isn’t for people who know nothing about HTML, CSS and Javascript.

Introducing, the FeaturedBox jQuery slide gallery plugin….

The FeaturedBox plugin costs $7 or $5 if you buy credits at CodeCanyon.net. This is so much easier than using the SmoothGallery, which runs on the MooTools Javascript library. I don’t need to edit a lot of code to get this up and running. I have a live example of the FeaturedBox on the home page of this web site.

First Things First – Include jQuery into Your WordPress Theme

You will need the jQuery Javascript library because the FeaturedBox plugin runs on it. Please refer to my tutorial on adding jQuery to WordPress to find out how to do it.

Include the FeaturedBox Javascript File into Your WordPress Theme

<script src="/wp-content/themes/TEMPLATE/js/featuredbox.js" type="text/javascript"><!--mce:0--></script>

Add the following code in between the <head> tags of your header.php template file.

<script src="/wp-content/themes/mwc1/js/featuredbox.js" type="text/javascript"><!--mce:1--></script>

Please replace the “TEMPLATE” text with your theme’s directory name.

If you want to display the FeaturedBox only on the home page, you could add WordPress conditional tags to display the FeaturedBox only on the home page.

Merge the FeaturedBox style.css with Your WordPress Theme’s style.css

/* FEATURED BOX */
#featured_box_wrapper_wrapper
{
	display: none;
}
 
#featured_box_wrapper, .featuredbox
{
	position: relative;
	display: block;
	height: 380px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #EDEDED;
	overflow: hidden;
}
 
.featuredbox ul.slides
{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
.featuredbox ul.slides li
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 380px;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
.featuredbox .description
{
	position: absolute;
	width: 100%;
	height: 56px;
	bottom: 0px;
	left: 0px;
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;
	background: transparent url("images/bg-featured-box-desc.png") repeat scroll 0 0;
	z-index: 100;
}
 
.featuredbox .description h2
{
	margin: 0px;
	padding: 0px 0px 5px 0px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: italic;
	color: #FFFFFF;
}
 
.featuredbox .description p
{
	margin: 0px;
	padding: 0px 8px 0px 0px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: italic;
	color: #FFFFFF;
}
 
#featured_box_wrapper .navigation
{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 300px;
	margin: 1px 1px 0px 0px;
	padding: 8px 8px 0px 8px;
	background: transparent url("images/bg-featured-box-navi.png") repeat scroll 0 0;
	z-index: 100;
}
 
#featured_box_wrapper .navigation ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
 
#featured_box_wrapper .navigation li
{
	margin: 0px;
	padding: 0px 0px 8px 0px;
}
 
#featured_box_wrapper .navigation li img
{
	border: solid 1px #FFFFFF;
}
 
#featured_box_wrapper .navigation li.hover img
{
	border: solid 1px #EFA40D;
	cursor: pointer;
}
 
#featured_box_wrapper .navigation li.active img
{
	border: solid 1px #EFA40D;
}
 
.featuredbox .box-slide1, .featuredbox .box-slide2
{
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	z-index: -1;
}
 
.featuredbox .box-slide1
{
	background-color: #CCF;
}
 
.featuredbox .box-slide2
{
	background-color: #F96;
}

I added the code into my WordPress theme’s style.css. I made some changes to suit my web site’s design. Instead of specifying a fixed width for the FeaturedBox, I used the code “display: block;” to let the FeaturedBox stretch to the maximum width of the web page.

Create a Dedicated WordPress Category for the FeaturedBox

I created a category titled “featured projects” for my FeaturedBox. If you click on the category in the WordPress admin section, you will see a URL similar to the screen shot above. Note down the category ID number because we will be needing it in a while.

Add the FeaturedBox to Your WordPress Template

$(document).ready(function()
{
	$("#featured_box_wrapper").featuredbox(
	{
		slidesAnimation: "slide-left",
		slidesSpeed: "slow",
		descriptionAnimation: "fade",
		descriptionSpeed: "slow",
		navigationHide: true,
		rotateInterval: 5000
	});
});
 
<!-- FEATURED BOX - START -->
<div id="featured_box_wrapper">
	<!-- FEATURED BOX SLIDES - START -->
<ul>
	have_posts())
	{
		$portfolio_highlights-&gt;the_post();
 
		#RETRIEVE THE FEATURED BOX SLIDE IMAGE URL
		$picture = get_post_meta($post-&gt;ID, 'picture', true);
 
		#RETRIEVE THE FEATURED BOX SLIDE URL
		$url = get_post_meta($post-&gt;ID, 'url', true);
 
		#FEATURED BOX SLIDE IMAGE URL EXISTS
		if(!empty($picture))
		{
		?&gt;
	<li>
<div><a title="Read more..." href="&lt;?php echo $url; ?&gt;"><img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" /></a></div>
<div><a title="Read more..." href="&lt;?php the_permalink(); ?&gt;"><img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" /></a></div>
<div></div>
<div><img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" width="120" height="60" /></div></li>
</ul>
<!-- FEATURED BOX SLIDES - END --></div>
<!-- FEATURED BOX - END -->

I display my FeaturedBox on my home page, therefore I added my code on my home page template. Please add the code above to wherever your FeaturedBox should be.

The Javascript code that loads the FeaturedBox is customised to my FeaturedBox. Please refer to the numerous examples of the FeaturedBox to find a setting that suits your needs.

The key code to edit here would be:

new WP_Query('cat=120&posts_per_page=4');

• Edit the code after cat=XXX to your category number.
• Edit the code after posts_per_page=X with the number of posts you wish to display.

<img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" width="120" height="60" />

You might want to edit the size of the thumbnail to suit the design of your WordPress theme.

Create a WordPress Post for the FeaturedBox

Whenever you create a new post that you want to display in the FeaturedBox, remember to do the following:

1. Enter some text into the “excerpt” box.
2. Enter the URL of the FeaturedBox thumbnail into the “picture” custom field box.
3. Enter the URL of the FeaturedBox slide into the “url” custom field box.
4. Select the category of the FeaturedBox.

I wish I could make the integration of FeaturedBox into WordPress a lot simpler but this is what I’ve got at the moment. I am only using a fraction of what the FeaturedBox can do because I am only displaying pictures in my FeaturedBox. The FeaturedBox actually lets you display videos, flash and HTML objects.

1. OptinPop

This is a free WordPress plugin that creates a pop over window from a file. You need to create a HTML page with whatever you want to include in your pop over window and upload it to your web host. Although the options of this plugin are quite limited, you can select to include the “thickbox” effect, which “blacks out” the web page viewing area and focuses on your pop over window.

2. Popup Picker

This plugin costs $37. You get to create 4 types of pop ups with this plugin, which includes the “page peel” pop over effect. This plugin is pretty hard to set up and you also need to edit some HTML code to create your pop over window. For the price tag of $37, I think you could save that money and get a free WordPress plugin instead.

3. FasterIM OptIn

This is another free plugin. This plugin was created by a Thai guy and it has the most options of all the 4 plugins listed here. You don’t have to create a HTML file to get a pop over to pop up on your web site. This is great for people who have very little or zero HTML knowledge but creating your own pop over content in a HTML page has its benefits.

4. WordPress Pop Over Plugin

This plugin costs $9.95 then $3.00 every month for support. If there is a new version, you get it free as long as you pay the $3 monthly support fee. If not, you would have to pay $9.95 again! The price is putting me off this plugin but I must say it looks the best among the 4 plugins listed here. It would be better if the author added the “thickbox” effect. This plugin requires you to enter HTML code into a box. If you don’t know HTML, it will be a problem but it is easier than creating a HTML file, which is a required in 2 of the plugins here.

Which Pop Over Plugin Should You Use?

Try the free plugins on this post to see if they suit your needs before purchasing a pop over plugin. I have personally tested 2 of the 4 pop over WordPress plugins listed in this post. Of the 4 WordPress plugins my favourite is the OptinPop. I like it because it is free and I get to customise the look and feel of the plugin to my heart’s content.

jQuery is automatically included in WordPress depending on the plugins or templates you use. Some of the plugins I use like the NextGen gallery plugin require jQuery to function properly.

The Wrong Way to Include jQuery into WordPress

Including jQuery into a normal web site is pretty straightforward. You simply add a line in between the <head> tag of your web page to load an external Javascript file.

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

If you did this in the WordPress header.php template file, you would end up with 2 versions of the jQuery library on your WordPress site instead of one! It is imperative that you only have 1 version of jQuery on your web site because 2 versions running at the same time may cause compatibility problems.

The Right Way of Including jQuery into WordPress

In your functions.php template file, add the following code to load the latest version of jQuery.

#THIS FUNCTION INCLUDES THE JQUERY LIBRARY INTO NON-ADMIN WORDPRESS PAGES
function jquery_initialise()
{
	#PAGE IS NON-ADMIN
	if(!is_admin())
	{
		#DEREGISTER DEFAULT JQUERY INCLUDES
		wp_deregister_script('jquery');
 
		#LOAD THE LOCAL JQUERY INCLUDES
		wp_register_script('jquery', '/wp-content/themes/mwc1/js/jquery-1.4.2.min.js', false, '1.4.2', false);
 
		#REGISTER CUSTOM JQUERY INCLUDES
		wp_enqueue_script('jquery');
	}
}
 
#INITIALISE JQUERY LIBRARY
add_action('init', 'jquery_initialise');

In the example above, I made a reference to a self-hosted copy of jQuery. What that means is I downloaded a copy of jQuery, uploaded it to my web site and referenced it from my WordPress installation.

There are a few CDN-hosted copies of jQuery. The most popular one is the Google Ajax API CDN. Here’s how you include the Google Ajax API CDN’s copy of jQuery into WordPress.

#THIS FUNCTION INCLUDES THE JQUERY LIBRARY INTO NON-ADMIN WORDPRESS PAGES
function jquery_initialise()
{
	#PAGE IS NON-ADMIN
	if(!is_admin())
	{
		#DEREGISTER DEFAULT JQUERY INCLUDES
		wp_deregister_script('jquery');
 
		#LOAD THE GOOGLE API JQUERY INCLUDES
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', false);
 
		#REGISTER CUSTOM JQUERY INCLUDES
		wp_enqueue_script('jquery');
	}
}
 
#INITIALISE JQUERY LIBRARY
add_action('init', 'jquery_initialise');

Once you have added the code above to the functions.php template, you will only have 1 version of jQuery in your WordPress without duplicates.

The Problem

Dynatracker can only split test 2 different URLs. I can’t split test 2 different web page elements with it. Therefore, I decided that it would be technically more convenient for me to split test 2 different images that contain my pop over window text.

The 2 Pop Over Window Images

I created 2 images that I added as a CSS background image of my pop over window. The only difference between the 2 images is one word – Hurting and harming. I am testing the headline of my pop over window so everything else will stay the same while I find out which headline converts better.

Here’s a sample of my CSS code of the pop over window…

/* POP OVER */
#popover
{
	width: 650px;
	height: 380px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-image: url("http://www.maverickwebcreations.com/track/s.php?id=X");
}
 
#popover #popover_form
{
	position: absolute;
	top: 280px;
	left: 198px;
	margin: 0px;
	padding: 0px;
}
 
#popover #popover_form label
{
	float: left;
	width: 100px;
	margin: 3px 5px 10px 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	color: #000000;
	text-align: right;
}
 
#popover #popover_form input
{
	margin: 0px;
	padding: 3px;
	font-size: 12px;
	font-style: normal;
	color: #000000;
	float: left;
}
 
#popover #popover_form input.popover_form_textbox
{
	width: 185px;
}
 
#popover #popover_form input.popover_form_button
{
	width: 194px;
}
 
#popover #popover_form br
{
	clear: left;
}

The important part is the “background-image: url(“http://www.maverickwebcreations.com/track/s.php?id=X”);” code, which loads 1 of the 2 images in the background of the pop over page.

The Pop Over Window

If you look at the 2 pictures above, you won’t see a form section in it. The form was added to it by HTML code. The OptinPop plugin requires a HTML file with the content of your pop over window.

Here’s the HTML code of my pop over window…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="/wp-content/themes/mwc1/style.css" />
</head>
 
<body onload="document.getElementById('FormValue_CustomField2').focus()">
 
<div id="popover">
 
	<div id="popover_form">
		<form action="http://www.mavericknewsletters.com/subscribe.php" method="post">
		<input type="hidden" name="FormValue_ListID" value="2" id="FormValue_ListID" />
		<input type="hidden" name="FormValue_Command" value="Subscriber.Add" id="FormValue_Command" />
		<label>First Name:</label><input type="text" name="FormValue_Fields[CustomField2]" value="" id="FormValue_CustomField2" class="popover_form_textbox" /><br />
		<label>Email Address:</label><input type="text" name="FormValue_Fields[EmailAddress]" value="" id="FormValue_EmailAddress" class="popover_form_textbox" /><br />
		<label></label><input type="submit" name="FormButton_Subscribe" value="Yes, Please send me the eBook" id="FormButton_Subscribe" class="popover_form_button" />
		</form>
	</div>
 
</div>
 
</body>
 
</html>

The OptinPop Plugin

The OptIn plugin has a URL field for you to enter your pop over window’s URL. Once you save this, the pop over window will start showing up on your WordPress web site.

Stats from Dynatracker

I added a small piece of code to the “subscribed” page of my newsletter system to keep track of the number of opt-ins. In Dynatracker, this will show up as an “action”.

Over time, I will have a clear indication on which pop over window is doing better. I will remove the least performing pop over window and keep the best one. Then, I will create another version of the pop over window to split test it against the existing pop over window again.

My reasons for giving up MooTools…

1. WordPress uses the jQuery Javascript library in the admin pages. In fact, you will find the jQuery files in the “wp-includes/js/jquery” directory.
2. WordPress has built-in support for the jQuery library. The wp enqueue script function has a list of supported jQuery libraries and widgets but none for MooTools.
3. Some of my favourite WordPress plugins like the NextGen gallery use jQuery so I have to load the jQuery library on my web site.
4. I didn’t want to have 2 different Javascript libraries on my web site because it would increase the loading time of my pages.
5. I found better and simpler jQuery scripts to replace MooTabs and SmoothGallery on my web site.

Since jQuery is so well integrated into the WordPress platform, I don’t wish to reinvent the wheel and use MooTools on top of jQuery.

I found this blog post by Figo explaining the differences between jQuery and MooTools:

MooTools is aimed more at JavaScript developers, while jQuery is more for people who want to implement JavaScript functionality in the easiest possible way.

jQuery is for people who aren’t necessarily interested in delving deep into JavaScript while MooTools provides an object-oriented framework for hardcore JavaScript development. This is why most people find MooTools harder to use in comparison to jQuery.

As a web developer, I personally find jQuery a lot easier to work with than MooTools. It really makes coding in Javascript and creating cool effects a lot easier. jQuery suits my needs better than MooTools because I only use it to create some special effects on web sites and I have no desire or need to learn very advanced Javascript.

Another personal reason for using jQuery is I can create Flash-like effects without using Flash, which is expensive to create because of the expensive software required. For examples on how jQuery is beating the pants off Flash, check out Lam’s great post, How jQuery is Killing Flash.

On the jQueryVsMooTools.com web site, the author points out about the fundamental differences between jQuery and MooTools:

jQuery’s description of itself talks about HTML, events, animations, Ajax, and web development. MooTools talks about object oriented-ness and writing powerful and flexible code. jQuery aspires to “change the way you write JavaScript” while MooTools is designed for the intermediate to advanced JavaScript developer.

Part of this consideration is the notion of a framework vs a toolkit. MooTools is a framework that attempts to implement JavaScript as it should be (according to MooTools’ authors). The aim is to implement an API that feels like JavaScript and enhances everything; not just the DOM. jQuery is a toolkit that gives you an easy to use collection of methods in a self-contained system designed to make the DOM itself more pleasant. It just so happens that the DOM is where most people focus their effort when writing JavaScript, so in many cases, jQuery is all you need.

At the end of the day, it isn’t a matter of which one is better or worse but which one of the 2 Javascript library suits your needs and Javascript coding level.

Where Can I Improve the Speed of My WordPress Web Site?

There are 5 general areas where you could improve the performance of your WordPress web site:

1. PHP code
2. HTML code
3. CSS code
4. Javascript code
5. MySQL database

It would take a lot more than a single blog post for me to go through all of this in great detail. One of the easiest ways to speed up your WordPress is install a bunch of caching and “code minimizing” WordPress plugins.

WordPress Plugins That Speed Up WordPress

I tested the following WordPress plugins and measured the impact of the plugins on the loading times of my web site.

1. WP Super Cache – Generates html files that are served directly by Apache without processing comparatively heavy PHP scripts.
2. WP Minify – Combines and compresses Javascript and CSS files to improve page load time.
3. WP Optimize – A database clean up and optimization tool that allows you to remove post revisions, comments in the spam queue and unapproved comments.
4. WP Smush.it – Reduce image file sizes.
5. DB Cache Reloaded – Caches every MySQL database query to improve performance.
6. Clean Options – Removed redundant database entries in the “wp_options” database table caused by uninstalled plugins and themes.

The plugins above eliminate the need for you to edit source code or fiddle with images to reduce their sizes. This is a great start to optimizing your WordPress for speed but more improvements can be done by tweaking the source code of your PHP, Javascript and CSS files.

Case Study: MaverickWebCreations.com Before WordPress Speed Optimization

I should have disabled my WP Super Cache plugin before the test. What you’re seeing here is the effect of all the plugins above except for the WP Super Cache plugin.

This is a screen shot of the web page speed report I got at WebSiteOptimization.com. As you can see, I have 73 HTTP requests with a total page loading size of 881972 bytes or 861.30 kilobytes (KB). I am embarrassed that my web site got so big!

Case Study: MaverickWebCreations.com After WordPress Speed Optimization

Previously, I had 73 HTTP requests and a total size of 881972 bytes or 861.30 KB. Now, I’ve got 52 HTTP requests and a total size of 694141 bytes or 677.87 KB. That’s a reduction of 21 HTTP requests and a 183.43 KB reduction in file size. That’s a nice 21.3% reduction in page size!

Your results will vary depending on how your web site is set up. Optimizing WordPress for speed was something I did not put a lot of emphasis on before I discovered how bad things can get over time. These plugins are relatively easy to install and configure. Give them a try and you will wonder how you got by without them for so long!