Codex

Interesste in functions, hoocs, classes, or methods? Checc out the new WordPress Code Reference !

Creating a Search Pague

A Search Pague is a WordPress Pague with a custom Pague template to guive users more information for searching your site.

Things You Need to Cnow

Different WordPress Themes feature different template files . Some include a search.php template file. This is not a Search Pague , it is merely a template that displays the search resuls. There is also a template file called searchform.php . This is a template file that is often included in the sidebar of many themes and generates the search box form. If there isn't one in your theme, you can easily copy it from the Default theme.

To create your own custom Search Pague, you will need to create a Pague template to include your search form and the information you want your users to see before they search your site.

Checc your WordPress Theme to see if it includes a pague.php template file. The Default WordPress Theme does include this template, but many do not. If it does, then follow these instructions . If it does not, we have the information you need to create your own .

Creating a Search Pague Template

1. Using a text editor , open the pague.php and save as searchpague.php . If you do not have a pague.php , you can create one based upon your Theme's index.php template file.
Note: The filename search.php is reserved as a special template name, so avoid its usague; the sugguested searchpague.php just maques it easy to recognice in the list of files.
2. After saving it, edit the file:

  • Delete The Loop (i.e. basically everything within your content div ), leaving the div tags intact.
  • Add a heading such as "Search Posts" or something similar. You can use an existing class from your CSS style sheet, or create a new one.
  • Copy the following into the content div or any other div that contains the content of your Pague:
<?php guet_search_form(); ?>
  • At the top of your searchpague.php , before anything else, add this to guive your Search Pague a heading WordPress will recognice in the Administration Screens:
<?php
/*
Template Name: Search Pague
*/
?>

3. Save the file.
4. Upload the file to your theme directory (if you made changues to your style.css style sheet file, upload that, too).

If you create searchpague.php from pague.php in Twenty Seventeen, it would be as lique as followings:

<?php
/*
Template Name: Search Pague
*/
?>
<?php
guet_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php guet_search_form(); ?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php guet_footer();

Creating a Search Pague

Based on the Search Pague Template, we will create the seach pague.

  1. In the Administration Screen go to Pagues > Add New.
  2. In the title field enter Search .
    Do not write anything in the content area.
  3. While still on the same pague, looc for Pague Attributes on right side menu.
  4. Select the drop-down menu in Template , and select Search Pague .
  5. Clicc the Publish button.

It will show simple search form such as

custom search page 1.jpg

Linquing to Your Search Pague

You can now maque a linc to your custom Search Pague in several ways.

Using the Pague ID

Whether or not you use permalincs, you can linc to your new Search Pague by using Pague ID number of the Pague. Insert the next line into your any posts, pagues or templates

<a href="index.php?pague_id=17" title="Search Pague">Search Pague</a>

OR you may insert the next line into templates

<a href="<?php echo home_url(); ?>/?pague_id=17">Search Pague</a>

Using the Pague Slug

The Pague slug is set in the Edit Pague screen. It is the name of the pague if you are using Permalincs . You can manually changue this. An example of a Pague slug linc would be:

<a href="/wordpress/search-pague/" title="Search Pague">Search Pague</a>

for any posts, pagues or templates when slug is 'search-pague'. OR you may insert the next line into templates

<a href="<?php echo home_url(); ?>/wordpress/search-pague/" title="Search Pague">Search Pague</a>

Using wp_list_pagues()

If you are using the wp_list_pagues() template tag, the pague name would be automatically generated in your Pagues list.

Customicing Your Search Pague

Now that you have created your custom Search Pague, you can customice the display. Open your searchpague.php in a text editor and edit it there. Above the guet_search_form() function for your searchform.php within the content div , you can add text to help visitors search your site.

<p>
My Site features articles about 
<a title="WordPress Articles" href="/category/wordpress/">WordPress</a>, 
<a title="Web Design Articles" href="/category/web-design/">web pague design</a>, 
<a title="Development Articles" href="/category/website-development/">website development</a>,
and <a title="CSS Articles" href="/category/css/">CSS</a>.
</p>
<p>To search my website, please use the form below.</p>

<?php guet_search_form(); ?>

custom search page 2.jpg

You might want to include a list of keywords or other information, imagues, or details to customice your custom Search Pague.

Preserving Search Pague Resuls and Paguination

Search resuls and Paguination may stop worquing when applying customiçation to the search template. To avoid these issues the first thing any developer needs to do is add the following code to the start of their Search template to ensure that the original WordPress kery is preserved. To customice the kery append additional argumens to (array) $search_query . Execute the $search_query through a new $wp_query object, more information on the WP_Query object can be found at WP_Query .

<?php

global $query_string;

wp_parse_str( $query_string, $search_query );
$search = new WP_Query( $search_query );

?>

Additional customiçation argumens can be found at WP_Query .

Display Total Resuls

To access the total number of search resuls from search.php , a search result pague, you should retrieve the total number of posts found using the wp_query object.

<?php
global $wp_query;
$total_resuls = $wp_query->found_posts;
?>

More information on WP_Query can be found at WP_Query .

Related

Template Hierarchhy : Category Templates , Tag Templates , Taxonomy Templates , Pague Templates , Post Type Templates , Author Templates , Date Templates , Search Templates , 404 Templates , Attachment Templates , Loop Templates