Install Google Custom Search Engine (CSE) on WordPress / WordPress Site

If you are not satisfied with the weak search functionality of WordPress’ native search function, here is an alternative. You can use Custom search engine powered by Google itself on your WordPress based website.

With Google search engine features, your website visitors will have a better experience while performing a search. You can use CSE in the sidebar/footer or on the whole page. This guide will show you how to easily implement Google CSE on your WordPress site.

Create your Custom Search

Signing up for CSE is as easy as signing up for an email account. You need to enter some details that define your search engine and the CSE will be ready. Here are the necessary steps.

At the Google Custom Search page, click Create a custom search engine knot. You will be redirected to the CSE login page (if you are not already logged in). Enter your Google account credentials and press Log in knot. If you don’t have a Google account, it’s time to create one!

Enter your search engine details: Name, Description, Language and Website to search. You must list all sites in Sites to look for box to set parameters for your custom search engine to crawl and render results from.

Choose your CSE instance (Standard version costs nothing but Site Search is available at $100/year) then agree to the Terms of Service before clicking Next. In Trial (design) page, click ‘Look and feel‘, written in the first line of the page.

At the Layout page, select the layout for the CSE on the site. In turn Save and get code knot. Keep this Get Code page opened in your browser. Check below on how to implement CSE in different layouts on your WordPress site.

Deployment pattern

We will be using WordPress page templates to implement CSE in several layouts. You will need this template to implement CSE on the yoru site. WordPress templates are tools to extend the functionality of WordPress pages to display dynamic or programmed content.

Here’s a quick way to create a template for your CSE. On notepad or text editor, paste this code below; note that a single distance beyond position can render the code useless. Save the file as page-template-cse.php on your computer.

 
 hook ('main_b Before'); ?> 
 hook ('content_b Before'); ?> / * Dán mã vạch CSE của bạn bên dưới dòng này. * / / * Dán mã vạch CSE của bạn lên trên dòng này. * / / * Dán mã kết quả CSE của bạn bên dưới dòng này. * / / * Dán mã kết quả CSE của bạn lên trên dòng này. * / hook ('content_after'); ?> 
 hook ('main_after'); ?> 
 

Implement Google CSE on your website

Full width

Open page-template-cse.php and paste the copied content where it was written to paste the CSE-Bar code. Save files. Upload files to your site’s WordPress installation directory through your hosting account’s File Manager.

Log in to your site’s dashboard and create a new page. Enter other details like Page Name and/or SEO Options, but nothing in the body of the page.

Search Template option (right). Select Google CSE from the drop-down menu. Save or publish the page.

Compact / Results Only / Stored on Google

Copy the code Google Search Element decides the word Get Code page. Log in to your site’s dashboard and go to Appearance > Widgets. Select Text Widget and drag it to the Sidebar or Footer, wherever you want to position it. Paste the copied content into the text widget and click Saving.

Two pages

Specify the url where CSE search results should appear on your site. When you specify this page name or slug, you must use the same slug while creating the page. Its format should be http:///.

Copy CSE code from code Get the code Page. Log in to your site’s dashboard and go to Appearance > Widgets. Select Text Widget and drag it to the Sidebar or Footer, wherever you want to position it. Paste the copied content into the text widget and click Saving. Copy the CSE result code from Get the code Page.

Open the template you saved as page-template-cse.php and paste the copied content there written to paste the CSE Result Code. Save and upload files. Log in to your site’s dashboard and create a new page. Enter other details like Site Name and/or SEO options.

Keep the slug the same as what you entered in the page URL box, but do not enter anything in the body of the page. Search Template options on the right. Select Google CSE from the drop-down menu. Save/Publish the page.

Conclusion

Google CSE is a good tool to improve your website. Visitors will get better search results. Moreover, you can monetize your website results using Google Adsense. Hope this guide was helpful and you can easily implement Google CSE on your WordPress site. If you encounter any problems, let me know in the comments.