I am looking for a solution/guidance on how I might have links of posts listed in a hierarchical manner in a left column of a template and when a link is chosen it loads a post in the right column but the whole page does not refresh?

Thanks, Deon

Update for Marfarma's help below

Thank you for the response. After reading many pages and posts I was able to get it to work. My one caveat now is that links that are in the right hand column have an href value of #. I have the home page setup for a user to choose a training path which takes them to the page discussed above. But I also have the individual links on the home page in case a user wants to jump to a specific topic. So now my issue is I can code them individually and have them go to the single post template, but I would rather a user go to the page discussed above with the correct link topic chosen from the list. Do you know how this might be accomplished? I assume first step somehow instead of having the # as the href I have to pass along the correct id/post slug as the href? Then somehow I can link to that all done through javascript? Thanks for any help. The code I used is below.

wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri( __FILE__ ) . '/js/ajax.js' );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

    global $wpdb;
    global $post;
    $querystr = "
    SELECT * FROM $wpdb->posts
    LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
    LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
    LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
    LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
    WHERE $wpdb->terms.name = 'pathologist'
    AND $wpdb->term_taxonomy.taxonomy = 'category'
    AND $wpdb->posts.post_status = 'publish'
    AND $wpdb->posts.post_type = 'post'
    AND $wpdb->postmeta.meta_key = 'order'
    ORDER BY $wpdb->postmeta.meta_value ASC
    $pageposts = $wpdb->get_results($querystr, OBJECT);

     <?php if ($pageposts): ?>
     <?php global $post; ?>
<div class="textwidget">
<ul id="nav">
<li class="list-title">Navigating your Workspace</li> 
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>   
<li class="post" id="<?php the_ID(); ?>">
  <a href="#" class="ajax-click" rel="bookmark" title="<?php the_title(); ?>">
  <?php the_title(); ?></a>
<?php endforeach; ?>

And the ajax.js for above.

 jQuery(document).ready(function() {

     jQuery(".ajax-click").click(function() {
        var post_id = $(this).parent("li").attr("id");
        var ajaxURL = MyAjax.ajaxurl;

        type: 'POST',
        url: ajaxURL,
        data: {"action": "load-content", post_id: post_id },
        success: function(response) {
        return false;

1 Answer 1


Here's how I'd approach it. Let me know in the comments if you need more detail.

1) Create a template that pulls back your initial page content -- the default right panel content and the list of links for the left panel. Ensure the links have post_id set as the value of the id attribute.

2) Write a Javascript request function to request the content for the right panel, based on the link clicked in the left panel, using an ajax call. Pass the value of the id attribute and the callback function (from step 3). Write an init function to add it to the onclick event for each left hand panel link. Add the init function to the page load event.

3) Write a Javascript callback function to replace the left panel content with the results of your request.

4) Add an ajax action filter so WordPress knows how to handle your request. You'll also need a php function that takes post id and returns the content sent back to the page. Here's the codex page on using Ajax in WordPress. Here's an important detail about using ajax filter actions when calling ajax from the front-end: https://wordpress.stackexchange.com/a/53729/4645 Put the php code into your functions.php file or add it to your site-specific plugin.

5) Put all the javascript into a file. Enqueue it in your functions.php file or site-specific plugin. (Here's a tutorial on how only load the code for a specific template.)

Here's a tutorial on loading posts through ajax, that will give you some code to get you started.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.