Task

Custom search form (there is by default form in WordPress but it can be customized) and how to add ACF fields and CPTs into the Search.

Why customize WordPress Search ?

Module 1: searchform.php


Step 1 : Create a Custom Search Form

For this example, search form is located in header.php

<div class="search-form-container">
    <?php get_search_form(); ?>
</div>

Step 2: Style the custom search form

Create a php template searchform.php for the custom search form

<form role="search" method="get" action="<?php echo home_url('/') ?>">
    <input type="search" class="form-control" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" />
</form>

Module 2: searchpage.php


Step 1: Creating the Template

Step 2: Editing the Template

<?php get_search_form(); ?>

preview example

<?php
    /*
    Template Name: Search Page
    */
    ?>
    <?php
    get_header(); ?>
    
    <div class="wrap">
        <div id="primary" class="content-area">
            <main id="main" class="site-main" role="main">
    
                <?php get_search_form(); ?> 
    
            </main><!-- #main -->
        </div><!-- #primary -->
    </div><!-- .wrap -->
    
    <?php get_footer();
    

Step 3: Admin Dashboard - Publish Template

Module 3: Display ACF & CPTS


You can display Custom Post Types and the


Step 1: Create ACFs for CPT

Admin Dashboard - add custom field

Step 2: Create Custom Template to Display CPT & ACF

Once you have created a field group and input some data, you can now load and display the data in your theme.

insert this code to display ACF. learn more in acf documentation - displaying cpt

<h1><?php the_field('country_of_origin'); ?></h1>

Alternatively: Querying CPT taxonomies

displaying CPT's taxonomies (source)

<?php
$args = array(
    'post_type'   => 'njn-product',
    'post_status' => 'publish',
    'tax_query'   => array(
      array(
          'taxonomy' => 'njn-product-cat',
          'field'    => 'slug',
          'terms'    => array(
                'food',
                'pastry',
            )
      )
    )
   );
   
  $products = new WP_Query( $args );
  if( $products->have_posts() ) :
  ?>
    <ul>
      <?php
        while( $products->have_posts() ) :
          $products->the_post();
          ?>
            <li><?php printf( '%1$s - %2$s', get_the_title(), get_the_content() );  ?></li>
          <?php
        endwhile;
        wp_reset_postdata();
      ?>
    </ul>
  <?php
  else :
    esc_html_e( 'No products in the food or pastry taxonomy', 'text-domain' );
  endif;
  ?>
  

Sources

  1. WP blog - Search Form

    Create A Custom Search Form in WordPress
  2. Youtube - Search Form

    youtube - wordpress 101 - pt12
  3. WordPress Codex - Search Page

    WordPress Codex
  4. WP blog - Querying CPT

    WP blog
  5. WP blog - Displaying ACF & CPT

    WP blog
  6. ACF Documentation - Displaying ACF & CPT

    "Displaying values in your theme"