This is an old topic that has been covered by many other blogs and magazines–to the extreme, but it needs updating. I’m talking about how to highlight comments posted by the author of the article. The tutorials out there only work for one user ID for the whole site. That is a big mistake, as it didn’t allow for scalability — it only works when you are blogging on your own (and with only one account). We have given it an overhaul, and updated the code.

First, we should take a look at the code from the tutorials which highlight the comment based on the user ID:

.authcomment {
    background-color: #B3FFCC !important;
}

<li class=”<?php 

                if (1 == $comment->user_id)
                    $oddcomment = “authcomment”;
                echo $oddcomment;?>” id=”comment…">
                
                ...
                
</li>

To make it work on sites with multiple writers, we need to to get the ID of the author, then check if the ID of the person posting this comment is the same. If it is, we need to make it stand out. We still use the CSS class for post author comment.

.authcomment {
    background-color: #B3FFCC !important;
}

Now, we change the original code at the start of the article with this:

<li class="comment-container
    
    <?php
        $authID=get_the_author_meta('ID');
                                    
        if($authID == $comment->user_id)
            $oddcomment = 'authcomment';
        echo $oddcomment;
    ?>"  id="comment-<?php comment_ID(); ?>">
                                    
        ...
        
</li>

And, that’s it! We hope that you find it useful!

Some of wordpress plugins automatically add their display below your post content which is such as: YARPP (Related Posts) or Sociable …. They added their displays into your post content, but sometime, you want to add your own code before them, even between the introduction and the main content. This article will tell you how to add anything to your wordpress theme just right before others plugin do.

This is the first tutorial that I don’t offer the download link. Just follow these simple steps and you’ll get the nice results.

Hack your theme functions.php file

The only thing you want to do is just hack your theme functions.phpfile.

Open this file.

In this article, I will add the author bio box into wordpress theme before the Related Posts displays. Write a function that return the author bio box, you can write anywhere, but at the end of your functions.php is avoid messing up your file:

function get_author_bio ($content=''){  

    if(!in_category("Community News")) {
    $post_author_name=get_the_author_meta("display_name");
    $post_author_description=get_the_author_meta("description");      

    $html="<div class='clearfix' id='about_author'>\n";
    $html.="<img width='80' height='80' class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>\n";

    $html.="<div class='author_text'>\n";
    $html.="<h4>Author: <span>".$post_author_name."</span></h4>\n";
    $html.= $post_author_description."\n";
    $html.="</div>\n";
    $html.="<div class='clear'></div>\n";
    $html.="</div>";
    $content .= $html;

    }

    return $content;

}

In WordPress 2.8 and above, the_author_description(); has been deprecated and replaced with another function: the_author_meta(‘description’);. However, you have to use get_the_author_meta() if you need to return (not display) the information. Take a look at this function’s information at WordPress Codex.

In this function, I set the condition that the bio box will not display if this post is in Community News category. I’m using the same as above. This function is not return the bio box, it joins the post content and bio box content into one.

Next, you need to hook this function to the_content with code:

add_filter('the_content', 'get_author_bio');

For the example, before you use this hack, your bio box will display after the Related Posts, likes this:

But after you did some hacks in functions.php file, you will get a result likes mine at the end of this post.

To display something at the begin, easy as adding it normally into your post theme file: single.php

Sometime, you want to display your ads right below your post’s introduction. We will need to split the content into two parts, then insert ads code at the middle. Let’s write a function likes this:

function put_middle_content($content='') {

    if( preg_match('/<span id="(.*?)?"><\/span>/', $content, $matches) ) {

        $content = explode($matches[0], $content, 2);

        $content = $content[0] . $matches[0] . '[YOUR ADS ARE HERE]' . $content[1];
    }

    return $content;

}

If your post has More tag, this function will split the content into 2 parts with delimiter is the More tag. Then, It will combine the content array again with the adding between 2 array strings.

Adding the code below to complete:

add_filter('the_content', 'put_middle_content');

That’s all

Yup, that’s all. Now, you can add anything you want to anywhere, such as: top, middle, and right after the post content that you could not do with the template display file. Your adding’s priority will be always the first.

In this tutorial, we will create a search page with CodeIgniter and jQuery. We’re not gonna create only a default search page using CodeIgniter framework, but also a real time search with jQuery’s support. And one more, enable GET method in CodeIginter that was stupidly disable by default. Enjoy the tut and don’t forget the … beer!

You can take a look at the demo or download it right now, then close this page immediately if you want to. But I highly recommend that you should read the whole tutorial, so you will not miss any interesting in this entry.

Try to search with the keywords: jquery, html, code …

1. The stuffs I’m using

• PHP Framework: CodeIgniter
• Javascript Framework: jQuery 1.3.2
• Debug tool: Firebug

2. Configuring CodeIgniter

At first, download CodeIgniter (CI) with the link above and extract package to your workspace. Note, your web site will be located in CodeIginiter folder by default. Then, you need to make some changes to Codeiginter within the CI config section. In this tutorial, we’re using PHP to connect to MySQL database to get data.

Open the system/application/config/autoload.php, find the following code:

/* | ------------------------------------------------------------------- |  Auto-load Libraries | ------------------------------------------------------------------- | These are the classes located in the system/libraries folder | or in your system/application/libraries folder. | | Prototype: | |   $autoload['libraries'] = array('database', 'session', 'xmlrpc'); */

$autoload['libraries'] = array();

Change the code above as below:

$autoload['libraries'] = array('database');

Because we’re gonna use Database to store and fetch from, so we load the database library. That’s all what it means. And each time you run your web page, it will automatically load the database connection.

The second, open up database.php in the same folder then find following code and change it to your database setting.

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "root";
$db['default']['database'] = "aext";

The next important part in CI Configuration is you have to config you default url of your website. This is a base url inside config.php file.
Open this file in then find and edit your base_url as below:

