How to display WordPress post content in multiple block elements without page refresh

1 comment

1. You can do it using jQuery ajax, well, follow my instructions step by step.

   1. Create a folder in your theme folder js, suppose your theme folder is twentytwelve, so it should be

   http://yourDomain.com/wp-content/themes/twentytwelve/js
   

   2. Create a file into your js folder and name it myScript.js

   3. In your functions.php file add

   add_action('wp_enqueue_scripts','my_theme_scripts_function');
   function my_theme_scripts_function() {
       wp_enqueue_script('myScriptHandler', get_stylesheet_directory_uri() . '/js/myScript.js');
       wp_localize_script( 'myScriptHandler', 'myAjax', array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ) ) );
   }
   

   4. Also add following code in your functions.php

   function do_myAjaxFunction()
   {
       $post_id = url_to_postid($_POST['post_url']);
       $post = get_post( $post_id, OBJECT);
       $response = apply_filters( 'the_content', $post->post_content );
       echo $response;
       die();
   }
   add_action( 'wp_ajax_nopriv_myAjaxHandler', 'do_myAjaxFunction' );  
   add_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' );
   

   5. Now in the myScript.js file, add following code

   $('.your_post-entry a').click(function(e){
       e.preventDefault();
       var currentUrl = $(this).attr('href');
       $.ajax({
           type : 'post',
           url : myAjax.ajaxUrl,  
           data: {
               action: 'myAjaxHandler',  
               post_url: currentUrl  
           },
           success: function(data){
               $('#ajax_post').html(data);
           }
       });
   });
   

   Put the above code inside jQuery(function($){...}); function (the ready event of jQuery). It’ done! Now you can fetch your post content using ajax.

   ---

   Explanation :

   When you’ll click any link inside the element (assume a div) with class name your_post-entry, the click event will fire (You know that) and it’ll send a post request to http://yourDomain.com/wp-admin/admin-ajax.php because myAjax.ajaxUrl contains that url and it’s (myAjax object) available to our script through wp_localize_script that we have in our functions.php. The ajax request will also send some variables to the $_POST array and those are action and post_url, the post_url contains the permalink of the post and admin-ajax.php will run our do_myAjaxFunction which will fetch the content of the post and send it back to the browser because we’ve added actions using add_action( 'wp_ajax_myAjaxHandler', 'do_myAjaxFunction' ), which tells the WordPree that whenever you get an ajax request for myAjaxHandler action, please run the do_myAjaxFunction function. The first add_action is wp_ajax_nopriv_myAjaxHandler, which is required to make the ajax request work even when user is not login in the wordpress backend, without wp_ajax_nopriv_myAjaxHandler the ajax request won’t work if the user is not logged in. Notice the line $('#ajax_post').html(data); in the success callback, it’ll insert the returned data into the element/div with an id of ajax_post, so make sure to use appropriate id and class name in the click event.

   If you don’t want to use ajax for every post then you can add/generate a class for those post links that you want to use ajax, for example, ajaxPost and in the click event you can use

   $('.your_post-entry a.ajaxPost').click(function(e){ ... });
   

   Now you know how to do it so I think you can do it using mouseenter instead of click if you need to do this way (you gave an example of mouseenter).

   Some usefull links : wp_ajax_ and how-to-use-ajax-in-wordpress

   Log in to Reply