Dec 062014
 

Last Updated: December 07, 2014

Suffusion Google Custom Search Engine Responsive post shows you how to add a different code to your website that is responsive for small devices.

Latest News: I have added more information to better explain the procedure.

This tutorial will show you how to add a different Google Custom Search code using the Layout style. This is so it works in a responsive way and display correctly in a mobile device like a Smart Phone or tablet.

Suffusion Google Custom Search Tutorials:

Suffusion Google Custom Search Engine Responsive Steps

Create a new Suffusion Template.

1 ) In this tutorial I created a new template with the name googlesearch.php. Bacically this new template is a copy of one of Suffusion’s default templates. I just edited the code by deleting some code from the default template and adding a new Template name. See below.

/**
 * Template Name: Google Search Results
 *
 * @package Suffusion
 * @subpackage Templates
 */

Once I finished editing the template I upload it to the server using FTP protocol. I always suggest Filezilla if you are using Windows. It is free and a great tool to have.

The image below shows you the path where you have to add your new template.

  • /yourserver/website/wp-content-themes-suffusion
  • Name of the new template = googlesearch.php

suffusion-google-custom-search-page-ftp-file

Now we need to change the Layout of our Custom Search Engine just like we did in our previous tutorial.

2 ) Go to Look and feel -> Layout to set up the following options.

Web search

  • Overlay
  • Two page
  • Full width = (You will click here because this is the layout used for this tutorial)
  • Two column
  • Compact
  • Results only
  • Google hosted
  • Once you have finished you can click on Save button or Save & Get Code button. (For this tutorial I clicked on Save & Get Code button)

Remember: Copy and past the custom code into a text editor. You can save locally or leave the text editor opened because you will be pasting this code into your new custom template.

suffusion-google-custom-search-full-width

3 ) Log into your website admin. Go to Appearance -> Editor to edit the custom template file googlesearch.php created previously. See image below.

suffusion-google-custom-search-theme-editor

4 ) The following image displays the file googlesearch.php I created in Step 1 above and uploaded to the server. Now search for one of Suffusion default templates and copy and paste the code into your new custom template file. In this example I will be copying the code into googlesearch.php.

suffusion-google-custom-search-custom-template

5 ) The following image displays Google custom code I copied and paste as mentioned above. You can also see the code from one of Suffusion default templates also mentioned above. You can choose any of the templates you want. Remember you might have to delete some code in the template before you paste Google’s code.

Example Template Code:

  • <?php get_header(); ?>
  • <div id=”main-col”>
  • <?php suffusion_page_navigation(); suffusion_before_begin_content(); ?>
  • Google Code
  • <?php get_footer(); ?>

suffusion-google-custom-search-code

6 ) The following image displays the new page Search Results I created. (Please remember your page name will be different). Select the custom Template you created previously. I selected Google Search Results which is the template I created for this tutorial. Once you have edited the page remember to save or Update the page.

suffusion-google-custom-search-page

7 ) The following image displays my custom search button added to the Top Navigation Bar on the website. This is viewed through a laptop or desktop.

suffusion-google-custom-search-full-width-navigation-bar

8 ) The following image displays the custom search page created in the website.

suffusion-google-custom-search-full-width-layout-displayed

9 ) The following image displays the Search button in the navigation bar using a smartphone.

suffusion-google-custom-search-responsive-menu

10 ) The following image displays the search result in a smartphone.

suffusion-google-custom-search-responsive-display

If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest post.

Enjoy

Other links you might want to read:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

5 × 5 =