/* |--------------------------------------------------------------------- | Base Site URL |--------------------------------------------------------------------- | | URL to your CodeIgniter root. Typically this will be your base URL, | WITH a trailing slash: | |   http://example.com/ | */
$config['base_url'] = "http://project/tutorial/";

In CodeIgniter 1.7.2, there’re already some changes. Who follows the tutorial will need to activate the following, in autoload.php to make the base_url() function works:

/* | ------------------------------------------------------------------- |  Auto-load Helper Files | ------------------------------------------------------------------- | Prototype: | |   $autoload['helper'] = array('url', 'file'); */

$autoload['helper'] = array('url');

Default using of base_url when you want to call it in your view is as example below:

    <link media="screen"type="text/css"                          href="<?php echo base_url(); ?>css/style.css" />

2. Database

Wow, it’s a large database file size if you build a search engineer. So, I will use my old WordPress database and the search will fetch data from my posts table. If you are setting up a search for a series of articles or a site with lots of product-related content, a MySQL FULLTEXT search can make it very easy to find articles or products related to the keywords used by a searcher. Read this entry to know more about FULLTEXT

.

Add FULLTEXT to the data fileds you want to index. In this tutorial, I will search through table wp_post and the result will be based on the search term within post_title and post_content fileds.

ALTER TABLE `wp_posts` ADD FULLTEXT (
`post_title` ,
`post_content`
);

So, if I’m using FULLTEXT search, my search query is simple:

SELECT * FROM wp_posts WHERE  MATCH ( post_title, post_content ) AGAINST (?)  AND post_status='publish'

(?) is your search term.

Download the sample data file in my attachment then import to your database.

3. Understanding the CodeIgniter

CI is a framework was help php developers build a website base on Model–View–Controller architecture.

MVC in CodeIginter:

• Model: Collection of php classes and functions stored in system/application/models
• View: The view is represented by PHP file. All the PHP files for displaying located in system/application/views
• Controller: The controller communicates with the View and Model. These files located in system/application/controllers

Let’s begin to work with CodeIgniter!

4. Building the Model

Go to system/application/models and create a new file called search_model.php

.

The main function that used to get results from database by search keyword is:

    // Get total posts by search query     function get_posts($query, $post_per_page,$current_page) {

        $offset=($current_page-1)*$post_per_page;
        if($current_page==1) {
            $offset = 0;
        }

        $sql = "SELECT * FROM wp_posts WHERE  MATCH ( post_title, post_content ) AGAINST (?)  AND post_status='publish' LIMIT ?,?";
        $query = $this->db->query($sql, array($query, $offset, $post_per_page));

        return $query->result_array();
    }

Of course, we only need the posts with status is published because wordpress stores a lot of posts in the table for revision.
Next, create a function that will calculate the total of rows, we need that number for pagination.

    // Get the number of rows, use for pagination     function get_numrows($query) {

        $rows=0;

        $sql = "SELECT * FROM wp_posts WHERE  MATCH ( post_title, post_content ) AGAINST (?)  AND post_status='publish'";
        $query = $this->db->query($sql, array($query));

        $rows=$query->num_rows();

        return $rows;
    }

The next function highlight the search keywords. Continue to write some code in your Controller:

    function highlightWords($string,$words,$ajax=false){

        $words=explode(' ',$words);

        for($i=0;$i<sizeOf($words);$i++) {

            if($ajax==true)
            {
                $string=str_ireplace($words[$i], '<strong class=\"highlight\">'.$words[$i].'<\/strong>', $string);
            } else {
                $string=str_ireplace($words[$i], '<strong class="highlight">'.$words[$i].'</strong>', $string);
            }

        }

        return $string;
    }

Because FULLTEXT will find the results by each word in the search phrase, so we need to split our search phrase first. This function will split the keyword into parts then highlight each word in the result.

Furthermore, you need a function that clean up the HTML format for displaying. The purpose of this function I will talk later in jQuery part.

    function cleanHTML($input, $ending='...') {

        $output = strip_tags($input);

        $output = substr($output, 0, 100);
        $output .= $ending;

        return $output;
    }

The completed code of the Model:

<?php

class Search_model extends Model {

    // Get total posts by search query     function get_posts($query, $post_per_page,$current_page) {

        $offset=($current_page-1)*$post_per_page;
        if($current_page==1) {
            $offset = 0;
        }

        $sql = "SELECT * FROM wp_posts WHERE  MATCH ( post_title, post_content ) AGAINST (?)  AND post_status='publish' LIMIT ?,?";
        $query = $this->db->query($sql, array($query, $offset, $post_per_page));

        return $query->result_array();
    }

    // Get the number of rows, use for pagination     function get_numrows($query) {

        $rows=0;

        $sql = "SELECT * FROM wp_posts WHERE  MATCH ( post_title, post_content ) AGAINST (?)  AND post_status='publish'";
        $query = $this->db->query($sql, array($query));

        $rows=$query->num_rows();

        return $rows;
    }

    function highlightWords($string,$words,$ajax=false){

        $words=explode(' ',$words);

        for($i=0;$i<sizeOf($words);$i++) {

            if($ajax==true)
            {
                $string=str_ireplace($words[$i], '<strong class=\"highlight\">'.$words[$i].'<\/strong>', $string);
            } else {
                $string=str_ireplace($words[$i], '<strong class="highlight">'.$words[$i].'</strong>', $string);
            }

        }

        return $string;
    }

    function cleanHTML($input, $ending='...') {

        $output = strip_tags($input);

        $output = substr($output, 0, 100);
        $output .= $ending;

        return $output;
    }

}

?>

5.Building the Controller

Now go to system/application/controllers and create a new file. Name this file as search.php. After create the file, the first thing we must do with this file is create a constructor which loads the model of search. Our search model is sear_modelthat we already created above.

