Maverick Web Creations » Wordpress Help

WordPress Affiliate Platform Review

admin_mwc — Thu, 14 Apr 2011 15:27:13 +0000

I recently purchased the WordPress Affiliate Platform plugin to create my own affiliate program for the Maverick Sales Letters theme.

The screen shots above are some of the customisations I made to the plugin to integrate it seamlessly with my Maverick Sales Letters theme.

WordPress Affiliate Platform Vs Magic Affiliate Plugin Vs WordPress Affiliate

I spent a lot of time researching the various WordPress affiliate program plugins available and decided that the WordPress Affiliate Platform would best suit my needs.

I also tested the Magic Affiliate plugin and it was a disaster! It seem to work only with the WP E-Commerce plugin and the integration options with other shopping carts and payments systems is non-existent but their sales letter claims they are the best.

Another problem was the documentation was not public and I only found out it could not work the way I needed it to work after purchasing it. Luckily, I received a refund from the author after letting him know that his plugin does not work for my product.

Another plugin I found was the WordPress Affiliate by WPMU. I did not test this one out because I was not keen on joining their membership site just to get this plugin. Furthermore, I could not figure out if this plugin would suit my needs because the documentation was not public and I had to take the risk of joining their membership to find out if it worked the way I needed it to work.

My Rant on Software Documentation: Be Open and Make Them Public

Just a side note… I wish more software developers would publish their documentation on the internet so that potential customers can find out if their software is something that they would like to invest their time and money on before making a purchase.

It is just plain annoying to purchase something only to find out it won’t work for you after reading the instructions. That is why I published my Maverick Sales Letters user guide online because I do not want to annoy my customers.

Installation and Configuration

Installation was easy because it is a WordPress plugin after all. Simply upload the plugin to your WordPress installation and activate it.

The configuration options seem pretty straightforward and self-explanatory. The author has a great archive of tutorials on how to get the plugin up and running. Another great reason to buy WordPress Affiliate Platform is because of the good documentation and great support from the author.

Integration with Third Party Scripts and Payment Gateways

WordPress Affiliate Platform works with the following:

WP eStore
WP E-Commerce
PHPurchase
Clickbank
PayPal
Contact Form 7
and more!

I only had to read the documentation to be sold on the features. I knew I could integrate it with DLGuard, which is the PHP script that I use to manage my payments and orders.

WordPress Affiliate Platform has great API features that allows you to create your own scripts to manipulate your affiliate data. I can process affiliate commission refunds and add sales with the API. In one of the screen shots above, I have a custom script that allows me to process refunds of the affiliate commission should a customer refund his purchase.

Customisation of Web Page and Emails

You may display the WordPress Affiliate Platform by adding it to a WordPress page or with its built-in affiliate pages.

I prefer adding it to my WordPress pages because I can create a consistent look and feel for my entire web site.

My only gripe with this option is the HTML, CSS and Javascript code for the affiliate member’s page is quite disorganised and contains quite a few erros.

It took me quite some time to clean up the code but for most users, this won’t be necessary as it still functions properly regardless of the HTML errors.

For me, it is simply unacceptable because I am a professional Web Developer and I have to project a professional image to my clients. I can’t accept having poorly formed HTML, CSS and Javascript code for my products.

You may customise some of the emails in WordPress but some of them can only be customised by editing the source code. The good thing is, the source code is not encrypted and you are free to edit it to suit your own needs, which was what I did.

Affiliate Program Options

One of the things I always wanted to do was to create a 2-tier affiliate program. You can do that with the WordPress Affiliate Platform.

I initially wanted to use Clickbank or e-junkie’s affiliate platform but they don’t support 2-tier affiliate programs. It takes over a month for me to clear Clickbank cheques in Singapore and I was not very keen on having to wait 3 months before I get real money into my bank account. Furthermore, I did not wish to abide by all their rules.

I almost wanted to sign up with e-junkie but after looking at DLGuard and the WordPress Affiliate Platform plugin, I decided it would serve me better by managing my own payments and affiliate program. That’s how the biggest internet marketing gurus do it too.

Conclusion

I give WordPress Affiliate Platform 4.5 out of 5.

If not for the minor issues with the look and feel of the affiliate pages, I would give this plugin 5 out of 5. Once you purchase it, you are free to edit the source code and use it on multiple web sites. Throw in the great documentation and support, this plugin is simply a steal if you look at how it will make money for you.

What more could you ask for less than 50 bucks?

Creating jQuery UI Tabs in WordPress

admin_mwc — Fri, 18 Jun 2010 09:00:41 +0000

jQuery UI is the official jQuery user interface library. It provides interactions, widgets, effects, and theming for creating rich internet applications. jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design.

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:

jquery.ui.core.min.js
jquery.ui.widget.min.js
jquery.ui.tabs.min.js

Include jQuery UI Files into Your WordPress Theme

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

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.

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


	
	
		Latest
		Popular
		Most Comments
	
	
	
	
		....
	
	
	
	
		....
	
	
	
	
		....

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.

How to Create a jQuery Slide Gallery with WordPress Posts

