Auto Suggesting Keywords for Wordpress Search Box at Pretty Scripts ();

Dec 012009

Auto Suggesting Keywords for Wordpress Search Box

Ajax, CSS, JavaScript, PHP, Web Customization, WordPress Add comments

When we start typing in Google search box, it automatically suggests some related words and phrases. How if your WordPress search box also suggest such similar words to your users!! Actually these words are your “Tags”.

In this post I will show you how to do this magic within five minutes.

Let’s Start the Magic

You must note down this information before proceeding :

Check list

1. Your Host Name

2. Database name

3. Database username

4. Database password

5. Exact name of your theme folder

6. Exact name of you categories

First Minute work:

Make a new file in your theme folder say mytag.php and paste the code given blow in this file and Save it.

Note: Do not forget to write your correct database settings and you category names in this code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php

if (isset($_POST['search'])) {

$search = htmlentities($_POST['search']);

} else $search ='';

//Must provide Hostname, Username and Password

$db = mysql_connect('localhost','Username','Password');

//Must provide your database name

mysql_select_db('Your database name here', $db);

$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";

$req = mysql_query($sql) or die();

echo '<ul>';

while ($data = mysql_fetch_array($req))

{

$tag=htmlentities($data['name']);

//Write exact names of your categories

//for more categories repeat This Code - ||$tag==Your cat name

if($tag==Food||$tag==Introduction||$tag==Medcine||$tag==Treatments){}else{

echo '<li><a href="?tag='.htmlentities($data['name']).'" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';

}

}

echo '</ul>';

mysql_close();

?>

Second Minute work:

Now we make a java file for user side scripting, actually it is ajax.

Create a new file in your theme folder say mytag.js (it is a java file .js extension), Paste the code (given blow) in this file

And change your theme name in line -

myAjax.open(”POST”, “wp-content/themes/Yourthemename/mytag.php”);

Save it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

Third Minute work:

Now come to your inbuilt file in theme folder searchform.php

Find this line

1	<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />

Replace With

1	<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" onkeyup="request(this.value);"/>

Find

</form>

Replace with

1	<div id="taglist"></div></form>

Ok Stop editing and save the file

Fourth Minute work:

Now Open header.php

And paste this code between <head>and </head> html tags.

1	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/mytag.js"></script>

Let us decide how the tag listing will look like (Using css). You can use different colors according to your theme.

For now copy this code and paste in your style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

#taglist {

display: block;

background:#FFFFFF;

position:absolute;

z-index:1;

}

#taglist ul {

margin: 0;

padding: 0;

list-style: none;

}

#taglist ul li{

display:block;

clear:both;

}

#taglist ul li a {

width:130px;

display: block;

padding: 1px 1px 1px 1px;

text-decoration: bold;

color: #FF0000;

text-align: left;

}

#taglist ul li a:hover{

color: #FF0000;

text-decoration: bold;

background-image: none;

}

Fifth Minute work:

Have a cup of coffee! Look at the example website

Now this is the time to enjoy the magic. Type a letter in your search area, it will auto suggest the available tags (if tag is not available with this letter it will give blank area). Click on any tag – it will give results.