class Search extends Controller {

    function Search()
    {
        parent::Controller();

        $this->load->model('search_model');

    }

Here is the most important part for our search. Because we will create 2 search methods which are default HTTP request and ajax request; therefore, we have to create a function that identifies each other request is.

The function below is used for knowing that is an ajax request.

    function isAjax() {
        return(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest");
    }

You can add this function to your search_model then call it by:

$this->search_model->isAjax()

But it’s in here is fine.

By default, GET data is simply disallowed by CodeIgniter since the system utilizes URI segments rather than traditional URL query strings. The following line will make GET supported.

    function index()

    {       

        parse_str($_SERVER['QUERY_STRING'],$_GET);

Put this line into your index() method. Now, continue working with the index() by separating each method request. We will process the default HTTP Request first. For displaying, we need 4 files. Actually, we just want to create 3 files: search.php, search_form.php and search_result.php. However, we need to separate the search.php into search_header.php and search_footer.php to make it easier to edit later.

• search_header.php: Header HTML goes here
• search_form.php: Form search
• search_result.php: Even when it has results or not, you need to display here
• search_footer.php: HTML for footer goes here

We’re gonna make a default search page when have no request (It means no one submits search query). It’ll load the default view and pass variable search_term to search form. It’s an empty value, but without it, your form will get error.

    function index()
    {       

        parse_str($_SERVER['QUERY_STRING'],$_GET);

        if($this->isAjax()) {

            // Calm down, I'll do it later !!!! 
        } else {

            if(!empty($_GET['Query'])) {

                ...........

            } else {

                $data['search_term']="";

                // load the default view                 $this->load->view('search_header');
                $this->load->view('search_form', $data);
                $this->load->view('search_footer');

            }
        }
    }

We don’t need to display the results in the default search page because it doesn’t have any result, right?
Inside the condition block when it has GET value of query, we will process the default HTTP request method here.

    $query = trim($_GET['query']);
    $clean_query= mysql_real_escape_string($query);

    $post_per_page=5;
    $current_page=1;

    if(!empty($_GET['page'])) {
        $current_page=intval(trim($_GET['page']));
    }

    $totalrows=$this->search_model->get_numrows($clean_query);

    $totalpages=ceil($totalrows/$post_per_page);

    $posts = $this->search_model->get_posts($clean_query, $post_per_page, $current_page);

    $has_next=true;
    if($current_page==$totalpages) {
        $has_next=false;
    }

    $has_prev=true;
    if($current_page<=1) {
        $has_prev=false;
    }

You maybe knew the easiest way to do pagination in CodeIginter suchs by using Pagination class, take a look at the CI Pagination Guide. However, it’s not as they said. It’s hard to customize, you need to write another pagination class to fit your needs. That’s why I don’t like it. The following code to paginate the result is just a simple code. Because we’ve talked about that over forum to forum. Please change it to your one pagination. Thank you!

We are passing all variables to the $data array to display it in view.

    $data['search_term']=$clean_query;
    $data['total_posts']=$totalrows;
    $data['current_page']=$current_page;
    $data['next_page']=$current_page+1;

    $data['has_next']=$has_next;
    $data['has_prev']=$has_prev;

    $data['prev_page']=$current_page-1;
    $data['total_page']=$totalpages;
    $data['posts']=$posts;

    // load the default view     $this->load->view('search_header');
    $this->load->view('search_form', $data);
    $this->load->view('search_result', $data);
    $this->load->view('search_footer');

Now, we are on the topic of this entry. Build a ajax live search with jQuery and CodeIgniter. The code is similar to default HTTP request but may varies a little bit which is the results. The results in ajax respond are different. In this tutorial, I will make ajax response in JSON format.

A little bit thing but helpful to understand how is this form gonna get the result. It’s JSON format. The well-formatted JSON in this tutorial is:

    {"results":[
        {
            "postid":30,
            "summary":"Some summary of this post go here ...",
            "title":"This is a title",
            "url":"http://link-to-this-post",
        },
        {
            "postid":294,
            "summary":"Some summary of this post go here ...",
            "title":"This is a title",
            "url":"http://link-to-this-post",
        },
        {
            "postid":384,
            "summary":"Some summary of this post go here ...",
            "title":"This is a title",
            "url":"http://link-to-this-post",
        },
       ],
       "paging":{
            "start_idx":1,
            "end_idx":5,
            "total":6,
            "current":"1",
            "pages":2,
            "has_next":true,
            "has_prev":false,
       }
    }

The values in array paging is used for pagination. The start_idx and end_idx are the values that shows us the range in total of posts displayed in current page. The has_next and has_prev are boolean values that the next and previous button depend on. Here below is the ajax part:

    function index()
    {       

        parse_str($_SERVER['QUERY_STRING'],$_GET);

        if($this->isAjax()) {

            $query = trim($_GET['query']);
            $clean_query= mysql_real_escape_string($query);

            $post_per_page=5;
            $current_page=1;

            if(!empty($_GET['page'])) {
                $current_page=intval(trim($_GET['page']));
            }

            $clean_query= mysql_real_escape_string($query);         

            $posts = $this->search_model->get_posts($clean_query, $post_per_page, $current_page);

            $totalrows=$this->search_model->get_numrows($clean_query);

            $totalpages=ceil($totalrows/$post_per_page);

            if($current_page==1) {
                $start_idx=1;
            } else {
                $start_idx=($current_page*$post_per_page)-4;
            }   

            $end_idx=$start_idx+4;
            if($current_page==$totalpages) {
                $end_idx=$totalrows;
            }

            echo '{"results":[';

            foreach($posts as $post) {

              echo '{                       "postid":'.$post['ID'].',                       "summary":"'.$this->search_model->highlightWords($this->search_model->cleanHTML($post['post_content']), $clean_query, true).'",                       "title":"'.$this->search_model->highlightWords($post['post_title'], $clean_query, true).'",                       "url":"'.$post['guid'].'",                     },';
            }

            echo '],';

            $has_next='false';
            $has_prev='false';
            if($current_page<$totalpages) {
                $has_next='true';
            }

            if($current_page>1)
            {
                $has_prev='true';
            }

            echo '                     "paging":{                         "start_idx":'.$start_idx.',                         "end_idx":'.$end_idx.',                         "total":'.$totalrows.',                         "current":"'.$current_page.'",                         "pages":'.$totalpages.',                         "has_next":'.$has_next.',                         "has_prev":'.$has_prev.',                     }                 }             ';  

        } else {

            // blah blah blah blah blah blah 
        }
    }

When you display the results as JSON format, you need to make sure your data is cleaned up. Because some HTML tags will break the JSON format, then your jQuery code can not read it. That’s why I created a function to clean up HTML format earlier.

6. The View – Display your works

100% percent of people who are viewing the tut have already click to check the demo before reading, right? So, the demo you saw at the top of this entry is the result of all code below.

The search_header.php file: link to your css file and jQuery library, do some javascripts for the form, that’s all!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Search</title>

<link rel="stylesheet"media="screen"href="<?php echo base_url(); ?>css/reset.css">
<link rel="stylesheet"media="screen"href="<?php echo base_url(); ?>css/global.css">

<script type="text/javascript"src="<?php echo base_url(); ?>js/jquery.js"></script>
<script type="text/javascript"src="<?php echo base_url(); ?>js/search_pod.js"></script>

</head>
<body>

<!-- Begin Content -->
<div id="content">

    <div class="maincontent">

       <!-- Begin Search -->

All the javascript and css file will be located at root folder base on base_url that we declared at above. It’s not inside folder system/application/view.

Next, create search_footer.php file in system/application/view with content as:

       <!-- End Search -->

    </div>

    <div class="clearfix">&nbsp;</div>

</div>
<!-- End Content -->

</body></html>

The search_form.php contains the search form and the panel that data returned will be displayed in. Create a file name search_form.php in the same folder which contains following code below:

  <!-- Start SearchForm -->
  <div id="search">
     <form id="search_form"method="GET"action="<?php echo base_url(); ?>search">
         <fieldset>
            <img src="<?php echo base_url(); ?>/images/ajax-loader.gif"                  id="ajaxloader"alt="Loading Results..."style="display: none;">
            <input name="query"id="search_val"value="<?php printf($search_term); ?>"                    tabindex="1"autocomplete="off"type="text">
         </fieldset>

         <!-- Begin Livesearch Panel -->
         <div id="livesearch"style="display: none;">
            <div class="loader"id="loader_div"><p>Loading Results...</p></div>
            <div class="livesearch_body">
               <dl class="livesearch_results">
                  <dt><span>Live Search Results</span>
                  <div class="livesearch_subnav">
                    <a href="#"class="livesearch_close"id="livesearch_result_close_link">Close LiveSearch</a>
                    <div class="clearfix">&nbsp;</div>
                  </div>
                  <div class="clearfix"id="subnavclear">&nbsp;</div>
                  </dt>
                </dl>
             </div>
             <div class="livesearch_nav">
                <div class="livesearch_navbody"></div>
             </div>
         </div>
          <!-- End Livesearch Panel -->

      </form>
  </div>
  <!-- End SearchForm -->

The result after users input something is like image below:

Your search_result.php:

        <!-- Begin search result -->
        <dl id="search_results"class="results_browse">

        <?php if(count($posts)>0): ?>
        <dt>

            <div class="results_paging">
                <a class="livesearch_next"href="<?php echo base_url(); ?>search?query=<?php echo $search_term; ?>&page=<?php if(!$has_next) printf($current_page."#"); else printf($next_page); ?>"title="Next results page"><em>Next</em></a>

                <!-- list markup is IMPORTANT for ie6 compatibility (no whitespace) -->
                <ul class="pagelist">
                <?php for($i=1; $i<=$total_page; $i++) {

                        if($i==$current_page):

                ?>

                 <li><a href="<?php echo base_url(); ?>search?query=<?php printf($search_term); ?>&page=<?php printf($i); ?>"class="active"><?php printf($i); ?></a></li>
                <?php   else: ?>

                <li><a href="<?php echo base_url(); ?>search?query=<?php printf($search_term); ?>&page=<?php printf($i); ?>"><?php printf($i); ?></a></li>

                <?

                        endif;

                      }

                ?>
                </ul>

                <a class="livesearch_prev"href="<?php echo base_url(); ?>search?query=<?php echo $search_term; ?>&page=<?php if(!$has_prev) printf($current_page."#"); else printf($prev_page); ?>"title="Previous results page"><em>Previous</em></a>

            </div>
            <span class="results_meta">There were <?php echo $total_posts; ?> articles found for your query: - Page <?php echo $current_page; ?> of <?php echo $total_page; ?></span>
            <div class="clearfix">&nbsp;</div>
        </dt>
        <?php foreach($posts as $post):?>
        <dd id="">
        <a href="<?php echo $post['guid']; ?>">
        <p>
        <b><?php echo $this->search_model->highlightWords($post['post_title'], $search_term); ?></b>

        <?php echo $this->search_model->highlightWords($this->search_model->cleanInput($post['post_content']), $search_term); ?>
        </p></a>
        </dd>
        <?php endforeach;?>
        <dt>
        <div class="clearfix">&nbsp;</div>
        </dt>

        <?php else: ?>

        <dt>
            <span class="results_meta">There were no results</span>
            <div class="clearfix">&nbsp;</div>
        </dt>

        <dt>
        <div class="clearfix">&nbsp;</div>
        </dt>

        <?php endif; ?>

        </dl>
        <!-- End search result -->

Each variable you called in this result was passed by the controller:

    $data['search_term']=$clean_query;
    $data['total_posts']=$totalrows;
    $data['current_page']=$current_page;
    $data['next_page']=$current_page+1;

    $data['has_next']=$has_next;
    $data['has_prev']=$has_prev;

    $data['prev_page']=$current_page-1;
    $data['total_page']=$totalpages;
    $data['posts']=$posts;

    ....

    $this->load->view('search_result', $data);

The CSS code is in the download file. It’s a very long code of CSS, so I decided not to post it here.

7. Work with jQuery

We need to use jquery to send request and display the data responded. Create javascript file name search.js in the js folder. Of course, this js folder is at root folder, not in views folder of Codeigniter. You can see the clear link of this file at the header which was created earlier.
The jQuery code was modified from the Knowledge Base of Mediatemple. I removed some unnecessary and complicated code. If we’re gonna make a live search, we’ll only need as enough as in this tutorial.

Declare some variables:

var SEARCH_BOX_DEFAULT_TEXT = 'Enter the keywords:';

var AJAX_PENDING_TIMER;
var CURRENT_PAGE = 1;
var CURRENT_LIMIT = 5;

AJAX_PENDING_TIMER is the time which is used for the time delay before performing the search function.

Now, create the initial function. We will set up the value of search field, perform the search in condition and the button to close the livesearch panel.

function init() {

    var sTextBox   = $("#search_val");

    sTextBox.focus(function() {
        if(this.value == SEARCH_BOX_DEFAULT_TEXT) {
            this.value = '';
        }
    });
    sTextBox.blur(function() {
        if(this.value == '') {
            this.value = SEARCH_BOX_DEFAULT_TEXT;
        }
    });
    sTextBox.blur();

    sTextBox.keyup(function() {
        var q    = $("#search_val").val();
        if( q == SEARCH_BOX_DEFAULT_TEXT || q == '' || q == undefined || q.length<=3) {
            HideLiveSearch();
        }
        else {
            clearTimeout(AJAX_PENDING_TIMER);
            CURRENT_PAGE = 1;
            AJAX_PENDING_TIMER = setTimeout("PerformLiveSearch()",300);
        }

    });

    $("#livesearch_result_close_link").click(function() {
        HideLiveSearch();
    });

}

Look at the keyup event, we only perform livesearch when users input more than 3 characters. It’s for saving HTTP request.
Add these line at the bottom of javascript file:

$(document).ready(function() {
    init();
});

The completed code of PerformLiveSearch() function:

var AJAX_IS_RUNNING = false;
function PerformLiveSearch() {

    if(AJAX_IS_RUNNING == true) {
        return;
    }

    var query      = $("#search_val");
    var q_val      = (query.val() && query.val() != SEARCH_BOX_DEFAULT_TEXT) ? query.val() : '';    

    if(q_val == '') {
        return;
    }
    AJAX_IS_RUNNING = true;

    $.ajax({
        url:        './search',
        data: {
            query: q_val,
            output: 'json',
            page: CURRENT_PAGE,
            limit: CURRENT_LIMIT
        },
        type:       'GET',
        timeout:    '5000',
        dataType:   'json',
        beforeSend: function() {
            // Before send request             // Show the loader             AJAX_IS_RUNNING = true;
            ShowLoaders();
        },
        complete: function() {
            // When Sent request             // Hide the loader             AJAX_IS_RUNNING = false;
            HideLoaders();
        },
        success: function(data, textStatus) {
            AJAX_IS_RUNNING = false;
            HideLoaders();
            $('#livesearch').slideDown();

            // clear the results             $(".livesearch_results dd").remove();
            var resultsNav = $('.livesearch_results dt');

            if( data['results'].length ) {

                // add the new results (in reverse since the                 // append inserts right after the header and not                 // at the end of the result list                 var current = resultsNav;
                for(i=data['results'].length;i>0;i--) {
                    current.after(
                        ResultRowHTML(data['results'][i-1])
                    );
                }
            }
            else {
                resultsNav.after('<dd id=""><p>No articles found with these search terms</p></dd>');
            }

            // Pagination at the bottom of LiveSearch panel             UpdateResultFooter(data['paging'],".livesearch_navbody");

        },

        // We're gonna hide everything when get error         error: function(XMLHttpRequest, textStatus, errorThrown) {
            AJAX_IS_RUNNING = false;
            HideLoaders();
            HideLiveSearch();
        }
    });

}

The result will be displayed by a function name DisplayResult. Parameter is the value in data['results'] array.

function DisplayResult(row) {
    var output = '<dd id="">';
    output += '<a href="' + row['url'] + '">';
    output += '<p>';
    output += '<b>' + row['title'] + '</b>';
    output += row['summary'];
    output += '</p></a></dd>';
    return output;
}

The Pagination function by jQuery:

function Pagination(p,selector) {

    $(selector + " *").remove();

    if(p['start_idx'] != undefined) {
        var html = '<span class="livesearch_legend">' + p['start_idx'] + ' - ' + p['end_idx'] + ' of ' + p['total'] + ' Results</span>';
        html += '<a class="livesearch_next" href="javascript:void(0);" title="Next 5 Results"><em>Next</em></a>';
        html += '<a class="livesearch_prev" href="javascript:void(0);" title="Previous 5 Results"><em>Previous</em></a>';
        html += '<div class="clearfix">&nbsp;</div>';

        $(selector).append(html);
    }
    else {
        var html = '<span class="kbls_legend">0 Results</span>';
        html += '<a class="livesearch_next" href="javascript:void(0);" title="Next 5 Results"><em>Next</em></a>';
        html += '<a class="livesearch_prev" href="javascript:void(0);" title="Previous 5 Results"><em>Previous</em></a>';
        html += '<div class="clearfix">&nbsp;</div>';

        $(selector).append(html);
    }

    $(selector + " .livesearch_next").click(function() {
        NextPage(p);
    });
    $(selector + " .livesearch_prev").click(function() {
        PrevPage(p);
    });

}

This function just rends the html code to display pagination. The range of post and number of total post depend on data['results']. The Next and Previous button are handled by:

function NextPage(p) {
    if(p['has_next']) {
        AJAX_IS_RUNNING = false;
        CURRENT_PAGE++;
        PerformLiveSearch();
    }
}
function PrevPage(p) {
    if(p['has_prev']) {
        AJAX_IS_RUNNING = false;
        CURRENT_PAGE--;
        PerformLiveSearch();
    }
}

The link to next page and previous page is automatically increased and decreased if it has next page and previous page.
The ajax loader when ajax is running or not will be in these functions:

function ShowLoaders() {
    $('#ajaxloader').fadeIn('fast');

    if( $('#livesearch').css('display') == 'block' ) {
        var h = $('#livesearch').height() - 5;
        var w = $('#livesearch').width() - 45;
        $('#loader_div').width(w);
        $('#loader_div').height(h);
        $('#loader_div p').css('margin-top',(h/2)+20);
        $('#loader_div').fadeIn('fast');
    }
}

function HideLoaders() {
    $('#ajaxloader').fadeOut('fast');
    $('#loader_div').hide();
}

You can find where the ajax loader by searching in the search_form.php file:

.........

         <fieldset>
            <img src="<?php echo base_url(); ?>/images/ajax-loader.gif"                  id="ajaxloader"alt="Loading Results..."style="display: none;">
            <input name="query"id="search_val"value="<?php printf($search_term); ?>"                    tabindex="1"autocomplete="off"type="text">
         </fieldset>

.........

And hide the LiveSearch panel:

function HideLiveSearch() {
    $('#livesearch').slideUp();
    $('#ajaxloader').fadeOut('fast');
}

8. One more step

The default URL in our address bar when you use CodeIgniter framework is:

http://<you-codeigniter>/index.php/<your-controller-filename>

So, write in your .htaccess file with following content to re-write your URL

http://<you-codeigniter>/<your-controller-filename>

The code for URL rewrite is:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>

WOW

What’s wow? Just relax after working. Feel free to give me a comment. I’m not sure if I corrected all the whole things, but it seems work fine in my demo. Enjoy it and download the source code. Cheer!

Are you running WordPress? And how are you controlling all options of your current wordpress theme? WordPress offers you get_option() function to get the options of your wordpress. However, all of default options wordpress gives to you are not enough. You maybe want to add more options that easy to implement on your theme design. How to do that? This tutorial will help you create options and administrate them in wordpress admin page.

Theme Options

All of wordpress options are stored in the database under table wp_options, and your theme options will be so. Let’s see the structure of wp_options table, all the field, and data type of each are:

• option_id – BIGINT
• blog_id – INTEGER
• option_name – VARCHAR
• option_value – LONGTEXT
• autoload – VARCHAR

All you need are the fields in bold, because you use the function get_option() to get options with the name in option_name filed, and the option_value, of course is what you need to get.
The default using of get_option() is:

<?php echo get_option( $show ); ?>

And the code above is the same as the query below:

However, you should know the difference is the function will return FASLE if the desired option does not exist, or no value is associated with it, but the query will return null.

How do we process an option?

At first, you have to declare an option on your theme functions.php file. The simple option is fine for configuration and getting will be declared as:

// theme options $options = array(

  array(
    "name"      => "Option Title",
    "desc"      => "Option Description",
    "id"        => "Option Unique ID", //This is option_name filed in the database     "default"   => "10"), //Its default value 
);

Your theme setting page will as good as display as image below:

Hey, but before getting a result above, we have to write some code for displaying. As an example, I will make a block of an option. In my case, I want to set an option for number of Community News article will be displayed on the homepage.

Declare the option:

<?php

$options = array(

  array(    
    "name" => "<strong>Homepage Community Entries</strong>",
    "desc" => "Select the number of Community entries that should appear on the Index page",
    "id" => "aext_numcomnews",
    "default" => "10"),

);

?>

The code to display:

 <div class="stuffbox">
  <h3>Homepage Setting</h3>
  <div class="inside">
    <table class="form-table"style="width: auto">
    <?php
     foreach($options as $value) {
      switch( $value['id'] ) {
        case "aext_numcomnews": ?>
        <tr>
        <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th>
        <td>
         <input name="<?php echo $value['id']; ?>"                 id="<?php echo $value['id']; ?>"type="text"                 value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        </td>
        </tr>

      <?php break;
        }
    }
    ?>
   </table>
  </div>
 </div>

And, here is the result …

Where’s the Theme Setting Page?

We already write a lot of code for theme setting page, but we can not edit/update the option without display page. Let’s see how to add a link which link to theme setting page.
At first, you have to understand what your functions.php looks like. To make it easy, the name and the content of this functions.php are:

<?php

$options = array(

  //All your options will be declared here    
);

//This function is used for processing function themename_options() {
  global $options;

    add_theme_page('Theme Setting', 'Theme Setting', 10, 'themename-settings', 'themename_admin');
}

//All the code of displaying will be here function themename_admin() {
    global $options;

}

