Accessing global variable in “CSS” (style.php)

I’m doing a style.php CSS file so I can use some dynamic variables in the CSS within a WordPress installation:

<?php header("Content-type: text/css"); ?>

and so on.

Read More

How can I access a global variable from within the style.php file or pass a variable to it?

The code I’m trying to get to work within the CSS is like

$maincolor = $cap->br_main_color;

Also:

  • Ignore the caching issue. This is just a personal project.
  • Passing the variable in the link to the stylesheet is too complex for this (in my opinion).

EDIT: As a bit more explanation: What I’m doing is generating an entire theme based of a number of colors and calculating shades for hover effects etc. Roughly 50% of the styles have some PHP within them. Everything works just fine if I manually input colors to style.php but I’m trying to make it even simpler for less tech-savvy people and use a color picker.

Related posts

Leave a Reply

2 comments

  1. Here’s an alternative solution to embedding php in a WordPress .css stylesheet (the usefulness i’m not sure on) that doesn’t require manipulation of the WordPress core.

    Simply make the php embedded css file in your theme dir containing the usual code:


    embedded_style.php

    /* define document as css*/
    <?php header("Content-type: text/css"); ?>
    
    /* Example php variable declaration and function call */
    <?php $body_color = get_color(); ?>
    
    /* Begin php embedded css code below here */
    body {
        background: none;
        color: <?php echo $body_color ?>;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 10pt
    }
    

    Then import this dynamic file into your themes style.css so that you don’t have to modify the WordPress core.


    style.css

    /*  
    Theme Name: Mytheme
    Version: 1.0
    Description: This theme has php embedded css
    Author: You
    */
    @import url(embedded_style.php);
    /* Normal CSS below as required */
    

    my 2 cents

    The genesis of this snippet was an attempt to allow for varying directory names when importing css from a parent-theme to my child. I didn’t like the idea of modifying core wordpress files however as most functions/hooks are not defined at the style.css runtime to interrupt the call it was necessary to find an alternate method.
    In the end I haven’t used this for the same reasons I couldn’t interrupt the file-call (too early to use wordpress convenient constants etc.), however hopefully it will come in useful for someone else.

  2. To access the wordpress functions you need to include the following lines on top of your style.php file.

    define('WP_USE_THEMES', false);
    require('./wp-blog-header.php');
    

    The first line tells wordpress not to run theme related processes and the second line runs the wordpress engine. After this point you have access to the wordpress functions and the global variables.