Textpattern tips, tutorials and code snippets

Customise the TXP search form

As outlined in previous tips on Searching with Textpattern and Search using non-default section, creating a search function for your site is only a matter of using the built-in Textpattern tag <txp:search_input />.

Using the txp:search_input tag like so:

<txp:search_input label="" button="Go" size="15" wraptag="p" />

Will result in the following XHTML:

<form method="get" action="http://yourdomain.com/">
<p><input type="text" name="q" value="" size="15" /><input type="submit" value="Go" /></p>
</form>

However, if you need to adjust the XHTML output, you will need to use a different method (as of TXP 4.06). Something like this:

<form id="searchForm" method="get" action="<txp:site_url />search">
<p><input id="searchInput" type="text" name="q" value="" size="25" /><input id="searchButton" type="submit" value="Go" /></p>
</form>

This is similar to the code that the tag outputs but would allow you to add your own style hooks to use in your CSS. Note that I have a separate “search” section so you should adjust the “action” attribute to suit your site.

Note: This tip was originally posted in this forum thread.

1 Comment Comment feed

Add a comment

Use Textile help to style your comments