PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add WordPress Feature Boxes with Custom Icons

How to Add WordPress Feature Boxes with Custom Icons

The feature box is one of the most popular components for many WordPress sites. Generally, it is showcased on the homepage to introduce some important points of your content, products or services. Also, many business sites display this part in the “About Us” page to tell something about their teams, departments and groups. Frankly speaking, it has been proved as the most engaging technique to present the critical information for your new readers.

Due to the popularity and great function of this component, there are many WordPress themes have the built-in tool that allows you to add the special boxes. However, if your theme does not have this advanced feature, you can check the below steps concerning about how to add WordPress feature boxes with custom icons.

What is the WordPress Feature Boxes

To give you the better understanding of this special component, we have showcased a sample that helps you know how it looks at your webpage. Each box has different information and call to actions. Even, to distinguish them from each other, they all have their exclusive custom icons.

WordPress Feature Boxes

The main reason as why we recommend you to add the feature boxes is that they can present your critical selling points effectively. After all, when people visit your site, most of them do not actually read your main page, but only scan it. In this case, these boxes can showcase your important content in the most engaging and easy-to-scan format.

How to Add WordPress Feature Boxes

To add WordPress feature boxes without changing the overall design of your webpages, the easiest way is to use the WordPress plugins. Here, we highly recommend you to try the WP Columns plugin to create the feature boxes, along with the SVG Icons plugin to generate the custom icons.

Step 1 – Create the WordPress Feature Boxes

To begin with, you should install the WP Columns plugin in your WordPress admin. Then, you can find the Advanced WP Columns button from the Settings tab. Here, you simply need to click it to decide some default settings of this plugin and the columns themes of your feature boxes.

Advanced WP Columns Settings

  • Decide the width of box container with the maximum value.
  • Determine the default number of boxes on each row by deciding the initial structures of Two Columns, Three Columns and Four Columns. But personally, we suggest you choose the Empty option so as to decide the boxes manually later.
  • Enable the responsive layout so that the boxes can be presented by the percentage of the screen sizes. If you disable this option, the plugin mode will be set to the fixed option automatically, and your boxes will be showcased in the pre-determined pixels.
  • Determine the resolution breaking point. The default setting is 1024. This means if the screen width is less than 1024, each column will be showcased in a new row.
  • Determine the percentage of how much space a box will occupy in the row to achieve the best visual result.

Besides these basic settings, you can also decide the classes for Container, Column and Gutter. Here, we highly recommend you to enter the value of “mycolumns” into the Column section.

Now, you can enter the page that you are going to add the feature boxes, and then, click the Advanced WP Columns icon via the Visual Editor.

Advanced WP Columns Icon

In the next pop-up screen, you can drag and drop the buttons to add or delete the boxes, as well as resizing them to fully fit your webpage design. If you do not want to do this manually, you can also click the green bar to add the boxes based on your preferred columns.

Add Columns

Now, you can start editing each box with some concise descriptions. Here, you can feel free to decide the format and color of the text. If needed, you can also add links and insert images. Upon the finish of box editing, you now can click the Add Columns button.

Edit Boxes

Step 2 – Add the Custom Icons for Each Box

Now, your feature boxes only have the plain textual contents, so the next step is to add the custom icon for each of them. To achieve this, you need to use the SVG Icons plugin.

After installing it on your dashboard, you can find a newly added tab that is named as WP SVG Icons. Simply click it and press the Settings button.

WP SVG Icons

Here, you can decide to load the default icon pack on the front end of your webpages as well as deciding the default icon elements for icon display. If you do not want to use the default icons offered by this plugin, you can click the Custom Icon Set and upload your preferred images. Note that the image files must be the ZIP format.

Now, you can go back to the page that you have already added the feature boxes. Then, you need to put your mouse at the beginning of the text content entered for each feature box, and click the Add Icon button.

Add Icon

Next, you should choose your preferred icon from either the Default Pack or the Custom Pack, determine the element to wrap your icon for different display sizes, and click the Insert Icon button.

Insert Icon

That’s it! Now, you can check the front-end of your webpage to figure out the final result. If you want to make more modifications on the icons, you can check this page to learn some parameters for the CSS animations.