WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
1  
I would suggest you start with getting your AJAX right per WordPress convention: codex.wordpress.org/AJAX_in_Plugins – s_ha_dum May 2 '14 at 16:31

@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

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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