WPSolr offers you near infinite freedom when it comes to customizing your Ajax search, related posts & recommendations appearance. This guide will show you how you can create your own templates using twig files.
1. Create your WPSolr template
You can find the WPSolr templates in “wpsolr-templates” in the WPSolr plugin main directory :
wpsolr-templates/ └── twig ├── recommendations ├── search └── suggestions
Each one of these directories contains templates :
- recommendations contains the recommendations and related posts templates.
- suggestions contains the Ajax search templates.
You can then simply modify one of the existing templates.
2. Create your child theme
You can import these templates directly into your theme but it is recommended that whenever you want to change a theme’s code, you should instead create a child theme. This is so whenever the theme updates, your changes are not overwritten.
We will create a “Twenty Twenty-Four” child theme.
First simply create a new directory in the “themes” directory of your WordPress installation. You can name it “twentytwentyfour_child” like so :
themes/ ├── index.php ├── twentytwentyfour ├── twentytwentyfour_child ├── twentytwentythree └── twentytwentytwo
Inside your newly created directory, create a “style.css” file with the following content :
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Description: Twenty Twenty-Four theme
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentyfour
Version: 1.0.0
Text Domain: twentytwentyfourchild
*/This means that this theme will be a child theme to the one found at the “twentytwentyfour” path.
You can then activate it in the “Appearance->Themes” page in the admin dashboard :
3. Import your new templates
WPSolr will search for new templates in the “wpsolr_templates” directory in your theme or child theme main directory.
If you want to use your new template, simply move your template files in “twentytwentyfour_child/wpsolr-templates” :
wpsolr-templates/ └── twig │ ├── recommendations │ │ ├── new_related_posts_template │ │ │ └── recommendations.twig │ │ ├── recommendations-custom-css.twig │ └── suggestions │ │ ├── new_ajax_search_template │ │ │ └── suggestions.twig │ │ ├── suggestions-custom-css.twig
Then in the WPSolr settings, simply select your new template.
You can now view your new related posts template :
