Move custom code out of theme’s functions.php file


I have written code to use on a single page, but I’ve placed it in the theme’s functions.php and created a javascript file and placed it in the theme’s JS directory.

Recently, the theme was updated and functions.php was overwritten and JS file disappeared.

Where do I need to put this code so when the theme is updated, my code will not be lost?

functions.php:

 add_action('wp_ajax_zip_search', 'zip_search'); add_action('wp_ajax_nopriv_zip_search', 'zip_search' ); function zip_search() {     global $  wpdb;      $  zip = $  _REQUEST["zip_code"];      /**/      $  query = 'SELECT zone FROM Counties WHERE zip = %s';     $  zone = $  wpdb->get_var( $  wpdb->prepare($  query, $  zip) );      $  output = "<h1>".$  zone."</h1>";     $  t_zone = $  zone;     $  trimmed_zone = trim($  t_zone);      $  query = 'SELECT * FROM Managers WHERE zone = %s;';     $  manager_info = $  wpdb->get_row(  $  wpdb->prepare($  query, $  trimmed_zone) );      $  output .= "<table style=\"width:100%\">" .                      "<tr>".                         "<th>Zone Manager</th>".                         "<th>Phone</th>".                         "<th>Email Address</th>".                     "</tr>" .                     "<tr>" .                          "<td>" . $  manager_info->first_name . " " . $  manager_info->last_name  . "</td>" .                          "<td>" . $  manager_info->phone_number . "</td>" .                          "<td>" . $  manager_info->email_address .  "</td>" .                      "</tr>" .                 "</table>";      $  query = 'SELECT Region_Number FROM Zones WHERE Zone = %s';     $  region = $  wpdb->get_var( $  wpdb->prepare($  query, $  zone) );      $  query = 'SELECT * FROM Agblist WHERE Region_Number = %s';     $  results = $  wpdb->get_results( $  wpdb->prepare($  query, $  region) );          $  output .= "<table style=\"width:100%\">";          $  output .= "<tr>".                 "<th>Company Name</th>".                 "<th>Contact Info</th>".                 "<th>Channel</th>".                 "<th>Territory</th>".                "</tr>";      foreach( $  results as $  result )      {         $  output .= "<tr>".                         "<td>".$  result->Company_Name."</td>".                         "<td>".$  result->Corp_Address_Line_1."</br>".$  result->Corp_Address_Line_2."</br>".$  result->Corp_City.", ".$  result->Corp_State." ".$  result->Corp_Zip_Code."</br>".$  result->Office_Phone_1."</td>".                         "<td>".$  result->Channel."</td>".                         "<td>".$  result->Agent_Territory."</td>".                     "</tr>";     }     //$  output .= "<li>Result: ".$  results."</li>";     $  output .= "</table>"; /**/     //$  output = "<p>here</p>";     $  response = array(         'data' => $  output,     );      wp_send_json_success($  response); }  add_action( 'wp_enqueue_scripts', 'my_load_scripts' ); function my_load_scripts() {      // Enqueue javascript on the frontend.     wp_enqueue_script(         'zip_js',         get_template_directory_uri() . '/js/zip_search.js',         array('jquery')     );      // The wp_localize_script allows us to output the ajax_url path for our script to use.     wp_localize_script(         'zip_js',         'myAjax',         array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )     );  } 

/js/zip_search.js:

jQuery(document).ready( function() {    console.log("Document loaded!");    jQuery("#AgentSearchButton").click( function(e) {       console.log("Search button clicked");       e.preventDefault();        var zipCode = document.getElementById("AgentInputField").value;       console.log("Zip code entered: " + zipCode);       jQuery.ajax({          type : "post",          dataType : "json",          url : myAjax.ajaxurl,          data : {              'action': "zip_search",              'zip_code' : zipCode          },          success: function(response) {             console.log(response.data);             if(response.success) {                 console.log("response.type == success");                 jQuery("#results").html(response.data.data);             }             else {                 console.log("response.type == else");                 console.log(response.data);             }          },         error: function(errorThrown){             console.log("In error, error thrown!");             console.log(errorThrown);         }       })    }) });