Zenko Web Hosting and Design

ArtisteerArtisteer - Joomla Theme Generator

I thought I would put together a little article on how to add a Google Custom Search Box in the menu (or header) in an Artisteer Template / for Joomla CMS. Hope it helps. If you have any questions, please feel free to ask. You can see an example of it in use on this site: http://www.zenkohost.com.

IMPORTANT! ALWAYS make a back up before making modifications to files. I will often times create copies of my files and rename them by adding .old at the end. For example, template. css.old. and a new copy called template.css. That way if something just REFUSES to work, I can always go back to where I was when I started.

Do this before starting. You’ve been warned. The steps below worked for me, but if they don’t for you, at least you can go back to where you were before you started, right?

So let’s get started.

Useful tools for this modification

Required for this modification

Google Adsense Account
Notepad or other text editor such as Notepad ++
Joomla
Artisteer

I. Modify Artisteer Template.

A. templateDetails.xml

Artisteer, by default, does not provide a module position that we can use for our search box. This step will create a new Module Position called “search”.

1. Using CPanel or your favorite FTP program, navigate to following file on your server.

/public_html/templates/YOURTEMPLATE/templateDetails.xml

2. Open this file in the editor of choice (Notepad) and add the following line to the <positions> section near the bottom

<position>search</position>

3. Save the file and close /upload.

B. template.css

Now that we have created a new module position, we need to add some information to the template style sheet to define the location of the module position.

1. Using CPanel or your favorite FTP program, (or from within the Joomla Template Editor) navigate to the following file on your server.

/public_html/templates/YOURTEMPLATE/css/template.css

2. Open this file in the editor of choice (Notepad or Joomla) and add the following at the bottom of the style sheet.

div.module_search

{

position: absolute;

top: 157px; /* position of your box in relation to the top edge of the page */

left: 785px; /* position of your box in relation to the left edge of the page */

z-index: 2; /*stack order of your element moves to front or back*/

}

C. index.php

Now that we have created a div, we need to add that div to our index so that it will be visible.

1. Using CPanel or your favorite FTP program, (or from within the Joomla Template Editor) navigate to the following file on your server.

/public_html/templates/YOURTEMPLATE/index.php

2. Open this file in the editor of choice (Notepad or Joomla) and find this code

<jdoc:include type="modules" name="user3" />

</div>

3. Add the following code after:

<div class="module_search"><jdoc:include type="modules" name="search" /></div>

II. Setup Google Search.

A. Google Custom Search

Setting up Google Custom Search is very easy. Follow the directions in Adsense setup for creating a “Adsense for Search” box. There are really only a few items to think about while going through this process. The top items, in relation to Google’s setup steps are:

1. Search Box Type

a) Do you want to display results from only your site or the entire web?

2. Choose Search Box Options

a) You may be dealing with limited space, depending on where your search box will be displayed. Modify “text box length”, if needed, to accommodate.

3. Search Results Style

a) Do you want Google to show results in a new page or on your site?

If you choose “Open results within my own site”, you will need to follow step 3B and 3C below. You will also need to enter the name of the page you would like to display results on. This will be the name of the menu item that is created in Step 3B. For example, www.YOURSITE.com/search-results. Also, keep in mind that you will want to style your search results so they fit the module you will display them in, so be aware of width and palette.

If you choose to “open in a new window” or “same window”, this is not necessary, and Steps 3B and 3C are not needed.

4. Agree to Google’s Terms, Name your search, and click “Submit and Get Code”.

5. Get Search Code

a) Depending on the options you selected, this page shows your “Search Box Code” and (if chosen) “Search results code”. I suggest leaving this page open and opening a new window or tab to perform the following steps.

III. Enable / Setup Joomla Modules.

A. Create / Enable Search Box Module

Now it’s time to finally SEE some of our work. These steps add a create and enable the Search Box Module in the position we chose earlier.

1. Login to your Joomla Admin area and go to

Extensions>Module Manager

2. Click “New”

3. Choose “Custom HTML” as your type.

4. Title your Search Box “Google Search Box”

5. Set “Show Title” to “No”

6. Set “Enabled” to “Yes”

7. Set “Position” to “search”

8. Under “Menu Assignment”, select the pages you wish your box to show.

9. Under “Custom Output” select the “edit code” button and paste the code from II.A.5.a. above (Search Box Code).

10. Apply / Save.

NOTES FOR TWEAKS. Visit your site now and see where the search box is showing. You will almost definitely need to refine your template.css to move the search box to where you want it to be. Edit the top and right px values until it lands where you want it. THIS IS WHERE FIREBUG ADD-ON FOR FIREFOX IS INVALUABLE! If the search box is to large or small, change its width in characters in Google setup (you can go back and edit anytime in Adsense setup).

If you chose for Google to open search results in a new page or same page, you are finished. If you chose to have search results display within your page then please continue.

B. Create / Enable Search Results Menu Item
These steps add a page that Google will look for to display our search results.

1. You need a menu that’s not visible to the public. If you already have one, go to step B.6.

2. Login to your Joomla Admin panel and navigate to

Menus>Menu Manager

3. Click New

4. Give your menu a unique name and title. Something like “Other Pages” “otherpages” will be fine.

5. Save

6. Navigate back to

Menus>MENU NAME YOU JUST CREATED or other not visible menu.

7. Click “New”

8. Choose Articles>Front Page Blog Layout

9. Give your page a title such as “search results”

10. Give your page an alias that matches what you named your page in Google (step II.3.a.). In our example, our alias would be “search-results”.

11. Choose your invisible menu in “Display in”

12. Set “Published” to “Yes”

13. Edit other parameters if needed.

14. Save/Apply/Close.

C. Create / Enable Search Results Module

ALMOST DONE! Now we are going to create a custom HTML Module and place it on our newly created page.

1. Login to your Joomla Admin area and go to

Extensions>Module Manager

2. Click “New”

3. Choose “Custom HTML” as your type.

4. Title your Search Box “Google Search Results”

5. Set “Show Title” to your preference.

6. Set “Enabled” to “Yes”

7. Set “Position” to your preference.

8. Under “Menu Assignment”, select the pages you created above. i.e.” Search Results”.

9. Under “Custom Output” select the “edit code” button and paste the code from II.A.5.a. above (Search Results Code).

10. Apply / Save.

Now go to your search box (III.A.), enter a search query, and hit enter or click submit. You should be directed to the page you created (III.B.) and your results shown in the module position you defined (III.C.)

Be careful NOT to click your own ads. This is against Google’s TOS and your account WILL be disabled for doing so! Happy Searching!