Home Forums General Issues Using ACF field values for dynamic CSS purposes


Using ACF field values for dynamic CSS purposes

  • I have an interesting dilemma…

    I’m creating a bespoke theme with responsive breakpoints. Some of the image containers resize at different breakpoints, and the images inside need different offsets to show the correct regions.

    You can see an example here, simply resize the viewport and you’ll see the ‘are you tough enough’ container resize and recenter the image.

    What I would *like* to do, is to allow the client to input the positive/negative offset for the different breakpoints in the ACF field groups and then get those values into the CSS somehow.

    The question is, how would I get ACF field values into my CSS files. It would have to be inside the CSS files (I think) because it would need to inside of the @media sections.

  • I see two ways of doing this:
    1. Rather than using PHP to write directly to CSS files (which could cause cache issues), you could generate separate <style> tags for the media rules and insert these in the <head>. For example:

    <style media="screen and (max-width: 800px)">
    // CSS

    2. You could create a PHP script to dynamically create a concatenated CSS file. Chris Coyer’s site WP-Mix has a good code snippet to get you started:

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

You must be logged in to reply to this topic.

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.