admin_mwc — Thu, 17 Jun 2010 09:00:41 +0000

This is a tutorial to replace my old tutorial on how to add SmoothGallery to WordPress. The principles of adding SmoothGallery and a jQuery slide gallery are almost the same. I’ve did some research and found what I consider to be an excellent slide gallery jQuery plugin.

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

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

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
	});
});


	

	have_posts())
	{
		$portfolio_highlights->the_post();
		#RETRIEVE THE FEATURED BOX SLIDE IMAGE URL
		$picture = get_post_meta($post->ID, 'picture', true);
		#RETRIEVE THE FEATURED BOX SLIDE URL
		$url = get_post_meta($post->ID, 'url', true);
		#FEATURED BOX SLIDE IMAGE URL EXISTS
		if(!empty($picture))
		{
		?>

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.

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:

Enter some text into the “excerpt” box.
Enter the URL of the FeaturedBox thumbnail into the “picture” custom field box.
Enter the URL of the FeaturedBox slide into the “url” custom field box.
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.

4 Pop Over WordPress Plugins

admin_mwc — Wed, 16 Jun 2010 09:56:33 +0000

To me, a pop over window is essential for getting new subscribers to your newsletter. I have found 4 WordPress plugins that allow you to add a pop over into WordPress with relative ease.

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.

Include the Latest Version of jQuery in WordPress without Duplicates

admin_mwc — Tue, 15 Jun 2010 09:15:29 +0000

At the time of this posting, WordPress 2.9.2 uses jQuery 1.3.2 but the latest version is 1.4.2. I wanted to use the latest version because it is supposedly about 3 times as fast as 1.3.2 as reported on the jQuery 1.4.2 release notes.

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 tag of your web page to load an external Javascript file.

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.

How to Split Test Your Pop Over Window in WordPress

admin_mwc — Mon, 14 Jun 2010 07:42:25 +0000

I installed the OptinPop plugin to create pop over windows for my newsletter opt-ins. I wanted to measure the effectiveness of my pop over window’s ability to get people to sign up for my newsletter. Since I have been using Dynatracker to track the number of people who click on my links and also to split test elements on my web pages, I decided to find a way to split test multiple versions of my pop over window with Dynatracker to see which one converts the best.

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…










	
		
		
		
		First Name:

		Email Address:

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.

jQuery or MooTools in WordPress?

admin_mwc — Thu, 10 Jun 2010 13:15:29 +0000

I have recently ditched the MooTools Javascript library in favour of the jQuery Javascript library. What that means is I have removed the MooTabs and SmoothGallery from this web site and replaced them with jQuery scripts instead.

My reasons for giving up MooTools…

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.
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.
Some of my favourite WordPress plugins like the NextGen gallery use jQuery so I have to load the jQuery library on my web site.
I didn’t want to have 2 different Javascript libraries on my web site because it would increase the loading time of my pages.
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.

How to Speed Up WordPress Part 1: Plugins

admin_mwc — Thu, 10 Jun 2010 09:34:45 +0000

I recently made some changes to my web site to try to speed up the loading time of my pages. After installing loads of WordPress plugins and other social networking widgets, my web site loading time became rather slow because of all the extra CSS and Javascript code that came with them.

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:

PHP code
HTML code
CSS code
Javascript code
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.

WP Super Cache – Generates html files that are served directly by Apache without processing comparatively heavy PHP scripts.
WP Minify – Combines and compresses Javascript and CSS files to improve page load time.
WP Optimize – A database clean up and optimization tool that allows you to remove post revisions, comments in the spam queue and unapproved comments.
WP Smush.it – Reduce image file sizes.
DB Cache Reloaded – Caches every MySQL database query to improve performance.
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!

Import/Export Posts from WordPress to WordPress

admin_mwc — Thu, 26 Nov 2009 06:03:12 +0000

I recently did an export of most of the posts of my internet marketing blog to this blog. It was quite simple actually. Simply click on the Tools -> Export link on the left of the WordPress admin sidebar to export all the content from a WordPress blog to a XML file.

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.

How to Customize the Google Friend Connect WordPress Plugin’s CSS & Make It XHTML Compliant

admin_mwc — Wed, 18 Mar 2009 13:57:40 +0000

This is a follow up to my previous post on how to install the Google Friend Connect WordPress plugin. This plugin by Google is really rough on the edges and it requires some tweaks for people concerned with the XHTML code and CSS design.

Fixing the Google Friend Connect WordPress Plugin’s XHTML Errors

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

It uses the
tag, which has been depreciated and the
tag should be used instead.
It uses the tag, which is depreciated and the tag should be used instead.

There is an unnecessary
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:

'' + 'Hello ' + viewer.getField("displayName") + '!
' + 'Settings
' + 'Invite
' + '
';

// 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() { ?>

Edited code:

'' + 'Hello ' + viewer.getField("displayName") + '!
' + 'Settings
' + 'Invite
' + '
';

// 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() { ?>

Replace all
tags with
.

Replace all tags with .

Remove the
tag in the fc_wp_comment_form() function on line 49.

Add a back slash to the 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: