in WordPress

How To Create A Google Plus Badge Wordpress Widget

``` ```
[Google+](https://plus.google.com/110725720433094046987) is now the third biggest social network behind [Facebook](https://www.facebook.com/paulundcouk "Facebook Paulund") and [Twitter](https://twitter.com/#!/paulund_ "Paulund"), this means more and more people are starting to use the network more. If you are using **Google+** then you want to addvertise that you are on **Google+**. Google have already thought of this and created a page where you can easily create your own Google plus badge. [Create Your Google Plus Badge](https://developers.google.com/+/plugins/badge/config) With this tool you can create 3 types of badges the icon, the small badge and the large badge. ### Google Badge Icon
[![](https://ssl.gstatic.com/images/icons/gplus-32.png)](https://plus.google.com/110725720433094046987?prsrc=3)
### Google Small Badge
### Google Large Badge
``` ```
But if you choose the icon you have further options of small, medium and large sized icons. If you choose large or small badge you then have further choices of width and theme. With all these different options you could be making a couple of changes before it suits the theme of the blog. For this reason we are going to create this same tool in Wordpress as a Wordpress Widget, having this as a Widget mean that we can quickly edit the badge to suit our theme. ## Wordpress Widgets Before we start coding the Widget we need to understand what a Wordpress Widget is and how we can use the [Wordpress Widget API](http://codex.wordpress.org/Widgets_API "Wordpress Widget API") to easily create a **Wordpress Widgets**. A Wordpress widget is a piece of PHP Code which will run inside a **Wordpress sidebar**. A **Wordpress sidebar** is a registered area in your theme where you can add **Wordpress Widgets**. Wordpress Widgets can easily be added to sidebars by going to the Widget page in the Dashboard and navigate to **Appearance -> Widgets**. From this Widget page you are able to drag and drop widgets into a sidebar of your choice. The widget should have some sort of Admin form so you can edit the data shown by the widget. ## Wordpress WP\_Widget To create a **Wordpress widget** all you need to do is inherit from the standard **WP\_Widget** class and use some of it's functions. There are 3 main functions that need to be used for the widget to work these functions are **form(), widget() and update()**. The **WP\_Widget** class is located in **wp-includes/widgets.php**. ## Wordpress Starter Widget Below is the boilerplate of a [Wordpress widget](http://codex.wordpress.org/Widgets_API "Wordpress Widget"), when you create a new widget just copy and paste the below code as a starting point for your Widget. ``` /** * Adds Foo_Widget widget. */ class Foo_Widget extends WP_Widget { /** * Register widget with WordPress. */ public function __construct() { parent::__construct( 'foo_widget', // Base ID 'Foo_Widget', // Name array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args ); } /** * Front-end display of widget. * * @see WP_Widget::widget() * * @param array $args Widget arguments. * @param array $instance Saved values from database. */ public function widget( $args, $instance ) { extract( $args ); $title = apply_filters( 'widget_title', $instance['title'] ); echo $before_widget; if ( ! empty( $title ) ) echo $before_title . $title . $after_title; ?>Hello, World!<?php echo $after_widget; } /** * Sanitize widget form values as they are saved. * * @see WP_Widget::update() * * @param array $new_instance Values just sent to be saved. * @param array $old_instance Previously saved values from database. * * @return array Updated safe values to be saved. */ public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = strip_tags( $new_instance['title'] ); return $instance; } /** * Back-end widget form. * * @see WP_Widget::form() * * @param array $instance Previously saved values from database. */ public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'text_domain' ); } ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> </p> <?php } } // class Foo_Widget ``` ## Creating Google Badge Widget Now we understand how to create a Wordpress widget we can look into what we want this Wordpress widget to do. We want it to duplicate the same functionality you can get from the Google plus badge page. [Create Your Google Plus Badge](https://developers.google.com/+/plugins/badge/config) To achieve this we want the widget to have six options. - **Widget Title** - **Google Profile ID** - **Badge Width** - **Badge Type** - **Google Theme** - **Profile Type** The combination of the above setting will allow us to create a Google Badge to achieve exactly what we want. The benefit of having this as a Wordpress widget is that you can easily add it to any Sidebar on your theme. You will easily be able change the badge when it's on your theme. To create the different badges we need to use the Google plus html tag with the following attributes. - **Href** - The URL of the Google profile - **Rel** - The type of profile publisher or author - **Width** - The badge width - **Height** - The badge height - **Theme** - The Google theme ligt or dark ``` ``` ### Defining The Plugin First we need to start off by defining the Wordpress plugin, this is done by adding the following comments to the top of your php file. ``` /* * Plugin Name: Paulund Google Badge Widget * Plugin URI: http://www.paulund.co.uk * Description: A widget that allows you to display Your Google Plus badge * Version: 1.0 * Author: Paul Underwood * Author URI: http://www.paulund.co.uk * License: GPL2 Copyright 2012 Paul Underwood This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. */ ``` ### Registering The Widget When the plugin is activated on your Wordpress plugin it will run the rest of the PHP code in your plugin, we are going to create a widget. For Wordpress to use the widget you need to register it so Wordpress understands that this plugin is only going to be used for a Widget. To register the Wordpress widget use the following code. ``` /** * Register the Widget */ add_action( 'widgets_init', create_function( '', 'register_widget("pu_google_badge_widget");' ) ); /** * Create the widget class and extend from the WP_Widget */ class pu_google_badge_widget extends WP_Widget { } ``` ### Google Widget Constructor Below is the Google badge Widget constructor this will run when the widget is registered we need to define the widget base ID, name of the widget and the description of the Widget. ``` /** * Register widget with WordPress. */ public function __construct() { parent::__construct( 'pu_google_badge_widget', // Base ID 'Google Plus Badge Widget', // Name array( 'classname' => 'pu_google_badge_widget', 'description' => __('A widget that allows you to display your Google Plus badge.', 'framework') ) ); } // end constructor ``` ### Widget Function The widget function is used to display the **Google badge** within the Wordpress sidebar, from this widget we get the values of the data stored in the database and create the **Google badge** from this data. You will notice in this function we add an action to the footer of Wordpress, on this action we will run the function add\_js(). The add\_js function will echo the required javascript to display a **Google badge**, in this Javascript we need display the Google profile ID and the profile type. When we display the **Google badge** we need to know which type of badge to display, so we use the variable google\_badge\_type to decide if we display the **Google icon or Google badge**. ``` /** * Front-end display of widget. * * @see WP_Widget::widget() * * @param array $args Widget arguments. * @param array $instance Saved values from database. */ public function widget( $args, $instance ) { extract( $args ); /* Our variables from the widget settings. */ $this->google_title = apply_filters('widget_title', $instance['title'] ); $this->google_profile_id = $instance['profile_id']; $this->google_width = $instance['width']; $this->google_badge_type = $instance['badge_type']; $this->google_theme = $instance['theme']; $this->google_profile_type = $instance['profile_type']; add_action('wp_footer', array(&$this,'add_js')); /* Before widget (defined by themes). */ echo $before_widget; /* Display the widget title if one was input (before and after defined by themes). */ if ( $this->google_title ) echo $before_title . $this->google_title . $after_title; /* Display Google Badge */ if($this->google_badge_type == "Icon"){ ?> " theme="google_theme; ?>"> google_profile_id.'" rel="'.$this->google_profile_type.'" />'; } ``` ### Update Function The update function is used to update the **Wordpress database** when the widget admin form is submitted. This is where you will need to place any validation needed on the values from the form. This takes 2 parameters an array of values sent to be saved and an array of values which are currently stored. The return of this function will be the new values stored in the database. As for all the inputs we need to strip the tags we can just loop through the entire array and strip tags on the value to place in the new instance of the array. ``` /** * Sanitize widget form values as they are saved. * * @see WP_Widget::update() * * @param array $new_instance Values just sent to be saved. * @param array $old_instance Previously saved values from database. * * @return array Updated safe values to be saved. */ function update( $new_instance, $old_instance ) { $instance = $old_instance; // Strip tags to remove HTML (important for text inputs) foreach($new_instance as $k => $v){ $instance[$k] = strip_tags($v); } return $instance; } ``` ### Form Function ![Google_badge_widget](http://www.paulund.co.uk/uploads/2012/04/Google_badge_widget.png "Google_badge_widget") The form function is used to create the form on the widget dashboard. This will need to be pre-populated with the current values in the database and make it easy for the user to change the values to change the widget behaviour. ``` /** * Create the form for the Widget admin * * @see WP_Widget::form() * * @param array $instance Previously saved values from database. */ function form( $instance ) { /* Set up some default widget settings. */ $defaults = array( 'title' => $this->google_title, 'profile_id' => $this->google_profile_id, 'width' => $this->google_width, 'badge_type' => $this->google_badge_type, 'theme' => $this->google_theme, 'profile_type' => $this->google_profile_type ); $instance = wp_parse_args( (array) $instance, $defaults ); ?>

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email