• FEATURE: Better visitor experience when clicking on a link/search or commenting. Especially when the server or the connection is slow. It is configurable in the WP Admin Panel. Thanks to Vijayendra Mohanty for suggesting it
• FEATURE: You can now disable the Left-Sidebar to have a bigger main column. Thanks to Becky Lai for the idea that is showed on www.sockparade.com

• FEATURE: About text and link is configurable in WordPress Admin Panel
• ENHANCEMENT: The number of Recent Posts in the Slide Ticker is now configurable.
• ENHANCEMENT: The post tags are now also in the post itself.
• ENHANCEMENT: Code for the WP Ajax Connector Framework is now in it own files.. It also has its own Admin Panel page.
• ENHANCEMENT: The comment submit button is immediately disabled when your clicked on it, so double clicks because the visitor is inpatient can not occur.
• ENHANCEMENT: History (back and forward navigation) in Internet Explorer finally works! It was really a pain to get the workaround working right with a minimum amount of coding…
• BUGFIX: An error message can be displayed if something went wrong with the comment submitting.
  Merged the commenting code of WordPress 2.2 which should be backwards compatible.
• BUGFIX: Double title in Categories when not using widgets. Thanks to Martin Böttinger for reporting it. I failed to notice it
• BUGFIX: Image preloading didn’t really loaded all images on a very fast visitor pc.
• BUGFIX: Anchors should now be working right (not getting a 404 page not found anymore)
• VISUAL: Changed the bullet.gif so It won’t contain a dot inside… Didn’t really like it

Sorry, no notes on 1.3 to 1.3a I was too busy fixing bugs and lost track of all the changes committed

Upgrade note:
If you are updating from 1.2, please note that some files have been renamed! Also, if you enabled the Slide Ticker on your site, please go to the WP Admin Panel -> Presentation -> AjaxBerlee Options and change the value of the Slide Ticker to a number, for example 15.
You also might want to change the about text since it is now controlled in the WP Admin Panel

Download AjaxBerlee 1.3a

• FEATURE: Configurable options in WordPress Admin Panel!
• SUPPORT: WordPress Widget support
• ENHANCEMENT: Made the TextSlider code much nicer. And works much better now.

• ENHANCEMENT: Replaced WordPress functions for the theme that where deprecated in WordPress 2.1 and no longer supported. This means there no WordPress 2.0 support anymore in this theme!
• ENHANCEMENT: When one of the membership options under General Option (in WordPress Panel) is set an Login/Logout Register/Site Admin will appear on the left sidebar. (when not using widgets)
• ENHANCEMENT: When a blog is accessible with more than one URL, it will all be redirected to the blog URL defined in WP-admin since the Ajax functions must obey the Same Origin Policy: http://www.mozilla.org/projects/security/components/same-origin.html
• BUGFIX: Fixed timing issue only occourred with Internet Explorer with a # link… Because it executed the javascript faster than the page could load… This would bring up an Navigation cancelled dialog box.
• BUGFIX: Some characters in the title with accent or circumflexes or just a plane ‘ quote would be displayed as HTML character entities. (for example " & < >)
• BUGFIX: Images with a space in the URL are not preloaded.
• BUGFIX: An URL to an external page containing your blog url as a parameter are treated like an internal page. Resulting in a 404 Page not found.

Installation

It’s pretty straight forward, just put the whole directory AjaxBerlee (and content in it of course) to the wp-content/themes. After that, goto Presentation -> Current Theme Options and select the options you like.

Big Tip
Use WordPress Widgets! You can download it from http://automattic.com/code/widgets after that copy the widgets from the plugins/widgets to the widgets directory on the webserver and active them.This allows you to use all components in the sidebar that currently statically exists, to use them very dynamically!

A minimal, simple, crisp, clear and light 3 column design. This plugin independent theme highlights the excerpt of the latest article on the home page.

AjaxBerlee is based on the Brajeshwar theme, but it’s much faster and it comes with interesting AJAX features such as Instant Comment, Instant Search, Page and Image preloading and an article slider.

Changes

• Loads of little code enhancements in the WP Ajax Connector Framework to make it more robust and better compatible with Firefox
• Preloading of images when a visitor hover over an article link that contains images
• Navigation on the front page (older articles)
• Merged some of the code of Brajeshwar 7.2.2
• Added support for some plug-ins… See TIPS in ReadMe.txt

Compatibility
AjaxBerlee Theme and the WP Ajax Connector Framework are compatible with WordPress:

• WordPress 2.0.x
• WordPress 2.1.x (tested up to 2.1.3)
• WordPress-MU (tested up to 1.2.1)

Tested on browsers:

• Internet Explorer 6 & 7
• Firefox 2.0.0.3
• Opera 9.20

Please the latest version!

Common Problem!
It’s very important that you fill in the right WordPress and Blog address in the WordPress Admin Panel under options:

While this sounds a bit obvious, when your site is www.berlee.nl please double check this value in the Admin Panel to see if it really says http://www.berlee.nl and not http://berlee.nl because that results in a unbrowseable website

Because of security issues Ajax request works only from the url that is configured in the WordPress Admin Panel.

With proud I present to you ….. my theme. I finally decided it’s works good enough to be used by others. My theme is based on brajeshwar with some small visual adjustments. The biggest changes are under the hood:

• Instant Search (Gives you results when you type!)
• Instant Comment (Page does not reloaded when you submit your comment)
• Advanced Ajax page loading see My improved website response with Ajax and Solved latency problems with Ajax

All driven by my own build very light weighted framework which I will release hopefully later this week separately with a howto to adapt it to your own WordPress theme.

I released the theme and framework under GPL.
Please the latest version!
Please read the readme.txt before putting it on your site.
AjaxBerlee depends on a modified pagesnav version of Adi Sieker which you can download here

Note: for everyone whole I going to change things in the theme: Please go to line 26 of ajax.php and put // before ClientCache();

This will prevent the browser of displaying and old cached version of the theme (the content of WordPress is in any case up to date!)

TIP: Google Analytics support is build in. Take a look at footer.php:
Remove on line 7 <!— and —>
Remove on line 11 & 13 /* and */
And fill your UA number from Google analytics on line 12.

I really start wondering how to improve the response time after I concluded that it would be allot of work to convert this theme to a lightpress theme (I had to make a lot of plugins to get it to work).

So I started to think about other possibilities. The nice thing about lightpress was, it would only query the data in the database that was actually needed. So I tried to make an intelligent PHP frontend that only parses parts of the page that needs to change when you switch from page to page and gives it, wrapped in XML (because more than one part of the site need to change) to the JavaScript on the Client. The JavaScript on the client then parses the XML response and renders it in the DIVs on the website.

Needles to say, it saves a lot of bandwidth. My average page size did go from 15kb to 5kb (uncompressed, with ZLib compression, often not more than 1kb!). This has a lot of advantages, because it uses less processing and parsing time on the server and less download and render time on the client, and it looks nicer towards the user because the page doesn’t get refreshed. I The only overhead is the 4kb JavaScript, which is nothing compared to some other ajax JavaScript libraries.

Backwards compatible

Backwards compatibility was a key requirement for me. Since Google, MSN search, yahoo and other search spider bots don’t understand the the first thing about JavaScript or cookies. And, of course, the security nutheads (people that read security bulletins and don’t mitigate) that disables JavaScript because they think they are safer off. Ok I am going off topic, but think of it for a second. You are much, much, much better off (security and compatibility wise) by running Firefox of Opera as a limited user (right-click on the shortcut, run as), instead of disabling JavaScript in Internet Explorer!

JavaScript is responsible for turning the normal A HREF links to an ajax request in the background. This way it’s fully backwards compatible… Even if JavaScript works and even if the ajax request fails, It will switch to the old A HREF link.

When you start typing stuff into the searchbox, in the background the server is going to execute the php script that search every tie you type a letter. So in order to get results fast, you need a very sleek script that is doing just only that as optimal as possible.

Ajaxsearch works independently from wordpress includes and functions (which are great if you just load the page once ). So I started to integrate the instant search into my brajeshwar theme. As I wanted to see the text in the message aswell, and dropdown box below the search field was simply not an option. I didn’t want an autocomplete function, I wanted an instant search function! So now it pushes articles away if it needs space for the search results. Which is actually not so difficult at all if you know a bit of CSS markup…. because the ajaxsearch javascript uses innerhtml to drop the results in an div. which is practical because now I could drop

<div id="instantsearch"></div>

where-ever I want.

Then i dropped this in the CSS:

#instantsearch div {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
background: #FFFFEE;
}
#instantsearch ul li {
background: none;
line-height: 15px;
padding: 0 15px;
font-size: 0.85em;
}
#instantsearch ul{
margin: 0;
}
#instantsearch h3 {
padding: 0px 15px;
margin-top: 0px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#instantsearch h3 {
padding: 20px 15px 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#col-right input {
width: 185px;
}

