Page 1 of 1

WordPress – Quick and Easy Ad Widget (sidebar)

WordPress – Quick and Easy Ad Widget (sidebar)
   0

Wouldn’t it be nice to have a widget to place an advertisement, for example from Google Adsense, into the sidebar of your WordPress website?

After all; the layout of your sidebar(s) could be managed from the WordPress admin pages, and allows you to place ads in the sidebar where and as many times as you see fit.

There are probably plenty plugins for this, but I dislike plugins.
So here the simple code for the “functions.php” that creates your own WordPress Ad Widget.




How to Create your own WordPress Ad Widget for the Sidebar

Creating a widget, thanks to the wonderful WordPress “engine”, is really easy … once you know how … of course ….

Below the code that I use for creating a Google AdSense Widget, that can be used in Sidebar(s).
Naturally, this one is also suitable for ads from other parties, as long as you have HTML code to place the ad(s).

To create a widget, we only need to extend the standard WP_Widget class and modify some of its functions.

If you look at the minimal code I’ve used to create this widget, and if you are a little experienced in PHP, then you’ll see how easy this is.

Customizing the Ad Widget

You can easily customize the widget to your taste and needs.

Function Name and Description of the Ad Widget

You can call the function differently, if you’d like to do that, simply replace every occurrence of “t4a_google_adlinks” with whatever name you’d like to use (lines 2, 4 and 40).

The description, as seen in the admin pages can be changed by replacing the string ‘Google Ad widget‘ with whatever you’d like to write there (line 5).

Ad Widget Titles

There are 2 widget titles, and those can be found modified as well:

line 6‘T4A Google Ad’ is the title of the widget in the admin pages.
line 13 and 32‘Google Ads’ is the title of the widget in your blog/webpage.

If you want to do this to support translations, then do this by replacing these strings like so (see also WordPress Documentation):


1
__('T4A Google Ad Links', 'tweaking4all')

Where “tweaking4all” is the ‘domain’ (not to be confused with your website domain) of the translatable text parts or simply leave it out.
But that’s totally optional and only for use if you want things to be translatable.

Google Adsense HTML code for the Ad Widget

The highlighted lines (17-23) are the lines you should replace with the code you get from Google AdSense (or other party).
Keep in mind that sidebars are not very wide, and remember the limitations and rules of Google ads. A maximum of 3 regular ads, and 3 adlink blocks, per page.

Where to put the actual code for our Ad Widget

The following code has to be pasted into your theme’s “functions.php” file.
If you paste this after the first “<?php” tag, then you should not copy lines 1 and 41!

UPDATE: Updated the code to fix the “Notice: The called constructor method for WP_Widget in t4a_google_adlinks is deprecated since version 4.3.0! Use __construct() ” notification.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
class t4a_google_adlinks extends WP_Widget {
   
    function __construct() {
        $widget_ops = array('classname' => '', 'description' => 'Google Ad widget' );
        parent::__construct('google_adlinks', 'T4A Google Ad', $widget_ops);
    }
   
    function widget($args, $instance) {
        extract($args, EXTR_SKIP);

        echo $before_widget;
        echo $before_title.'Google Ads'.$after_title;

        echo '<ul>';
        ?>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-1234567890123456"
         data-ad-slot="1234567890"
         data-ad-format="link"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        <?php
        echo '</ul>';

        echo $after_widget;
    }
   
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags('Google Ads');
        return $instance;
    }
   
    function form($instance) { 
    }
}

register_widget('t4a_google_adlinks');
?>

Our “new” widget in action:

The Ad Widget shows up in the WordPress admin pages under “Appearance” – “Widgets”.

Google Ad Widget in the Admin Pages

Google Ad Widget in the Admin Pages

And as usual with these widgets, we can drag the Ad Widget, as many as we like, into our sidebars.

Google Ad Widget - Placed in a Sidebar

Google Ad Widget – Placed in a Sidebar

Right after placing this into a sidebar, they will appear on your WordPress blog or website:

Widget visible at the Tweaking4All sidebar

Widget visible at the Tweaking4All sidebar

Donation options


Donations are very much appreciated, but not required. Donations will be used for web-hosting expenses, project hardware or a motivational boost (a drink or snack). Thank you very much for those have donated already! It's truly AwEsOmE to see that folks like our articles and small applications.

Comments


There are no comments yet.
You can post your own comments by using the form below, or reply to existing comments by using the "Reply" button.



Your Comment …

Friendly request to not post large files here (like source codes, log files or config files). Please use the Forum for that purpose.

Please share:
*
*
Notify me about new comments (email).
       You can also use your RSS reader to track comments.


Tweaking4All uses the free Gravatar service for Avatar display.
Tweaking4All will never share your email address with others.