Google CSE Integration to Newspaper WordPress theme

2169

Newspaper is a beautiful News Magazine theme for WordPress powered blogs, made with care by TagDiv. It is a premium theme with lot of features, including the support of WooCommerce, bbPress, drag and drop page builder, etc.,. In fact, we use Newspaper theme in our blog. Have a look at the search box used in this blog. They exactly match with the theme and shows the results on a separate page, using Google CSE. I have followed the same steps given below, to acquire this result.

I had recently requested the TagDiv team to give me a solution, to integrate Google Custom Search Engine to my WordPress site. Since they are not providing custom works at this time, they showed me the code that renders the search box and asked me to hire a developer to do it. I had explored several web pages for the code and at last, I had found a working solution to integrate Google CSE to this theme.

In my last article, I had explained everything about integrating Google Search Engine to any WordPress blog. This is a theme specific modification and will work only if you use Newspaper theme on the site. Before proceeding further, read my latest article about Creating a Google Custom Search Engine for your website. I’m going to make this tutorial short. This may not work on the sites, that uses other themes. So other theme users can check my tutorial on Integrating Google Custom Search to any WordPress blog.

Google Search Engine for Newspaper WordPress Theme

The first step is to create a Google Custom Search Engine. Create a Google custom search engine with the 2 page layout, Customize it to match your site color and do not use border colors, get the code to render the search button and the code to show the search results. For detailed instructions check my tutorial on Creating Google Custom Search Engine for your Website.

Quick Tips
  • Google’s default template for custom search has some issues with this theme. So use some other styles for better results.
  • The CSS to hide the default borders that occurs in the search result is in the last part of this tutorial.

The next step is to create a page for showing the search results. Since this theme uses visual composer you can directly insert the code in the Raw HTML element. Create a new page. Set the Permanent URL to http://www.yourdomain.com/search/ or something that you wish. Set the page template to Page Builder + Title in the right sidebar. Use Visual Composer to build the page. Style the page as you like. Insert a Raw HTML element and add the code to show the search results, which you have got from the Google CSE page. For better results, use the code given below. Replace the Search Engine ID in the below code with your search engine ID and insert it. Publish the page after doing everything mentioned above.

Code to show the Search Result along with the search box
<script>
  (function() {
    var cx = 'Your-search-engine-ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
Google-Custom-Search-For-wordpress-theme-1
Create a Search Result page using visual composer
Rendering the Search Button

Attention !

This modification requires editing some theme files. So create a backup of the databases and directories before doing any modifications.

I’m not going to use the Search Button code directly inside the theme. Instead, I’m going to use a custom code, that do not spoil the look of the theme and also works better with this theme. The next step is to insert the code to the theme file. Open your FTP client and go to the location public_html/wp-content/themes/newspaper/parts/header/ and edit the file named header-menu.php. Check this image for details.

Google-Custom-Search-For-wordpress-theme-2-1
Replace the highlighted code with the given code

Now replace the highlighted text shown in the image with the code given below and save the file. Don’t forget to change this URL http://www.yourdomain.com/search in the below code, with the URL of your search page. Now, the search form in the menu takes you to the search page and shows the results there. You are done. (Use the scroll bar in the code block, to see the highlighted text)

Code to render the search box in the menu
<div class="header-search-wrap">
    <div class="dropdown header-search">
        <div class="td-drop-down-search" aria-labelledby="td-header-search-button">
                    <form role="search" method="get" class="td-search-form" action="http://www.yourdomain.com/search/">
                <div class="td-head-form-search-wrap">
    <input id="td-header-search" type="text" value="Search" name="q" class="s search-input" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /> <input type="submit" id="td-header-search-top" class="wpb_button wpb_btn-inverse btn" value="Search" />
                </div>
            </form>
        </div>
    </div>
</div>

If you want to show the search box in the sidebar, just drag a text widget and paste the code that you have got from the Google Search Engine page. For detailed instructions, check my article about Integrating Google Custom Search Engine to any WordPress Blog.

If you want to use the default search widget to render the search box, do the following. Replace the contents of your Search form located in Appearance > Editor > searchform.php with the code given below. Replace the URL http://www.yourdomain.com/search/ in the below code, with the URL of your search page.

Code to render the Search box using the search widget
<form role="search" method="get" class="td-search-form-widget" action="http://www.yourdomain.com/search/">
<div class="td-head-form-search-wrap">
<input class="td-widget-search-input" type="text" value="Search" name="q" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /> <input type="submit" class="wpb_button wpb_btn-inverse btn" id="searchsubmit" value="Search" /></div>
</form>

Replace the content of the searchform.php with the above code and update the file. Now you can use the default search widget to show the search widget. Check the search box on our blog, for the demo. This is how the search box and search results looks like.

Google-Custom-Search-For-wordpress-theme-3
Google CSE for Newspaper theme
Code to hide the borders around the search results

To hide the borders that appear around the search box and the results, add the following CSS code to the Custom CSS, in the theme panel. Replace the ID with your search page ID, to hide the borders only on that particular page. This removes the styles that come from the theme. If you see borders even after doing this step, the borders may be from the Custom search engine. Edit the Custom search engine and remove the border color.

body.page-id-ID .td-page-content table, .td-page-content td, .td-page-content tr {border: none!important; margin: auto;}
Other People are Reading
You have now learned to integrate Google Custom Search to your WordPress blog built using Newspaper theme. Consider giving a back-link to my blog if you find it useful. For any clarifications and suggestions use the comment box below.
Free Email Updates !
Join the visitors who are receiving our newsletter and receive the Daily Mass Readings, Prayers and other updates directly in your inbox.
We respect your privacy and take protecting it seriously.