O ideal é separar em arquivos não fazer tudo no functions, oque você pede em sua questão é um pouco grande pra colocar aqui mas vou tentar exemplificar bem, primeiramente você deve criar um evento com jquery ou javascript puro para esse input, eu recomendo utilizar o .on("input") (caso utilize jquery).
Dentro desse evento do input você deve fazer uma requisição ajax, para isso você irá necessitar carregar um arquivo do wordpress chamado admin-ajax.php, para isso coloque no functions do seu tema as seguintes linhas de código:
function Wps_load_scripts() {
wp_register_script( 'my-script', get_template_directory_uri() . '/js/javascript.js');
wp_localize_script( 'my-script', 'ajaxLoad_ajaxurl', admin_url('admin-ajax.php') );
wp_enqueue_script( 'my-script');
}
add_action('wp_enqueue_scripts', 'Wps_load_scripts');
A função wp_localize_script irá permitir você utilizar este arquivo dentro do seu JS, então ali no "my-script" você coloca o nome do JS que você vai manipular.
Depois de realizado isso você vai fazer o seguinte no arquivo JS :
$content = $(".divquedesejocolocarmeuconteudo");
$('#meuinput').on('input', function() {
var title_page , input;
input = $(this);
title_page = input.val();
var datasend = {action: 'load_input_post', title:title_page};
$.ajax({
type: "GET",
data: datasend,
dataType: "json", //Esse retorno pode ser em HTML tbm
url: ajaxLoad_ajaxurl, /*Isso daqui é a variavel que passamos pelo
localize_script dentro do functions*/
beforeSend: function() {
/* geralmente onde se coloca o loader */
},
success: function(data) {
if(typeof data != "undefined" && typeof data !== null) {
if(typeof data.conteudo1 != "undefined" && typeof data.conteudo1 !== null) {
$content.html(data.conteudo1);
}
}
}else {
/* remover loader */
}
});
A variavel "datasend" passamos 2 valores, action (que é a função que vai ser chamada pelo ajax pro php) e o title que é o titulo pesquisado.
Muito bem, assim que construido isso no seu javascript podemos partir para o functions.php
No functions.php do seu tema você vai criar uma função com o mesmo nome que você colocar no valor da action, ali no datasend (no js).
function load_input_post(){
$page_title = (isset($_GET['title']) ? $_GET['title'] : '' );
$tipodopost = 'post';
/* para recuperar a página pelo titulo você pode usar a função get_page_by_title ()*/
$page = get_page_by_title($pagetitle, OBJECT, $tipodopost);
/*Pronto, agora a variavel $page armazena todas as informações da página, use como desejar*/
/* se você for retornar um HTML já construido você deve fazer o seguinte */
<?php
ob_start();
$var = "teste";
$var = "teste2";
?>
<h1>teste</h1>
<img src="<?php echo $var; ?>">
<img src="<?php echo $var_2; ?>">
<?php
$teste = ob_get_clean();
/* usei o ob_get_clean() pois é mais rapido, faça o método que desejar */
/* para enviar o $teste de volta para seu JS para que possa colocar no conteudo retorno um JSON */
$response = array();
$response['conteudo1'] = $teste;
wp_send_json($response); /*enviado de volta para o js */
}
add_action('wp_ajax_load_input_post', 'load_input_post');
add_action('wp_ajax_nopriv_load_input_post', 'load_input_post');
/*Essas duas linhas de cima são necessárias para o wp entender que isto acima é uma função para requisição ajax, os nomes "wp-ajax" e "wp-ajax-nopriv" são prefixos, para em seguida surgir o nome da sua função, o nopriv é para usuários não logados*/
HTML exemplo:
<input type="text" id="meuinput">
<div class="divquedesejocolocarmeuconteudo"></div>
O código acima é o método que costumo usar e funciona kkkk, se tiver alguma alternativa melhor vou ficar acompanhando o post, o código foi pensado num cenário onde você não tem os posts listados e tem que busca-los na base, se o post ja estiver na página, basta fazer um filtragrem pelo js sem precisar do ajax, espero ter ajudado.