Tutorials

How to Create Google +1 WordPress Plugin

Pinterest LinkedIn Tumblr

If you are a web developer with basic PHP skills just like me than writing a WordPress plugin is not difficult for you.  All you need, PHP skills, a right direction, some resources, a little information on how WordPress expects your plugin to behave, and most importantly a great idea.

How to create a Google + Plugin for WordPress. Although there are plugins available but wouldn’t it be nice to learn how to create one from scratch? And that’s the topic of my post today — I’ll show you how to create your very own WordPress Plugin to display your Google plus feed in your post.

This tutorial ” How to Create own Google+1 WordPress  Plugin” is only for the learning purpose,  and is the clone of Easy Google +1 Plugin.

Names, Files, and Locations

Plugin Name

The plugin name must be unique, Check out Plugins directory and the other repositories it refers to, to verify that your name is unique; you might also do a Google search on your proposed name. I choose WPArena Google +1 for this plugin.

Plugin Files

The file name of PHP should be unique because  People who install your Plugin will be putting this PHP file into the WordPress Plugin directory in their installation, wp-content/plugins/, so no two Plugins they are using can have the same PHP file name.

Another option is to split your Plugin into multiple files. Your WordPress Plugin must have at least one PHP file; it could also contain JavaScript files, CSS files, image files, language files, etc. If there are multiple files, pick a unique name for a file directory and for the main PHP file, such as create a directory name “wparena-google-plusone”  and two files as easy-google-plusone.php and easy-google-plusone-admin.php

Readme File

If you want to host your Plugin on http://wordpress.org/extend/plugins/, you also need to create a readme.txt file in a standard format and include it with your Plugin. See http://wordpress.org/extend/plugins/about/readme.txt for a description of the format.

Right now we are not adding this plugin to WordPress Plugin Directory, so we are not creating the one.

Home Page

It is also very useful to create a web page to act as the home page for your WordPress Plugin. This page should describe how to install the Plugin, what it does, what versions of WordPress it is compatible with, what has changed from version to version of your Plugin, and how to use the Plugin.

File Headers


The first thing is to add some information to your main Plugin PHP file, as we would add in a file named easy-google-plusone.php file.

Standard Plugin Information

Without the header, the plugin will never be activated, so it’s very important to Plugin’s main PHP file must contain a standard Plugin information header.  As we will add the following information about our wpArena Google +1  plugin:

<?php
/*
Plugin Name: wparena Google +1
Plugin URI: https://wparena.com/
Description: Add the Google +1 Button to WordPress posts. With wparena Google +1 you can change the +1 button settings by changing the size, postion, language, alignment or count display.
Author: Nur Moustafa
Version: 1.0
Author URI: https://wparena.com/
License: GPL2
*/
?>

The most important is the Plugin Name line and the rest of the information will be used to create the table of Plugins on the Plugin management screen. The order of the lines is not important.

GPL2 is the License slug that should be a short common identifier.

Important: file must be in UTF-8 encoding.

To indicate a GPL2 license, include the following lines in your Plugin:

<?php
/*  Copyright YEAR  PLUGIN_AUTHOR_NAME  (email : PLUGIN AUTHOR EMAIL)

    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.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
?>

Programming Your Plugin


If you have created above files in a directory “wparena-google-plusone”  including with these two files “easy-google-plusone.php” and “easy-google-plusone-admin.php” and add this plugin directory in a wp-content/plugins directory, you can see this plugin in the administration panel so WordPress is aware of it. However, it doesn’t do anything as it contains nothing except the information header. We are going to change this now.

WordPress Plugin Hooks

Hooks are the backbone of WordPress. They enable plugin developers to “hook” into the WordPress workflow to change how it works without directly modifying the core code. This enables users to easily upgrade to newer versions of WordPress
without losing modifications.

WordPress has two primary types of hooks: action hooks and filter hooks.

Action Hooks: Enables you to execute a function at a certain point.

Filter Hooks: Enables you to manipulate the output passed through the hook.
Hooks aren’t just for plugins. WordPress uses hooks internally. If you browse through the core source code, you can see
many examples of how WordPress uses its own system to hook into itself. Read detail about Hooks: Professional WordPress Plugin Development.

For WPArena Google +1 Plugin, by calling the “wp-head”  function, we can execute and register a function before WordPress adds the head contents, That can be done using the “wp_head” action hook which we will use to add the Google +1 button script to the<head> tag. After this now we need to add Google+ button before or after the posts, that can be done registering a function to be executed before displaying your posts’ content using the “the_content” filter hook. So, Plugin will use the following two hooks:

  • The wp_head action hook which will add the Google +1 button script to your blog <head> tag.
  • the_content filter hook which will modify posts’ content and add the Google +1 button tag to posts.

Always try to choose a unique name so it does not conflict with other function of any other plugin. Use a prefix to your functions to make it unique.

How to add +1 Script to <head>

To execute and register an add_action function of the Action API will take two parameters, the action name and the function both as a string.

We are using the name “wpgpo_script” for wp_head registered function. The wpgpo prefix is the WordPress  Google Plus One initials.

add_action('wp_head', 'wpgpo_script');

Now write PHP function with the same name we registered for the wp_head action.

function wpgpo_script() {
//...
}

By using the PHP echo() function we can add the Google +1 button script to tag.

global $post;
$content = '</pre>
<div class="simple_google_plusone">' .
'' .
'</div>
<pre>
' . $content;

Change the language according to your own preferred language.

Override the Post Content

The add_filter WordPress function takes the two parameters the filter hook name and plugin function name,  which will register a function to filter the content of the posts.

The following code registers the wpgpo_content function to filter the_content hook and creates the wpgpo_content function which has one parameter the $content variable. The $content parameter contains post content.

add_filter('the_content', 'wpgpo_content');
function wpgpo_content($content) {
    //...
}

The following code will add the +1 button tag to your posts’ content by PHP dot concatenation and then return the new content. And will add the default settings +1 tag to the beginning of your posts. You can easily concatenate it to the end of your posts by starting first by the $content variable.

function wpgpo_content($content) {
    $content = '' . $content;

    return $content;
}

To change the settings of +1 button by using the size, count, and href attributes. The href will be next replaced by each posts’ permalink as follow.

$content = '<g:plusone size="standard" count="true" href="<your-post-permalink>"></g:plusone>' . $content;

At the end give style to Google+ button and then to add your posts’ permalink as the href attribute of the +1 button. Get the post permalink using the get_permalink() function that takes the post ID as parameter. The $post variable is one of WordPress global variables that will use to get the current post ID.

global $post;
$content = '<div class="simple_google_plusone">' .
'<g:plusone size="standard" count="true" href="' . get_permalink($post->id) . '"></g:plusone>' .
'</div>' . $content;

WPArena Google +1 plugin code downloadable .zip version.

Noor Mustafa Raza

I am a WordPress Developer and Designer, author @WPArena. I am providing Free WordPress consultation and can help you to install WordPress in a secure way to small businesses and bloggers.

Write A Comment

Pin It