Showing Author Information and Latest Post by author in lightbox when clicked on the name of the author

1 comment

1. You will want to implement that using AJAX. Read these two articles from the Codex for further information about integrating WordPress with some AJAX action:

   • AJAX
   • AJAX in Plugins

   Just to give you a head start, you will want something like this:

   Client-side (Javascript)

   $(element).click(function() { 
   
       var data = {
           action:    'get_author_info',
           author_id:  your-author-id
       };
   
       $.post(ajaxurl, data, function(response) {
           var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
   
               $.each( res.responses, function() { 
                   if (this.what == 'has') {                                
                       $(your-lightbox).html( this.data );    
                   } else {
                       // Some error/no result handling
                   }
               });
   
       });
   

   You will bind a click handler to your author element, pass some data: it is absolutely necessary that you pass the action part of the data. Anything else is up to you, perhaps you will want to pass an author id taking it through some jQuery.data() for example.

   Then you post to ajaxurl.

   Note If you are using this script on the admin side, since WP 2.8 ajaxurl is always defined, if not, you have to define it. In any case, you should always parse AJAX requests through admin-ajax.php.

   After getting your response, parse it and populate your lightbox HTML with the data you processed server-side.

   Server-side

   In your plugin or functions.php:

    add_action('wp_ajax_nopriv_get_author_info', 'my_get_author_info');
    add_action('wp_ajax_get_author_info', 'my_get_author_info');
   
   function my_get_author_info(){
       $response = new WP_Ajax_Response();
   
           // Insert here everything you want to do to retrieve your
           // authors data, perhaps even process already the HTML
           // in some sort of template, using output buffer, or string
           // concatenation, or whatever.
           //
           // Then you will store it into a variable that we will call
           // $output, for convenience.
   
           $success_response->add(array(
           'what' => 'has',
           'data' => $output
       ));
       }
       $success_response->send();      
     }
   

   Use add_action to bind your callback function to wp_ajax and wp_ajax_nopriv (basically the difference is that one works only if you are logged on, the other when you are not).

   Note Bind the action name you defined in your AJAX data!

   Define a callback function and, using WP_Ajax_Response you can send back to your AJAX request all the data you need.

   ---

   Basically this is all you need to get it working. Perhaps you might want to implement some nonces, or check_ajax_referer() but you will have to do a bit more reasearch at this point.

   Update

   ---

   I took a look at your function, and, out of the box, I can see a few things that smell like might cause the error. For example, in your AJAX request you POST post_id and then in your functions you check for $_POST['author_id'].

   Also, in your functions you use the_author_meta (which echoes the result) instead of get_the_author_meta (which returns it) to fill up variables.

   Instead of checking all the mistakes in those functions I have rewritten them using the advices I gave you in my original answer, and it works perfectly. Let me explain:

   Javascript

   $('#options_to_connect a').on('click', function (e){         
   
       e.preventDefault();
   
       var data = {
           action:    'ajaxified_function',
           author_id:  1
       };
   
       $.post(ajaxurl, data, function (response) {
           var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
   
           $.each( res.responses, function() { 
               if (this.what == 'has') {                                
                   $('#cboxLoadedContent').html( this.data );    
               } else {
                   console.error('Error'); 
               }
               });
       });
   });
   

   Nothing too fancy here, but a bit cleaner code than the one you used. I put the data in a nice and tidy object, I also use the ajaxurl variable instead of hardcoding the URL. As I said before, if you use your script on admin side, you will already have ajaxurl available, if not, define it via wp_localize_script using admin_url('admin-ajax.php').

   Then use WPAjax to parse the response. Be careful that in order to use that you have to enqueue wp-ajax-response in your functions.php.

   PHP

   add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
   add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
   function ajaxified_function() 
   { 
       $response = new WP_Ajax_Response();
   
       $id        = $_POST['author_id'];
       $auth_name = get_the_author_meta('display_name', $id);
       $avatar    = get_avatar($id);
       $desc      = get_the_author_meta('description', $id);
   
       $output = "<div id='bloggers_title'>$auth_name</div>n
                  <div id='bloggers_avatar'>$avatar</div>n
                  <div id='bloggers_desc'>$desc</div>";
   
   
       $response->add(array(
           'what' => 'has',
           'data' => $output
       )); 
   
       $response->send();   
   
   }
   

   Here as well nothing fancy or different from what I said in my older answer, just adapted to your case. Using WP_Ajax_Response dealing with this is a piece of cake.

   Remember to use the get_ versions of your functions! So that you have returned the data that you need.

   Also, the send() method die()s so you don’t have to do anything else to ensure a proper AJAX response.

   Log in to Reply