GeneratePress Search Forms: CSS and PHP Snippets

Are you the type of website manager who wants to provide user with a way to search hundreds of posts and pages?

If you ever try to style the search forms of your site using GeneratePress, you will find lots of different CSS snippets and PHP snippets.

This posts gather my thoughts about how to provide a better search experiences to your visitors by extending, modifying and styling your site search forms.

---

---

WP Search Sucks and You Know it

First and foremost, let’s state the obvious, the search feature in WordPress just sucks.

I don’t know why we spend so much time worrying about how to style such a feature when we know it is very limited.

Why do I think WordPress search sucks?

I have spent some time monitoring the searches do and most people can’t find what they are looking for because they misspelled something or write something in a different way.

People on the internet are used to typing anything on their mind and getting some results, so when they come to blogs, they type whatever they want hoping the search form can figure it out but they get sent straight to no-search-results page.

Before you spend the next few hours styling the page, consider extending the search feature by installing a plugin or something.

---

GeneratePress: CSS Snippets for Sidebar Search Form Widget

If you need to make the sidebar search form widget wider, you can use this CSS snippet

.inside-right-sidebar .widget_search > form > label {
    flex-grow: 1;
}

Source: GeneratePress

---

GeneratePress: CSS Snippets for Search Forms on 404 Pages and No Search Results Page

If you need to customize the search form on the 404 page or search result pages, you can style it in different ways by using

.entry-content .search-form {
  /* your custom CSS*/
}

.entry-content .search-field {
   /* your custom CSS*/
}

.entry-content .search-submit {
/* your custom CSS*/
}

This a CSS snippet if you want to increase or reduce the width, style the borders, the background color, and font size:

.entry-content .search-field {
  width: 500px;
  border-radius: 8px;
  background-color: #07294d;
  font-size: 22px;
}

If you want to hide the submit button you can try this

.entry-content .search-submit {
  display: none;
}

You can change the background color and font size with this CSS snippet

.entry-content .search-submit {
  background-color: #ff9900;
  font-size: 18px;
}

If you want to remove the search form from the no-results page, make a copy of the no-results.php file and remove this line of code that appears twice in such a file.

<?php get_search_form(); ?>

---

Hide or Remove Search Form on 404 Pages

If you want to hide the search form on 404 Pages using CSS, this is what you are searching for:

.error404 .entry-content .search-form {
    display: none;
}

If you have a child theme installed, you can make a copy of the content-404.php, copy that file to your child theme’s folder and remove the following line from the file

get_search_form();

Once you save it, the search will be gone

---

How to Disable Search Feature in WordPress

// Prevent search queries.
add_action(
	'parse_query',
	function ( $query, $error = true ) {
		if ( is_search() && ! is_admin() ) {
			$query->is_search       = false;
			$query->query_vars['s'] = false;
			$query->query['s']      = false;
			if ( true === $error ) {
				$query->is_404 = true;
			}
		}
	},
	15,
	2
);
// Remove the Search Widget.
add_action(
	'widgets_init',
	function () {
		unregister_widget( 'WP_Widget_Search' );
	}
);
// Remove the search form.
add_filter( 'get_search_form', '__return_empty_string', 999 );
// Remove the core search block.
add_action(
	'init',
	function () {
		if ( ! function_exists( 'unregister_block_type' ) || ! class_exists( 'WP_Block_Type_Registry' ) ) {
			return;
		}
		$block = 'core/search';
		if ( WP_Block_Type_Registry::get_instance()->is_registered( $block ) ) {
			unregister_block_type( $block );
		}
	}
);
// Remove admin bar menu search box.
add_action(
	'admin_bar_menu',
	function ( $wp_admin_bar ) {
		$wp_admin_bar->remove_menu( 'search' );
	},
	11
);

---