Support

Account

Home Forums Add-ons Options Page Using Options in the stylesheet

Solved

Using Options in the stylesheet

  • I have created a dynamic stylesheet called main.php and I have it hooked up perfectly. All my static css is being used the right way. I have also created a custom options page and it is being used for a few different things on the site. Both of those alone are working great.

    My problem is I am trying call the options in my stylesheet for things like background images in my stylesheet. I have seen other posts hinting at this idea but I can’t put it together.

    here is what I have tried

    `.this_div{background:url(‘<?php the_field(‘background_image_1′,’option’); ?>’) no-repeat center top fixed;}

  • You can’t get fields in the stylesheet unless the stylesheet also loads all of WP. The easiest way to do this is to use admin-ajax.php. https://stackoverflow.com/questions/22023531/wordpress-load-dynamic-css-only-on-frontend

  • Awesome! Thank you!

  • @JohnHuebner
    Any chance you can go into more detail? I am new to WP development. I read through the link you reference and have read several other sources online but I can’t quite put it together.

    Thank you,

  • I’m not sure what other details I can go into.

    To get the dynamic style sheet you are actually calling on WP’s AJAX request script https://codex.wordpress.org/AJAX_in_Plugins, this is what you are enqueuing. The action=some_action part of the URL tells WP what hook to run.

    You create an action filter and this action filter outputs the CSS, this can be done by either outputting it directly in the function or by including a separate PHP file that does the CSS. This would all look like a CSS file except for the dynamic parts that would be PHP.

    The only thing that’s not included in the link I provided or in the documentation is that before you start outputting the CSS that you need to indicate that what is returned is in fact CSS. To do this, before outputting CSS you do

    
    <?php header("Content-type: text/css"); ?>
    
  • I know this is kind of an old thread, but the steps I found here was the only thing I was able to find that worked.

Viewing 6 posts - 1 through 6 (of 6 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.