add_action('admin_menu', 'themename_options');

?>

The add_theme_page() function is used to add a page to a add a page to your WP admin. Here it is, this page is your theme setting page. The third parameter is included as unique URL to this page. Example with this URL below is the link to a theme setting page:

http://localhost/wp-admin/themes.php?page=themename-settings

The add_action() function is used to hook function themename_option() and create a menu item in admin menu. You cannot access your theme setting page without this function.

You know what? The menu item that link to this page can be added with two different type. The add_theme_page() above will add an item into Theme Menu. You can use this code below to add a separated menu item as another parent menu item.

Replace the add_theme_page() by add_menu_page() with the same parameters:

    add_menu_page('Theme Setting', 'Theme Setting', 10, 'themename-settings', 'themename_admin');

Take a look:

Complete the setting page code

You need more works to make your setting page run smooth. Now, we will combine all the code together. First code block that we start completing code is option array:

// theme options $options = array(

  array(    
    "name" => "<strong>Homepage Community Entries</strong>",
    "desc" => "Select the number of Community entries that should appear on the Index page",
    "id" => "aext_numcomnews",
    "default" => "10"),

  array(
   "id" => "aext_footer",
   "default" => ""),

);

In this tutorial, I just use two options to make it easy to look. We have two options above, right? But we just need to focus on the value of id of each array, because the code below will get value of id and we can identify what option we update by unique id.

