Transférer code de easyPhp(local) vers wordPresss(en ligne)

Bonjour,

je ne maîtrise pas bien wordpress, j'ai un site local fait avec easyPhp et sur ce site j'ai une page affichage.php qui affiche les informations(clients) de ma base de en fonction des villes selectionnées dans un liste déroulante.

Quand on choisis une ville dans la liste déroulante, tous les clients de la ville s'affiche dans un tableau juste en bas de la liste déroulante.

je le fais grâce à un code Ajax que j'ai trouvé sur le net, et ça fonctionne parfaitement dans mon site local.

j'arrive pas à le faire sur mon site wordpress qui est en ligne.

je pense que mon problème est que j'arrive pas à appeler la librairie jquery dans ma page. j'ai pourtant une librairie(jquery.js) par défaut dans mon thème

pouvez vous m'aider à trouver une solution à ce problème?

merci d'avance.

mon code affichage.php

//connexion à la BD
<?php get_header(); ?>
<?php
$sql='SELECT DISTINCT clt_ville
   FROM Client 
   GROUP BY  clt_ville
   ORDER BY clt_ville'; 
$arrVilles=mysql_query($sql); // lancement de la requêtre
?>
<div id="aff">
<form action="" method="">
 VILLE 
 <select  name="ville" id="sel_ville" onclick="afficheVille(this.value);">
<option value="choisir une ville"></option>

<?php
while( $data=mysql_fetch_array($arrVilles)) { 
   $ville = $data['clt_ville'];
  echo "<option value='$ville'>$ville</option>";
       }
       ?>
   </select>
  
  <script type="text/javascript">
 //Script permettant de rafraichir la page 
 //en fonction de la ville selectionnée
 // Necessite la librairie JQUERY
  function afficheVille(ville){
  urlAjx = "rechercheVille.ajx.php";
 $.ajax({   
 type: "POST",
  url:urlAjx,
 data: "ville="+ville,
  async: false,
 dataType: "html",
       success: function(data){
 $("#tbody_detail").html(data);
     },
  error:function(reponse){
 alert('error ' + reponse);
    }
     });
    }
   </script> 
 <table border=1" id="tbl_donnees"> 
								  <thead>
								   <tr> 
//entêt de mon tableau d'affichage												
								   </tr> 
								  </thead>
								  <tbody id="tbody_detail">
								  
								  </tbody>
								 </table> 
						</form>

	    </div><!-- #centre -->
 
 <?php get_footer(); ?>

mon code rechercheVille.ajx.php

<?php
//rechercheVille.ajx.php 
//------------------------------------------------------
// >>>>> Penser à Inclure le fichier de connexion à la BDD
//------------------------------------------------------

 $result="";
 $ville=isset($_POST['ville'])?$_POST['ville']:NULL;
 if($ville){ 
  $req='select * from Client where clt_ville="'.$_POST['ville'].'"'; 
  $res=mysql_query($req); // lancement de la requêtre 

   while( $data=mysql_fetch_array($res)) {  
   $result .="
<tr>   
  <td><font size=2>".$data['clt_nom']."</font></td> 
  <td><font size=2>".$data['clt_prenom']."</font></td> 
 <td><font size=2>".$data['clt_date_nais']."</font></td> 
 <td><font size=2>".$data['clt_ville']."</font></td> 
 <td><font size=2>".$data['clt_portable']."</font></td> 
 <td><font size=2>".$data['clt_fixe']."</font></td> 
 <td><font size=2>".$data['clt_email']."</font></td> 
 <td><font size=2>".$data['clt_code_postal']."</font></td> 
 <td><font size=2>".$data['clt_adresse']."</font></td>
<td>  <input type='checkbox' name='valider[]' value='".$data['clt_nom']."' > </td>
<td><a href='download.php?nom=".$data['clt_nom']." '> Fichier</a></td>
 </tr>";    
    } 
 }
 print ($result);
?>

je précise que ce code fonctionne bien sur mon site local