Home › Forums › Front-end Issues › CSS/JS not loading on the front end
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
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
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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
🚀 This week’s session of ACF Chat Fridays dips into the preliminary results of our first ever user survey. Don’t miss it! https://t.co/3UtvQbDwNm pic.twitter.com/kMwhaJTkZc
— Advanced Custom Fields (@wp_acf) May 9, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.