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.
Add the next code to your file:
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.
- 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.
- 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.
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
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.
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! 🙂