Support

Account

Home Forums Front-end Issues ACF Admin Head Styles

Solving

ACF Admin Head Styles

  • I’m trying to pull in a custom background image using an image field (url). I’ve setup a function that imports into my functions.php. No styles are showing up from the function at all. Stumped. Thanks in advance!

    Here’s the code…

    <!--USER INPUT STYLES FUNCTION-->
    <?php function my_acf_admin_head() {    
    $backgroundimage = get_field('background_image', 'option'); ?>
            
    <!--BEGIN USER INPUT STYLES-->
    <style type="text/css">
        /**Adds custom global background image**/
         .main-content {
             background-image: url ('<?php echo $backgroundimage; ?>');
          }
    </style>
       
    <?php
        }
       add_action('acf/input/admin_head', 'my_acf_admin_head');
    ?>
    <!--END USER INPUT STYLES-->
  • The styles are not appearing in the HTML source of the page you want them to appear on? Or is the style markup in the source and it’s just not being applied to the page?

  • Nothing is showing up at all. The background-image style on class .main-content is not appearing as a result of adding the above code to functions.php.

  • Did not really answer the question. Look at the source HTML of the admin page. Does something like the code you are trying to add appear in the <head></head> of the HTML?

  • Do you mean the WP admin dashboard for the site? If so, not seeing anything in the <head>.

    I’m using Multisite. Could that impact how this will work?

  • You are adding your styles with this

    
    add_action('acf/input/admin_head', 'my_acf_admin_head');
    

    which means that your function will run in the admin when acf does it’s admin_head stuff. But your targeting .main-content, which is not a class that appears in the admin. I’m not sure where you’re trying to make this style appear.

    Where exactly do you want to add this background?

  • I want the user to be able to add a background image globally to the front end of the website, attached to a class called .main-content, which is a primary content container for the website, as a style background-image: url(”);.

    The custom image field is all setup in the admin area. The image is uploaded. The custom field included in the functions.php is the one.

    So am I understanding the admin head styles incorrectly? This is used to style the admin area only? This is the only piece of the docs I’ve been able to find that even closely resembles how to approach the problem. And I’m sure I’m missing something completely obvious! 😛

    What’s the best to include acf custom fields into css aside from HTML inline element css?

  • Yes, since you want to put this on the front of the site the hook you should be using is wp_head

    
    <!--USER INPUT STYLES FUNCTION-->
    <?php function my_acf_admin_head() {    
    $backgroundimage = get_field('background_image', 'option'); ?>
            
    <!--BEGIN USER INPUT STYLES-->
    <style type="text/css">
        /**Adds custom global background image**/
         .main-content {
             background-image: url ('<?php echo $backgroundimage; ?>');
          }
    </style>
       
    <?php
        }
       add_action('wp_head', 'my_acf_admin_head');
    ?>
    <!--END USER INPUT STYLES-->
    
  • Ah ha! Thank you!

    It is now adding the style but it says its an invalid property value. I’m assuming this is because I have the field set to URL? Maybe by ID would be a better solution?

    The php echo is printing this and saying it is an invalid property value…

    .main-content {
    background: url ("http://localhost.com/vail/mountain-exploration/wp-content/uploads/sites/2/2016/09/vail-resorts-epic-ski-tracks-main-content-background.jpg");
    }
  • No, you want the URL there. Where are the quotes coming from. I don’t think you need those. The error has something to do with the CSS you’re outputting

  • Changed the image field to ID and calling it this way now…still getting invalid property value.

    <!--USER INPUT STYLES FUNCTION-->
        <?php function my_acf_admin_head() {
        
        $backgroundimage = get_field('background_image', 'option');
                $backgroundimgsize = 'full';
                $backgroundimg_array = wp_get_attachment_image_src($backgroundimage, $backgroundimgsize);
                $backgroundimg_url = $backgroundimg_array[0];
        
            ?>
            <!--BEGIN USER INPUT STYLES-->
            <style type="text/css">
                
                /**Adds custom global background image**/
                .main-content {
                    background: url ("<?php echo $backgroundimg_url; ?>");
                }
                
            </style>
            <?php
        }
        add_action('wp_head', 'my_acf_admin_head');
        ?>
        <!--END USER INPUT STYLES-->
  • Ok. Reset it back to URL and removed the quotes around the php echo. Still the same problem. Its printing the URL fine but says its an invalid property value.

    Thanks a ton for helping troubleshoot this!

    This is where it is now..

    <!--USER INPUT STYLES FUNCTION-->
        <?php function my_acf_admin_head() {
        
            $backgroundimage = get_field('background_image', 'option');
        
            ?>
            <!--BEGIN USER INPUT STYLES-->
            <style type="text/css">
                
                /**Adds custom global background image**/
                .main-content {
                    background: url ("<?php echo $backgroundimage; ?>");
                }
                
            </style>
            <?php
        }
        add_action('wp_head', 'my_acf_admin_head');
        ?>
        <!--END USER INPUT STYLES-->
  • maybe it doesn’t like the localhost value, not sure, at this point it’s a CSS issue and you need to work that out. Get it working with a hardcoded URL for the image and then replace it with the ACF field value when you get the problem solved.

  • You think so? I’ve tried the exact path hardcoded and it is still kicking it back as an invalid property value. Its propert CSS. That leads me to believe that its something to do with the function.

  • You think so? I’ve tried the exact path hardcoded and it is still kicking it back as an invalid property value. Its proper CSS. That leads me to believe that its something to do with the function.

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

The topic ‘ACF Admin Head Styles’ is closed to new replies.