plugin_banner

Create WordPress plugin Font Awesome Icons – 2016

Do you own a WordPress theme that didn’t come pre-installed with FontAwesome or any awesome icons? Or do you just want to learn how to create a WordPress plugin? Well, either way, you’ve come to the right place! In this article, I’m going to show you a very simple way to add Font Awesome icons to your website, while at the same time you will learn how to create a very basic WordPress plugin. Font Awesome lets you add awesome icons, which they have created, to your website, by using simple HTML. I am going to be assuming you have already downloaded WordPress, and have somewhat of a website setup.

WordPress plugins are bits of software that can be uploaded to to extend and expand the functionality of your WordPress site.ithemes.com

Font Awesome “left-quote” icon was used in the blockquote above. As you can see, it can help make your website more user friendly, by allowing you to better organize your content.

Although Font Awesome can be added simply by specifying a single-line <link> in the <head> section of your tag, the purpose of this tutorial is to show you how to create a basic plugin.

Create the FontAwesome WordPress Plugin

First, there is one piece of information we need to grab regarding Font Awesome before we can create the WordPress plugin. We need to grab the location of the font awesome Cascade StyleSheet (CSS). We can either use the FontAwesome located at cdnjs or we can upload the FontAwesome CSS to our own server. For tutorial purposes, (and to simplify the process even more), let’s go ahead and just use the one available at http://cdnjs.couldfare.com:


<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Now that we have that bit of information, we can insert it into our WordPress website by creating a plugin. To use Font Awesome in WordPress, we need to provide a <link> to the Font Awesome Cascade Style Sheet (CSS) in the <head> section of our WordPress theme.

You may also have to edit the header.php file in your WordPress, and add a piece of code we can “hook” on to. I will show you how to do this as well after we create our plugin.

Open up any textpad/notepad utility that you have. I am going to be using Sublime Text 3 (which I have setup as an IDE), and if you don’t use it, I recommend using it. If you prefer another IDE, that’s up to you but I do recommend using an IDE because coding can get complex quickly, and before you know it you can get lost in a jungle that you created.

In Sublime Text, I created a folder called TS_fontAwesome and inside the folder I created a file named TS_fontAwesome.php. Feel free to call your file whatever you want. My folder structure currently looks like:

wordpress plugin folder structure

Anyhow, open the empty TS_fontAwesome.php file and add the following:


<?
/*
Plugin Name: TechSide FontAwesome plugin
Plugin URI: techsideonline.com
Description: FontAwesome plugin to add awesome icons to our wordpress theme by adding link to header using wp_head as hook
Author: TechSideOnline
Version: 1.0
*/

All this code does is define our WordPress plugin information such as Name, URI, Description, Author and Version. This is just to keep track of our plugin and provide it some metadata regarding all the plugin information. Once again, feel free to change the above data around to match your needs.

Now, we need to define a function and call it before exiting the WordPress plugin. I will be calling our function ts_addFontAwesome. This is just a function name and you can call it whatever you want, just remember what you named the function when we actually call it at the end of our plugin. Here is our function:


function ts_addFontAwesome () { ?>
<?php }

We created a function but we haven’t gave the function any instructions. To give it instructions, simply add the FontAwesome <link> code that we found at the beginning of this article. After copying & pasting the link, our entire code should look like the following:


<?
/*
Plugin Name: TechSide FontAwesome plugin
Plugin URI: techsideonline.com
Description: FontAwesome plugin to add awesome icons to our wordpress theme by adding link to header using wp_head as hook
Author: TechSideOnline
Version: 1.0
*/

function ts_addFontAwesome () { ?>
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<?php }

We’re almost done with the actual FontAwesome plugin for WordPress. Now all we have to do is use pre-defined add_action WordPress php function, which will add our FontAwesome function to the HEAD of our page using a “hook”. Then we will be able to use the awesome font icons. The function and parameters are as follows:


add_action ( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

At the bottom of our plugin php file, add the following bit of code:



add_action ( 'wp_head', 'ts_addFontAwesome', 10 );

Our entire WordPress plugin should look like this:


<?
/*
Plugin Name: TechSide FontAwesome plugin
Plugin URI: techsideonline.com
Description: FontAwesome plugin to add awesome icons to our wordpress theme by adding link to header using wp_head as hook
Author: TechSideOnline
Version: 1.0
*/
<!--FontAwesome Plugin-->
function ts_addFontAwesome () { ?>
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<?php }
<!--End FontAwesome Plugin-->
add_action ( 'wp_head', 'ts_addFontAwesome', 10 );

We’re done with the plugin. Simple right? But wait, we still have to open up our WordPress theme’s “header.php” and add the string we are going to “hook” to (in this case, 'wp_head'). To do this, you can either by using an FTP client to connect to your host (FileZilla FTP), or you can simply login to yourWebsite.com/wp-admin, and select “Appearance” -> “Editor“:

edit header wordpress plugin

Then, click on your WordPress theme’s header.php file:

header of wordpress theme
head of wordpress theme
Click “Proceed”

and insert the following code before </head> in your WordPress theme’s header.php file:


<?php wp_head(); ?>

The hook should look like the following:

hook for wordpress plugin
‘wp_head’ above closing ‘/head’ html tag

Uploading the Plugin to WordPress

So far we have completed our plugin, and added the hook to the header.php file of our WordPress theme. Now, I will show you how to upload your theme to WordPress. This can be done 2 ways, either FTP into your host with a client like FTPzilla FTP, or use wp-admin Dashboard again.

For FTP

Assuming you have your FTP login credentials from your website host, simply login and copy the entire WordPress theme folder ( TS_fontAwesome) to WordPress directory:

/public_html/wp-content/plugins/

For WordPress Admin

Click Plugins -> Add New from the administration sidebar:

Then click the Upload button up top:

Select Browse and finally, select the .ZIP file of your plugin folder:

To upload the plugin via WordPress Admin Dashboard, we have to .ZIP up the “TS_fontAwesome” folder. WordPress will only recognize your plugin if it is zipped.

.
Once your plugin is uploaded, it’s as simple as selecting “Activate Plugin” to activate it and see it in action. Now you can insert the awesome FontAwesome icons anywhere on your website. What happens in the background is, when your WordPress theme homepage loads, it will see the wp_head hook in the “head” of our page and call our TS_addFontAwesome function. The TS_addFontAwesome function then responds by providing the FontAwesome <link> tag. Congratulations, you have just created your first useful plugin. Now you can utilize FontAwesome icons on all your websites using just the plugin we created. Neat, huh?

Where to go from here

This plugin allowed us to use Font Awesome in WordPress, however you can just as easily create another plugin by following the same principle steps. With the information you learned, you can just as easily create a Google Analytics plugin, or an Infolinks plugin,or a plugin for anything else you may need to insert, using a PHP hook, into your HTML code, such as your favorite CSS/JS frameworks. If you are interested in learning more about WordPress plugins and the possibilities, I recommend further reading at WordPress Codex: Writing a Plugin.

Summary

I wrote this post just to give you a brief synopsis on how to create a highly simplified version of a WordPress plugin. It should give you an overview of how we “inject” code into our header using a hook. In the process we learned some PHP, and a little HTML. Now you can insert any of the awesome icons available at http://fontawesome.io/icons/. If you want to learn or practice some CSS, please see my Creating Flat Icons guide. It also walks you over how to use FontAwesome icons on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *