In this tutorial you’ll learn how to create a plugin that will add Fontawesome to your WordPress. Font awesome is a very large collection of icons for any webpage. Installing Fontawesome is easy. If you link to the CSS in the head section of your webpage, you’re ready to go. But how can we do this on WordPress?
The best solution is a permanent one. More than often you’d want icons from Fontawesome in the menus. You could add the link to Fontawesome in your childtheme. But then you’d have to add it again when you choose a new theme. We need a more permanent solution.
What we need is a plugin.
It is surprisingly easy to create a plugin for WordPress. Here is a step by step guide.
a) Create a directory for the files
First you have to create a directory for your files. The name of the directory is up to your imagination. But try to name your directory so that you know what the theme will do. In this case I choose the name:
fontawesome
b) Create some files
In the directory we need a few files. Create them in your favorite editor:
- index.php
- addFontawesome.php
c) index.php
Leave this file blank. The file is used for security reasons. If there is a blank index.php file in the directory, unwanted guests cannot see the content of the directory.
c) addFontawesome.php
This file is the actual plugin. Here we have to define the function that will add fontawesome to the <head> section of the active theme. A plugin will allways begin with a comment. WordPress will use this comment in order to display informations about the plugin in the Dashboard. Here is the comment we need:
<?php
/*
Plugin Name: add Fontawesome
Plugin URI: https://github.com/asathoor/plugins
Description: Will add the CSS for Fontawesome.
Version: 1.0
Author: Per Thykjaer Jensen
Author URI:https://multimusen.dk
Textdomain: Pers2020Child
License: GPLv3
About this version: Minor bug fix.
*/Then we need a function, that will be able to add CSS to the <head> section of the active theme. Here we will use wp_enqueue_style:
function petj_fontawesome(){
wp_enqueue_style(
'petj-fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css',
array(),
'6.0.0');
}wp_enqueue_style will add some informations about the CSS. In this case the ‘petj-fontawesome’ is the name we give the stylesheet in the system. The long URL
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css
Is the link to a Fontawesome CDN. If you click on the link you’ll see the styles that will be loaded.
array() will add the data as an array.
The numbers ‘6.0.0’ is the version of the script. If you add your own scripts you can give it any suitable number.
The file must end with an add_action. Such an action will execute the function above – and then the CSS will be part of the <head> section in WordPress.
Here is the add_action:
add_action('wp_enqueue_scripts', 'petj_fontawesome' );The add_action has two parts:
- wp_enqueue_scripts is a function that will add styles og scripts to WordPress.
- petj_fontawesome is the function we created before. So the functions is invoked and executed. Then the CSS will be part of your WordPress.
d) Prepare your plugin for installation
WordPress can install plugins via zip-files. Compress the directory with the files. Most operative systems have a compress option when you right-click the directory. Then a file called fontawesome.zip is created.
e) Install the plugin
Now go to the Dashboard in WordPress. In Plugins select add plugin. Choose the Upload File option. Follow the instructions on the screen, and remember to activate your new plugin.
f) Use Fontawesome
Now you can use Fontawesome. The icons are added via HTML, like this:
<i class="fa fa-car" style="font-size:60px;color:red;"></i>If you add code along these lines to a custom HTML block in the WordPress editor – or Elementor, the result will be this:
In the menus you can add the Fontawsome icons in the description. Now you can use the icons from Fontawesome in any theme.
Leave a Reply