Then I dropped the following html code inside a text widget, but if you don’t have the widget you can also put it inside the left or right sidebar

<script type="text/javascript" src="/ajaxsearch.js" mce_src="/ajaxsearch.js"></script><form action="javascript:return false;" onsubmit="return false;"><div><input type="text" name="searchnicoberleenl1" value="Type to search instantly..."
onfocus="this.value = '';" onblur="this.value = 'Type to search instantly...';"
onkeyup="SendQuery(this.value)"/></div></form><br />

Please make sure you change the searchnicoberleenl1 to something else. I had to use a name that is unique, I can’t set autocomplete=”off” because it’s not valid xhtml 1.0.

You can download the modified ajaxsearch.php and ajaxsearch.js from here. Put them in the root of your site.

So I start with ajaxsearch.js. I didn’t change much. The code does a good job, I only cleaned it up (tabs instead of spaces, for file download purpose) and removed the unnecessarily UnHideDiv() and HideDiv()

As you can see I changed a lot of things in ajaxsearch.php. First of all, the original version contains serious flaws:

• It does not take the post status in account, this means, that drafts and private posts are just as searchable as published posts
• html code in the post will be also on the search result, which could rune your complete blog layout
• The like query was not very sql server friendly when you have a big blog.

The MySQL (like some other SQL servers) has a Full-Text-Search feature, which is a really great database search feature which almost gives you a functionality google inside your database. In a big blog you need such a feature because every keystroke must turn up a search result very fast.

The modified ajaxsearch.php uses the Full-Text-search feature and if this feature turns up with 0 results, it’s going to fallback on the old LIKE query. That’s because Full-Text-Search has a downside. In the MySQL implimentation it does not work on some known english stopwords and it’s start searching when 4 characters are given is set as default setting. In Boolean mode the sql server can give some results below 4 characters, but it’s not perfect.

Furthermore, you need to execute on sql query to enable the Full-Text-Search on that fields:

CREATE FULLTEXT INDEX full_index ON `wp_posts`(
`post_title`,
`post_content`);

In a 404 template you could use something like this:

<script type="text/javascript">
<!--
SendQuery('<?php echo trim(str_replace('/', ' ', str_replace('-', ' ', $_SERVER['REQUEST_URI']))); ?>');
//-->
</script>

Be sure to put this after the sidebar where the javascript file ajaxsearch.js is loaded

I have no intension in releasing a real plugin. If you want to pack this in a real plugin, be my guest… (if you have permission of blewtooth)… anyway… If you in want to use something in this article, please do so… but it would be nice if you thank me in a comment in the code…