Support

Account

Register Login

Home › Forums › Backend Issues (wp-admin) › Suggestions for creating dynamic stylesheets with ACF values

Solving

Suggestions for creating dynamic stylesheets with ACF values

  • Hello,

    This problem has perplexed me for years and I’ve yet to find what looks like a reliable, flexible, non-hack solution to it.

    I want to be able to allow a client to set colour values using ACF fields (either in an Options page or even in individual pages/posts) and then pull those values into a dynamic CSS file and load it the normal enqueue way.

    These are the boundaries I want to work within:

    1. I don’t want to write the values directly to template files like: <h2 style="color: <?php the_field("heading_colour"); ?>">.
    2. I don’t want to create style blocks in the header file
    3. I ideally don’t want to re-save the file on page load, only on update – whether it’s via an Options page or updating a single page/post that uses ACF

    Has anyone come attempted this before and come up with a reasonable solution? There is a blog post here that appears to do most of the above, but it’s now over 6 years old and I wondered if there was a newer, more bulletproof solution out there.

    Would really like to find an answer to this. Any ideas?

    Thanks for any help.

  • I took a quick look at the article you linked and I don’t see anything in the basic idea that would not still apply. If I was going to do this that’s likely the way I would go.

    What follows is just my thinking on the subject and you can disregard it if you want. It’s just an opinion and you know what they say about opinions.

    I, personally, have given up on my arguments that were the same as yours because I was determined at one point in my life to keep complete separation between content and design. Mostly now I use inline styles when I need to. I either put the style right in the element or I generate inline <style> blocks when I need to do something complicated (like add a client uploaded image as a background using responsive background image CSS.) Why, because it takes less time to load a page with inline styles than it does to load that extra dynamic stylesheet, even if that extra dynamic stylesheet id pre-generated.

    In your case you’re probably talking about 2 pre-generated style sheets, one using global options and another for page specific options, further increasing the number of http requests. Everything is about page load time now and even knocking off a few milliseconds off can be important. Gone are the days when you disregard these milliseconds in favor of “Best Practices”

    I am also usually under time constraints. Pre-generation of separate style sheets would take more time to build a site, extra time that most of my clients would rather not pay for. In addition to this, in 6 months I’ll need to figure out WTF I was doing. It means changes in multiple files where using inline styles lets me see everything at once.

    I still use stylesheets for everything that will not change, but inline styles for those things that I want to be configurable.

    My change of opinion happened when it became possible to add a ‘<style>’ block anywhere in a page and was no longer confined to needing to be in the `<head>’

    so:

    1. Decreased Page Load Time
    2. Decreased Site Dev Time
    3. Decreased Future Dev Time

    now outweigh my need to separate all CSS into stylesheets and all JavaScript into their own files, etc.

    Let’s look at it another way. I am building a site that uses bootstrap. I am using flexible content fields. I am giving the client the ability to adjust the bootstrap columns. What is the difference if I dynamically include a class like “align-self-bottom” or I add a style like “color: #000” to an element? Not much.

  • Hi John,

    Thank you for your considered feedback. It’s always good to hear others’ opinions as we all know it’s very easy to get tunnel vision and end up down rabbit holes in the world of dev.

    I absolutely agree that page load times are critical. My ultimate goal was to generate these stylesheets and then concatenate them into a single one to reduce http requests. However, inline or stylesheet blocks would clearly still be quicker.

    My worry about placing stye tags throughout the document (not just in the head) would be flashes of unstyled content before the DOM has fully loaded. Though I guess it depends what those style tags are targeting as to whether it’s worth the tradeoff.

    I think for now I might have to settle on header style blocks as this seems a happy medium and I think you’re right, me in 6 months will look back and probably hate now now for trying to be too clever!

    Thanks John

  • Hi – here is the way I do it.

    1. Create an option page – something like “Theme Settings”
    2. Add Fields for each css style I need
    3. Group them in tabs for for mobile/tablet/desktop/HD
    4. Define a hook which is fired once the option page is updated
    5. The hook is generating a css file / it updates the css file
    6. include the css file in your theme in function.php

    If you want to go more advanced. Create a vars.less (I am using less and uikit) and compile the css with a less compiler, after the option page is saved. Like this I only load one css file

  • Hi @pixelcrash,

    That sounds like pretty much what I’m looking for. Would you mind sharing your hook code that generates the css file by any chance? That’s the bit I’ve been getting stuck on.

  • Hello, I’m trying to do something like this, but I don’t know how.
    You’ve got it?

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

The topic ‘Suggestions for creating dynamic stylesheets with ACF values’ is closed to new replies.