Search

Customizing WP Jobs Manager: Personalized Search Options

    Ramandeep Singh
Listen to this article

Wp-jobs-manager

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.

screenshot-jobtribe

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.

jobmanager-screenshot

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.

screenshot-jobtribe

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.

Ramandeep Singh

Ramandeep Singh

9 Responses

  1. Where does all this code go? Does this require making a new page in the Wp Manager plugin folder somewhere? Great tutorial thank you.

  2. hiii.. i want hide the the job list.. when i search the job the showing the serach result.. can you help how can i do.

  3. Hi, I need to implement a custom query in job results. Can you tell me the action hook that would allow me to modify job listings?

    Thanks!

  4. Hi xan you please tell me how to impliment this code. The screenshot you provides is exactly the effect I have been trying to acheive. Thanks

  5. Hello anyone, i want to replace first text field of the searchbar, like in this page on the top image’s searchbar you write a *developer* and i want to write my own field, so can anyone help me please about this?

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads