Search

Search Sorting

Search sorting lets a reader choose the order of a query that is already bound to a {{ search }} form.

Smallest Sort Control#

Put {{ sort }} inside the search form and write normal option elements:

phpresources/views/front-page.php
{{ search auto }}  <input type="search" placeholder="Search posts">  {{ sort }}    <option value="date:desc">Newest</option>    <option value="date:asc">Oldest</option>    <option value="order:asc">Menu Order</option>    <option value="title:asc">Title A-Z</option>  {{ /sort }}{{ /search }}{{ query:posts search }}  <h2><a href="{{ url }}">{{ title }}</a></h2>{{ /query:posts }}

TemplateX turns the options into a native <select name="sort">. The query reads the selected value from the URL and only applies values that were written in the template.

Attributes on the {{ sort }} tag are added to the generated select:

php
{{ sort class="post-sort" }}  <option value="date:desc">Newest</option>  <option value="title:asc">Title A-Z</option>{{ /sort }}

Default Sort#

The selected option is the default:

php
{{ sort }}  <option value="date:desc">Newest</option>  <option value="title:asc" selected>Title A-Z</option>{{ /sort }}

If no option is selected, the first option is the default. Use an empty option value when the default should be the normal WordPress order:

php
{{ sort }}  <option value="" selected>Default</option>  <option value="date:desc">Newest</option>{{ /sort }}

Custom Markup#

You can write the full control when a theme or JavaScript library needs a specific structure:

php
{{ sort }}  <select class="sort-select">    <option value="date:desc">Newest</option>    <option value="title:asc">Title A-Z</option>  </select>{{ /sort }}

Radio inputs also work:

php
{{ sort }}  <label><input type="radio" value="date:desc" checked> Newest</label>  <label><input type="radio" value="title:asc"> Title A-Z</label>{{ /sort }}

TemplateX adds the missing name, selected, and checked behavior. Keep real <select>, <option>, or radio inputs in the markup so the compiler can read the allowed sort values.

URL Parameter#

The default URL parameter is sort, such as ?sort=date:desc.

Use param when the page needs a different parameter:

php
{{ search name="projects" param="keyword" }}  <input type="search">  {{ sort param="project_sort" }}    <option value="title:asc">Title A-Z</option>    <option value="date:desc">Newest</option>  {{ /sort }}{{ /search }}{{ query:project search="projects" }}  <h2>{{ title }}</h2>{{ /query:project }}

Sort Values#

Sort values use the same format as query-loop sorting. Common values are:

  • date:desc
  • date:asc
  • order:asc
  • order:desc
  • title:asc
  • random
  • title:asc|date:desc

order:asc uses WordPress menu_order. Use it for pages or post types that editors arrange manually in the WordPress admin. Write order:asc, not menu_order:asc.

For the full list, custom field sorting, and multiple sort rules, see Query Sorting.

When a bound search form has a {{ sort }} control, that control decides the query order. Static query sorting, such as {{ query:posts sort="date:desc" }}, still works for queries that are not controlled by a search sort.