Show WordPress Post in a Modal

Show a WordPress Post in a Modal

Did you ever want to show an article inside another article with a modal? Maybe something like a short introduction or a related article? In this tutorial we will create a new WordPress plugin that will create a modal window and show an article by clicking on a button inside another article.

1. Base of the plugin

Before we begin into creating the functionality we need to prepare our plugin. Firs, we will create a new folder inside the wp-content/plugin. You may call it as you want.

After that, create a file inside that folder with the same name but with the extension .php. Put this code inside that file:

Save the file and go to the WordPress administration and under the menu Plugins activate the newly added plugin. Now the plugin is active and we can start entering code:)

2. Add Bootstrap 3

We will use Bootstrap 3 to show the modal. In case your theme does not use Bootstrap 3, we can easily add some styling using the default Bootstrap 3 style or another Bootstrap 3 themed style.

For the sake of simplicity we will use the default Bootstrap 3 from a CDN. Better solution for this would be to use only the parts that are needed for the modal to work because in tha way we would not bloat our WordPress theme with additional CSS and JavaScript that is not being used. If your WordPress theme is using both Bootstrap 3 css and js files that this part of our tutorial can be skipped.

Add the next code to your file:

By using functions enqueue_style and enqueue_script we have called Bootstrap 3 CSS and JavaScript files from the CDN which was made possible by MaxCDN.

3. Bootstrap 3 Modal

If we want to use the Bootstrap 3 Modal we need to add that modal into our page. The HTML needed for the Modal will be added on the bottom of the page where he function wp_footer is being invoked. We will use the WordPress filter wp_footer. So let’s add this code in our plugin file:

We have defined a regular function that only holds the HTML code for the Bootstrap 3 Modal and then we have added it in the WordPress filter wp_footer.

4. Shortcode to display the button

In this plugin, we will create a small shortcode that will show a button in the articles. This shortcode will create a hyperlink that will have Bootstrap 3 classes and also additional attributes that can be used to change the appearance of he button.

At the moment, this hyperlink does not do any functionality and it will not show anything until we also define the JavaScript function added at the end of the shortcode. This is what is happening now:

  • We pass attributes into the function
  • We are defining default attributes that will be overwritten by passed attributes
  • after that we are defining a ajax_nonce that will be checked in the backend of the AJAX call to validate the source of he request.
  • Then the JavaScript function is defined (We will define it next)
  • The last thing is the hyperlink with all that attributes

We have registered this shortcode under the name ibenic_post but you can name it as you want it. Just be sure to replace other parts of the code where ibenic_post will be used.

5. Javascript function

In the above code example we have defined a JavaScript function without its code. Now you can replace that with this code:

In this function we are passing the parameter ID that is the ID of our article. Then we are creating an AJAX call with the jQuery. In this AJAX call we are passing the next parameters:

  • url – URL address on which we are creating the AJAX request. When working with WordPress, that URL would be something like your-page.com/wp-admin/wp-ajax.php. Since we do not know on which websites this plugin will be used, we are defining the URL dinamically with the function admin_url.
  • data – all data that we are sending. Now on the server side we can access all that data with the global variable $_GET.

If the AJAX call was a success and if we got the requested information, we will insert that content in the Modal parts such as the modal title and body. If the AJAX was a success but we did not get any article information (maybe because we provided an ID which is not an article) we will alert the user with the same Modal but with a different message. We are reading the JSON response and by validating it we can show an error message or the article content.

6. Getting the Post content

Now that we have the shortcode that calls the JavaScript function with the AJAX call, we need to define a function that will send the JSON response. So, let’s add this code:

At the beginning we are adding our function to WordPress actions. They work like this:
add_action( ‘wp_ajax_our_action_name, ‘server_function’);.
Since we are passing the action name ibenic_show_post then we need to add our server function to our actions. One action also has the word nopriv and that means that our function will also be performed even if the user is not logged in.

We are then checking our security that we have passed in the AJAX call. After that we are getting the ID from the AJAX call and then we use the WordPress function get_post for getting the content of a post with the provided ID. If there is no article with the provided ID, the variable $post will be null. If the content is found, we are creating an array with the title and the content and then we are sending it as a JSON response. However, if there is no article found, we are also sending a JSON object but this time with an error response.

At the end we are also calling the wp_die() so that the AJAX request and reponse will end after our function is finished processing.

7. Shortcode in widgets

By default, shortcodes cannot be processed in widgets. But by adding this code we will enable that also:

8. Shortcode Usage

Here are some examples how our newly added shortcode can be used:

Ony with an ID

[ibenic_post id=3692]

ID of the article with some other Bootstrap 3 classes

