Build a WordPress plugin: Awesome Post Footer Part 1

As we all know WordPress is a superb CMS that powers a lot of affiliate websites. It’s free, quick to setup and simple to use. And it also has tons of widgets and plugins to enable you to customise your site as required.

So today I am going to show you just how simple it is to create your own custom plugins.

It’s really easy and once you understand the basics can prove to be an extremely useful addition to any affiliates skill set.

And whats more – you don’t have to be a technical genius to get started.

So what are we building?

Sharing and liking content is absolutely crucial now. Having your content shared and syndicated not only increases traffic; it also increase your sites authority within search engines and helps build your reputation as a credible source of information.

Sometimes those share buttons can get a little lost; so i decided to build a prominent call to action to sit below every single post (inspired by the guys over at Nettuts)

Here is what the final result will look like (you can also see the plugin at the foot of this post):

Basically it is a call to action that will sit below every post and prompt your site visitors to subscribe to your RSS feed, follow you on twitter, share the article on Twitter, Google+ and / or Facebook or email the article to their friends.

Pretty simple. Nothing ground groundbreaking but pretty effective.

So lets build it.

Getting started

Firstly what is a WordPress plugin? It’s a small file (or files) that can be ‘installed’ via the wordpress admin area to give added functionality or change the look and feel of your website.

They can be simple (like this one) or extremely complex.

The one we are building today consists of just one file. Yes that’s right. One.

Usually a plugin would consist of a minimum of two files (the program itself and a readme.txt) but as this is an example only and not intended to be distributed via the WordPress plugin site I have omitted the readme.txt for simplicity.

So let’s go ahead and create our plugin files.

Create a new folder on your desktop and call it “AffiliateTuts_CTA_Footer” (You could call it anything; this is just an example)

Now open any text editor (notepad will do) and create a new blank file within this folder called “AffiliateTuts_CTA_Footer.php” (make sure you save the file type as “All Files”)

(Note how the php file has the same name as the folder).

Your file structure should look like this:

 

Now in the empty php file add this code:

<?php
/*
Plugin Name: AffiliateTuts Call To Action Footer
Plugin URI: http://www.affiliatetuts.com/
Description: A simple plugin to add a call to action below posts
Version: 1.0
Author: Robi Buckley
Author URI: http://www.affiliatetuts.com
License: GPL
*/
?>

 

The above comment block is effectively all we need to make our plugin “work” (although granted if we stopped here it wouldn’t do much).

It simply tells WordPress what to display within the plugins section of your admin area. Save the file and if you have an FTP client (such as Filezilla) upload the AffiliateTuts_CTA_Footer folder into:

• wordpress > wp-content > plugins

Now go take a look in your plugins page within WordPress (WordPress Admin > Plugins) and hey presto, you should see your new plugin listed waiting to be activated.

Notice how the plugin Title, Description, Version, Author and plugin site URL have all been set by the relevant attributes we just created in our php file?

Go ahead. Change the author to be your own name, save and re-upload the plugin folder before refreshing your plugin page within WordPress. Pretty cool huh?

Ok – so that’s all well and good and our plugin appears to be “working” but at the moment it doesn’t do much. So let’s crack on….

Making it work

In order to make our plugin do something we need to create a function and then “hook” into one of WordPress’s built in functions.

That sounds pretty daunting but it’s actually quite simple.

A function is a little program that can be executed by WordPress. When it is run we will tell WordPress to get the post content and then append our call to action to it.

So let’s do that.

In the php file we created earlier add this code after the comment block we added (make sure you add it before the closing ?> php tag):

function affiliatetuts_CTA_footer($content) {

}

 

Your file should now look like this:

<?php
/*
Plugin Name: AffiliateTuts Call To Action Footer
Plugin URI: http://www.affiliatetuts.com/
Description: A simple plugin to add a call to action below posts
Version: 1.0
Author: Robi Buckley
Author URI: http://www.affiliatetuts.com
License: GPL
*/

function affiliatetuts_CTA_footer($content) {

}

?>

 

This is a simple function called affiliatetuts_CTA_footer (you can call it anything) that will accept a variable called $content.

Now we need to tell WordPress to run this function and to do this we need to hook into one of WordPress’s built in functions called add_filter

add_filter simply hooks a function to a specific filter action.

In WordPress’s own words:

Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen

If none of that makes any sense don’t worry. You don’t need to know how or why add_filter works. All you need to know is that we can use it to trigger our function above.

And we can do that by adding this simple line beneath the function we just created:

add_filter('the_content', 'affiliatetuts_CTA_footer');

 

So our php file should now look like this:

<?php
/*
Plugin Name: AffiliateTuts Call To Action Footer
Plugin URI: http://www.affiliatetuts.com/
Description: A simple plugin to add a call to action below posts
Version: 1.0
Author: Robi Buckley
Author URI: http://www.affiliatetuts.com
License: GPL
*/

function affiliatetuts_CTA_footer($content) {

}
add_filter('the_content', 'affiliatetuts_CTA_footer');

?>

 

This is basically adding a filter that says get the_content (the content of your post) and pass it to the function affiliatetuts_CTA_footer (which we have just created)

Simple.

Now we need to manipulate the content of our post and add our nice call to action to the bottom of it.

So let’s modify our affiliatetuts_CTA_footer function and add the following:

function affiliatetuts_CTA_footer($content) {

	$content .= ' <strong>This is a test</strong>';

	return $content;
}

 

Your php file should now look like this:

<?php
/*
Plugin Name: AffiliateTuts Call To Action Footer
Plugin URI: http://www.affiliatetuts.com/
Description: A simple plugin to add a call to action below posts
Version: 1.0
Author: Robi Buckley
Author URI: http://www.affiliatetuts.com
License: GPL
*/

function affiliatetuts_CTA_footer($content) {

	$content .= ' <strong>This is a test</strong>';

	return $content;
}
add_filter('the_content', 'affiliatetuts_CTA_footer');

?>

 

So what’s going on here?

Well – as I said earlier we are now calling our custom method and passing it the content of our post in the $content variable. Inside our function we are then appending some text (This is a test) to that content before returning it.

We are basically applying a filter to the content before it is sent to the browser.

Save the php file and re-upload the plugin to your WordPress plugin directory before activating it as you would any normal plugin (WordPress Admin > Plugins)

Now go and view your website. You should see the text “This is a test” in bold appended to the end of all your posts. Like this:

Fantastic. Everything is working fine.

But obviously we don’t want “This is a test” appended to each post, we want some html, our RSS and Twitter links and a twitter, google+ and facebook button.

So deactivate the plugin as you would any other and let’s do that.

Change the function so it looks like this:

function affiliatetuts_CTA_footer($content) {

	$Title = "Found this post useful?";
	$RSS_Feed_URL = "http://feeds.feedburner.com/affiliatetuts_";
	$Twitter_URL = "http://www.twitter.com/affiliatetuts";

	if(!is_feed() && !is_home()) {

		$content .= '<div style="border: 1px solid #DDDDDD;padding:20px; background-color:#f8f8f8; margin-top:40px;margin-bottom: 20px;">';
		$content .= '<h3 style="font-size:24px; margin-bottom:20px">'.$Title.'</h3>';
		$content .= '<p style="line-height:18px">Subscribe to our <a href="'.$RSS_Feed_URL.'">RSS feed</a>, follow us on <a target="_blank" href="'.$Twitter_URL.'">Twitter</a> or help us grow by sharing our content using the buttons below</p>';
		$content .= '<div style="width:100%; margin-top:20px; margin-bottom:10px; height:20px">';
		$content .= '<div style="float:left; height:24px; margin-bottom:5px; margin-right:10px">';
		$content .= '<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>';
		$content .= '</div>';
		$content .= '<div style="float:left; margin-bottom:7px; margin-right:10px">';
		$content .= '<g:plusone size="medium"></g:plusone>';
		$content .= '</div>';
		$content .= '<div style="float:left; height:24px">';
		$content .= '<div class="fb-like" data-send="true" data-layout="button_count" data-width="120" data-show-faces="false"></div>';
		$content .= '</div>';
		$content .= '<div style="float:left; height:24px">';
		$content .= '<a href="mailto:?subject='.get_the_title().'&body='.urlencode(get_permalink()).'" target="_blank" style="border: 1px solid #CCCCCC;border-radius: 3px 3px 3px 3px;color: #3B5998;font-family: verdana,arial;font-size: 8pt;padding: 3px;">Email To Friend</a>';
		$content .= '</div>';
		$content .= '</div>';

		$content .= '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
		$content .= '<div id="fb-root"></div>';
		$content .= '<script>(function(d, s, id) {';
		$content .= 'var js, fjs = d.getElementsByTagName(s)[0];';
		$content .= 'if (d.getElementById(id)) return;';
		$content .= 'js = d.createElement(s); js.id = id;';
		$content .= 'js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";';
		$content .= 'fjs.parentNode.insertBefore(js, fjs);';
		$content .= '}(document, "script", "facebook-jssdk"));</script>';

		$content .='<script type="text/javascript">';
		$content .= '(function() {';
		$content .= 'var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;';
		$content .= 'po.src = "https://apis.google.com/js/plusone.js";';
		$content .='var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);';
		$content .= '})();';
		$content .= '</script>';
		$content .= '</div>';

	}
	return $content;
}

Now that may look pretty daunting but take a closer look. Really it’s nothing more than three php variables ($Title, $RRS_Feed_URL and $Twitter_URL) and the HTML and javascript includes to create our share block.

This is appended to the $content variable that holds our content (the same way the test was earlier) and returned to the browser.

