I use Advanced Custom Fields (ACF) a lot in my projects.

It’s easy to install, great for templating, and offers enough flexibility for most of my clients. You don’t always need a visual builder on the back-end to create some pages.

If you’re familiar with ACF Flexible Fields you get even more control that you can grant to your client when it comes to creating pages with certain sections. But this article is not about that, I don’t want to get into a lot of details.

This is about styling the ACF fields on the back-end side, in the Dashboard.

For you and me (as developers) it might be easy to recognize ACF fields in the back-end and start using them, but your clients might need some indication.

To do this I always add a bit of styling to the ACF fields on the back-end, nothing too fancy, but just enough to get your attention that something is happening there.

I have a file acf-style.php that is present in a folder called config at the root of my theme folder.

In the acf-style.php file, I have the following code that is applying the styling.

Copy Code 


<?php function my_acf_admin_head() { ?>
    <style type="text/css">

        .inside.acf-fields>.acf-field:first-child {
            margin-bottom: 25px;
        }

        .inside.acf-fields>.acf-field {
            background-color: #F5F9FF;
            margin: 25px 0;
        }

        .acf-repeater.-row > table > tbody > tr > td,
        .acf-repeater.-block > table > tbody > tr > td {
            border-top: 2px solid #000;
        }

        .acf-repeater .acf-row-handle {
            vertical-align: top !important;
            padding-top: 16px;
        }

        .acf-repeater .acf-row-handle span {
            font-size: 20px;
            font-weight: bold;
            color: #000;
        }

        .acf-repeater .acf-row-handle .acf-icon.-minus {
            top: 30px;
        }

        .acf-label {
            color: #25477b;
            padding: 10px;
        }

        .acf-label .description{
            color: #000;
        }

        .acf-field-object .acf-label {
            color: #000;
        }

        #acf-field-group-locations .acf-label,
        #acf-field-group-options .acf-label {
            color:  #000;
            background-color: transparent;
        }
        
    </style>

<?php }

add_action('acf/input/admin_head', 'my_acf_admin_head');

This file now gets called in functions.php to add the style.

Copy Code 


require_once('config/acf-style.php');

And that’s it!

You know have added custom CSS styling to the ACF fields in the back-end. This is the result:

You can go and play with the styling more until you personalize it.

Have fun with it!