How to use ACF in a plugins admin page

• sKuijers

• October 2, 2013 at 5:03 am

Hey guys
First of all: ACF is awesome! And i will never regret buying the repeater add-on. Thanks for putting time into developing and maintaining this plugin.

I am trying to load an field group in the settings page of a plugin that I’m making. It’s not really working out and I would like your help.

My main question is:
On which hook should I load acf_form_head() ?

I learned from the documentation that the function acf_form_head(); should be called before the header function in a theme. After that the acf_form($options); can be called and we’re all good. Works like a charm! In a theme. But I’m developing a plugin.

In the body of my template I call the acf_form function just like I did in the template and the right form loads. Of course not all functionality works because I need the call the acf_form_head().

I have used several hooks but without luck.

add_action('admin_init', array($this->handler, 'add_afc_head')); // same for the init hook
The form styles are loaded but the console returns the following error on load:
Uncaught TypeError: Cannot read property ‘post_id’ of null
If i click the add image button in my field group the following error appears in the console:
Uncaught TypeError: Cannot read property ‘image’ of null

The only thing the add_afc_head function does is call acf_form_head and write to my log so I know the function has been called.

So… Am I using the wrong hook or do I do something else wrong?

Thanks for helping out!

• Elliot

• October 2, 2013 at 4:54 pm

Hi @sKuijers

The acf_form_head function is only intended to be used in a front end template. It can’t be used in the backend in the same way.

For ACF to work, you will need to use the acf/input/head, acf/input/enqueue_scripts actions. Perhaps you could look in the core/controllers/input.php file to see how ACF adds the necessary code to the post page?

Thanks
E

• sKuijers

• October 3, 2013 at 4:12 am

@elliot, Thank you for the clear & quick reaction.

I have had a quick look in the input.php file and think I’ll be able to find my way from there. When I have done some coding I’ll let you know how it worked out.

• souverian

• October 3, 2013 at 10:55 am

hey @sKuijers, this is exactly the question I’ve been trying to answer for a few hours! Have you made any progress?

Based on what I know at this point, my approach is to

1. Register my field groups.

2. Before rendering my settings page call

do_action('acf/input/admin_head');
 do_action('acf/input/admin_enqueue_scripts');

3. Add a tag in my settings page template that renders the field.

The main conceptual block I’ve run into is how I should pass the “location” params in the register_field_group() call so it reference my settings page. The plugin slug I’m using is “es_awp” (i.e. the settings URL is `http://path.to.wordpress/wp-admin/options-general.php?page=es_awp’ so I figured I could do something like this (not sure it works):

    'location' => array (
      array (
        array (
          'param' => 'page',
          'operator' => '==',
          'value' => 'es_awp',
          'order_no' => 0,
          'group_no' => 0,
        ),
      ),
    ),

I’d love to hear your approach and see any code examples if you have. I’ll be sure to post my code if I figure it out too.

Thanks in advance for any help!

• sKuijers

• October 7, 2013 at 5:44 am

@souvarian and @elliot: thanks for the input.

It needs some more thorough testing but I think I have it working now. Thanks to you both.

As I have registered my field_groups using the ACF-UI, I am not using the register_field_group function. That way I don’t have the problem with the location.

How I use these funtions:
– on hook ‘admin_init’ I call

/* hooked on admin_init */
public function add_afc_head() {
       if (in_array(hbd_functions::get_page_by_url(), hbd_settings::$plugin_page_names)) {
          hbd_debug::write_log('acf_form_head called');
          acf_form_head();
       }
   }

– on hook ‘admin_menu’ I build by menu using add_menu_page();
– In the callback of that function I do these actions:
do_action(‘acf/input/admin_head’);
do_action(‘acf/input/admin_enqueue_scripts’);
– Then render my page.
– In my page I call acf_form like this:

$options = array(
   'post_id' => hbd_settings::AFC_POST_TOKEN, // post to save to
   'field_groups' => array(hbd_settings::AFC_FORM_ID), // field group id
   'form' => true, 
   'form_attributes' => array(
        'id' => 'design-fotos',
        'action' => '',
        'method' => 'post'
   ),
   'return' => add_query_arg( 'updated', 'true', (get_admin_url() . 'admin.php?page=s-advanced-search') ), // return url
   'submit_value' => 'Opslaan', 
   'updated_message' => 'Afbeeldingvelden opgeslagen', 
);

acf_form($options);

I hope this solves your question as well souverian. If it doesn’t open a new thread and let me know. I’ll look into it as well.

As long as further debugging does not surface any issues; topic solved!

Thanks for the input,

sKuijers

• souverian

• December 28, 2013 at 6:23 am

This reply has been marked as private.