I am finishing and polishing LineBall’s official site built with WordPress and Ajax.

I plan to finish it before this week ends, then release the theme next week. So if you have suggestions, feedback or want more information, this is your turn.

Help me to make the ultimate WordPress Flash game theme.

Some features already developed:

* Highly customizable by setup page – no need to edit the code

* Ajax powered to browse it without reloading the header (the game itself)

* Minimal theme, a very few lines of code

Let me know what do you think about it. And don’t pay that much attention to contents… I just wrote a couple of lines just to make some tests

As for the previous example I am using the standard Kubrick theme… without any plugin installed.

Look how I load the posts under the header by clicking on their titles… even the ones with “more” tag appear complete without reloading the page:

Let’s start with header.php modifications

This is the script I added under

<?php wp_head(); ?>

That is the JQuery part

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$("h2 a").click(function(){
		var post_id = $(this).attr("rel")
		$("#your_post_here").html("loading...");
		$("#your_post_here").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/triqui-ajax/",{id:post_id});
		return false;
	});
});
</script>

I already explained the first 4 lines in the previous tutorial.

Line 5: Waiting for the user to click on an hypertext over an h2 heading. I am doing it because in Kubrick post titles are rendered this way:

<h2><a href="<?php the_permalink() ?>"....

This should change from theme to theme, but this works on Kubrick

Line 6: Retrieving the rel attribute of the link and saving it in a variable called post_id. You’ll see later in this tutorial how this attribute will contain the unique ID of the post we want to show.

Line 7: In an element with your_post_here id I am writing “loading…” because I’m starting to load the post. You’ll see later in this tutorial where to place the element

Line 8: Now thw ajax magic… in the your_post_here element this time I load the output of a page of the blog called triqui-ajax. You’ll se later in this tutorial how to create it. This will work if the permalinks of your blog aren’t the default ones. Go to Settings -> Permalinks and select Day and name

I am also passing in POST a variable called id with the content of post_id variable (the post unique id)

Line 9: I added this line to prevent the browser to jump to the link… remember? I want to load the post in the same page.

Now it’s time to make some changes to index.php

This is how I modified it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
get_header(); ?>
 
	<div id="content" class="narrowcolumn" role="main">
	<div id = "your_post_here"></div>
	<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post(); ?>
 
			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry"> 
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>
 
	<?php else : ?>
 
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>
 
	<?php endif; ?>
 
	</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

To tell the truth, I only added a line and changed a bit another one:

Line 10: This is the div that will contain the post, the one I change with jQuery (remember? lines 7 and 8 in the jQuery script)

Line 16: Here I changed the rel attribute to store the unique id of the post I want to load. I used it at line 6 in the jQuery script

And the template files do not need any other change.

Now it’s time to create a new page template with some code that will load the selected post.

In your template directory create a new php file, no matter its name… you can call it example.php and write this:

<?php
/*
Template Name: Triqui Ajax Post
*/
?>
<?php
	$post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
	<?php setup_postdata($post); ?>
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry"> 
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endif; ?>

As you can see it’s almost the same code you can find in index.php at lines 15-24… because I just want to load a post in the same way the index file does. I just removed the anchor tag in the title, because I don’t want it to be clickable. And obviously I read the id value passed by the jQuery script at line 8

The only interesting lines are lines 2-4… yes, the comment… because this way I am giving the template page the name Triqui Ajax Post.

Now in your admin area create a new page, call it Triqui Ajax (do you remember the permalink url at line 8 in the jQuery script…) and select Triqui Ajax Post as template

And that’s it… you don’t need anything else, and the blog will work as in the video.

Enjoy

The reason is simple: sometimes you may need to update the content of a WP page without reloading the entire page.

This is useful when you want the user to interact with your blog without forcing him to reload the page. Or when you want some events to happen “automatically” without user interaction.

In this video I am changing the header at every second without reloading the page.

Also notice I am doing it from the default Kubrick theme with a fresh installation… I am not using any jQuery powered theme or plugin. Let’s see how can you make it.

In this case all changes have been made in header.php file, adding nine lines after

<?php wp_head(); ?>

Here they are:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	var refresh = setInterval(function(){   	
		$("#description_span").load("<?php bloginfo('template_url'); ?>/example.php");
	},1000);
});
</script>

First, I am loading jQuery using Google as content delivery network.

Then, when the document is ready, I disable the cache to stop jQuery .load response from being cached.

Now I just execute an ajax call to example.php file at every second and print the result in the element with description_span id

This is example.php content

<?php
 
echo rand(1,10000);
 
?>

Now it’s time to locate description_span element… it’s in the header, next to the description of the blog.

<div class="description"><?php bloginfo('description'); ?> like other <span id = "description_span"></span> ones</div>

