Placing <div> tags on wordpress visual editor using shortcodes

1 Views

Hello I need to have the following code on a specific page: 

<div class="searchbar" >

            <div class="searchbar-inner" >

                search <input type="text" id="search" />

                <span class="result-count" ></span>

            </div>

</div>

Is it possible that I use a shortcode to place it on the visual editor while editing the page?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Assuming you don’t have the shortcode written down…

    function search_shortcode()
{
    $struct = '<div class="searchbar" ><div class="searchbar-inner" >search <input type="text" id="search" /><span class="result-count" ></span></div></div>';
    return $struct;
}
add_shortcode('search_box', 'search_shortcode');

    Make sure your editor is in the ‘HTML’ mode, and paste the shortcode as ‘search_box’.
    Using a shortcode will allow you to reuse this form anywhere you want.

  2. Yes, you can use shortcode, but its not necessary.

    You can switch to the HTML tab (next to the visual tab) in the post editor and paste your code there.

    Also you should format your search input like the one below if you’re planning to adhere the WordPress search rules.

    <div class="searchbar">
    <div class="searchbar-inner">
        <form action="http://example-site-name.tld/" method="get">
            <label for="search">Search</label><input id="search" type="text" name="s" />
        </form>
        <span class="result-count"> </span>
    </div>
</div>

    Cheers,