📜 A Brief History

In almost 2 years, the plugin has enormously grown in popularity. Despite the many sleepless nights and weekends spent developing this great tool, the enthusiasm of the community and the positive feedbacks from developers have kept me motivated to continue.

Thanks to the ACF Slack Community which I opened in December 2019, I could share my passion with many ACF developers around the world (almost 280 members ?). Through these exchanges, I understood that we were all thirsty for features that make our daily lives easier, as evidenced by the impressive list of Features Requests gathered on the Trello Board.

However, it is becoming more and more challenging to maintain a high level of support (+300 ticket answered), while integrating new functionalities, and reconcile everything with my professional and personal life. Today I know what I love to do: help developers get things done easier and faster. Being a passionate person, I want to continue on this path. Therefore, after careful consideration, I decided to launch ACF Extended Pro. In order to fully invest myself in this new adventure, I also decided to leave my position as Lead Dev in the great WordPress agency Pilot’in.

🚀 Stepping up with ACF Extended Pro

Following the plugin motto, ACF Extended Pro will keep the philosophy that made its reputation: advanced features, easy to use, and seamless integration.

This version will also be a guarantee of confidence for all professional developers, as it means constant monitoring, a better level of support, more documentation and regular features implementation. For consistency, prices have been modeled on those of Advanced Custom Fields Pro, starting at $49 for the Personal version and up to $249 for an unlimited number of websites for the Agency version.

💡 What about ACF Extended Free?

Obviously, some people may wonder about the free version currently on the WordPress repo. I want to reassure everyone right away, the support for the free version will be maintained, and the features currently available will remain so. Although some improvements can be added to the free version, major new features will be exclusive to the Professional version.

🛠️ Development Roadmap

The future development of the plugin will become even more exciting, since I will be able to concentrate all my time on it. The initial Pro version already includes no less than 11 new features. But this is only the beginning. Here is a small preview of what will follow in the coming months:

• Field: Flexible Content – Grid System
• New Fields: Phone, Country/Language, WPMU Sites, Image Selector
• Module: Dynamic Post Types – Manage built-in WordPress Post/Page
• Module: Dynamic Taxonomies – Manage built-in WordPress Categories/Tags
• Module: Emails – Manage WordPress email settings (SMTP, HTML Templating, Logs…)
• Module: Operations – Create, run & log dynamic scripts
• Module: Forms – Multi-steps, ajax submission, new Mailchimp action
• General: ACF/ACFE Settings – Enable/Disable settings from UI
• And much, much more…

I’m looking forward to discuss the future of ACF Extended and all of this exciting news with you. If you would like to share your passion for ACF with us, do not hesitate to join the ACF Slack Community! ❤️

Deregister native ACF Form front styles

First, we need to deregister ACF styles added by acf_form_head() to avoid conflicts. To proceed, we will use wp_deregister_style().

add_action('wp_enqueue_scripts', 'acf_form_deregister_styles');
function acf_form_deregister_styles(){
    
    // Deregister ACF Form style
    wp_deregister_style('acf-global');
    wp_deregister_style('acf-input');
    
    // Avoid dependency conflict
    wp_register_style('acf-global', false);
    wp_register_style('acf-input', false);
    
}

Bootstrap row, success message & submit button

The filter acf/validate_form let use customize the default behavior of every acf_form() calls. We will first check if any argument has been manually set inside acf_form(), so we will still have the choice to bypass our Bootstrap 4 default behavior.

Using the official ACF Form documentation, we will wrap form fields with <div class="row"></div>. On our way, we will also add alert alert-success on the sucess message. And finally do the same for the submit button, and append btn btn-primary classes.

add_filter('acf/validate_form', 'acf_form_bootstrap_styles');
function acf_form_bootstrap_styles($args){
    
    // Before ACF Form
    if(!$args['html_before_fields'])
        $args['html_before_fields'] = '<div class="row">'; // May be .form-row
    
    // After ACF Form
    if(!$args['html_after_fields'])
        $args['html_after_fields'] = '</div>';
    
    // Success Message
    if($args['html_updated_message'] == '<div id="message" class="updated"><p>%s</p></div>')
        $args['html_updated_message'] = '<div id="message" class="updated alert alert-success">%s</div>';
    
    // Submit button
    if($args['html_submit_button'] == '<input type="submit" class="acf-button button button-primary button-large" value="%s" />')
        $args['html_submit_button'] = '<input type="submit" class="acf-button button button-primary button-large btn btn-primary" value="%s" />';
    
    return $args;
    
}

