I’ve been struggling to add options and settings to the Headway-based WordPress site project I’m working on and part of that effort I’ve directed in making the whole site AJAX-able.
It turns out that the jQuery ajaxify
plugin I’ve written in the process makes that particular result easy to obtain.
In an Headway child theme queue a script file and call it on the whole site like
$('body').ajaxify({
loadFromSelector: '.block-type-content .block-content',
loadToSelector: '.block-type-content',
excludeSelector: '.comment-reply-link, .cancel-comment-reply-link, .post-edit-link, .entry-comments',
base: 'http://thehomeurl.com'
});
to load the new content into the Content block taking it from the loaded page Content block.
To refine the process queue the script in functions.php
and localize its options in a JavaScript object like
// file functions.php
add_action('wp_enqueue_scripts', function(){
// register ajaxify script
wp_register_script( 'tad_ajaxify', get_stylesheet_directory_uri() . '/js/vendor/ajaxify.min.js', array('jquery'), NULL , true );
// queue the script above requiring ajaxify
$handle = 'theme_ajaxify_start';
wp_enqueue_script($handle , get_stylesheet_directory_uri() . '/js/theme_ajaxify_start.js', array('tad_ajaxify'), NULL , true );
// localize the script options in the 'ajaxify_settings' array
// in a traditional WordPress site selectors would be #main-content
// and #main
$ajaxify_settings = array(
'loadFromSelector' => '.block-type-content .block-content',
'loadToSelector' => '.block-type-content',
'excludeSelector' => '.comment-reply-link, .cancel-comment-reply-link, .post-edit-link, .entry-comments',
'base' => home_url()
);
wp_localize_script($handle, 'ajaxify_settings', $ajaxify_settings);
});
and then in the script
// file theme_ajaxify_start.js
jQuery(document).ready(function($) {
$('body').ajaxify(ajaxify_settings);
});
This should take care of it all; forms and their submit
buttons will be left out but the ajaxifySubmit
plugin should do the trick.