I am using Timber to theme a WordPress site which is currently in a local dev environment. This is my first site with Timber. It has been a lot of fun to use, but I definitely still have some things to learn – particularly since I am more of a front-end dev and PHP is not my forte.
I am having difficulty getting my search results page to work. It appears that WordPress is ignoring the search.php files and using the index.php file. The search results I get simply display a tease of each 'Post' on the site which are unrelated to the search query. In addition to standard WordPress 'Post' and 'Page' content, I also have a CPT and ACF extended category content that needs to be displayed in search results.
I have both a search.php and search.twig file and I have determined that the right TWIG template is being used.
My search.php:
$templates = array( 'search.twig', 'archive.twig', 'index.twig' );
$context = Timber::get_context();
$context['title'] = 'Search results for '. get_search_query();
$context['posts'] = new Timber\PostQuery();
Timber::render( $templates, $context );
My index.php:
$context = Timber::get_context();
$context['posts'] = new Timber\PostQuery(); //was: Timber::get_posts();
$templates = array( 'index.twig' );
if ( is_home() ) {
array_unshift( $templates, 'search.twig', 'front-page.twig' );
}
Timber::render( $templates, $context );
Note that I added search.twig to the templates above because otherwise the search results page was using the front-page.twig template.
My search.twig:
{% extends "base.twig" %}
{% block content %}
<h1>Your search results for:</h1>
{% for post in posts %}
<article class="tease tease-{{post.post_type}}" id="tease-{{post.ID}}">
<h2><a href="{{post.link}}">{{post.title}}</a></h2>
<p>{{post.get_preview}}</p>
{% if post.get_thumbnail %}
<img src="{{post.thumbnail.src}}" />
{% endif %}
</article>
{% endfor %}
{% endblock %}
And my search form code is simply:
<form role="search" method="get" action="{{site.url}}/">
Thanks for looking!
I had a similar issue getting search to work and here is what my files look like to get it working. I hope this helps:
Search.php
$templates = array( 'search.twig', 'archive.twig', 'index.twig' );
$context = Timber::get_context();
$context['search_query'] = get_search_query();
$context['posts'] = new Timber\PostQuery();
$context['pagination'] = Timber::get_pagination();
Timber::render( $templates, $context );
.twig file
<form method="get" role="search" action="{{ site.url }}">
<input type="text" placeholder="Enter Keywords..." name="s">
<input type="submit" value="Search" class="submit button--green">
<input type="hidden" name="post_type" value="post">
</form>
The hidden input with the value="post" will limit to the scope of the search to only search 'post' post types. You can add in the name of your CPT's and it will only search through that particular CPT as well. The most important thing here in this html, which gave me a hard time, is the
name="s"
That is the query parameter WP is using to conduct the search.
Here is my search-results.twig template for reference in case you need that too:
<section class="section__news-search-results">
{% for post in posts %}
<div class="news-item__container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="image">
{% if post.thumbnail.src %}
<img src="{{post.thumbnail.src | resize(150, 150) }}" />
{% endif %}
</div> {# /.image #}
</div> {# /.col #}
<div class="col-xs-12 col-sm-12 col-md-8">
<div class="copy">
<p><small>{{ post.date }}</small></p>
<p><strong>{{post.title}}</strong></p>
<p>{{post.preview.length(25)}}</p>
</div> {# /.copy #}
</div> {# /.col #}
</div> {# /.row #}
</div> {# /.news-item__container #}
{% endfor %}
</section>