Wrap fields with form-group, col-12 & adding form-control

Now that our row has been set, we must add a default fallback column class: col-12. Bootstrap adds form-group to add some bottom margin, and of course, form-control on each input to apply specific styles.

When it comes to modify a field before rendering, acf/prepare_field is the best choice. We will target specifically ACF Form in the front-end via the is_admin() conditional.

Every fields wrappers now have a default form group col-12 classes (100% of the row). The great thing is that you can add custom breakpoint column width directly in your ACF field administration. Just add col-md-6 in the wrapper input, and the following classes will be applied: form group col-12 col-md-6 (50% of the row starting at tablet breakpoint).

add_filter('acf/prepare_field', 'acf_form_fields_bootstrap_styles');
function acf_form_fields_bootstrap_styles($field){
    
    // Target ACF Form Front only
    if(is_admin() && !wp_doing_ajax())
        return $field;
    
    // Add .form-group & .col-12 fallback on fields wrappers
    $field['wrapper']['class'] .= ' form-group col-12';
    
    // Add .form-control on fields
    $field['class'] .= ' form-control';
    
    return $field;
    
}

Adding text-danger on required

In ACF, there is a hook for (almost) everything. Here is an example on how to add text-danger class on the “required” asterisk:

add_filter('acf/get_field_label', 'acf_form_fields_required_bootstrap_styles');
function acf_form_fields_required_bootstrap_styles($label){
    
    // Target ACF Form Front only
    if(is_admin() && !wp_doing_ajax())
        return $label;
    
    // Add .text-danger
    $label = str_replace('<span class="acf-required">*</span>', '<span class="acf-required text-danger">*</span>', $label);
    
    return $label;
    
}

Adding alert-danger on errors

This step is not mandatory, but if you want to add CSS classes on error messages, you will have to add some JavaScript, as the messages are spawned there. Note that the only way to add form-control on Date picker & Google Maps fields is also to use JavaScript.

jQuery(document).ready(function($){
    
    // Check ACF
    if(typeof acf === 'undefined')
        return;
    // Date picker & Google Maps compatibility
    $('.acf-google-map input.search, .acf-date-picker input.input').addClass('form-control');
    
    // Clean errors on submission
    acf.addAction('validation_begin', function($form){
        $form.find('.acf-error-message').remove();
    });
    
    // Add alert alert-danger & move below field
    acf.addAction('invalid_field', function(field){
        field.$el.find('.acf-notice.-error').addClass('alert alert-danger').insertAfter(field.$el.find('.acf-input'));
    });
    
});

Fine tune the submit button & spinner

The submit button & spinner still needs some tweaks. ACF Form adds a disabled class on the acf-button during the form validation and submission process. This behavior is natively supported by WordPress in the backend in order to avoid click spam during submission. But not in the front-end. Let’s fix that with the CSS property pointer-events: none.

As we deregistered ACF styles, we will also have to re-introduce the spinner gif. For compatibility, we will use the native WordPress administration spinner gif.

.acf-button.disabled{
    pointer-events: none;
}
.acf-loading, .acf-spinner {
    height: 20px;
    width: 20px;
    vertical-align: text-top;
    background: transparent url(/wp-admin/images/spinner.gif) no-repeat 50% 50%;
    display:none;
}

Pack it all…

Our ACF Bootstrap Form is now ready! The HTML render exactly as excepted, using all Bootstrap 4 form components.

