Wordpress Plugin-How to show job count in job search.

WP Job Manager is one of the famous job board in WordPress world. It provides option for Adding job from front-end. It gives a dashboard where user can check their posted job. Also a job directory where user can search the jobs.

Let’s talk about the job search. WPJM provides a shortcode called [jobs]. Here user can search job based on category, type and location etc. Well this works like a charm. But for our new project “Jobster“, we wanted to show job count on live job search. Let me explain how we have achieved this. it is very simple to do. Thanks to WPJM.

So we have to achieve it in three steps.

Step 1:

We need to over ride the job-listings-start.php. Please refer this article for it. https://wpjobmanager.com/document/template-overrides/ .

When you will move your job-listings-start.php file inside the theme like mytheme/job_manager/job-listings-start.php, you will find this.

<ul class="job_listings">

Now we need to edit it to  https://gist.github.com/kishoresahoo/77cdabcc46d5dfc2cf8baa34ed450a22

<h2 id="titlebar">Showing <span class="count_jobs"></span> Jobs</h2>
<ul class="job_listings">

Step 2:

Please open your theme function file and add this function. Here we hooking post_count to ajax parameter of job search. So in this way we will get the value of job count during live job search. https://gist.github.com/kishoresahoo/a3bc9e4e9805b39ac5b38485354c28f0

/*
 * @see WP_Job_Manager_Ajax class line 211 wp_send_json( apply_filters( 'job_manager_get_listings_result', $result, $jobs ) );
 * 
 */
function custom_job_manager_get_listings_result($result, $jobs) {
  $result['post_count'] = $jobs->found_posts;
  return $result;
}
add_filter( 'job_manager_get_listings_result', 'custom_job_manager_get_listings_result',10,2 );

Step 3:

Now we have the job count during ajax search. So we need to now display it as per our wish. So please open your theme js file or include new js file and then add the following code. https://gist.github.com/kishoresahoo/07e765c2538617d5e4fca0854e61c3db

/* add live job count on job search */
jQuery( document ).ready( function ( $ ) {

  $('div.job_listings').on('updated_results', (function(_this) {
      return function(event, results) {
          $('#titlebar .count_jobs').html(results.post_count);
      };
  })(this));

});