Support

Account

Home Forums Backend Issues (wp-admin) ACF admin CSS/JS not loading

Solving

ACF admin CSS/JS not loading

  • ACF is working perfectly fine for me in my local environment, but on our staging server I’m running into a surprising issue. We use Capistrano to deploy sites to staging, using a custom script for WordPress sites. For those unfamiliar, Cap creates a releases folder and clones in a new copy of the associated Git repo to a new folder during each deploy; it then symlinks the most recent version to a folder called current, which is served publicly. When I load any of the pages within the Custom Fields menu option, ACF loads custom CSS and JS files — but instead of loading from the site root, ACF tries to use the absolute server path, all the way to server root, and as a result these files are not found. The missing JS is particularly critical as without it the page for creating and modifying field groups is impossible to use. I can’t really find any guidance on why this would be happening, and to be honest I’m not even sure how I would start searching.

    Also worth noting is that I have my site configured with wp-content outside of the WordPress core folder; again, this all functions normally when working in a local environment. The server is also running Nginx, if that matters.

  • Hi @justintoon

    Sorry mate, I have not used Capistrano before, or used WP with a modified folder structure.

    Sounds like you may need to ask this q on stack exchange to find a dev that knows what to do.

    Good luck

    Cheers
    E

  • Hey @justintoon, I had the exact same problem, and this is what fixed it for me:

    Starting on line 483 of acf.php, with //register acf scripts as the comment, you’ll see a series of arrays, look for the lines that start with $this->settings['dir'], for example:

    'src' => $this->settings['dir'] . 'js/field-group.min.js',

    And change each of those references to include the bloginfo url, like this:

    'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/field-group.min.js',

    Do this replacement for lines 483-499, and also on lines 525-532, so that it’s loading your actual path to the files, instead of getting confused with the local path.

    So here’s the end results for those two chunks of code:

    lines 483-499:

    // register acf scripts
    $scripts = array();
    $scripts[] = array(
    'handle' => 'acf-field-group',
    'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/field-group.min.js',
    'deps' => array('jquery')
    );
    $scripts[] = array(
    'handle' => 'acf-input',
    'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/input.min.js',
    'deps' => array('jquery')
    );
    $scripts[] = array(
    'handle' => 'acf-datepicker',
    'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/core/fields/date_picker/jquery.ui.datepicker.js',
    'deps' => array('jquery', 'acf-input')
    );

    lines 525-532:

    // register acf styles
    $styles = array(
    'acf' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/acf.css',
    'acf-field-group' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/field-group.css',
    'acf-global' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/global.css',
    'acf-input' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/input.css',
    'acf-datepicker' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/core/fields/date_picker/style.date_picker.css',
    );

    Hope that helps 🙂

  • I had this issue after migrating from local development to a Media Temple Grid server. @jonathansoper‘s fix worked for me (Thanks, Jonathan).

    EDIT: I also had to modify ‘core/fields/wysiwyg.php’. I changed this line:
    $plugins['code'] = apply_filters('acf/get_info', 'dir') . 'js/tinymce.code.min.js';
    to this:
    $plugins['code'] = get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/tinymce.code.min.js';

    But editing plugin files is less than ideal. Any chance we might see a fix for this at some point, @elliot Condon?

    Thanks!

  • I’m having the same issue when migrating. In my acf.php file I only see assets being called like this:

    ‘src’ => acf_get_dir(‘assets/inc/datepicker/jquery-ui-1.10.4.custom.min.css’)

    Replacing with:

    ‘src’ => get_bloginfo(‘url’) . ‘/wp-content/plugins/advanced-custom-fields/assets/inc/datepicker/jquery-ui-1.10.4.custom.min.css’)

    But I get site-wide errors (front and backend) when using this. Ideas?

  • I had the same issue here and dug a little deeper, hoping to avoid having to edit the plugin. For me, as with @andyford, the issue only occurred on my Media Temple environment. Their infrastructure was confusing the WordPress is_ssl() function, which was firing false at the time the asset urls were being generated (from functions used in ACF like content_url() and plugins_url()).

    Good news is, there is a solution in the WordPress codex. Just add the following to your wp-config.php file:

    if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS'] = 'on';

    This solved my mixed-content issues without having to edit the plugin.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘ACF admin CSS/JS not loading’ is closed to new replies.