Question

I am creating a wordpress blog that has small boxes for each post thumbnail. When you click one, it expands and loads the post with ajax. For this functionality, I would want to load JUST what’s in the post, and not a bunch of extra html around it. However, in order to provide permanent links or the ability for people to share posts and link directly to them from Facebook or whatever, I will still need a single post template that DOES include all the extra html and page formatting.

In short, I’d like to be able to link to a single post using its permalink, and additionally I’d like to be able to bring in the stripped down version of it using a jquery .load()

Here’s what I have in my functions file:

function my_template_redirect() {
global $wp_query;
if ( 'ajax' == $wp_query->query_vars['name'] ) {
    $wp_query->is_404 = false;
    status_header( 200 );
    $args = array(
            'p' => $post->ID,
            'post_type' => $post->post_type
            );
    query_posts( $args );
    the_post();
    load_template(  TEMPLATEPATH . '/ajax-single.php' );
    die();
    }
}

add_action( 'template_redirect',  'my_template_redirect' );

So now, when I load a post using its normal permalink, like ( http://www.page.com/permalink ), it loads the normal single.php version, and when I load a post like this: ( http://www.page.com/permalink/ajax ) it shows a stripped down version using ajax-single.php as the page template. The problem is, it’s loading ALL the posts at once in the ajax version, rather than just the one in question. How do I make sure it’s only loading the one that I want?

Answer 1

I discovered the best solution in an article called Developing Sites With AJAX: Design Challenges and Common Issues

The reason this is the best solution is because when you make an ajax call to load a page fragment, it loads the entire page first and then returns the fragment. You improve this functionality by using php, which when placed in the page in the following manner, will only return the data requested by the server. The first option responds to the page being loaded by any jquery .load() function, and the second responds when the page is loaded by a browser in the typical manner.

<?php if($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest'){?>
This is content requested by AJAX.
<?php }?>

<?php if($_SERVER['HTTP_X_REQUESTED_WITH']==''){?>
This is the normal content requested in a browser
<?php }?>

Here is an example: http://icant.co.uk/articles/things-to-know-about-ajax/header-switching.html

Make sure to check out the full article to see more details on how it can be correctly applied in WordPress.