Simple WordPress Advertising Plugin: Widget and Shortcode

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:

1. The Introduction – Create the base of the plugin, create Ads in the admin area and more
2. Displaying Ads – Displaying Ads on the front page, caching them on a daily basis and more
3. Tracking Ads – tracking Ad impressions and clicks, calculating CTR (click-through-rate)
4. 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.

In the widget method we are creating the code for displaying the Ad. The methods form and 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 fixed or 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 our widget is registered and it can be used inside WordPress. Since we are using the same class <code>swa_ad</code> when rendering the Ad, our JavaScript code will work also on our widget. The clicks will be registered even when our visitors click on our sidebar Ads.

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).

Conclusion

Creating widgets and shortcode is really easy. By extending the Widget class we can create a new widget just by defining methods _construct, widget, form and update. Shortcodes are even easier.

By using the same classes and the same HTML we do not need to define new JavaScript functions or new CSS classes.

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