Create a Search Page

[rapidasia]

I’ve been floundering around trying to figure this out, so thought ‘why not ask the source expert’

I’d like to create a search page. Use the standard WP or Theme Blvd search box and add some post_lists or grids.

I can’t figure out how to come up with putting the search box in the body of the content.

Is it necessary to create a page template? or can we just insert some code in the content? thanks

Topic

[Jason Bobich]

Hello,

No, there’s no way to put a searchform in a page or post that I know of. I just did a search for a plugin on wordpress.org and didn’t find anything. You could create a simple [searchform] shortcode that did it though from your Child theme’s functions.php or your own plugin pretty easily probably. It would be something like this:

function my_searchform_shortcode() {
     return get_search_form(false);
}
add_shortcode( 'searchform', 'my_searchform_shortcode' );

http://codex.wordpress.org/Function_Reference/add_shortcode

http://codex.wordpress.org/Function_Reference/get_search_form

[rapidasia]

thank you for your effort in replying to this. much appreciated.

[msiep]

Jason,

I’ve just tried exactly what you suggested and it’s working except that the search box always goes at the very top of the page, regardless of where I put the shortcode, e.g. if my page contains the following…

<p>This text is supposed to be above the search form, but instead it is below it.</p>
[searchform]

…then the text is below rather than above the search box. At first I thought this might be a CSS issue that I could deal with in my child theme custom.css file, but inspecting the source in my browser showed otherwise:

<div class="entry-content">
<div class="themeblvd-search">
<form action="http://interactioninsight.com/" method="get">
<fieldset>
<span class="input-wrap">
<input class="search-input" type="text" value="Search our site..." onfocus="if(this.value == 'Search our site...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search our site...';}" name="s">
</span>
<span class="submit-wrap">
</fieldset>
</form>
</div>
<p>This text is supposed to be above the search form, but instead it is below it.</p>
<div class="clear"></div>
<span class="edit-link">
</div>

Can you suggest a way to fix this?

Thanks,

Michael

[Jason Bobich]

At first I thought this might be a CSS issue that I could deal with in my child theme custom.css file

Yup, it would definitely be a CSS thing. Do you have a link to where you’re doing this?

[msiep]

http://interactioninsight.com/search/ – If it’s a CSS thing, why does it appear in the wrong order in the HTML code when I view source in the browser?

[Jason Bobich]

Aw, got it. Sorry, I didn’t understand what you meant before. I thought you were getting at that styles from the header’s search were somehow positioning the search box out of place.

In general, when you create any shortcode, and you see it just pop to the top of the_content() like that, it means it’s not being returned properly, but instead just being outputted.

Say for example you had a shortcode [hello_world] that printed out some text. This would be correct:

function my_hello_world() {
     return 'Hello World';
}
add_shortcode( 'hello_world', 'my_hello_world' );

However, the following would just spit it out at the top of the content incorrectly:

function my_hello_world() {
     echo 'Hello World';
}
add_shortcode( 'hello_world', 'my_hello_world' );

Anyway, so with this scenario, this actually because of a bug with WordPress’s get_search_form() function that won’t be fixed until WP 3.6. I guess the $echo parameter isn’t respected when the theme holds the searchform template.

http://core.trac.wordpress.org/ticket/16541

Try it like this as a workaround:

function my_searchform_shortcode() {
     ob_start();
     get_search_form();
     return ob_get_clean();
}
add_shortcode( 'searchform', 'my_searchform_shortcode' );

[msiep]

Wonderful – the workaround works perfectly. Thank you!

[Author]

Replies