Creating a simple WordPress advertising plugin can be fun and also challenging. In this last part of our tutorial series, we will create a widget and a shortcode that can be used inside posts and pages.
This tutorial is a part of a tutorial series “Simple WordPress Advertising Plugin“. The series consists of several tutorials which are:
- The Introduction – Create the base of the plugin, create Ads in the admin area and more
- Displaying Ads – Displaying Ads on the front page, caching them on a daily basis and more
- Tracking Ads – tracking Ad impressions and clicks, calculating CTR (click-through-rate)
- Widget and Shortcode – creating a simple widget and a shortcode to display the Ads in sidebar or content
You can download the plugin with the code from this part here: simple-wp-ads4.
Creating the Widget
For our WordPress advertising plugin, we will create a widget that will display an Ad that we choose to display in a sidebar. The Ad will be displayed randomly in the same way we are displaying the Ads on top and bottom.
Before we start coding our widget, we will have to create a new file
inc/swa-widget.php. If you want to learn more about the Widget API, you can read about it on WordPress codex. Add that file also as our dependency:
Now we can start coding our widget. In this file let’s add this:
The constructor method is used to set the ID of our widget and also the title and description that will be used in the widget area. The next part is the display method.
widget method we are creating the code for displaying the Ad. The methods
update are methods for saving options and setting options for the widget. Since we are randomly displaying the Ads, we don’t need any setting here.
We are retrieving the Ads from our main class as we do everywhere by using the method
get_ads(). In this method, we are getting the array of Ads for both positions. Once we have them, we merge them together so that we can easily choose a random Ad from both positions.
Once we got one, we are saving the impression and render the Ad in the same way we render it for both positions. The only difference we have here is that we don’t have a
class for top or bottom ads so our Ad will not have an
absolute position. It will render on the same spot we put it.
Registering the Widget
We have to register our widget. Without that action, WordPress will not be aware of it. We will do that in our public method <code>run</code>:
We are hooking a new method <code>register_widget</code> to the action <code>widgets_init</code>. This new method will reside in our main class. So go ahead and add this method:
Now that our widget has been done, we can also use a similar approach for display an Ad inside a shortcode.
Creating the Shortcode
As we did with our widget, we also have to create a new file
inc/swa-shortcode.php. Once we create that file we have to add it as a dependency in our main class:
Now our file will be loaded and we can also code our shortcode. Add this code to our new file:
As you can see, we are using the same code we have used for our widget. The only expection here is that we are not using the widget arguments
$args. Once we merge the Ads, we are randomly choosing one Ad to be displayed here. By using the same HTML, we are sure that our Ad will be displayed correctly and that AJAX will be triggered on Ad click.
Once we have coded our shortcode, we are also registering it using the function
add_shortcode. This function registers our shortcode
. Now you can use that code in your pages or posts and a random Ad will be displayed (if any).
Creating widgets and shortcode is really easy. By extending the Widget class we can create a new widget just by defining methods
update. Shortcodes are even easier.
What do you think about our simple WordPress Advertising plugin? Would you change something? Are you maybe interested in extending it? Do say in the comments below 🙂Become a Sponsor