Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm working on a new blog which display in a list, on sidebar, some categories and the posts of them. In the index page, in main content, I list some post titles from other category "New".

What I need is: when i click on one post link on sidebar to display in main content the post content via ajax or JQuery.

share|improve this question
    
Your question is difficult to follow. Are you trying to load a post using AJAX? –  Brian Fegter Feb 3 '12 at 9:30
add comment

3 Answers 3

up vote 2 down vote accepted

You will need to create a WordPress function that loads the post content and hook that into wp_ajax_nopriv. You will also need the jQuery ajax functions to send the $_POST data to your WordPress function via ajax and output the returned content in your empty div where you want it to display.

A simple approach would be to use the post ID in the class or id div tag so you can easily pull it out with jQuery.

Example using the sidebar code from Steven's answer:

 echo '<ul id="sidebar-ajax">';
  foreach($sidebar_posts as $post):
    echo '<li id="' .get_the_ID(). '">';
    echo '<a class="ajax-click" href="#">.'get_the_title().'</a>';
    the_title('<h3>','</h3>');
    echo '</li>';
  endforeach;
  echo '</ul>';

Example jQuery (this should be in a separate file and enqueued using wp_enqueue_script so the the ajax url can be defined as a javascript namespace variable using wp_localize_script:

Enqueue the script and set the ajax url variable:

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

Contents of the ajax.js file:

    jQuery(document).ready(function($) {

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

            $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {"action": "load-content", post_id: post_id },
            success: function(response) {
                $("#empty_div_in_content").html(response);
                $("#loading-animation").hide();
            return false;
        }
    });    
   });
)};

*Note: Add a loading animation graphic where the post will eventually display and and give it a div id of "loading-animation" and set it to display: none.

WordPress function to return the post content to the ajax call:

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
    function my_load_ajax_content () {
        $post_id = $_POST[ 'post_id' ];

        $post = get_post( $post_id, OBJECT);
        $response = apply_filters( 'the_content', $post->post_content );

        echo $response;
        die(1);
    }
share|improve this answer
add comment

Just use something like this:

if (is_home) {
 // This retrieves 5 psots with the category "some-category"
 $sidebar_posts = get_posts("category=some-category&orderby=date&numberposts=5");
} else {
 $sidebar_posts = get_posts("category=some-other-category&orderby=date&numberposts=5");
}

Then in your sidebar section, use something like this:

  echo '<ul>';
  foreach($sidebar_posts as $post):
    echo '<li>';
    echo '<a href="'.get_the_permalink().'">.'get_the_title().'</a>';
    the_title('<h3>','</h3>');
    echo '</li>';
  endforeach;
  echo '</ul>';

I think that is what you are looking for?

share|improve this answer
    
Thank you Steven fot the answer, but is not what I need. I heve already displayed in sidebar the categoryes and post of them. What I need is: when i click on one post link on sidebar to display in main content the post content via ajax or JQuery –  Sebastian Aug 21 '11 at 11:33
add comment

This answer is one of the best to explain the loading of post when selected from the side bar category and when the post is clicked on the post shows up but the posts can be target for either register/logged in or no-registered/public like:

add_action('wp_ajax_load-content', 'my_load_ajax_content'); // for users logged-in
add_action('wp_ajax_nopriv_load-content', 'my_load_ajax_content');//for users that are not logged in.

I got a problem when i was using this but later figure this out by reading other WordPress ajax works.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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