<?php

.....

function themename_admin() {
    global $options;
?>
<div class="wrap">
  <h2 class="alignleft">Theme Setting</h2>
  <br clear="all" />

  <?php
    //Check if settings saved!     if( $_REQUEST['saved'] ) {
  ?>
        <div class="updated fade"><p><strong>Setting Saved</strong></p></div>
  <?php } ?>

<form method="post"id="myForm">
<div id="poststuff"class="metabox-holder">

 <div class="stuffbox">
  <h3>Homepage Setting</h3>
  <div class="inside">
    <table class="form-table"style="width: auto">
    <?php
     foreach($options as $value) {
      switch( $value['id'] ) {
        case "aext_numcomnews": ?>
        <tr>
        <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th>
        <td>
         <input name="<?php echo $value['id']; ?>"                 id="<?php echo $value['id']; ?>"type="text"                 value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        </td>
        </tr>

      <?php break;
        case "aext_footer": ?>
        <tr>
          <th scope="row">
            <strong>Footer HTML</strong>
            <br />Put some HTML code here. That's helpful if you want to add tracking code ....
          </th>
          <td>
            <textarea class="code"rows="4"cols="60"                         name="<?php echo $value['id']; ?>"                         id="<?php echo $value['id']; ?>"><?php print get_option($value['id']); ?>
            </textarea>
          </td>
        </tr>

      <?php break;
        }
    }
    ?>
   </table>
  </div>
 </div>  

</div>
<input name="theme_save"type="submit"class="button-primary"value="Save changes" />
<input type="hidden"name="action"value="theme_save" />
</form>

</div>
<?php
}

.....

?>

At the top of this block of code above, we check the value of the request saved. The text will displays to notify that setting was saved successful. The form will load default value of id: aext_numcomnews if there are no value of aext_numcomnews in database.

That is the form display. We need to process the value that the form submitted. We do it inside themename_options() function:

<?php

function themename_options() {
  global $options;

  if('theme_save'== $_REQUEST['action'] ) {

    foreach($options as $value) {
     if( !isset( $_REQUEST[ $value['id'] ] ) ) {  
        //Do nothing      } else {
        update_option( $value['id'], stripslashes($_REQUEST[ $value['id']])); }
     }

     if(stristr($_SERVER['REQUEST_URI'],'&saved=true')) {
        $location = $_SERVER['REQUEST_URI'];
     } else {
        $location = $_SERVER['REQUEST_URI'] . "&saved=true";
     }

     header("Location: $location");
     die;
  }

  add_theme_page('AEXT Theme Setting', 'AEXT Theme Setting', 10, 'aext-settings', 'aext_admin');
}

?>

That function processes the data submitted by update_option() with parameter is the value of each id was changed. After submit your changes, your all changes will be made in table wp_options in your database.

