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.
I have released a new version for Belle Theme. I have fixed some bugs and changed some fonts to be more stylish. Also, the theme was submitted to some various WP theme directories. I am still waiting for suggestions and bug reports.
Current version : 1.0.1 , next version release date 10.03.2010, I hope to add more features to the theme, and fix some stuff.
Don’t forget to visit us for future changes.
After much hard work, I have finished the WordPress theme. I wanted to make a theme which was simple, web 2.0, compatible with all browsers, light, and header customized. But this is not the end of the theme. I will update the theme with new features, so please visit us for future updates.
Here is a sample picture inserted in post. I hope it is relevant and makes you download and use the theme.
Some of the future features :
I wish you find the theme interesting and easy to use, and don’t forgot to link back to us. That would help a lot. Thanks
Here is a Cite sample