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!

[Show as slideshow]

[View with PicLens]

I had a feeling it would not be so easy but I thought it would be worth a try because I get to move the attachment, tags, comments and pages to my destination blog.

At my Maverick Web Creations’ blog, I selected the Tools -> Import link. I had to upload the XML file I got from the export to import the content. After the long wait, I could see that over 400 posts/pages were moved over!

The hard part was sorting out the categories and delete the unwanted posts/pages. I should have deleted the useless content before exporting/importing content from my previous WordPress blog to this WordPress blog. That would have saved me a lot of time.

Fixing the Google Friend Connect WordPress Plugin’s XHTML Errors

The Google Friend Connect WordPress Plugin has a few XHTML errors.

• It uses the <br> tag, which has been depreciated and the <br /> tag should be used instead.
• It uses the <b> tag, which is depreciated and the <strong> tag should be used instead.
• There is an unnecessary <br> tag in the fc_wp_comment_form() function. This may cause your comment form to look weird.
• 1 of the img tags does not have the closing />.

To fix these errors, you need to make the following changes.

Original code:

144
145
146
147
148

'<img align="left" src="' +  viewer.getField("thumbnailUrl") + '">' +
'<b>Hello ' +  viewer.getField("displayName") + '!</b><br>' +
'<a href="#" onclick="google.friendconnect.requestSettings()">Settings</a><br>' +
'<a href="#" onclick="google.friendconnect.requestInvite()">Invite</a><br>' +
'<div id="loadprof"></div>';

74
75
76
77
78
79
80
81
82
83

// The fc_wp_comment_form function
// This just creates a div tag that will be replaced by the javascript code
// when the page gets loaded
function fc_wp_comment_form() {
 ?>
   <br>
   <div id="profile">
   </div>
 <?
}

Edited code:

144
145
146
147
148

'<img align="left" src="' +  viewer.getField("thumbnailUrl") + '" />' +
'<strong>Hello ' +  viewer.getField("displayName") + '!</strong><br />' +
'<a href="#" onclick="google.friendconnect.requestSettings()">Settings</a><br />' +
'<a href="#" onclick="google.friendconnect.requestInvite()">Invite</a><br />' +
'<div id="loadprof"></div>';

74
75
76
77
78
79
80
81
82

// The fc_wp_comment_form function
// This just creates a div tag that will be replaced by the javascript code
// when the page gets loaded
function fc_wp_comment_form() {
 ?>
   <div id="profile">
   </div>
 <?
}

1. Replace all <br> tags with <br />.
2. Replace all <b> tags with <strong>.
3. Remove the <br> tag in the fc_wp_comment_form() function on line 49.
4. Add a back slash to the <img> tag on line 150.

Editing the CSS of Google Friend Connect WordPress Plugin’s Sign In Box

Original code:

#profile {
font-size:13px;
margin: 20px 40px;
border: 1px solid blue;
padding: 15px;
background-color: #E5ECF9;
}

Edited code:

#profile {
font-size:12px;
margin: 0px;
padding: 0px;
}

This really depends on how you want the sign in box to look like. I hate the blue border and how it was aligned to the centre of the page. So I removed the border and margin/padding space.

You might also encounter CSS problems with the code below:

Original code:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
 
