How to Create a Search Form For Custom Fields in WordPress?

In this guide, we will demonstrate how users can filter and find specific information using both text search and custom metadata. For that, let’s create a search form and find values based on custom fields in WordPress.

Usecase

We’ll be working with a job listing page that utilizes a custom template file. This template includes an intuitive search form that allows users to filter job listings based on values in custom fields, such as job title, company name, job type, and location. Follow the steps below to implement the search feature for custom fields.

• The first step in creating a job listing page is to create a custom post type (CPT) for the job listings.
• Using the default custom fields feature in WordPress we will be adding custom fields such as Company Name, Job Type, and Location.
• We’ll create a custom page template that includes the search form and displays the filtered results. Using the code below you can create the search form which can be used in the respective page where you want the search functionality to filter based on custom field values. Add the code to your theme’s directory in your custom template file.

<?php
/* Template Name: Search Page */
get_header();
?>

<h1>Find Your Dream Job</h1>

<form role="search" method="get" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>" class="job-search-form">

    <div class="search-field">
        <label for="title">
            <span>Search Title:</span>
        </label>
        <input type="text" name="title" id="title" value="<?php echo isset($_GET['title']) ? esc_attr($_GET['title']) : ''; ?>">
    </div>

    <div class="search-field">
        <label for="company_name">
            <span>Search Company Name:</span>
        </label>
        <input type="text" name="company_name" id="company_name" value="<?php echo isset($_GET['company_name']) ? esc_attr($_GET['company_name']) : ''; ?>">
    </div>

    <div class="search-field">
        <label for="job_type">
            <span>Search Job Type:</span>
        </label>
        <input type="text" name="job_type" id="job_type" value="<?php echo isset($_GET['job_type']) ? esc_attr($_GET['job_type']) : ''; ?>">
    </div>

    <div class="search-field">
        <label for="location">
            <span>Search Location:</span>
        </label>
        <input type="text" name="location" id="location" value="<?php echo isset($_GET['location']) ? esc_attr($_GET['location']) : ''; ?>">
    </div>

    <button type="submit" class="search-button">Search</button>
</form>
<?php
// Build the custom query
$title = !empty($_GET['title']) ? sanitize_text_field($_GET['title']) : '';
$company_name = !empty($_GET['company_name']) ? sanitize_text_field($_GET['company_name']) : '';
$job_type = !empty($_GET['job_type']) ? sanitize_text_field($_GET['job_type']) : '';
$location = !empty($_GET['location']) ? sanitize_text_field($_GET['location']) : '';

$args = [
    'post_type'      => 'job', // Custom Post Type 'job'
    'posts_per_page' => -1, // Retrieve all matching posts
    's'              => $title, // Search by title
    'meta_query'     => [], // Initialize meta_query
];

// Add meta queries for custom fields if provided
if (!empty($company_name)) {
    $args['meta_query'][] = [
        'key'     => 'company_name', // Custom field key for company name
        'value'   => $company_name,
        'compare' => 'LIKE', // Partial match
    ];
}

if (!empty($job_type)) {
    $args['meta_query'][] = [
        'key'     => 'job_type', // Custom field key for job type
        'value'   => $job_type,
        'compare' => 'LIKE',
    ];
}

if (!empty($location)) {
    $args['meta_query'][] = [
        'key'     => 'location', // Custom field key for location
        'value'   => $location,
        'compare' => 'LIKE',
    ];
}

// Query the jobs
$query = new WP_Query($args);

if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
        ?>
        <div class="search-result">
            <h2><?php the_title(); ?></h2>
            <p>Company: <?php echo get_post_meta(get_the_ID(), 'company_name', true); ?></p>
            <p>Job Type: <?php echo get_post_meta(get_the_ID(), 'job_type', true); ?></p>
            <p>Location: <?php echo get_post_meta(get_the_ID(), 'location', true); ?></p>
            <p><?php the_excerpt(); ?></p>
        </div>
        <?php
    endwhile;
    wp_reset_postdata();
else :
    echo '<p>No results found.</p>';
endif;

get_footer();

After submitting the form, the page will query job listings based on the search parameters we have defined in the code. This code queries the job custom post type based on the title and custom field values. You can place the code given below in functions.php file.

function job_search_query($query) {
    if (!is_admin() && $query->is_main_query() && $query->is_search() && 'job' === $query->get('post_type')) {
        $meta_query = [];

        if (!empty($_GET['company_name'])) {
            $meta_query[] = [
                'key' => 'company_name',
                'value' => sanitize_text_field($_GET['company_name']),
                'compare' => 'LIKE',
            ];
        }

        if (!empty($_GET['job_type'])) {
            $meta_query[] = [
                'key' => 'job_type',
                'value' => sanitize_text_field($_GET['job_type']),
                'compare' => 'LIKE',
            ];
        }

        if (!empty($_GET['location'])) {
            $meta_query[] = [
                'key' => 'location',
                'value' => sanitize_text_field($_GET['location']),
                'compare' => 'LIKE',
            ];
        }

        if ($meta_query) {
            $query->set('meta_query', $meta_query);
        }
    }
}
add_action('pre_get_posts', 'job_search_query');