At last, remember to put the line of code here at the end of your functions.php file:

add_action('admin_menu', 'themename_options');

If you want to rest your current options to default value, simply copy and paste these code next to your current form. The reason is we can not submit two value theme_save and theme_reset at same time.

<form method="post">
    <p class="submit"style="border: 0;">
       <input name="reset"type="submit"value="Reset" />
       <input type="hidden"name="action"value="theme_reset" />
    </p>
</form>

And edit your theme_options() funtion like this:

  if('theme_save'== $_REQUEST['action'] ) {

    .....

  } else if('theme_reset' == $_REQUEST['action'] ) {

    foreach($options as $value) {
     delete_option( $value['id'] );
     $location = $_SERVER['REQUEST_URI'] . "&reset=true";
    }

    header("Location: $location");
    die;

  }

Get your options in your theme files

It’s as easy as the code at the top of this entry. Because all of your options are stored in database, we will get values for a named option from the options database table. If the desired option does not exist, return value is FASLE.

In my index.php file:

......

<?php 

    $numcomnews = get_option('aext_numcomnews');

    query_posts("category_name=Community News&showposts=$numcomnews");

    if(have_posts()) :

    //Displaying posts     
    endif;

?>

......

What’s up?

The completed code is attached in this post, you can download it for use later. However, I suggest that you follow step by step to help you get all what I want to say. This tutorial comes along with only two options, you can add more options to customize your own wordpress template. Although these code is working, maybe I am doing something wrong. Feel free to comment, I’ll really appreciate all you give to me!

In my previous post, I show you how to make up the login form likes Mac app DeskShade. Today, this entry is the next part of that post. This tutorial will help you submit that form with PHP handler. Furthermore, with some effects come along, your form will be nicer. I would like to name this post as “Learning jQuery…” in the series of jQuery Learning posts because in each post, I will focus on one or two functions of jQuery, and after reading, I’m sure you’ll be cool. If you’re new to jQuery, you should not miss!

Before start this tutorial, I would like to forward you a link to this demo. You can download this source code to see how simple it is. Default login is username: admin, password: 123456

Maybe you have not read my previous entry that’s first part of this one today. I suggest you read it first before continue because I’m not gonna talk about that again. Check this post Learning jQuery: Click Event with Locked Page likes Mac! then come back later

