I have a question. Hopefully, I will be able to explain what I am trying to do here.

I have created a custom post type "Feeds" and published 10 post types inside that CP.

Now, usually, I would just loop through the CP and display them on a page on page load and display them in the DOM.

PHP will normally output everything when you load the page.

What I am trying to do, I have created a page displaying all the custom post type posts.

But when I click on one post I would like to open a modal which I have created in HTML, CSS, and Javascript which works statically.

I need only ONE modal HTML output to display the specific opened post type title, content and featured image on request/click only using JS.

I don't want to load 10 HTML modal DIv's for each post type instead load them only on request when needed.

Does anyone know, or can give me a simple example of how I can accomplish this using Javascript or Ajax?

Thanks in advance.

1 Answer 1


I think you should be able to do this:


<a class="view_post_details" href="#" post_id="<?php the_ID(); ?>">View Post Details</a>


$(".view_post_detals").click(function () {

   var id_post = $(this).attr('post_id');

       type: 'POST',
       url: '<?php echo admin_url('admin-ajax.php'); ?>',
       data: {
          'post_id': id_post,
          'action': 'f711_get_post_content' //this is the name of the AJAX method called in WordPress
       }, success: function (result) {

       error: function () {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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