Easy.

Go ahead. Change the $Title, $RSS_Feed_URL and $Twitter_URL parameters to whatever your require them to be and save.

Now re-upload and reactive the plugin. BINGO!

You just built a fully functional (if somewhat simple) WordPress plugin.

Feel fee to play around and modify the code as you wish to fit the look and feel of YOUR website.

(NOTE: By zipping the AffiliateTuts_CTA_Footer folder you can import the plugin via the admin area of your WordPress install as you would any other)

For your reference here is what the final plugin php file should look like:

<?php
/*
Plugin Name: AffiliateTuts Call To Action Footer
Plugin URI: http://www.affiliatetuts.com/
Description: A simple plugin to add a call to action below posts
Version: 1.0
Author: Robi Buckley
Author URI: http://www.affiliatetuts.com
License: GPL
*/

function affiliatetuts_CTA_footer($content) {

	$Title = "Found this post useful?";
	$RSS_Feed_URL = "http://feeds.feedburner.com/affiliatetuts_";
	$Twitter_URL = "http://www.twitter.com/affiliatetuts";

	if(!is_feed() && !is_home()) {

		$content .= '<div style="border: 1px solid #DDDDDD;padding:20px; background-color:#f8f8f8; margin-top:40px;margin-bottom: 20px;">';
		$content .= '<h3 style="font-size:24px; margin-bottom:20px">'.$Title.'</h3>';
		$content .= '<p style="line-height:18px">Subscribe to our <a href="'.$RSS_Feed_URL.'">RSS feed</a>, follow us on <a target="_blank" href="'.$Twitter_URL.'">Twitter</a> or help us grow by sharing our content using the buttons below</p>';
		$content .= '<div style="width:100%; margin-top:20px; margin-bottom:10px; height:20px">';
		$content .= '<div style="float:left; height:24px; margin-bottom:5px; margin-right:10px">';
		$content .= '<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>';
		$content .= '</div>';
		$content .= '<div style="float:left; margin-bottom:7px; margin-right:10px">';
		$content .= '<g:plusone size="medium"></g:plusone>';
		$content .= '</div>';
		$content .= '<div style="float:left; height:24px">';
		$content .= '<div class="fb-like" data-send="true" data-layout="button_count" data-width="120" data-show-faces="false"></div>';
		$content .= '</div>';
		$content .= '<div style="float:left; height:24px">';
		$content .= '<a href="mailto:?subject='.get_the_title().'&body='.urlencode(get_permalink()).'" target="_blank" style="border: 1px solid #CCCCCC;border-radius: 3px 3px 3px 3px;color: #3B5998;font-family: verdana,arial;font-size: 8pt;padding: 3px;">Email To Friend</a>';
		$content .= '</div>';
		$content .= '</div>';

		$content .= '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
		$content .= '<div id="fb-root"></div>';
		$content .= '<script>(function(d, s, id) {';
		$content .= 'var js, fjs = d.getElementsByTagName(s)[0];';
		$content .= 'if (d.getElementById(id)) return;';
		$content .= 'js = d.createElement(s); js.id = id;';
		$content .= 'js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";';
		$content .= 'fjs.parentNode.insertBefore(js, fjs);';
		$content .= '}(document, "script", "facebook-jssdk"));</script>';

		$content .='<script type="text/javascript">';
		$content .= '(function() {';
		$content .= 'var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;';
		$content .= 'po.src = "https://apis.google.com/js/plusone.js";';
		$content .='var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);';
		$content .= '})();';
		$content .= '</script>';
		$content .= '</div>';

	}
	return $content;
}

add_filter('the_content', 'affiliatetuts_CTA_footer');

?>

Important

There are a couple of things I should mention before wrapping things up:

• When building plugins it is REALLY important to give all your files and functions unique names to ensure they don’t conflict with any other plugins or widgets that may already exist. That’s why I prepended my file and functions with my sites name – affiliatetuts.
• Also when you are playing round and developing plugins it is strongly suggested you do it on a fresh install of WordPress set up locally on your machine (using WAMP or something similar).
• It is certainly not advisable to develop on your live website so please don’t do it (or if you do and break it don’t come crying to me lol).

And finally…

I would just like to give a little credit to Eric Nagel whose blog post Email A Friend WordPress Function gave me the idea to add the “email a friend” button to this plugin : )

So is that it then?

Well not quite – the plugin works fine as it is but it isn’t ideal.

Having to modify the php files themselves in order to change parameters (such as title, RSS feed etc) or the look and feel of a plugin is never a good idea (and not very user friendly).

So in PART 2 of this tutorial I will show you how to take this plugin to the next level by adding a section within your WordPress admin area to manage it (as you would any other plugin).

So be sure to bookmark this site and check back for the next installment of this tutorial.

Hope you guys had fun putting this plugin together and if you have any thoughts or question please feel free to comment below.