Project Ajaxifying posts

Lets assume you've got a client (relax, this is the last hypothetical client!) who's an "open source media designer" and would like a very clean and sparse home page. So sparse, they'd like only a list of the titles of the top, most current posts from two specific categories to appear. (In an ideal world, a decision like this would ensure their site's awesome design could sink in on the user before bombarding them with content.)

They'd of course like it to be slick. When you click on the title for a post, it loads in through AJAX, nice n' smooth. There's no reloading over to a single content page.

To get started on this request, we'll have to reference what we understand of the Template Hierarchy and custom loops. We'll create a home.php template page that will become the default home page which only displays the five most recent posts for the "WordPress Design" and "Inkscape Illustration" categories. Sounds straightforward enough, so let's get started.

First create a new custom template page called home.php and insert your #content div markup as well as the theme's header and footer (and anything else you want).

<div id="content" role="main"> </div><!--//content--> <?php get_footer(); ?>

Next, inside our #content div, we'll place in our custom loops which load up the "WordPress Themes" and "Inkscape Illustration" categories. We know that the categories IDs are 5 and 6 so our custom "mini loops" look like this:

<div style="float:left; width: 380px;"> <h2>What's new in WordPress Themes:</h2>

<?php global $post; $wpposts = get_posts('numberposts=5&category=6l);

foreach($wpposts as $post):

setup_postdata($post);?> <li><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></li> <?php endforeach; ?> </ul> </div>

<div style="float:right; width: 380px;"> <h2>Inkscape: Draw freely covers it all</h2> <ul>

<?php global $post; $inkposts = get_posts('numberposts=5&category=7l);

foreach($inkposts as $post): setup_postdata($post);?> <li><a href="<?php the_permalink() ?>"> <?php the_title(); ?></a></li> <?php endforeach; ?> </ul> </div>

<div style="clear:both;">&nbsp;</div>

The custom loops will result in a page that appears like this:

WordPress and jQuery

Just another WordPress site

Just another WordPress site

What's new in WordPress Themes:

Inkscape: Draw freely covers it all i Clearvume - Clearly a WordPress Theme i Gravipectic - World's Heaviest WordPress Theme i Slurpysation - A Rainbow filled WordPress theme i How To Name a WordPress Theme lays: A Vector Illustration

Better than Sliced Bread 1A Vector Tutorial Tiger - A vector Illustration

WordPress arid jQuery

'/! h'oudly powered by WordPress.

Because we set up our loops to display the title inside an href link to the single page layout, if we check what we've got so far in WordPress, we'll see the post titles, and if we click on them, we'll be taken to the full post page, as seen in the next screenshot:

Belief than Siloed Bread! A Vector Tutorial

Recent Posts

Dog Dai's: A Vector Illustration

Belief than Siloed Bread! A Vector Tutorial

Dog Days: A Vector Illustration

Posted an August 8.2010 by admin Click here to Aiaxlt!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. lit enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit _anim t H est la horn m._

That's what we want. If the user doesn't have JavaScript enabled for whatever reason, the site will still work and give them the info they want. This is always the point we want to start from when working with jQuery: basic, working HTML and CSS. The goal is always to enhance, and not exclude, people who don't use one of the latest browsers for various reasons, or have one of the cool JavaScript enabled, smartphones.

At this point we're going to leverage a technique that we got a little taste of in Chapter 6 with the PDF download enhancement. We're going to "hijack" the link to the post (this technique is often called "hijax") and use the URL to our advantage in the jQuery .load command.

First up, we'll need something to load the content into, so in our custom-jquery.js file, we'll .append a new div to the bottom of the #content div.

jQuery('.home #content,).append(,<div class="displayPost"></div>');

Recent Posts

Dog Dai's: A Vector Illustration

Better than Sliced Bread! A Vector Tutorial

Tiger — A vector Illustration

Clearvume - Clearly a WordPress Theme

Gravipeelie - World's Heaviest WordPress Theme

Recent Comments

Now, as we saw in our previous examples, we certainly don't want everything from the opening body tag to the closing to load in! We really only want the .post div. So let's set up our .load function and narrow down what loads in as follows:

jQuery('#content li a').click(function(event){

//This keeps the href from reloading the page event.preventDefault();

//grab the page link var page = jQuery(this).attr('href');

jQuery('.displayPost')

//use the grabbed link in the load function .load(page+" .post")

.fadeOut()//fade out the previous content .slideDown(2000);//slide in the new content

Can you believe how simple that is? Any link that's clicked on will fade out the content that's loaded and slide in the new content! We now have a super slick effect that uses AJAX super simply, on our home page.

Authority Blog Success

Authority Blog Success

Blogs With an Authoritative Voice Attract a Loyal Audience. There are Lots of Rambling Blogs on the Web Today, but Blogging as an Authority on a Particular Subject is the Best Strategy for Generating a Perpetual Income. Blogging as an Expert on Your Subject is the Key to Blogging Success.

Get My Free Ebook


Post a comment