Adding The Search Form to Your Template

NOTE: This article is for Drupal theme creators and template editors who understand PHP, HTML, and Cascading Style Sheets.

Adding The Form

In order to add the site search form to your template, first you need to edit or create template.php in your theme's directory. 

If your theme does not have a file named template.php, then create one and paste the code below into it.

		<?php
	

		  function _phptemplate_variables($hook, $vars) {
	

		      if (module_exists('osu_search')) {
	

		        osu_search_get_template_form($vars);
	

		        return $vars;
	

		      }
	

		    return array();
	

		  }
	

If template.php and the _phptemplate_variables() function already exist, then insert

		  if (module_exists('osu_search')) {
	

		    osu_search_get_template_form($vars);
	

		  }
	

into the _phptemplate_variables().

After you have created or edited the _phptemplate_variables(), the PHP variable $osu_search_form will be available in your template.  Simply adding the code

		<?php echo $osu_search_form; ?>
	

to your template will make the search form be displayed in its place.

Styling The Form

The form comes with a set of HTML element IDs that allows you to style it with CSS.  The element IDs are:

• osu-search-template-form : ID of the form
• osu-search-query : ID of the text input
• osu-search-submit : ID of the search submit button

Also keep in mind that the form elements are wrapped inside a <div> tag.

Below are some sample CSS styles to help you to get started.

		/* style for $osu_search_form */
	

		form#osu-search-template-form,
	

		form#osu-search-template-form div {
	

		    display:inline;
	

		}
	

		form#osu-search-template-form div input#osu-search-query {
	

		    border:1px solid #666;
	

		}
	

		form#osu-search-template-form div input#osu-search-submit {
	

		    border:1px solid #666;
	

		    background:#eca213;
	

		}
	

		form#osu-search-template-form div input#osu-search-submit:hover {
	

		    background:#efba2a;
	

		}