Create Original Theme in WordPress 3

At the last time, in “Create Original Theme in WordPress 2“, I designed pages of my original theme “techblog”. Today, I start implementing them.

GOAL

To study the name of PHP file for each page and create PHP files.

Environment

WordPress 5.5.1
XAMPP 7.4.10

The corresponding PHP files to items

I created these files.

• index.php
• page.php
• archive.php
• 404.php
• single.php
• sidebar.php
• header.php
• footer.php
• comments.php
• search.php, searchform.php

The all files are in https://github.com/s-nako/wordpressTheme/tree/main/techblog.

This is one of the simplest WordPress themes. I’ll customize it in the future.

Create search.php for original theme

This is one of the articles about project “Create Original Theme in WordPress”.

GOAL

To create search.php and searchform.php

Environment

WordPress 5.5.1
XAMPP 7.4.10

search.php

It is easy to create search.php by copying and changing from archive.php.

<?php
/**
* The template to display search results
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
get_header(); ?>
<div class="container">
<main id="main" class="site-main">
	<div class= "main-content">
		<?php if ( have_posts() ) :?>
			<h1><?php echo esc_html__( 'Search Results for: ', 'techblog' ).'<span>'.esc_html(get_search_query()).'</span>'; ?></h1>
		<?php
			while ( have_posts() ) :
				the_post();
				get_template_part( 'content/content', 'search');
			endwhile;
				the_posts_pagination(
					array('prev_text' => '<u>Back<<</u>  ',
						'next_text' => '  <u>>>Next</u>', )
				);
		endif; ?>
	</div>
</main>
	<?php get_sidebar(); ?>
</div>
<?php
	get_footer(); ?>

Functions

get_search_query()

This function is used to get the posted search query from the search form. The definition is in wp-includes/general-template.php.

 function get_search_query( $escaped = true ) {
    $query = apply_filters( 'get_search_query', get_query_var( 's' ) );
    if ( $escaped ) {
        $query = esc_attr( $query );
    }
    return $query;
}

get_query_var( ‘s’ ) is the function to get the value of a query variable from the key ‘s’. So the input form should be named ‘s’.

get_template_part( $slug, $name = null, $args = array() )

This function is used to get template from {}-{}.php.

In my case, get the template from content/content-search.php by using get_template_part( ‘content/content’, ‘search’). But I don’t need content-search.php because the template content/content-search.php is the same as content.php.

Result

searchform.php

searchform is used as one of the widgets.

<?php
/**
* The search form template
*@package WordPress
*@subpackage Techblog
*@since Techblog 1.0
*/
?>

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div class="search-group">
  		<label class="screen-label" for="s"><?php esc_html_e( 'Search:', 'techblog' ); ?></label><br/>
  		<span>
		<input type="text"  class="search-query" placeholder="<?php esc_attr_e('word', 'techblog;' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php esc_attr_e( 'Search for:', 'techblog' ); ?>"/>
		<button type="submit" class="search-submit" name="submit" value="<?php esc_attr_e( 'Search', 'techblog' ); ?>"><span class="material-icons">search</span></button>
		</span>
	</div>
</form>

Result

Change the style