How to load post content on index page using ajax when post title in sidebar is clicked

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.

posts jquery ajax
Bertram Jaskolski

Answers 3

Submit Answer
  • Dawson Lowe

    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);
    }
  • Hollis Harber

    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?

  •
    Dr. Jean Jacobs

    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.

Related Questions