I have started to work on the new version. Some of the features that will be integrated:
If there are suggestions or bugs don’t hesitate to tell us.
Today, Google has changed his logo with some circles and eclipse for celebrating the PI number which is 3.14 . Every year on date of March 14 (3/14) fans celebrate the PI number. The date isn’t chose aleatory, because the American peoples put first the month in front of the date 3.14.
3,14 has fans that meets every year and celebrate this day by have speeches and competition about this number.
The PI number was first proposed by the mathematician William Jones in 1706.
Hello,
Today i will explain how to implement the Live Search feature in your WordPress Theme. Live Search uses jQuery to get data from search, and display it dynamicly in the main content.
Ok for the beginning you must register jQuery into your WP theme. Add this code to your functions.php file
function register_scripts() {
wp_register_script('livesearch',
get_bloginfo('template_directory') . '/js/livesearch.js',
array('jquery'), K2_CURRENT, true);
wp_register_script('functions',
get_bloginfo('template_directory') . '/js/functions.js',
array('jquery'), K2_CURRENT);
wp_enqueue_script('livesearch');
wp_enqueue_script('functions');
wp_enqueue_script('jquery');
}
add_action('init', 'register_scripts');
This function will include our javascript file that we will create later in our wordpress blog header. Next step edit your searchform.php file to look like this:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div id="search-form-wrap">
<label for="s" id="search-label"><?php _e('Search for:'); ?></label>
<input type="text" id="s" name="s" value="<?php the_search_query(); ?>" accesskey="4" />
<span id="searchreset" title="<?php esc_attr_e('Reset Search'); ?>"></span>
<span id="searchload"></span>
</div>
</form>
This will handle out search input. Next you need to edit the search.php file and remove header, footer and sidebar. The search.php need to display only the results without the layout, because will be loaded in the main page. Next step is to create the javascript functions. The first one is responsable for actions over the search form livesearch.js
function LiveSearch(searchprompt) {
var self = this;
jQuery('#search-form-wrap').addClass('livesearch');
this.searchPrompt = searchprompt;
this.searchform = jQuery('#searchform');
this.searchField = jQuery('#s');
this.reset = jQuery('#searchreset');
this.loading = jQuery('#searchload');
this.searchLabel = jQuery('#search-label');
// Inlinize label
this.searchLabel.empty().text(searchprompt).addClass('overlabel-apply');
// Bind events to the search input
this.searchField
.focus(function(){
self.searchLabel.addClass('fade');
})
.blur(function(){
if (self.searchField.val() == '') {
self.searchLabel.show().removeClass('fade');
if (self.prevSearch != '') {
self.resetSearch(self);
}
}
})
.keydown(function(event) {
if (self.searchField.val() == '') {
self.searchLabel.show();
if (self.prevSearch != '') {
self.resetSearch(self);
}
}
var code = event.keyCode;
if (code == 27) { // Escape
self.resetSearch(self);
} else if (code != 13 && code != 9) { // Not Enter or TAB
self.searchLabel.addClass('hide')
if (self.timer) {
clearTimeout(self.timer);
}
self.timer = setTimeout(function(){ self.doSearch(self); }, 500);
}
})
.keyup(function(event) {
var code = event.keyCode;
if (code != 13) { // Not Enter
if (self.searchField.val() == '') {
self.resetSearch(self);
clearTimeout(self.timer);
} else {
self.reset.fadeTo('fast', 0);
self.loading.fadeTo('fast', 1);
}
}
});
if (this.searchField.val() != '') { // If searchfield isn't empty when page is loaded.
this.doSearch(self);
this.searchLabel.addClass('hide');
}
self.loading.fadeTo('fast', 0);
self.reset.fadeTo('fast', 0);
};
LiveSearch.prototype.doSearch = function(self) {
if (self.searchField.val() == self.prevSearch) return;
self.prevSearch = self.searchField.val();
Belle.ajaxGet(self.searchform.serialize() + '&dynamic=true',
function(data) {
jQuery('#current-content').hide();
jQuery('#dynamic-content').html(data).show();
self.loading.fadeTo('fast', 0);
self.reset.click(function(){
self.resetSearch(self);
}).fadeTo('fast', 1.0).css('cursor', 'pointer');
}
);
};
LiveSearch.prototype.resetSearch = function(self) {
self.active = false;
self.prevSearch = '';
self.searchField.val('');
self.searchLabel.removeClass('hide');
self.loading.fadeTo('fast', 0);
self.reset.unbind('click').fadeTo('fast', 0).css('cursor', 'default');
if ( jQuery('#current-content').length ) {
jQuery('#dynamic-content').hide().html('');
jQuery('#current-content').show();
}
};
The next function we need to get the html data from search with jQuery. File functions.js should contain:
jQuery.noConflict();
if (typeof Belle == 'undefined') var Belle = {};
Belle.ajaxGet = function(data, complete_fn) {
jQuery.ajax({
url: Belle.AjaxURL,
data: data,
dataType: 'html',
error: function(request) {
jQuery('#notices')
.show()
.append('<p>Error ' + request.status + ': ' + request.statusText + '</p>');
},
success: function() {
jQuery('#notices').hide().html();
},
complete: function(request) {
document.write = function(str) {};
if ( complete_fn ) {
complete_fn( request.responseText );
}
}
});
}
Now everything is setted, you need to add the css code for the form. I am using this code:
#searchform {
background: #f2f2f2;
width: 177px;
padding: 13px 13px 13px 13px;
float:left;
margin-bottom:15px;
}
#search-label { /* The 'Search for:' label */
display: none;
}
#search-label.overlabel-apply { /* Inline label for livesearch */
display: block;
position: absolute;
color: #888;
cursor: text;
padding: 3px 5px;
margin-top:2px;
z-index: 1;
background: white;
}
#search-label.overlabel-apply.fade { /* Fade label when #s has focus */
color: #ccc;
}
#search-label.overlabel-apply.hide { /* Hide label when #s isn't empty */
text-indent: -1000px;
}
#s, #search-label.overlabel-apply { /* Style #s and label in same way */
font-size: 1.1em;
width: 164px;
line-height: 15px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#s { /* The actual search input field */
position: relative;
padding: 3px;
border: 1px solid #d0d0d0;
background: transparent;
z-index: 2;
}
.livesearch{
position:relative;
}
.livesearch #s { /* The search input field w. livesearch enabled */
padding-right: 20px;
width: 150px;
}
#s:focus {
border-color: #34a0cc;
}
#searchreset, #searchload { /* Reset button & loading spinner */
position: absolute;
top: 2px;
opacity: 0;
right: 2px;
height: 18px;
width: 18px;
}
#searchreset {
z-index: 4;
background: url('images/reset-fff.png') center center no-repeat;
}
#searchload {
z-index: 3;
background: url('images/spinner.gif') center center no-repeat;
}
You will need also these 2 images for loading and reset form: 
and 
And this is it. You have a nice , clean live search box into your wordpress theme. If you like this tutorial link to us.
As you can see version 1.4.1 is now released. I have fixed the search, you don’t need to press enter to search, just type in the word and wait for result to appear in main content. I have remove the custom font from post title. Was some problems with the license, and special characters didn’t appear in post, so i take the decision to remove the font. Now anyone can use the theme , even languages with special characters.
I am working now to translate the theme, and make it global. Any translate will help me a lot. Also i am working on theme colors. I will add more colours to the theme. Now is blue but i hope will be 4 more colors, so you can chose the one you like.
I will appreciate any help, suggestion or report. In future i will implement an rolling archive, and live comments with jQuery. I will also post the live search form if anyone wants to use it.
Wish you a happy using 
As i said in my last post the new update has arrived.
Ok, so version 1.2 is available to download. I have implemented the live search, some bug fixes in comment list and blockquote, i have replace the font with a free one.
I have redesign some blocks, and i still have a lot to do. Keep posting comments on bugs you found , will help me a lot in my next version release.
See you soon.