Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

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.

like image 790
Anders H Avatar asked Sep 26 '10 03:09

Anders H


People also ask

How do I declare a global variable in CSS?

First of all: CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared. To create a variable with global scope, declare it inside the :root selector.

How can access global variable in PHP class?

Accessing global variable inside function: The ways to access the global variable inside functions are: Using global keyword. Using array GLOBALS[var_name]: It stores all global variables in an array called $GLOBALS[var_name]. Var_name is the name of the variable.

How can store global variable in PHP?

$GLOBALS is a PHP super global variable which is used to access global variables from anywhere in the PHP script (also from within functions or methods). PHP stores all global variables in an array called $GLOBALS[index]. The index holds the name of the variable.

Can I use PHP in CSS?

It's not possible natively as PHP is a server-side language, and CSS is a client-side resource. PHP has been and done its job by the time any CSS is rendered.


1 Answers

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.

like image 133
tonyest Avatar answered Sep 24 '22 15:09

tonyest