• 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.

AdSense works as follows. The Mediapartners-Google spider indexes the site, when visitor now requests one of your pages it will load the external JavaScript from the Google domain. In that JavaScript the text advertise is displayed.

So far so good. An AJAXified page will initially display the AdSense advertise very well (because the pages are backwards compatible). The visitor clicks on a link and now only a part of the page get reloaded, but not the AdSense advertise. Because it’s possible to load an JavaScript into JavaScript, but its not possible to reload JavaScript into JavaScript (for scripts that aren’t build for it).

I suspected that Google had some kind of a refresh function build in where I could specify which URL the currently displayed AJAXified site was. So when you click on an AJAXified link, the Ajax JavaScript calls a Google refresh function. (this is actually how the Google Analytics support works in the AJAX JavaScript)

I was surprised to find out that there was not such a function in the AdSense JavaScript. So I tried to find out how AJAXified sites like Google Maps and GMail works with AdSense. Well, actually, they don’t!

GMail has some uses some AJAX function to display realtime new incoming messages, but the actually displaying of mail goes thru frames and plain old loading of pages! And Google Maps actually doesn’t use AdSense at all… Well, they do, but its parsed into the page and doesn’t use external JavaScript at all, as described above.

I found one workaround by Kevin Cho who used an iframe. In that iframe the AdSense got loaded with the keywords of that page specially dedicated for AdSense for that site. You need to type these manually, which is a hell of a job if you have a lot of pages. And it’s probably against the Program Policies which are very clear about cloaking.

I decided not to implement that workaround because of the Program Policies violation. But I will publish a modified ajax.js that is compatible with AdSense but does not have the enhanced page loading.

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.

Internet Explorer handles AJAX responses different than other browsers. It will cache the response. The tendency on most articles I’ve read is: Caching is bad and you need disable caching!. No!!! Although Microsoft didn’t program Internet Explorer to respond according to RFC IE should do, that’s not an excuse to totally disable Cache. When visitors click on a link they expect something happens. Although AJAX makes the response time shrink, you don’t have any guarantee about the novelty of the content.

Sending the right headers

No, I am not talking about soccer. WordPress sends headers to prevent caching. I changed that because caching is not that bad. It’s all about sending the right headers and extending the intelligence in WordPress. The WordPress database keeps track of all date and times when the content changed. This is great, because now you can incorporate that date and time into the header. The second time the user asks for the content, the client send a If-modified-since in the request header with the date and time of the first response of the same content. If the content isn’t changed since, the response will be a HTTP 304 Not Modified (nothing more), the client will than get it out of the memory or the temporary Internet files.

Typically this saves a lot of bandwidth and latency.

Prefetching

The JavaScript on the client side tries to guess if you go to click on a link or not, just by measuring the time your mouse cursor is on the link, if it’s more than 0.2 seconds, it evaluates that chances are that you are eventually clicking on the link are big. So JavaScript starts fetching the page into memory.

In combination with the paragraph above, this gives a great performance boost. If the user doesn’t click on the link for now, it doesn’t matter because the next time the user might click on it, and on that point the JavaScript only have to collect a HTTP 304 Not Modified header (which is lesser than 300 bytes).

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…