And that’s it. This time I changed the header without touching the content, next time (the aim of my experiment) I’ll change the content without touching the header, maybe because the header contains a Flash game called LineBall… (yes, I am designing a WP theme for a game official site).

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications and can be downloaded here, while script.aculo.us (scriptaculous from now on) provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly and can be downloaded here.

This tutorial is based on zen of shen’s pseudocode found at script.aculo.us Ajax Sortable Lists Tutorial.

This tutorial will show real code and a step by step guide through MySql, php and Ajax coding in order to create your sortable list.

Of course your hosting plan must allow you to use php and MySql, so refer to your hosting provider if you don’t know if your web space supports those features.

MYSQL

First we need to work on the database to create the table that will store our list. I made the simplest table ever, because it’s just an example, but you can add as many columns as you want, in order to fit the table to your needs.

My table only has three fields: the primary key id, the name of the list element color and the core column, the one where you will save the order of the elements, called, in a lack of creativity, color_order.

1
2
3
4
5

CREATE TABLE `sortable` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`color` TEXT NOT NULL ,
`color_order` INT NOT NULL 
) ENGINE = MYISAM ;

Once we have the table, let’s populate it. I am doing it directly with MySql, but again you are free to code your own application to populate it

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

INSERT INTO `sortable` ( `color` ) 
VALUES (
'Red'
), (
'Yellow'
), (
'Green'
), (
'Blue'
), (
'Black'
), (
'White'
), (
'Orange'
), (
'Purple'
)

Now the table looks like this one

and our MySql task is completed. Now, let’s write some php and html

PHP/HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php
 
$connection = mysql_connect (localhost, "your_login", "your_password");
mysql_select_db("your_db",$connection) or die("no db found");
 
$sql = "select * from sortable order by color_order asc";
$result = mysql_query($sql)or die(mysql_error());
$number = mysql_num_rows($result);
 
for($x=1;$x<=$number;$x++){
	$row = mysql_fetch_array($result);
	$list.= "			<li id=\"item_$row[id]\">$row[color]</li>\n";
}
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
		<script type="text/javascript" src="scriptaculous/src/scriptaculous.js"></script>
		<style type = "text/css">
			ul#sortlist{list-style:none;padding:0px;margin:0px}
			ul#sortlist li{padding:5px;border:1px solid #666666;margin:1px;font:normal 10px verdana;width:200px;color:#666666;background-color:#f0f0f0;cursor:move}
			#output{font:bold 10px verdana}
		</style>
	</head>
	<body>
		<ul id = "sortlist">
<?php echo $list; ?>
		</ul>
		<div id = "output">Drag to sort your favourite colors</div>
		<script type="text/javascript">
			Sortable.create('sortlist',{
				onUpdate:function(){
					new Ajax.Updater('output','sort.php',{onComplete:function(request){}, parameters:Sortable.serialize('sortlist'), evalScripts:true, asynchronous:true})
				}
			})	
		</script>
	</body>
</html>

Lines 3-4: Connecting to the database. If you don’t know your username, password or database name, ask them to your hosting provider

Lines 6-8: Query to get all the colors ordered by their color order

Lines 10-13: Building the list from the result of the query just executed

Lines 19-20: Including Prototype and scriptaculous sources. Remember to include Prototype before Scriptaculous and also remember to change the path if you placed the scripts in a different location

Lines 21-25: Giving the list a touch of style

Lines 28-30: Displaying the list

Line 31: Creation of the div element to display Ajax output

Lines 32-38: Calling the Sortable.create function to initialize the sortable list. You can find more information about Sortable.create function in the scriptaculous wiki at this link

And the php/html is over.

Now, I should made the Ajax part. But it’s already made by Prototype thanks to the Ajax.Updater object, so I just have to make the sort.php script called in the Ajax.Updater object

You can find more information about the Ajax.Updater object in the API Docs pages at this link

So it’s basically php again, but I will call this part the Ajax part

AJAX

Create a file called sort.php and write:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
 
$connection = mysql_connect ("62.149.150.49", "Sql92833", "0015025a");
$db= mysql_select_db("Sql92833_5",$connection);
 
foreach ($_POST[sortlist] as $varname => $varvalue) {
	$sql = "update sortable set color_order = ".mysql_real_escape_string($varname)." where id = ".mysql_real_escape_string($varvalue);
	$result = mysql_query($sql) or die(mysql_error());
}
 
echo "You just updated it on ".date("Y-m-d H:i:s");
 
?>

Lines 3-4: Connecting to the database, just like in the php/html part

Lines 6-9: Scanning all the sortlist array passed with POST method by the Sortable.create and the Ajax.Updater and updating the color_order column of the sortable table according to sortlist names and values

Line 11: displaying an output message.

And that’s it! Drag colors as you want, then reload the page in the iframe and the colors will be in the same position you just ordered… unless someone else changed their order while the page was reloading

That’s all… hope you will find it useful as I did.