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

I came up with this quick solution using only GF filters and jQuery.

What the editor will look like

What the form will look like

The code

Add the placeholder option to the editor

/* In the functions.php file */
/* Add a custom field to the field editor (See editor screenshot) */
add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);
function my_standard_settings($position, $form_id){
	// Create settings on position 25 (right after Field Label)
	if($position == 25){
		?>
		<li class="admin_label_setting field_setting" style="display: list-item; ">
			<label for="field_placeholder">Placeholder Text
				<!-- Tooltip to help users understand what this field does -->
				<a href="javascript:void(0);" class="tooltip tooltip_form_field_placeholder" tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>
			</label>
			<input type="text" id="field_placeholder" class="fieldwidth-3" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">
		</li>
		<?php
	}
}

/* Now we execute some javascript technicalitites for the field to load correctly */
add_action("gform_editor_js", "my_gform_editor_js");
function my_gform_editor_js(){
	?>
	<script>
		//binding to the load field settings event to initialize the checkbox
		jQuery(document).bind("gform_load_field_settings", function(event, field, form){
			jQuery("#field_placeholder").val(field["placeholder"]);
		});
	</script>
	<?php
}

Use jQuery to inject the placeholder value to the fields

/* In the functions.php file */
/* We use jQuery to read the placeholder value and inject it to its field */
add_action('gform_enqueue_scripts',"my_gform_enqueue_scripts", 10, 2);
function my_gform_enqueue_scripts($form, $is_ajax=false){
	?>
	<script>
	jQuery(function(){
		<?php
		/* Go through each one of the form fields */
		foreach($form['fields'] as $i=>$field){
			/* Check if the field has an assigned placeholder */
			if(isset($field['placeholder']) && !empty($field['placeholder'])){
				/* If a placeholder text exists, inject it as a new property to the field using jQuery */
				?>
				jQuery('#input_<?php echo $form['id']?>_<?php echo $field['id']?>').attr('placeholder','<?php echo $field['placeholder']?>');
				<?php
			}
		}
		?>
	});
	</script>
	<?php
}

That’s it! take it for a spin and let me know how it goes.

Issues

Right now it only works with single lines, textareas and the other simple fields. But that’s usually the only places where you will ever need them.

Internet Explorer support update

Angela Bowma wrote a post with a solution that works in Internet Explorer or browsers that don’t support the placeholder property.

$pages = get_pages(array(
	'meta_key' => '_wp_page_template',
	'meta_value' => '<Insert your template file name here>'
));

Example of use

List all the published pages that use the template “page-quote.php”:

$pages = get_pages(array(
	'meta_key' => '_wp_page_template',
	'meta_value' => 'page-quote.php'
));
foreach($pages as $page){
	echo $page->post_title.'<br />';
}

How does it work?

The template assigned to the page is stored as a meta data by the key ‘_wp_page_template’. Using the get_pages() WordPress function, we can ask for the page where ‘_wp_page_template’ equals our template name.

More Info

get_pages() documentation

Hope this helps, post a comment if you have any questions.

<script>
my_url_object = document.location;
</script>

That code yields out something like this in Chrome’s Javascript console:

Example of use:

You can show certain section of your code depending on a hash tag in the URL:

<div id="section-1" class="section">Section 1</div>
<div id="section-2" class="section">Section 2</div>
<script>
$(function(){
	// Get the hash parameter from the URL.
	active_section = document.location.hash;
	// Hide ALL the sections
	$('.section').css('display','none');
	// Show the section specified in the URL
	// The URL can be:
	// - http://localhost/example/index.html#section-1 , or
	// - http://localhost/example/index.html#section-2
	$(active_section).css('display','block');
});
</script>

Post a comment if you need help!

What’s the current problem?

Once you’ve uploaded images to the media library, it’s impossible to resize them to the new sizes that you’ve added using add_image_size() function.

How does AJAX Thumbnail Rebuild solves the problem?

Although the name is a little bit misleading, ATR (AJAX Thumbnail Rebuild) goes through all the images that you have uploaded before and creates the new image sizes that you’ve added using the add_image_size() function.

Other similar plugins used to do all this process in the backend, which often timed out for large image libraries. That’s where ATR came up with a way to do it using AJAX and that’s why the plugin name is AJAX Thumbnail Rebuild.

How to use it?

1. Add the image sizes that you’re going to use across your site using add_image_sizes() WordPress function
2. Download and install the AJAX Thumbnail Rebuild plugin on your WordPress site
3. Go to “Tools > Rebuild Thumbnails”
4. Select the thumbnail sizes that you want to re-generate and click “Regenerate all Thumbnails”

This is a great plugin and its functionality should really be considered to be included in WordPress.