Populando uma div com ajax usando o WordPress

Populando uma div com ajax

<!--
	Essa parte do código deve ser inserida no arquivo onde está o formulário.
-->
<script>
// Isso evitará que a página seja recarrega ao enviar o formulário
$('form').submit(function () {
    return false;
});
// Quando o submit do formulário for clicado
$("#id-do-seu-botao").click( function() {
	// Faz a requisição ao arquivo e carrega a div #lista-produtos
	$("#id-da-div-onde-sera-carregado").html('Aqui você pode inserir uma mensagem enquanto está carregando as informações. Sim você pode usar tags html <img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/emotion_smile.png" alt="Sorria, você está sendo ajudado!" />');
	// Aqui a brincadeira começa
	$.post("<?php echo get_template_directory_uri() .'/inc/seu-arquivo-com-a-consulta.php'; ?>",
		{
			// Aqui você começa a passar suas variáveis para o arquivo carregado acima
			nome_da_variavel_1 : $("#id-do-campo-1").val(),
			nome_da_variavel_2 : $("#id-do-campo-2").val(),
			nome_da_variavel_3 : $("#id-do-campo-3").val()
		},
		function( conteudo_final ) {
			$("#id-da-div-onde-sera-carregado").html( conteudo_final )
		}
	);
});
</script>

<!--
	Essa parte do código deve ser inserida no arquivo onde está sendo feita a consulta.
	Levei em consideração que será um arquivo que só servirá para isso
-->
<?php 
	/**
	 * Aqui vamos inserir compatibilidade com o WordPress no seu arquivo php.
	 * Isso significa que você poderá usar as funções nativas do WordPress :)
	 * 
	 * Você pode informar desse jeito '../../../../' ou colocar o domínio do site, porém,
	 * caso mude de domínio você terá que alterar novamente.
	 */
	$absolute_url = '../../../../'; // Não preciso explicar que com cada ../ você está voltando 1 diretório né?
	define('WP_USE_THEMES', false);
	require(''. $absolute_url .'wp-load.php');

	// Agora vamos receber as variáveis que preparamos lá no formulário
	$nome_da_variavel_1 = $_POST['nome_da_variavel_1'];
	$nome_da_variavel_2 = $_POST['nome_da_variavel_2'];
	$nome_da_variavel_3 = $_POST['nome_da_variavel_3'];

	/**
	 * Pronto! Agora é só se divertir montando o resultado para ser impresso na #id-da-div-onde-sera-carregado
	 * Lembre que será impresso dentro de uma div, ou seja, você não precisa montar uma página html inteira.
	 * Com essas informações é possível montar uma página como essa: http://www.futuratintas.com.br/categoria/nossos-produtos/
	 * Documentação para consulta: http://api.jquery.com/jQuery.post/
	 */
?>