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

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 410 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

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

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>