1. Clone all the remote WordPress files in your local computer.
2. Clone the remote WordPress database into your local computer.
3. Update the wp-config.php file with your local MySQL access info and database name.
4. Replace the old domain with the new domain in your local MySQL by running this commands:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://old.domain.com', 'http://new.domain.com');
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://old.domain.com', 'http://new.domain.com');

function loadGoogleMapsApi(){
	if(typeof google === "undefined"){
		var script = document.createElement("script");
		script.src = "https://maps.google.com/maps/api/js?sensor=false&callback=loadGoogleMapsApiReady";
		document.getElementsByTagName("head")[0].appendChild(script);
	} else {
		loadGoogleMapsApiReady();
	}
}
function loadGoogleMapsApiReady(){
	$("body").trigger("gmap_loaded");
}

First we define the loadGoogleMapsApi function, where we include the script tag which is going to start loading Google Maps’ API. Notice in line 4 how we define the callback function loadGoogleMapsApiReady. This is the function that will be executed after the library has been loaded.

The second step is defining the callback function loadGoogleMapsApiReady. This function simply triggers the custom even gmap_loaded on the body.

You’re all set now! Now is time to use the on demand functionality. For that you only need to attach some functionality to the custom event gmap_loaded triggered on the body tag. See below:

$("body").bind("gmap_loaded", function(){
	alert("Google map is loaded and ready to be used!");
});
loadGoogleMapsApi();

If you want to load the Google Maps API on a button click, you could do something like this:

$(".my-btn").click(function(){
	$("body").bind("gmap_loaded", function(){
		alert("Google map is loaded and ready to be used!");
	});
	loadGoogleMapsApi();
});

Let me know what you think and how it worked for you.

Here’s a link to the snippet on the gist: https://gist.github.com/2432506

I have a couple of pages that need a set of files, so instead of including one by one in all the pages, I created a function that calls requires them all, keeping the callback function.

require_form = function (callback) {
	require([
		"form",
		"validate",
		"multiselect",
		"form_extend"
		], function(){
			require(["my_validate"], callback);
		}
	);
};

Whenever I need to require the form set of files, I call:

require_form(function(){
	alert('All form files are loaded!');
});

Check out code on the gist https://gist.github.com/2432457

• make a limited symbols subset, with reduced font size
• merge symbols from several fonts to single file
• access large collections of professional-grade open source icons

We’re currently using postMessage/receiveMessage to dynamically resize an iframe inside our client’s page. The plugin works in most browsers, including IE. But in my case, it was failing in IE when a form was submitted inside the iframe. It took us a long time to figure out the solution, but we finally came up with a fix.

In the plugin’s website, they show and example of how to use it to communicate between two iframes residing in two different domains (http://benalman.com/code/projects/jquery-postmessage/examples/iframe/). I’m going to use that example to show you how to solve it.

After a lot of debugging, we found out that the parent_url wasn’t being set in IE after the form was submitted. So our solution was to add a hidden field that can hold the parent_url value when the iframe first loads.

Here’s a quick example of how to fix the issue using the example posted in the plugins’s website:

The child frame code

$(function(){
	var parent_url, link;

	// Create the hidden input field that will hold the parent_url variable.
	$("form").append('<input id="parent_url" type="text" name="parent_url" />');

	// We check to see if location hash is empty. It should only go in here if you're using IE and after the form as been submitted.
	if(document.location.hash == ""){
		var search 		= document.location.search,
				id 				= "parent_url=",
				hs_start	= search.indexOf('parent_url'),
				hs_end 		= search.indexOf('&product_service');

		// Get the parent URL from the URL parameters sent by the form
		parent_url = decodeURIComponent( search.substr(hs_start + id.length, hs_end - id.length - 1) );
	}
	// If location hash is not empty, then we just assign it to the variable parent_url
	else{
		parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) );
	}
	// We assign the value of the parent_url to the hidden input element. That way if document.location.hash is not accessible, it can be accessed
	$("#parent_url").val(parent_url);

	// This is the function that posts a message to the parent for it to resize the iframe
	function setHeight() {
		$.postMessage({ if_height: $('body').outerHeight( true ) }, parent_url, parent );
	};

	setHeight();
});

The code for the parent window stays the same as in the example. After applying this changes, the code should work properly after submitting a form.

Also if you have links in your code and want your iframe to resize every time you go to a new page inside the iframe, try doing something like this in your iframe code:

// Go through each link and append the parent_url variable to the end.
$("a").each(function() {
	$(this).attr("href", $(this).attr("href")+"#"+parent_url);
});

Hope this post saves somebody a bunch of hours of debugging and IE cursing. If you’re having a similar problem implementing postMessage/receiveMessage, post a comment and we can figure out together.

Checkout the code in the gist

Using a different language for WordPress’ admin, was something I’ve always wanted to learn, so I started looking around and I couldn’t believe how easy it was…

1. Download the language files

Go to this url http://codex.wordpress.org/WordPress_in_Your_Language and search for the language that you’re looking for:

1. Find the language that you’re looking for (i.e.: es_ES)
2. Download the whole WordPress package for that language
3. Uncompress the downloaded .zip file
4. All the language files will be under the /wp-content/languages/ directory

2.Move the languages files to your current WordPress installation

Copy the language files from the previously uncompressed package (from /wp-content/languages/) and move them to /wp-content/languages/ in your current WordPress installation.

3. Change the wp-config.php file

Go to the /wp-config.php file in your current WordPress installation and change the WPLANG constant to your language.

This is what mine looks like:

define('WPLANG', 'es_ES');

That’s it!

Reload your admin panel and it should now be translated to your own language (or your clients’).

While researching this stuff, I also found an amazing plugin to manually translate WordPress templates that use the __() and _e() l10n’s functions. If you don’t know what I’m talking about check this out http://codex.wordpress.org/I18n_for_WordPress_Developers. I’ll be writing a post about that soon, so stay close if this is something you’re interested in!

The key thing to understand is that the rules of SEO aren’t magic or arbitrary. They’re based on the goals of a search engine, which is to find relevant results. Relevance implies genuineness, and genuineness implies trust. So, shockingly, you should try to make your site’s content trustworthy, genuine and relevant. All of the rules have come about due to their utility in detecting those three positive metrics. Good SEO is a by-product of not being a dick on the internet.

Matt Legend Gemmell ~ SEO for Non-dicks

I couldn’t agree more with Matt. I’d add that some of the core SEO rules are also based on how usable and accessible the site is.

This is a technique I’ve never seen before, so if you don’t know what I’m talking about, just check out the video.

Here’s a quick step-by-step list:

1. In Photoshop, select a layer with styles assigned to it.
2. On the main menu, go to Layer > Layer Style > Create Layer (Click OK on the message prompt).
3. Now all the styles are layers!