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:
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! 🙂
Become a Sponsor
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
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.
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
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 thatis_singularfor you to check it out: https://codex.wordpress.org/Function_Reference/is_singular.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?
Hi Shubham, you are correct. The code placement was wrong. I have corrected it 🙂 Thank you very much for pointing that out.
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!
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:)
Yeah.. also you just now by mistake put action and ID from your old Github.
lakotuts_show_post & lakotutsModal ID in plugin5.js
🙂
Fixed it. Thank you one more time! Seems like it is still early for me 😀
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)
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:)
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
This is an extremely helpful and informative article, Mr. Benic. Please keep up the good work and more power to you!
Hi,
Thank you for very helpful post. I have a problem with Visual Composer. When I use your plugin, modal page shows Visual Composer shortcodes. How can I fix this problem? Is it posible?
Best regards…
Hi yigit, I have not tested this code against VC since I don’t use it. It can be something wrong with the code, I can’t be sure since this is more of a proof of concept and it probably could be improved:) If I come to try the VC some day, I’ll look into trying this on it.
Hi Igor! Thanks a lot for the tutorial. It has helped me in a plugin I am developing using the Bootstrap modal. I ran into some trouble though. I have hooked the modal markup to the wp_footer just as you show, but the content is not changing in the modal itself.
Maybe there is a JavaScript error. Could you open the developer tools and check the Console tab? If you are not familiar with it, you can check how to use it here: https://developer.chrome.com/devtools (This is for Chrome).
Hi Igor, thanks for this sample,
not sure what happened with the codes of the shortcode, so I actually not sure how to implement the link.
Ony with an ID
ID of the article with some other Bootstrap 3 classes
ID of the article and additional styles
Button with a different text
Thanks
Thanks for letting me know about that. Sorry about that. You can now see how you can use the shortcode:)
How to use in a post?
I want it for wp post. When i click post detail then show post detail in modal.
It is possible?
Thanks
The shortcode will work of course. You can add the current post ID into it to get the post details. You may also modify the AJAX response sent in PHP and in JavaScript to show different post details if you need to.
Hi Igor,
Thanks a lot for tutorial, it works like a charm, however the form validation doesn’t work !
i’m redirected instead of the ajax validation…
Any idea ?
plugin5.js is throwing an error on the first line.
Parse error: syntax error, unexpected ‘)’, expecting variable (T_VARIABLE) in /Users/me/Sites/sandbox/wp-content/plugins/modalesque/modalesque.php
Thanks a lot Igor Benic, but can we extend it with comment system?