1. HTML & CSS code

2. Javascript

Validate the form:

I just write some code to validate the form if it’s blank. You will see the code how it simple. If you want to check more with this form, you can write yourself with same as below.

                //Validate the Username field if it's blank
                var username = $("input#username").val();
                if (username == "") {
                    $('#message').html("All the fields are required");
                    $("#message").hide().fadeIn(1500);
                    $("input#username").focus();
                    return false;
                }

                //Validate the Password field if it's blank
                var password = $("input#password").val();
                if (password == "") {
                    $('#message').html("All the fields are required");
                    $("#message").hide().fadeIn(1500);
                    $("input#password").focus();
                    return false;
                }

Post File

Let’s set the file that the form will send a simple POST request to.

            // POST handler
            var postFile    =   'bin/doLogin.php'

Submit the form

If the form is valid, then submit it to postFile. At first, I would like to talk about using POST request with jQuery. The $.post will be something likes this:

$.post(url, data, callback, type);

• url: The URL of the page to load.
• data: Key/value pairs or the return value of the .serialize() function that will be sent to the server. (Optional)
• callback: A function to be executed whenever the data is loaded successfully. (Optional)
• type: Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.(Optional)

In this tutorial, the form will get the doLogin.php page contents which has been returned in json format

      $.post(postFile, { usernamePost: username, passwordPost: password }, function(data) {
          if(data.status==true) {
              //If return data is true, it means username and password are correct
              window.location=data.url;
          } else {
              $("#message").html("Wrong Username or Password");
              $("#message").hide().fadeIn(1500);
              $("input#username").focus();
          }
      }, "json");

      return false;

At the code above, when form was submitted, if return is true, browser will transfer to a destination page. If return is false, it’ll replace the text in span id #message by error message by fadeIn effect. Finally, focus mouse on username text field.

Cancel button was handled by closing the form with fadeOut effect and display the locked icon. I want to mention this part to who has never read previous post.

            // This is example of other button
            $("input#cancel_submit").click(function(e) {
                    $("#loginform").hide();
                    $(".lock").fadeIn();
            });

Some effects that make the form cool
Add more script to add some cool effect to the form. If the form is valid and return with authorized account, login form will go up to the top and change opacity to 0. I dont how you like it but I want it delays 1 second after the form move up then set location for browser to destination. The timer plugin I’m using is jQuery Timer

      $.post(postFile, { usernamePost: username, passwordPost: password }, function(data) {
            if(data.status==true) {
              //If return data is true, it's mean username and password are correct

              //The distance in pixel that the form will move from original location
              var distance = 10;

              //The time that the form take to animate
              var time = 500;

              // This will hold our timer
              var myTimer = {};

              $("#loginform").animate({
                  marginTop: '-='+ distance +'px',
                  opacity: 0
              }, time, 'swing', function () {
                  $("#loginform").hide();
              });     

              // Set the timer for 1 seconds
              myTimer = $.timer(1000,function() {
                  window.location=data.url;
              });
          } else {
              $("#message").html("Wrong Username or Password");
              $("#message").hide().fadeIn(1500);
              $("input#username").focus();
          }
      }, "json");

      return false;

After testing on Firefox and Safari, I decide to choose “marginTop” insted of “top” attribute. Although, this form is set position as absolute, It’s better if using “top” attribute but It’s get bug on Safari when moving likes flashing. So, just make it easier with marginTop. Sorry to IE users that I still have not tested on IE. Who get it with IE please give me some information.

3. PHP

<?php

    require('config.php');
    require('account.php');

    //Create new account from Account class to verify account was submitted
    $account = new Account;

    //Clean up the form submission
    $username = (!empty($_POST['usernamePost']))?trim($_POST['usernamePost']):false;
    $password = (!empty($_POST['passwordPost']))?trim($_POST['passwordPost']):false;

    //Signin will be here
    $verify = $account->login($username,$password);

    if($verify) {
        //Login Successful
        echo "{'status': true,'url':'".TARGET."'}";
    } else {
        //Failed to login
        echo "{'status': false,}";
    }

    //Destroy
    unset($account);
?>

TARGET value was define in configuration file that will be your URL you want to send browser redirect to.

Account Class
In Account class, you will write code to select data from users table. Login function will return true or false, so set the default return first. It’s always false.

            //Set default return value is false
            $return = false;

Connect to database then select users table. All server, table value was configured in config.php file. You can easy change these value in that file.

            //Connect to the Database
            $this->db = @mysql_connect($config['server'],$config['dbuser'],$config['dbpass']);

            //Can not connect? return false
            if(!$this->db)
                return false;

            //Select Database table
            $opendb = @mysql_select_db($config['dbname'], $this->db);

            //Can not find or open table? Or something else ....Return false
            if(!$opendb)
                return false;

Because in this tutorial, I check username or email for identifying. So, SQL query will check if its has correct username or email will return true. Absolutely, password must be matched.

            $sql = "SELECT * FROM ".$config['dbtable']." WHERE ";
            $sql .= "(username='".mysql_real_escape_string($username)."'";
            $sql .= " OR useremail='".mysql_real_escape_string($username)."')";
            $sql .= " AND userpassword = '".md5($password)."'";

To check if it has valid account entered.

            //Query table
            $rs = @mysql_query($sql,$this->db);     

            //Can not query
            if(!$rs) return false;

            //If result value is number of rows
            if(mysql_num_rows($rs))
                $return = true;

Finally, return to $return value

            //Return to the value of $return aboe
            return $return;

Conclusion:

Define in your POST handler

    //Prevent dirrect file access
    define('GUARD', true);

And at the beginning of each others PHP file

if (!defined('GUARD')) {
   die('I am sorry, you can not access this file directly.');
   exit;
}

Thanks for reading and feel free to comment, share this post. Suggestions will be appreciated.