h2 {color: #3366CC; font-size: 18px; font-weight: normal}
h3 {font-size: 13px; font-weight: normal}
h4 {color: grey; font-size: 11px; font-weight: normal}

Google adds this code to your WordPress site whether you like it or not. This to me, is very sloppy coding from Google. They could have added classes instead of forcing all h2, h3, h4 tags to look the way they want it to. Lucky for me, I use CSS classes to control how my h2, h3 and h4 tags so I am not affected by this code. However, if you use a general h2, h3, h4 without any classes or IDs, then good luck!

Edited code:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
 
h2 {color: #3366CC; font-size: 18px; font-weight: normal}
h3 {font-size: 13px; font-weight: normal}
h4 {color: grey; font-size: 11px; font-weight: normal}

I found that it was okay for me to remove the body code and it did not affect the sign in box.

Hopefully we will see some improvements to Google’s plugin in the future. It is still rather buggy at the moment.

Chris Lang’s instructions are pretty good but I plan to go deeper into the installation process to make it even easier for you. Google’s Friend Connect instructions are horrible and they need to work on it as soon as possible before they put off more people from Google Friend Connect.

Step 1: Join Google Friend Connect

[Show as slideshow]

[View with PicLens]

You need to have a Google account to add your web site to the Google Friend Connect database. I shall not go through the Google signup process. Once you have a Google account, click on the huge “Set up a new site” button to get started.

Step 2: Set Up a New Site at Google Friend Connect

[Show as slideshow]

[View with PicLens]

• For WordPress sites, click on the “Friend Connect for standard web sites” link.
• Click on the “Continue” link to skip the overview page.
• Enter your web site’s title and URL and click on the “Continue” link.
• Click on the “rpc_relay.html” button and save the file into your web site’s local root folder.
• Click on the “canvas.html” button and save the file into your web site’s local root folder.
• Click on the “Continue” link to proceed to the next page.
• Upload “rpc_relay.html” and “canvas.html” to your web site’s root folder on your web host.
• Click on the “Test to finalize setup” button to complete your web site’s submission to Google Friend Connect!

Step 3: Download, Edit, Upload and Activate the Google Friend Connect WordPress Plugin

[Show as slideshow]

[View with PicLens]

This is the toughest part of the whole process. Google did not release a very user-friendly WordPress plugin. You will have to extract the plugin files into a specific folder, edit the source code and upload the plugin files before it will work.

40
41
42
43
44

// Please modify the following function to return a value that
// you obtain after registering your site with FriendConnect
function fc_get_site_id () {
  return '14868846668007632003';
}

109
110
111
112
113
114
115
116
117

<!-- Initialize the Google Friend Connect OpenSocial API. -->
<script type="text/javascript">
   var SITE_ID = "<?echo fc_get_site_id(); ?>"
   google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
   google.friendconnect.container.initOpenSocialApi({
   site: SITE_ID,
   onload: function(securityToken) { initAllData(securityToken); }
  });
</script>

• Click on the “Plugins” link on your Google Friend Connect page.
• Click on the “WordPress” link.
• Click on the “Downloads” tab of the Google Code page.
• Click on the “wordpress.zip” file to download it to your computer.
• Create a folder with the name “fc_plugin” in your web site’s local “wp-content/plugins/”.
• Extract the files in the “src” folder of “wordpress.zip” into the new “fc_plugin” folder.
• Open the file “fc_plugin.php” with your favourite HTML editor.
• Go to line 43. It should have something like return ‘XXXXXX’, where ‘XXXXXX’ is the default Site ID number Google added into the file.
• Get your site ID by checking out your address bar when you are browsing your Google Friend Connect page. There should be something like “id=xxxxxx”. The numbers after the “id=” is your Site ID. I have not idea why Google does not display this prominently in the Google Friend Connect area.
• Replace the Site ID in “fc_plugin.php” with your Site ID.
• Go to line 112. Remove everything in the bracket and leave only ‘/’. This is for letting the plugin know your 2 HTML files are in the root folder.
• Upload the “fc_plugin” folder to your web site’s “wp-content/plugins” folder on your web host.
• Activate the plugin at your WordPress plugins page.

Step 4: Test the Google Friend Connect WordPress Plugin

[Show as slideshow]

[View with PicLens]

You should see a Google Friend Connect sign in box at the comment box of every single post. Try signing in and posting a comment to see if it works. It it works, then you’ve done everything right. If it doesn’t, check out line 43 and 112 to see if you entered the right code.

Problems with the Google Friend Connect WordPress Plugin

I am not sure how to edit the positioning and design of the sign in box. It looks pretty ugly at the moment. This plugin adds a lot of extra CSS code to your web site, which may mess up your web site’s design. I will post a tutorial on how to edit the Google Friend Connect WordPress plugin once I have figured out how to do it.