How To: Add a Features Area with Icon Boxes to your WordPress Site
Icon boxes are very popular on WordPress powered website at the moments and they make a great addition to any homepage. Unfortunately if your theme doesn’t give you the tools to build one, you might be feeling like it’s time to upgrade your theme. However this can often be a time consuming and costly project, depending on the amount of work involved.
Thankfully you can add this design element to your site without changing your current theme. Icon boxes are great for homepages and listing a few of your key unique selling points or highlighting your sites main areas of content. By following this guide you can now add them to your site with relative ease.
Install your Plugins of Choice
There are many plugins out there that allow you to easily divide your posts and pages into grids or columns, just as there are plenty of options for quickly inserting icons into your content.
For this guide I’ve chosen the free Grid Columns plugin as it is a popular choice that allows you to quickly divide a section of a post or page into columns by using shortcodes. As this is a free plugin, it’s available from the WordPress.org repository and you can install it directly from your site by going to Plugins > Add New and searching for grid columns .
To make it very easy to add icons to your site, using a plugin is also recommended. My preferred plugin for this is the free WordPress Icons – SVG plugin which again can be installed directly from your site.
However, if you’ve got your own personal preferences for adding grid layouts to your posts and working with icons then feel free to use those. If you want a premium option or are already using the powerful Visual Composer plugin, there is an extension available for it built especially for creating this type of page element called Icon Box for Visual Composer, which can be yours for just $10.
Creating the Columns
The first step in building an icon box page element is to create the grid layout or columns, used for dividing the icons and their descriptive text.
In this example we will be using the functionality of the Grid Columns plugin to create a three column layout for displaying three icons on your page in a horizontal line.
To create the columns, paste these shortcodes into your post (either Visual or Text view will work):
[column grid="3" span="1"]Column One[/column]
[column grid=”3″ span=”1″]Column Two[/column]
[column grid=”3″ span=”1″]Column Three[/column]
If you preview your page, you will now see the filler text divided across three columns. If you wanted to create a layout with a different number of columns, simply change the number after grid, and then increase or decrease the number of instances of the shortcode to match up. For example a two column layout would look this this:
[column grid=”2″ span=”1″]Column One[/column]
[column grid=”2″ span=”1″]Column Two[/column]
While a four column layout would look like this:
[column grid=”4″ span=”1″]Column One[/column]
[column grid=”4″ span=”1″]Column Two[/column]
[column grid=”4″ span=”1″]Column Three[/column]
[column grid=”4″ span=”1″]Column Four[/column]
And so on…
Once you’ve added the shortcodes for the grid layout, it’s time to insert the icons.
Inserting the Icons
The best way to get access to a massive amount of icons for free is to install a plugin. A good option is the WordPress Icons – SVG plugin which gives you access to over 500 vector web font icons. These icons will all resize or scaled without any loss in quality and the colours can be easily changed just as you would with a regular font.
Once you’ve installed this plugin, or any similar one, you can easily add icons to your posts and pages in WordPress. To do so with the SVG plugin, simply go to the plugin page on your site, which can be found under the left sidebar admin menu entitled ‘SVG Icons Free’.
From here you can browse the available icons and then click on the one you want to use. Once you click on an icon, the insertion code will be created for you. Copy the code and then make sure you switch to the Text tab in the post editor before pasting the code into your post or page to display the icon.
If you want to change the size of the icon, you can add the following to the code you copied:
<span data-icon=”” style=”font-size:200%;”></span>
To change the colour, add an inline color style to the icon div:
<span data-icon=”” style=”color:green;”></span>
To change both the size and colour, use:
<span data-icon=”” style=”font-size:200%; color:green;”></span>
The biggest problem with this approach is that when you switch from the Text to the Visual view, all this icon code will be removed. This is just the way WordPress works and unless you are prepared to install another plugin, then you will have to stay in Text view forever for this particular post or page.
Putting it Together
Once you’ve created your columns and then added your icons, your code should look something like this:
[column grid=”3″ span=”1″]<span data-icon=”” style=”color:green; font-size:1000%;”></span>[/column]
[column grid=”3″ span=”1″]<span data-icon=”” style=”color:red; font-size:1000%;”></span>[/column]
[column grid=”3″ span=”1″]<span data-icon=”” style=”color:blue; font-size:1000%;”></span>[/column]
While the above will get you started and give you a basic template for building your icon box page element, you will probably want to format it further to better meet your needs. My adding your own text and formatting to the above example you can create your own icon box for use on your homepage or elsewhere on your site, without the need to change to a theme that includes them as part of their design.
[column grid=”3″ span=”1″]<span data-icon=”” style=”color:green; font-size:1000%;”></span>
<span style=”color:green; font-size:120%;”>Join our Club</span>
<a href=”http://#”>Sign up</a> to get free timely emails from us.
[column grid=”3″ span=”1″]<span data-icon=”” style=”color:red; font-size:1000%;”></span>
<span style=”color:red; font-size:120%; text-align=center;”>Get Writing Tips</span>
We provide great writing tips to your inbox every Monday to help you improve your writing skills and abilities. Tips cover prose, grammar and punctuation.
[column grid=”3″ span=”1″]<span data-icon=”” style=”color:blue; font-size:1000%;”></span>
<span style=”color:blue; font-size:120%; text-align=center;”>Earn Money</span>
Use our guidance and tips to help you earn money and increase your freelance rates, all for free.
Icon boxes have become very popular in the last year or so and are a great way to add attractive and responsive eye catching elements to your WordPress posts and pages. If your chosen theme doesn’t include the ability to create them, by following this guide and installing a couple of free plugins you can now add them to your site without changing themes.
If you want a more powerful and perhaps elegant way of building icon boxes, feel free to check out these premium plugins: