Wordpress search page loading on homepage - php

Question

I'm pretty new to Wordpress and I've been building a theme with reverie-master but the only problem is the search page. All the other pages, category, archive, etc are working.
I use this for searching in my header.php :
<form method="post" action="<?php echo home_url('/'); ?>" class="search-form" role="search">
<div class="small-9 columns no-pad">
<input type="text" class="search-input" name="s" placeholder="Search" value="" />
</div>
<div class="small-3 columns no-pad">
<input class="btn-submit postfix search-input" type="submit" value=""/>
</div>
This shows the search results on the homepage. If I type in "ok" in the search bar it takes me to example : www.homepage.com when it should be on www.homepage.com/?s=ok. The problem with it being on the home page, the paginations will take you to page 2 of the home blog feed instead on www.homepage.com/page/2/ when it should be something ilke this www.homepage.com/page/2/?s=test
When I manualy type in this url in the browser : www.homepage.com/page/2/?s=test the pagination is working. My problem is the pagination and I am wondering why the posts displays on the homepage(which I assume is the problem)
Here is my search.php code :
Starts with <?php get_header(); ?> and ends with <?php get_footer(); ?>
This is the loop in between with pagination :
<h2><?php _e('Search Results for', 'reverie'); ?> "<?php echo get_search_query(); ?>"</h2>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="row pad-row">
<div class="large-11 columns bor-bottom">
<a class="fade" href="<?php the_permalink(); ?>"><p class="feed-title"><?php the_title(); ?></p></a>
<p class="feed-info">By <span class="feed-author"><?php the_author(); ?> </span> • <?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?> •
<?php
foreach((g_the_category()) as $category) {
if ($category->cat_name != 'featured') {
echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a> ';
}
}
?>
• <span class="feed-cmt"><?php comments_number( '0 Comments', '1 Comments', '% Comments' ); ?>. </span></p>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; // end have_posts() check ?>
<!-- Start Pagination -->
<div class="row pad-row">
<div class="large-11 columns pagination-centered large-centered panel-page">
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( function_exists('reverie_pagination') ) { reverie_pagination(); } else if ( is_paged() ) { ?>
<nav id="post-nav">
<div class="post-previous"><?php next_posts_link( __( '← Older posts', 'reverie' ) ); ?></div>
<div class="post-next"><?php previous_posts_link( __( 'Newer posts →', 'reverie' ) ); ?></div>
</nav>
<?php } ?>
</div>
</div>

Answer 1

Do not put search form directly. WP has a functionality to get search form called get_search_form(). This function prints wp basic search form, but still you can customize this. In order to customize, you can use a filter called get_search_form.
function custom_search_form( $form ) {
$form = '<form method="get" action="' . home_url('/') . '" class="search-form" role="search">
<div class="small-9 columns no-pad">
<input type="text" class="search-input" name="s" id="s" placeholder="Search" value="' . get_search_query() . '" />
</div>
<div class="small-3 columns no-pad">
<input class="btn-submit postfix search-input" id="searchsubmit" type="submit" value="'. esc_attr__( 'Search' ) .'"/>
</div>
</form>';
return $form;
}
add_filter( 'get_search_form', 'custom_search_form' );
And put this to functions.php