Hướng dẫn tạo custom search cho custom post type trong wordpress

Hướng dẫn tạo custom search cho custom post type trong wordpress

Have you ever worked on a WordPress site that has a lot of custom post types? Well as-is WordPress search is a disaster which is why many bloggers use Google custom search. Well, we were working on a site that has a good amount of resource articles, videos, books, and blog posts. Using the default WordPress search just wasn’t cutting it. Using Google Search also was not a viable option. Therefore, we decided to create an advanced search form which lets user pick which area of the site they want to search by limiting custom post types via checkboxes. Users can combine their search queries and most importantly, we made it so the checkboxes are saved along with the search query. This lets the user sees exactly what they searched for, and they can modify the parameters. In this article, we will show you how to create an advanced search form in WordPress utilizing the power of the WordPress search query and limiting the results by custom post types.

Hướng dẫn tạo custom search cho custom post type trong wordpress

First thing you need to do is open your searchform.php file or wherever your search form is stored. Then add the following fields inside the form code:

<input type="hidden" name="post_type[]" value="articles" />
<input type="hidden" name="post_type[]" value="post" />
<input type="hidden" name="post_type[]" value="videos" /> 
<input type="hidden" name="post_type[]" value="books" />  

Don’t forget to replace the value with your custom post types. The code above basically limits your search results to those post types. Well, if you noticed we pretty much added all post types available except for pages. Well, there is a good reason for doing so which we will get to later. So make sure to include ALL post types that you want to search for using the main search button. These fields are hidden, so the user doesn’t see these.

Next open your search.php file and paste the following codes above your loop content, so your users can see the options at the top.

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" name="s" id="s" <?php if(is_search()) { ?>value="<?php the_search_query(); ?>" <?php } else { ?>value="Enter keywords &hellip;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"<?php } ?> /><br />
	
<?php $query_types = get_query_var('post_type'); ?>
    
<input type="checkbox" name="post_type[]" value="articles" <?php if (in_array('articles', $query_types)) { echo 'checked="checked"'; } ?> /><label>Articles</label>
<input type="checkbox" name="post_type[]" value="post" <?php if (in_array('post', $query_types)) { echo 'checked="checked"'; } ?> /><label>Blog</label>
<input type="checkbox" name="post_type[]" value="books" <?php if (in_array('books', $query_types)) { echo 'checked="checked"'; } ?> /><label>Books</label>
<input type="checkbox" name="post_type[]" value="videos" <?php if (in_array('videos', $query_types)) { echo 'checked="checked"'; } ?> /><label>Videos</label>
    
<input type="submit" id="searchsubmit" value="Search" />
</form>

This will add a search box above your results with the search query inside the input box. This will also check which post types are being searched for in the query, and make the appropriate checkboxes checked. Remember, how we added all post types in the hidden field. Well, we added it just so we can run the in_array check and keep the checkboxes checked. There was no documentation on how to do this otherwise, so this was the best way we found that does the job. Below is a preview of how the search box looks:

From there, the user can simply modify the parameter as they please.

Hopefully this article helped those in need. When we are doing the research, there were bunch of incomplete articles. Found the answer of adding the checkboxes in the WordPress support forum in an older thread however they were only talking about hidden fields. Whereas we wanted to give users the option to modify the search query. Props to @tammyhart for pointing us in the right way to do the checked query for the variable.

1 . Add Function Codes

here you can specify the archive-search.php

 function template_chooser($template)   
{    
  global $wp_query;   
  $post_type = get_query_var('post_type');   
  if( $wp_query->is_search && $post_type == 'products' )   
  {
    return locate_template('archive-search.php');  //  redirect to archive-search.php
  }   
  return $template;   
}
add_filter('template_include', 'template_chooser');    

2 . create search result template for custom post type ( search-archive.php )

 <?php
  /* Template Name: Custom Search */        
  get_header(); ?>             
  <div class="contentarea">
      <div id="content" class="content_right">  
               <h3>Search Result for : <?php echo "$s"; ?> </h3>       
               <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
          <div id="post-<?php the_ID(); ?>" class="posts">        
               <article>        
              <h4><a href="<?php the_permalink(); title="<?php the_title();     ?>"><?php the_title(); ?></a><h4>        
              <p><?php the_exerpt(); ?></p>        
              <p align="right"><a href="<?php the_permalink(); ?>">Read     More</a></p>    
              <span class="post-meta"> Post By <?php the_author(); ?>    
               | Date : <?php echo date('j F Y'); ?></span>    

              </article><!-- #post -->    
          </div>    

     </div><!-- content -->    
  </div><!-- contentarea -->   
  <?php get_sidebar(); ?>
  <?php get_footer(); ?>
Bạn thấy bài viết này như thế nào?: 
Average: 3.3 (4 votes)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 

Facebook thanh lọc, hàng loạt fanpage giải trí “chết nhăn răng”

Từ chiều ngày hôm 13/1, cộng đồng admin fanpage Việt Nam nháo nhào khi hàng loạt fanpage lớn bị khóa không rõ lí do. Những fanpage bị block trong đợt thanh lọc này có lượng like từ vài chục nghìn cho tới cả gần triệu lượt like.

Alexa

Những điều thú vị về Alexa

Alexa là một chỉ số xếp hạng trang web được nhiều webmater Việt Nam quan tâm, bài viết dưới đây Lướt NET không nói về vấn đề làm sao để tăng thứ hạng trên Alexa mà đưa ra vài điều thú vị về Alexa:

Opera, Browser

Những “vũ khí” của Opera 10

 Cuộc chiến giữa các trình duyệt web luôn gay cấn và đấu thủ nào cũng phải trang bị cho mình những “vũ khí” riêng. Dưới đây là những “vĩ khí” giúp Opera đứng vững.