In this article I am showing how to accomplish this. Flex Pro theme have slider CPT.
Step 1: Navigate to Dashboard > Slider > Add New page and change the WP Editor mode from Visual to Text. Now create a slider post and put the following HTML markup in WP Editor.
|
1 2 3 4 5 6 |
<div class="slider-search-form"> <form role="search" action="/" class="search-form" method="get"> <label class="screen-reader-text">Search site</label> <input type="search" placeholder="Type and press Enter" name="s"> <input type="submit" value="Search"></form> </div> |
So Edit screen will be look like this:
Note: I directly put the HTML code in editor. But you can create a shortcode for search form and enter this shortcode into the content.
Step 2: Added some CSS in style.css file for some style. I used following CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* # Search Form on Slider ------------------------------------ */ .slider-search-form { background: rgba(0, 0, 0, 0.55); display: inline-block; margin: 0 auto; padding: 7px; width: auto; } .slider-search-form input[type="search"] { display: inline-block; padding: 8px 10px 10px; width: auto; } |
Final Output:
Leave a Reply