2

I've recently switched over from using a custom class to enable a theme options panel to the built in Theme Customizer in Wordpress.

All is going fairly well - I've got live preview working but I'm a little bit stuck on using 'get_theme_mod()' to retrieve the values in a dedicated PHP file.

Using my old class, I could enqueue 'dynamic.css.php' where I would include 'wp-load.php' to enable me to use various functions to get options etc. The Theme Customizer docs show just outputting the dynamic CSS inside a custom function in the wp_head theme. I don't really want to do it this way unless necessary.

So, I'm currently enueueing my 'dynamic.css.php' file and it looks like this:

<?php

header("Content-type: text/css; charset: UTF-8");

define( 'WP_USE_THEMES', false );
include('../../../../../wp-load.php'); ?>

@media all and (max-width: <?php echo get_theme_mod('nav-primary-breakpoint'); ?>) {

    .drawer {
        margin-top: 42px;
        padding-top: 42px;
        top: -42px;
    }

}

This is how I previously did so I attempted basically the same thing but get_theme_mod() isn't working at all.

I'm also wary of including wp-load.php again - I was hoping to use a similar methodology to before without having to actually include it.

So my aims are to:

  • avoid having to load wp-load.php
  • have my css in a separate file
  • avoid having css output my themes header

I've also tried removing the wp-load.php import and including the file in the head of my theme but this puts the output into the body tag.

Any suggestions on achieving my aims here?

8

@s_ha_dum is right, the ajax plugin api is the way to go. I ran into this issue myself with a dynamic js file I was generating a little while ago.

Basically you would enqueue your style as follows:

wp_enqueue_style('dynamic-css',
             admin_url('admin-ajax.php').'?action=dynamic_css',
             $deps,
             $ver,
             $media);

Then create a function to load you're dynamic css file:

function dynaminc_css() {
       require(get_template_directory().'/css/dynamic.css.php');
       exit;
}

And add the ajax actions:

add_action('wp_ajax_dynamic_css', 'dynaminc_css');
add_action('wp_ajax_nopriv_dynamic_css', 'dynaminc_css');

where wp_ajax_* will fire the named function and have access to all fundamental wp functions For the front; end wp_ajax_nopriv_* executes non logged in visitors

Note that I've found the add_action('wp_ajax_custom_function', 'custom_function'), if in a plugin, must be in the plugin's base activation file else it will be ignored. There is terse note about it in the action reference doc. EDIT: I just tested this again, and cant repeat it. Apparently there is no such restriction.

This explanation is an expanded version of this codex forum post: http://Wordpress.org/support/topic/best-way-to-create-a-css-file-dynamically#post-4857705

  • Solution worked great. Thank you! I had to add header("Content-type: text/css"); to make sure the response content type is css. – Suraj Air Mar 7 '17 at 7:39
-1

I've created a library called wp-dynamic-css that allows you to generate CSS from dynamic content.

It violates your aim of not printing the CSS to the document head, but the benefit of that approach is that any changes made in the Customizer are updated immediately to show the changes take effect in real time.1

The library allows you to use a special syntax to represent variables inside your CSS file.

This is how it can be used:

// 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'my-dynamic-style', 'path/to/my-style.css' );

// 3. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my-dynamic-style', 'my_dynamic_css_callback' );

Now let's say you have a file called my-style.css with this code:

body {
   background-color: $body_bg_color;
}

If, for example, calling get_theme_mod('body_bg_color') returns the value #fff, then my-style.css will be compiled to:

body {
   background-color: #fff;
}

[1] As of version 1.0.1 this library supports both printing the compiled CSS to the document head, or loading it as an external stylesheet.

  • Every question I come across related to dynamic css queuing in WP, you're spamming this link. Promoting your own products is NOT an appropriate answer for SO. – Hybrid Web Dev Oct 27 '17 at 7:21
  • @HybridWebDev if my "product" is a free open-source library that solves the issue discussed in the question, then I don't see what's not appropriate here. Many answers in SO are like that. And I think your accusation of spamming is out of place. – Yoav Kadosh Oct 27 '17 at 10:11
  • I couldn't find anything regarding this in SO's guidelines, but I did find these though - meta.stackexchange.com/questions/15787/… and meta.stackoverflow.com/questions/298734/… – Yoav Kadosh Oct 28 '17 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.