Free Pro Themes

Why not helping your visitors to find what they’re looking for on your blog, by using a cool auto-completion on your search field? To do so, we’ll use WordPress tagcloud, php and ajax.

Please note that even if this code is fully functional, this is an experimentation, and the SQL query isn’t really optimized.

The idea

We will use tags as a list of keyword to suggest to the readers.
When someone will start to type on the search field, we will use Javascript to send a request to a php page which will do the following SQL request SELECT * FROM matable WHERE ‘name’ LIKE ‘$search%’. Via Ajax, we’ll send back the request results to our page, and display it to the visitor.

First part: PHP

The first thing to do is to create a php page. This page will send a request to our WP database and display the tags as a html unordered list.

<?php
if (isset($_POST['search'])) {
        $search = htmlentities($_POST['search']);
} else  $search ='';
$db = mysql_connect('localhost','root',''); //Don't forget to change
mysql_select_db('wp', $db);       //theses parameters
$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req))
{
        echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
}
echo '</ul>';
mysql_close();
?>

This code is simple: It receive a POST parameter (The letter(s) typed in the search field by the visitor) and then sends a request to our WP database in order to gets all tags starting with the letter(s) typed in the search box.

Part two: Ajax

Now it’s time to start the client-side programming. We need to code 4 Javascript functions in order to make our auto-completion work:

Function ajax() will create a XMLHTTPRequest object.
Function request() will send an Ajax request to our gettags.php file.
Function return() will return gettags.php contents.
And the selected() function will update the search field.

Here’s our gettags.js file and the 4 functions needed:

var myAjax = ajax();
function ajax() {
        var ajax = null;
        if (window.XMLHttpRequest) {
                try {
                        ajax = new XMLHttpRequest();
                }
                catch(e) {}
        }
        else if (window.ActiveXObject) {
                try {
                        ajax = new ActiveXObject("Msxm12.XMLHTTP");
                }
                catch (e){
                        try{
                                ajax = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {}
                }
        }
        return ajax;
}
function request(str) {
 //Don't forget to modify the path according to your theme
        myAjax.open("POST", "wp-content/themes/openbook-fr/gettags.php");
        myAjax.onreadystatechange = result;
        myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        myAjax.send("search="+str);
}
function result() {
        if (myAjax.readyState == 4) {
                var liste = myAjax.responseText;
                var cible = document.getElementById('tag_update').innerHTML = liste;
                document.getElementById('tag_update').style.display = "block";
        }
}
function selected(choice){
        var cible = document.getElementById('s');
        cible.value = choice;
        document.getElementById('tag_update').style.display = "none";
}

Part three: Editing your theme

Now that we have our php and javascript ready, we can edit the searchform.php file from your WP theme:
Your searchform.php file should look like this:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
        <div>
                <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
                <input type="submit" id="searchsubmit" value="Search" />
        </div>
</form>

We have to add a div, which will display the received data from the request, as well as a Javascript event on the search form:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    <div>
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" onkeyup="request(this.value);"/>
        <input type="submit" id="searchsubmit" value="Search" class="button" />
    </div>
    <div id="tag_update"></div>
</form>

Final part: CSS

Due to the fact that every theme use different color schemes, this is only an example. Anyways, I thought it could be a good start:

#tag_update {
        display: block;
        border-left: 1px solid #373737;
        border-right: 1px solid #373737;
        border-bottom: 1px solid #373737;
        position:absolute;
        z-index:1;
}
#tag_update ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
#tag_update li{
        display:block;
        clear:both;
}
#tag_update a {
        width:134px;
        display: block;
        padding: .2em .3em;
        text-decoration: none;
        color: #fff;
        background-color: #1B1B1C;
        text-align: left;
}
#tag_update a:hover{
        color: #fff;
        background-color: #373737;
        background-image: none;
}

That’s all. You now have a very nice auto-completing search form! If you have any questions, feel free to leave a comment below.

0:	\|skip=0xHEX	[← not included in the Support page]
1:	\|leftbg=0xHEX
2:	\|lefticon=0xHEX
3:	\|bg=0xHEX
4:	\|righticon=0xHEX
5:	\|rightbg=0xHEX
6:	\|text=0xHEX
7:	\|tracker=0xHEX	[← Support page has "slider" instead of "tracker"]
8:	\|loader=0xHEX
9:	\|track=0xHEX
10:	\|border=0xHEX
11:	\|bgcolor=#HEX	[← not the way the Support page has it]
12:	\|volslider=0xHEX	[← not included in the Support page]
13:	\|voltrack=0xHEX	[← not included in the Support page]

14:	\|righticonhover=0xHEX
15:	\|rightbghover=0xHEX

\|titles=TITLE HERE	track title
\|artists=NAME HERE	artist name
\|remaining=yes	shows remaining rather than elapsed track time
\|initialvolume=NUMBER HERE	initial volume level (from 0 to 100; default is 60)
\|loop=yes	loop play
\|animation=no	player always open
\|width=NUMBER HERE	player (open) width; default is 290

Demo

Features

Monday, October 17, 2011

Ajax-based Auto-completing Search Field for your WordPress Theme

The idea

First part: PHP

Part two: Ajax

Part three: Editing your theme

Final part: CSS

Designig Your WP audio player

Tuesday, October 4, 2011

WordPress Search Engine Optimization (SEO) some of the techniques

Sunday, September 25, 2011

Arthemia Premium wordpress theme - Free Download (hotfile,filesonic,mediafire)

Saturday, September 24, 2011

My Magazine - Wordpress Theme - Download

Description

Multimedia - Music, Video, Picture, Wordpress Theme Download

Download | Demo

MULTIMEDIA THEMES [WORDPRESS]

COLOR

Page

Reviewer - WORDPRESS Theme Download

Theme Categories