Archived topic
"Search Form" inside "GP Elements" has the search icon wrongly placed
7 replies · Started by Miguel on July 10, 2021
Hi GP Team,
I inserted the native GeneratePress "search form" inside the "Elements -> Block Element -> Element Type -> Right Sidebar". I'm using the Search Form "Shortcode" after adding this code with the help of the "Pluginception" plugin:
add_shortcode( 'search_form', function() {
ob_start();
get_search_form();
return ob_get_clean();
} );
Here the URL of my Testing Website so that you can see the Issue --> https://playwp.xyz/
Thanks for your kind help :)
Hi there,
Why not just use a search widget as a right sidebar widget?
Let me know :)
Hi Leo,
Thanks for your reply. Of course, I tried the WordPress Native "Search Widget" but I don't like its styling and overall appearance. For that reason I want to use the GeneratePress own Search Box, so that I can keep a more coherent and harmonious design/appearance. Using the WordPress "Search Widget" gives me a disjointed visual appearance.
Hi there,
that shortcode is getting the WP Search Form - its not a GP Function.
The Search Widget should generate the exact same output, except it will have the correct markup that formats the layout.
Can you add a search widget to the sidebar as well so i can see whats happening ?
Hi David,
Thanks for your reply. Yes, I already added the "Search Widget Block" to the sidebar. In the testing website right sidebar you will see both, the "GP Styled Search Form" and the "Native WordPress Search Widget". Here the URL of my Testing Website so that you can see --> https://playwp.xyz/
Also below, in the Private information area I leave the testing website Login Details in case you want to see my "Elements -> Block Element -> Element Type -> Right Sidebar" where I have added the "GP Styled Search Form shortcode" First, and the "WordPress Search Widget Blocks" Second.
I used the plugin "Pluginception" to create a plugin/file named "GeneratePress Custom Code". In that file I have added the PHP code for calling the shortcode.
I can't increase the "Right Sidebar" width to fix the issue. I need to use the current width.
Aah ok - yes the core Search Block, for some crazy reason WP didn't give the choice to use the default Search form that the theme styles.
Add this CSS to make your shortcode match GP:
.search-form {
display: flex;
}
.search-form input[type=search] {
width: 100%;
}Hi David,
The CSS code provided works like a charm. The issue is fixed now.
Thank you very much for your help.
Glad to be of help!
