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);
        }
      })
   })
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In previous questions you mentioned that you created a child theme and installed the multiple themes plugin so that you could put code on a specific page on your site. So you’ve been using child themes in a way that they weren’t intended to be used.

Instead, think of a child theme as a transparency, a layer over the top of your theme. You create a child theme, and place custom code in it, then activate that child theme instead of the theme you were using. WP will load both themes, preferring the template files in the child theme.

This way, because all your changes are in the child theme, when the parent theme is updated no loss occurs.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0