WP Job Manager: Creating a custom job search form


I am trying to have a search field on my homepage with the WP Job Manager Plugin.

from the functionality point of view it should be like on AirBnB but without the checkin/checkout/guest option and instead a simple search field some check boxes like this

<a href="http://i.stack.imgur.com/BO02a.png" rel="nofollow"></a>

and there should be a "Search" button which would than link to the page where the search results are presented.

There is a tutorial (<a href="https://wpjobmanager.com/document/tutorial-creating-custom-job-search-form/" rel="nofollow">https://wpjobmanager.com/document/tutorial-creating-custom-job-search-form/</a>, but I do not Understand it.

Would appreciate any answer!

The following code is my "job-filters.php"-file, where I edited the search field.

<pre class="snippet-code-html lang-html prettyprint-override"><?php wp_enqueue_script( 'wp-job-manager-ajax-filters' ); ?> <?php do_action( 'job_manager_job_filters_before', $atts ); ?> <form class="job_filters"> <?php do_action( 'job_manager_job_filters_start', $atts ); ?> <div class="search_jobs"> <?php do_action( 'job_manager_job_filters_search_jobs_start', $atts ); ?> <div class="search_keywords"> <label for="search_keywords"><?php _e( 'Search', 'wp-job-manager' ); ?></label> <input type="text" name="search_keywords" id="search_keywords" placeholder="<?php esc_attr_e( 'Search', 'wp-job-manager' ); ?>" value="<?php echo esc_attr( $keywords ); ?>" /> </div> <?php if ( $categories ) : ?> <?php foreach ( $categories as $category ) : ?> <input type="hidden" name="search_categories[]" value="<?php echo sanitize_title( $category ); ?>" /> <?php endforeach; ?> <?php elseif ( $show_categories && ! is_tax( 'job_listing_category' ) && get_terms( 'job_listing_category' ) ) : ?> <div class="search_categories"> <label for="search_categories"><?php _e( 'Category', 'wp-job-manager' ); ?></label> <?php if ( $show_category_multiselect ) : ?> <?php job_manager_dropdown_categories( array( 'taxonomy' => 'job_listing_category', 'hierarchical' => 1, 'name' => 'search_categories', 'orderby' => 'name', 'selected' => $selected_category, 'hide_empty' => false ) ); ?> <?php else : ?> <?php job_manager_dropdown_categories( array( 'taxonomy' => 'job_listing_category', 'hierarchical' => 1, 'show_option_all' => __( 'Any category', 'wp-job-manager' ), 'name' => 'search_categories', 'orderby' => 'name', 'selected' => $selected_category, 'multiple' => false ) ); ?> <?php endif; ?> </div> <?php endif; ?> <?php do_action( 'job_manager_job_filters_search_jobs_end', $atts ); ?> </div> <?php do_action( 'job_manager_job_filters_end', $atts ); ?> </form> <?php do_action( 'job_manager_job_filters_after', $atts ); ?> <noscript><?php _e( 'Your browser does not support JavaScript, or it is disabled. JavaScript must be enabled in order to view listings.', 'wp-job-manager' ); ?></noscript>


I've just done this, you paste that code example where you would like the search boxes to appear.

For me, it was on my homepage in the hero banner. This sets up the form. like so:

<a href="https://i.stack.imgur.com/t1Fm9.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/t1Fm9.png" data-original="https://i.stack.imgur.com/t1Fm9.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

I haven't styled it yet.

To get it working you need to change this line in the example code to show the url where your main jobs page is:

<form method="GET" action="YOUR_JOBS_PAGE_URL">

For me it was:

<form method="GET" action="../all-jobs">

When you set up WP Job Manager, it asks you to choose a page where you will display the jobs - then you add the relevant shortcode to that page and that page will display all of your jobs.

This page is the page you need to add inside that line of code. The page I chose was called all-jobs and appeared at the end of my URL like this: <a href="http://www.synergy-personnel-services/all-jobs/" rel="nofollow">http://www.synergy-personnel-services/all-jobs/</a>

I believe you can, of course, put the full URL in there, but adding just the name of the page preceded by the ../ ensures if you ever change the domain the link will still work


  • Pandas unable to filter rows by quarter in specific year
  • How to stop 3 images side by side inside a div from wrapping to the next line?
  • cc1plus: unrecognized command line option warning on any other warning
  • how do i auto increment a value in firebase
  • Swift - define a recursive type with a protocol
  • Grails Acegi manual login
  • Custom test adapter installed via NuGet isn't discovering tests
  • Pass data from page to page safely
  • How to generate nodes with customized shape?
  • How to add fog to texture in shader (THREE.JS R76)
  • Antcontrib and in ant?
  • Cross-platform way of having non-blocking console input
  • Wordpress plugins it asks for FTP Details
  • Grouping via an element in hash [closed]
  • How do I get partial cell styling in excel using EPpplus?
  • exception thrown while building the java application using netbeans
  • Was default_marker removed from mapbox-gl.js
  • Karate: JsonPath wildcards didn't work or partly didn't work
  • Returning the content of multiple files in node.js
  • How to implement tap to focus on barcode scanner app using swift?
  • Is there a command line tool to get the machine code for an assembly instruction?
  • QNetworkAccessManager one instance and connecting slots
  • Videos won't upload
  • In metro, get all inherited classes of an (abstract) class?
  • Defer unused CSS
  • Modifying native query cannot have named parameter bindings?
  • Floating parent div grows to hypothetical width of floating child div
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Codeigniniter insert data through models and controller
  • PHP Permalinks.. how to change?
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?