Examples:
← Older revision
Revision as of 15:14, 28 April 2014
Line 21:
Line 21:
==Examples==
==Examples==
+
===Default HTML4 Form===
If you don't have <tt>searchform.php</tt> in your Theme, WordPress will render its built-in search form:
If you don't have <tt>searchform.php</tt> in your Theme, WordPress will render its built-in search form:
+
<pre>
<pre>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
Line 30:
Line 32:
</form>
</form>
</pre>
</pre>
−
The above form is used on HTML4 websites. If your theme supports HTML5, which happens if it uses <tt>add_theme_support('html5', array('search-form'));</tt> it will output the following HTML form. This is the case since WordPress 3.6.
+
The above form is used on HTML4 websites.
+
+
===Default HTML5 Form===
+
Since [[Version 3.6|WordPress 3.6]], If your theme [[Semantic_Markup|supports HTML5]], which happens if it uses:
+
+
<pre>add_theme_support( 'html5', array( 'search-form' ) );</pre>
+
+
+
WordPress will render its built-in HTML5 search form:
+
<pre>
<pre>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
Line 40:
Line 42:
</form>
</form>
</pre>
</pre>
+
Among the changes is that the form has a class="search-form". Also, the input is type="search" and not type="text". Furthermore there is a placeholder, which displays text when appropriate, which means you don't need javascript to display the placeholder.
Among the changes is that the form has a class="search-form". Also, the input is type="search" and not type="text". Furthermore there is a placeholder, which displays text when appropriate, which means you don't need javascript to display the placeholder.
There are no elements with an id anymore, so you can have multiple searchforms in a valid document.
There are no elements with an id anymore, so you can have multiple searchforms in a valid document.
+
===Theme Form===
If you do have <tt>searchform.php</tt> in your Theme, it will be used instead. Keep in mind that the search form should do a GET to the homepage of your blog. The input text field should be named <tt>s</tt> and you should always include a <tt>label</tt> like in the examples above.
If you do have <tt>searchform.php</tt> in your Theme, it will be used instead. Keep in mind that the search form should do a GET to the homepage of your blog. The input text field should be named <tt>s</tt> and you should always include a <tt>label</tt> like in the examples above.