How to display Search box within content in WordPress

Marcel wanted to know how a search form can be added in between paragraphs in a Page or Post in WordPress.

While it is possible to use a plugin that enables PHP in WordPress editor, it is not recommended.

In this article I show how we can create a shortcode that outputs the search form and use this shortcode wherever you want.

Screen Shot 2014-08-22 at 10.56.29 AM

Screen Shot 2014-08-22 at 10.56.50 AM

Add the following in your child theme’s functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14
<?php
//* Do NOT include the opening php tag
//* Create a [my_search] shortcode for displaying search box
add_shortcode('my_search', 'display_search');
function display_search($atts) {
ob_start();
echo '<div class="my-search">';
get_search_form();
echo '</div>';
return ob_get_clean();
}
view raw functions.php hosted with ❤ by GitHub

Now wherever you wish to display search form, place this shortcode: [my_search]

(Optional) Depending on your current active theme you may want to add CSS.

For example, in Genesis Sample:

1 2 3 4 5 6 7
.my-search {
margin-bottom: 28px;
}
 
.my-search input[type="search"] {
max-width: 300px;
}
view raw style.css hosted with ❤ by GitHub

Ref.: http://codex.wordpress.org/Shortcode_API#Output

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 641 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    This solves my firt question:

    You can customize the search form input box text by adding this below part of the code to your functions.php

    /** Customize search form input box text */
    add_filter( ‘genesis_search_text’, ‘custom_search_text’ );
    function custom_search_text($text) {
    return esc_attr( ‘Your new search text here’ );
    }

    Still hoping to find a way to change color of search results box color from black to another color

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>