Show Number Of Search Results
When you set up a search results template in the Divi Theme Builder, and then add a search module somewhere on your site, it displays the results very simply like “Search results for [whatever you searched]” But on other sites, it is very common to see the number of results, like “23 results for “Divi” below” with a number. So in this tutorial, I will show you how to add the number of search results to the Divi Theme Builder search results template.
▶️ Please watch the video above to get all the exciting details! 👆
Search Results Template Setup
This tutorial will not cover how to set up the search results template. If you need help with that, I suggest checking our other tutorial: How To Customize And Style The Divi Search Module And Create A Search Results Page.
To get up to where our tutorial starts, you would need to do these steps:
- Create A Theme Builder Template Assigned To “Search Results”
- Add a Blog module and set it to “Show Posts For Current Page”
Be sure to watch the video for this tutorial, it will really help!
1. Add The Shortcode To A Text Module
The first step will be to add a new Text module above the Blog module. This will be used for the main heading that reads out with the number of results. To make this work with a dynamic number, we need to add a shortcode to the Text module. The shortcode will output the code which will say the number of results, like “23 results for “divi”.” The shortcode will be powered by a snippet, which we will talk about in step #2.
Shortcode
[pa_search_results_count]
2. Add The PHP Code
The second step now is to add the PHP code that is working behind the scenes and connected to the shortcode. This step involves pasting the PHP code snippet below into your website. There are a number of locations to add this, and it will totally depend on your website and experience.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
Snippet
function pa_search_results_count_shortcode($atts, $content=null){
extract( $atts = shortcode_atts(
array(
'' => '',
), $atts, 'pa_search_results_count' ) );
ob_start();
?>
<?php
global $wp_query;
$items_total = $wp_query->found_posts;
echo $items_total.' Results for "'.get_search_query().'"';
?>
<?php
return ob_get_clean();
}
add_shortcode('pa_search_results_count','pa_search_results_count_shortcode' );
Edit The Text
If you want to edit the text, you can easily do so by editing the text within the code. Look for the “Results for” text and this is where you can carefully edit it. For example, you may change it to Search Results For Your Query: and this would read out as “[x] Search Results For Your Query: [search term]”
Do It With Our Divi Search Helper!
Make life easier and use the Divi Search Helper instead! This innovative plugin upgrades the existing Divi Search module with all the missing features provided by our addon with new design settings, advanced search criteria options, and improved search result pages.
Hello Nelson! Great tutorial and really glad to have you in the Divi community!
I would like to ask you, why everytime I use different language in the ” Results for ” it displays the shortcode instead of the echo text?
Thanks in advance!
Hi Manos!
Can you share the PHP code along with the website URL you’re using to investigate further?
Great tip, Nelson!
So glad you like it!