WP Job Manager: Creating a custom job search form

Question

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

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

There is a tutorial (https://wpjobmanager.com/document/tutorial-creating-custom-job-search-form/, 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.

<?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>

Answer 1

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:

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: http://www.synergy-personnel-services/all-jobs/

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