[ibenic_post id=3692 class="btn btn-warning"]

ID of the article and additional styles

[ibenic_post id=3692 style="margin:0 auto;width:100%"]

Button with a different text

[ibenic_post id=3692 text="Click to show the article"]

You can use this shortcode even with every attribute we have defined in he shortcode function.
You also need to know that he content we are showing is not passed through the WordPress filter the_content so any other shortcode or similar will not be shown as the regular output of that shortcode.

Conclusion

By using this modal we can easily show any content. If we wanted to extend the functionality of this plugin we could add different post types, attachments and any other content. We could also create a regular WordPress Widget to show the modal button inside the sidebar or any other area where we can put widgets.

Have you ever created something similar or needed something like that? Let us know about your experience using Bootstrap, Modal or any pop-up related story in the comments below! 🙂

About the Author Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

follow me on:

Leave a Comment:

14 comments
rosanna says January 4, 2017

Hi Igor!
I’d like ask two question:
1) Are These codes in an unique file?
2) Does it work for a page with visual composer?
Thanks a lot!
Rosanna

Reply
    Igor Benic says January 4, 2017

    Hi Rosanna,

    the codes are not in a unique file, although you are free to copy & paste them in your own file or even maybe in your functions.php. This is only a showcase on how you can show a post in a modal and if your theme or another plugin already uses the Boostrap 3 CSS & JS, you don’t need to enqueue them.

    Since this code provides you with a shortcode, the Visual Composer should be able to parse it and display the button that will trigger the modal.

    Reply
      rosanna says January 4, 2017

      Thanks Igor!
      I must open a page in modal window.
      I will create a php page and I past all your code.
      Then I will active this plugin (befor I will create a folder in wp-content/plugin with a name) and then I will create a shortocode (this shortcode is not into a page but in a custom type).

      Do you think it’s correct?
      Thank you so much

      Reply
        Igor Benic says January 4, 2017

        Hi Rosanna, that should work 🙂
        I also want to point out that the styles and scripts from this tutorial will be then loaded on each page. If you will use this on a particular page, you can always wrap the enqueue codes in an if statement such as if( is_singular('your_custom_post_type') ) { HERE GOES THE ENQUEUE_Script/Style functions } or something similar. With that if statement you would enqueue those scripts only on single pages of the entries of your custom post type. Here is the link to that is_singular for you to check it out: https://codex.wordpress.org/Function_Reference/is_singular.

        Reply
Shubham Rajdhar says March 7, 2017

Hi Igor,

Thanks for the tutorial! I wanted to know if I am doing something wrong, or the point number 5 is missing a code file?

Reply
    Igor Benic says March 7, 2017

    Hi Shubham, you are correct. The code placement was wrong. I have corrected it 🙂 Thank you very much for pointing that out.

    Reply
      Shubham Rajdhar says March 7, 2017

      Hi Igor,

      While you must have been writing your comment, I just figured out that the codes were placed wrong by mistake. 😀
      Feels good to understand all those snippets when tutors like you are working hard to spread the knowledge. 🙂

      Thanks a lot!

      Reply
        Igor Benic says March 7, 2017

        Thank you Shubham! I am really glad you like the content I am writing. Yes, the code was misplaced a bit and the last code was not there:)

        Reply
          Shubham Rajdhar says March 7, 2017

          Yeah.. also you just now by mistake put action and ID from your old Github.

          lakotuts_show_post & lakotutsModal ID in plugin5.js

          🙂

          Reply
          Igor Benic says March 7, 2017

          Fixed it. Thank you one more time! Seems like it is still early for me 😀

          Reply
          Shubham Rajdhar says March 7, 2017

          Haha. I can totally understand.
          Btw sorry for commenting again and again, I am trying this on a archive. I have placed buttons under each post and what I am trying to do is that under each post title in that archive, clicking on that button will show it’s contents in a modal, with your method. But seems like something is going wrong.
          So I was wondering if this is compatible with working on archives?
          If we could have chat somewhere, would have been great! (if its not too much to ask)

          Reply
          Igor Benic says March 7, 2017

          Can you check the console log what it says? You can contact me through my contact page and write what error messages you get so that I can then come back and answer you when I can:)

          Reply
          Shubham Rajdhar says March 7, 2017

          Hey, Thanks a lot! It works. I have sent you details of what went wrong via contact page (since it was too long to post in comments). 🙂
          Thanks a bunch

          Reply
Reggie Gulle says March 16, 2017

This is an extremely helpful and informative article, Mr. Benic. Please keep up the good work and more power to you!

Reply
Add Your Reply

Show a WordPress Post in a Modal

by Igor Benic time to read: 5 min
14