CSS/JS not loading on the front end

• pr0fess0r

• August 23, 2018 at 9:52 pm

I have ACF 5.7.3 working fine in the admin user profile section of WP, showing a Google Map etc, but on a front end page, the styles are broken and the map doesn’t show… looking at the source there are no ACF JS and CSS files being loaded.
I’m creating the front end page programmatically as part of the WooCommerce user profile system, using this code:

add_action( 'woocommerce_account_member-directory_endpoint', 'lucas_my_account_endpoint_content' );
function lucas_my_account_endpoint_content() {
	echo "<h1>Member Directory</h2>".do_shortcode('[my_acf_user_form field_group="36886"]');
}

function my_acf_user_form_func( $atts ) {
 
  $a = shortcode_atts( array(
    'field_group' => ''
  ), $atts );
 
  $uid = get_current_user_id();
  
  if ( ! empty ( $a['field_group'] ) && ! empty ( $uid ) ) {
    $options = array(
      'post_id' => 'user_'.$uid,
      'field_groups' => array( intval( $a['field_group'] ) ),
      'return' => add_query_arg( 'updated', 'true', get_permalink() )
    );
    
    ob_start();
    
    acf_form( $options );
    $form = ob_get_contents();
    
    ob_end_clean();
  }
  
    return $form;
}
 
add_shortcode( 'my_acf_user_form', 'my_acf_user_form_func' );

//adding AFC form head
function add_acf_form_head(){
    global $post;
    
  if ( !empty($post) && has_shortcode( $post->post_content, 'my_acf_user_form' ) ) {
        acf_form_head();
    }
}
add_action( 'wp_head', 'add_acf_form_head', 7 );

If I add all of the same JS and CSS from the admin into the front end like this:

    wp_enqueue_style( 'acfcss1', get_stylesheet_directory_uri() . '../../../plugins/advanced-custom-fields-pro/assets/css/acf-global.css?ver=5.7.3' );
    wp_enqueue_style( 'acfcss2', get_stylesheet_directory_uri() . '../../../plugins/advanced-custom-fields-pro/assets/css/acf-input.css?ver=5.7.3' );
    wp_enqueue_style( 'acfcss3', get_stylesheet_directory_uri() . '../../../plugins/advanced-custom-fields-pro/pro/assets/css/acf-pro-input.css?ver=5.7.3' );
    wp_enqueue_style( 'acfcss4', get_stylesheet_directory_uri() . '../../../plugins/advanced-custom-fields-pro/assets/inc/datepicker/jquery-ui.min.css?ver=1.11.4' );
    wp_enqueue_style( 'acfcss5', get_stylesheet_directory_uri() . '../../../plugins/advanced-custom-fields-pro/assets/inc/timepicker/jquery-ui-timepicker-addon.min.css?ver=1.6.1' );

and

wp_register_script( 'acf1', '/wp-content/plugins/advanced-custom-fields-pro/assets/js/acf-input.min.js?ver=5.7.3', false, false, false );
	wp_register_script( 'acf2', '/wp-content/plugins/advanced-custom-fields-pro/pro/assets/js/acf-pro-input.min.js?ver=5.7.3', false, false, false );
	wp_register_script( 'acftrigger', get_stylesheet_directory_uri() . '/js/lucas/acf.js', false, false, true );

where the acf.js just contains “acf.doAction(‘prepare’);” the styles look better, but the Google Maps box is still empty and form values don’t update when submitted.

Does anyone know how to get the front end to work properly?

Cheers

• imanish

• August 24, 2018 at 4:14 pm

Hello,

For showing google maps you have to integrate google api, create a project from your google dashboard, you can use same key for multiple websites owned or developed by you.

reference– https://www.advancedcustomfields.com/blog/google-maps-api-settings/
* attach screen if this doesn’t solve your issue

• tomslominski

• November 14, 2018 at 11:31 pm

Hi,

While the question is unlikely to be relevant anymore, just in case anyone stumbles upon the same issue, the solution for me was to call acf_enqueue_scripts() late on in wp_head, at priority 100 specifically. We processed the form data ourselves instead of using acf_form_head(), but if you do use that, that just calls acf_enqueue_scripts() anyway, so loading that later on should also fix it.