<form id="acf-form" class="acf-form" action="" method="post">
    
    <div id="acf-form-data" class="acf-hidden">
        <input id="_acf_screen" name="_acf_screen" value="acf_form" type="hidden">
        <input id="_acf_post_id" name="_acf_post_id" value="new_post" type="hidden">
        <input id="_acf_validation" name="_acf_validation" value="1" type="hidden">
        <input id="_acf_form" name="_acf_form" value="..." type="hidden">
        <input id="_acf_nonce" name="_acf_nonce" value="6aa82f255b" type="hidden">
        <input id="_acf_changed" name="_acf_changed" value="0" type="hidden">
    </div>
    
    <div class="acf-fields acf-form-fields -top">
    
        <!-- .row -->
        <div class="row">
            
            <!-- .form-group .col-12 -->
            <div 
                class="acf-field acf-field-text acf-field-5ccc199a22617 is-required form-group col-12" 
                data-name="name" 
                data-type="text" 
                data-key="field_5ccc199a22617" 
                data-required="1">
                
                <div class="acf-label">
                    <label for="acf-field_5ccc199a22617">
                    
                        <!-- .text-danger -->
                        Name <span class="acf-required text-danger">*</span>
                        
                    </label>
                </div>
                
                <div class="acf-input">
                    <div class="acf-input-wrap">
                    
                        <!-- .form-control -->
                        <input type="text" id="acf-field_5ccc199a22617" class="form-control" name="acf[field_5ccc199a22617]" required="required">
                        
                    </div>
                </div>
                
            </div>
            
            <!-- .form-group .col-12 -->
            <div 
                class="acf-field acf-field-email acf-field-5ccc19a022618 is-required form-group col-12" 
                data-name="email" 
                data-type="email" 
                data-key="field_5ccc19a022618" 
                data-required="1">
                
                <div class="acf-label">
                    <label for="acf-field_5ccc19a022618">
                    
                        <!-- .text-danger -->
                        E-Mail <span class="acf-required text-danger">*</span>
                        
                    </label>
                </div>
                
                <div class="acf-input">
                    <div class="acf-input-wrap">
                    
                        <!-- .form-control -->
                        <input type="email" id="acf-field_5ccc19a022618" class="form-control" name="acf[field_5ccc19a022618]" required="required">
                        
                    </div>
                </div>
                
            </div>
            
            <!-- .form-group .col-12 -->
            <div 
                class="acf-field acf-field-textarea acf-field-5ccc19a922619 is-required form-group col-12" 
                data-name="text" 
                data-type="textarea" 
                data-key="field_5ccc19a922619" 
                data-required="1">
                
                <div class="acf-label">
                    <label for="acf-field_5ccc19a922619">
                        
                        <!-- .text-danger -->
                        Text <span class="acf-required text-danger">*</span>
                        
                    </label>
                </div>
                
                <div class="acf-input">
                
                    <!-- .form-control -->
                    <textarea id="acf-field_5ccc19a922619" class="form-control" name="acf[field_5ccc19a922619]" rows="8" required="required"></textarea>
                    
                </div>
            </div>
            
            <div 
                class="acf-field acf-field-text acf-field--validate-email form-group col-12" 
                style="display:none !important;" 
                data-name="_validate_email" 
                data-type="text" 
                data-key="_validate_email">
                
                <div class="acf-label">
                    <label for="acf-_validate_email">
                        Validate Email
                    </label>
                </div>
                
                <div class="acf-input">
                    <div class="acf-input-wrap">
                        <input type="text" id="acf-_validate_email" class="form-control" name="acf[_validate_email]">
                    </div>
                </div>
                
            </div>
         
        <!-- /.row -->
        </div>
        
    </div>
    
    <!-- Submit -->
    <div class="acf-form-submit">
        
        <!-- .btn .btn-primary -->
        <input type="submit" class="acf-button button button-primary button-large btn btn-primary" value="Submit"> 
        <span class="acf-spinner"></span>
        
    </div>
</form>

ACF-Extended.com will help me in this task. I have some nice plans, but I’m still figuring out which content hierarchy would fit the best all the thematics I want to cover here. So far I came out with the following specs:

Blog

• Post type: Post
• Taxonomy: Category

News about the plugin, ACF, WordPress and others plugin related to ACF. I would like to cover several topics here, so I will use category taxonomy to split content.

Tutorials

• Post type: Tutorial
• Taxonomy: Tutorial Type

I started to really dive in ACF code few years ago. Just like when you learn a new framework, I made several mistakes and found out how to use it and hook it properly.

There were some spare online resources that helped me a lot, like the ACF Forum (and the awesome John Huebner alias the “eagle guy” as we call him in the open-space). But there’s not much structured site delivering precise tips & tricks. Well, it’s the aim of the Tutorials section.

Resources

• Post types: ACF/fields ACF/functions ACF/hooks ACF/modules
• Relationship: Tutorial

The website’s core. I would like to write advanced documentation for specific ACF fields, functions, hooks and modules here. I will also add some for WordPress and ACF Extended too.