Enhancing Your WordPress Site with Custom Icon Boxes Using Advanced Custom Fields

In today’s digital landscape, a well-designed website isn’t just about aesthetics; it’s also about functionality and user engagement. One way to boost both aspects is by adding custom icon boxes to your WordPress site. Icon boxes can serve various purposes, from highlighting key features to directing users to important sections. This article will walk you through the process of creating and displaying custom icon boxes using Advanced Custom Fields (ACF) and a custom shortcode in WordPress.

Example of icon boxes on a WordPress site

Why Use Icon Boxes?

Icon boxes are a powerful visual tool that can make your content more engaging. They allow you to summarize and highlight important features, services, or categories in an attractive and concise way. Users are drawn to visual cues, and icon boxes can help guide them through your site, ensuring they see the most important information first.

Setting Up Advanced Custom Fields (ACF)

To start creating custom icon boxes, you’ll need to install and activate the Advanced Custom Fields (ACF) plugin. ACF is a flexible and powerful tool that allows you to add custom fields to your WordPress posts, pages, and custom post types. These fields can include anything from text and images to links and dropdowns.

Advanced Custom Fields plugin interface

Once ACF is installed, you can create a new field group for your icon boxes. Here’s how:

1. Create a New Field Group: Go to the ACF plugin settings and click on “Add New” under the “Field Groups” section. Name your field group something like “Icon Box Row”.
2. Add Fields: In this field group, you’ll want to add at least two fields:
   • Text Field: Label this field “Icon Box Text” or something similar. This field will hold the text that accompanies each icon box.
   • Image Field: Label this field “Icon Box Image”. This field will store the image that represents each icon.
3. Assign Field Group: Assign this field group to the pages or posts where you want to display the icon boxes.

Once you’ve set up your custom fields, you can start adding content directly from the WordPress editor. Each page or post that you’ve assigned the field group to will now have the option to add text and images for the icon boxes.

Creating the Custom Shortcode

With your ACF fields set up, the next step is to create a custom shortcode that will display the icon boxes on your site. A shortcode is a simple way to insert content into your posts, pages, or widgets. Here’s the code to create the shortcode:

Custom shortcode creation process

    function display_icon_boxes_shortcode() {
        $output = '';
        if (function_exists('get_field')) {
            $icon_boxes = get_field('icon_box_row');
            if ($icon_boxes) {
                foreach ($icon_boxes as $icon_box) {
                    $label = $icon_box['icon_box_row_txt'];
                    $output .= '<div class="service_box"><div class="serv_label">' . esc_html($label) . '</div>';
                    $image_url = $icon_box['icon_box_row_img']['url'];
                    $output .= '<div class="service_img"> <img src="' . esc_url($image_url) . '" alt="' . esc_attr($label) . '"></div></div>';
                }
            }
        }
        return $output;
    }
    add_shortcode('display_icon_boxes', 'display_icon_boxes_shortcode');
    

Let’s break down what this code does:

• Function Declaration: The display_icon_boxes_shortcode() function is created to handle the output of the icon boxes.
• Checking for ACF Function: The code checks if the get_field() function exists to ensure ACF is installed and active.
• Looping Through Icon Boxes: If the icon_box_row field exists and contains data, the function loops through each icon box, extracting the text and image URL.
• Generating HTML: The function generates the necessary HTML to display each icon box with its corresponding text and image.
• Returning the Output: Finally, the function returns the generated HTML so it can be displayed wherever the shortcode is used.

To use this shortcode, simply add [display_icon_boxes] to any post or page where you want the icon boxes to appear.

Styling Your Icon Boxes

While the shortcode handles the functionality, you’ll want to style your icon boxes to match your site’s design. Here’s some basic CSS to get you started:

Example of icon box styling

    .service_box {
        margin: 20px 0;
        padding: 10px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
    }

    .serv_label {
        font-size: 18px;
        font-weight: bold;
        margin-right: 15px;
    }

    .service_img img {
        max-width: 50px;
        height: auto;
    }
    

This CSS gives your icon boxes a clean, modern look. Feel free to customize the styles to better match your site’s theme.

Conclusion

Adding custom icon boxes to your WordPress site using ACF and shortcodes is a straightforward way to enhance both the design and usability of your site. Whether you’re showcasing features, services, or any other important information, icon boxes provide a visually appealing and user-friendly solution. With ACF, the possibilities are endless, allowing you to create dynamic and engaging content with ease.

Final result of custom icon boxes on a website

Now that you know how to implement custom icon boxes, you can start experimenting with different designs and layouts to see what works best for your site. Remember, the key to a great website is a balance between form and function, and custom icon boxes can help you achieve just that.