Customizing WP Jobs Manager: Personalized Search Options

One of the fastest ways of setting up a jobs listing website is via WordPress. While there several ways in which this could be done with WordPress, WP Job Manager is just the right plugin for the job, pun intended.

A lightweight and a fluid addon to WordPress, WP Job Manager is a shortcode based plugin that adds a job-board like functionality to your WordPress site. This is an especially unique approach, the use of shortcodes implies that the plugin is extremely compatible with all themes and can be set up with minimal effort.

WP Job Manager provides a default job search bar where you type in your category, location, and job tags, and hit search.

And you get the results on the same page.

This may not be desirable many times. The homepage is sacred, it is your entire website summed up in a single page. The face of your business. Would you really want a clutter of search results right in your home?

What if you want your job search bar on your homepage and the search results to be displayed on another page?

A little bit of custom coding and it’s a piece of cake. Here’s what you’d need to do.

Step 1

Firstly, you’d need to create the shortcode for displaying the search form (the search bar, location selector and the search button) on any required page. The code for the same would be:

add_shortcode('search_form','custom_job_form');?>

Step 2

Next, we define a callback that would employ the shortcode created above and display the search form as follows:

<?php
function custom_job_form()
{
   $args = array(
       'hide_empty'             => false,
       'fields'                 => 'id=>name',
   );
   $action_page_id = get_option('job_manager_jobs_page_id');
   $action_page_url = get_page_link($action_page_id);
   $arr_get_data = array_filter($_GET);
   $job_regions = get_terms('job_listing_region', $args);
   $keywords = "";
   if(!empty($arr_get_data)) {
     $keywords   = isset($arr_get_data['search_keywords'] ) ? $arr_get_data['search_keywords'] : "";
     $location   = isset( $arr_get_data['search_location'] ) ? $arr_get_data['search_location'] : "";
     $comapny_name   = isset( $arr_get_data['search_company'] ) ? $arr_get_data['search_company'] : "";
     $disability     = isset( $arr_get_data['search_disability'] ) ? $arr_get_data['search_disability'] : "";
   }

   $s_categories = get_option( 'resume_manager_enable_categories' );

   ob_start();
   ?>
   <script type="text/javascript">
   jQuery(document).ready(function() {
     jQuery('#search_location').chosen();
     jQuery('.chosen-single').css("border-radius","6px");
     jQuery('.chosen-single').css("box-shadow","none");
   });

   </script>
   <form class="wdm_job_filters" method="GET" action="<?php echo $action_page_url; ?>" name="jobify_search_jobs" id="jobify_search_jobs" onsubmit="jQuery(this).unbind('submit');">

       <div class="search_jobs wdm_search_jobs">
        div class="row wdm_row">
               <div class="<?php echo $s_categories ? 'col-md-6' : 'col-md-6'; ?> wdm_search_keywords wdm_form_div">
                   <label for="search_keywords"><?php _e( 'Keywords', 'jobify' ); ?></label>
                   <input type="text" name="search_keywords" id="search_keywords" placeholder="<?php esc_attr_e( 'All Jobs', 'jobify' ); ?>" value="<?php echo esc_attr( $keywords ); ?>" />

              </div>
           <?php

           if( !empty( $job_regions ) ) {
           ?>
               <div class="<?php echo $s_categories ? 'col-md-6' : 'col-md-6'; ?> search_location wdm_form_div">
                  <label for="search_location"><?php _e( 'Location', 'jobify' ); ?></label>
               <div class="select search_category">
               <select class="postform select" name="search_location" id="search_location">
               <option value=""><?php _e( 'Any Location', 'jobify' ); ?></option>

               <?php

                   foreach ($job_regions as $loc_key => $loc_val ) {
                   echo "<option value='".$loc_key."' ".$selected.">".$loc_val."</option>";
                   }
               ?>
               </select>
               </div>
               </div>
<?php
         }
?>
         <div class="col-md-6 wdm_form_div wdm_submit_div">
           <label for="search_submit">Search</label>
           <input type="submit" name="submit_jobify_form" id="submit_jobify_form" class ="wdm-form-submit"value="<?php echo esc_attr_e( 'Search', 'jobify' ); ?>" />
         </div>

                   </div>
           </div>
      </form>
 <?php
 return ob_get_clean();
}
?>

So when a user clicks on the search bar, he/she would be redirected to the page where we placed the afore-mentioned shortcode, along with the values entered by the user.

Step 3

With the shortcode and the callback in place, you now need to set a page on which the results ought to be displayed. The Job Listings Page option under the WP Job Manager settings lets you choose any one of existing pages (where you have the shortcode implemented) as the page where you want the result to be displayed.

Step 4

On the selected page, the values are retrieved through the PHP code and are sent to the javascript code, which in turn will handle the data on the page.

PHP Code:

<?php

add_action('job_manager_job_filters_start','load_js');
function load_js()

{
 if(isset($_GET['search_location'])) {
   $arr_data= array();
   if(isset($_GET['search_location']))
   {
       $arr_data['search_location'] = $_GET['search_location'];
   }
   wp_register_script('wdm_process_script', get_stylesheet_directory_uri() .'/assets/js/OnLoad-process-url.js', array('jquery'));
   wp_enqueue_script('wdm_process_script');
   wp_localize_script('wdm_process_script','wdm_obj', $arr_data);

 }
}
?>

Step 5

The values entered by user needs to be wrapped in wdm_obj and sent to javascript code using localize_script. The javascript code is written in javascript file OnLoad-process-url.js and is as follows:

jQuery(document).ready(function() {
 if (jQuery(".job_listings").length > 0) {
     function UpdateRegionFunction() {
       setTimeout(
         function(){          jQuery("#search_region").val(''+wdm_obj.search_location+'');
           jQuery(".chosen-single").trigger('change');
           jQuery('#search_region').trigger('chosen:updated');
           },
         2000);
   }
   if(!(jQuery.isEmptyObject(wdm_obj)))
   {
     UpdateRegionFunction();
   }
 }
});

That’s about it. As is evident from the screenshot below, you now have a separate page of your choice where you can display the search results for jobs.

I hope this tutorial helps. Not what you’re looking for? We can help! Write to us, all you gotta do is fill in a simple form. We’d love to hear you out.