I am using SMOF options to control variables in the backend. As it is just now I have the css options being generated in the header file and they work, however I wish to add them to a style.php.

I have set this up however the variable data is not being displayed and the css options are empty.i.e

.site-header, .header-bar {

I presume it is the global $data; call that is incorrect. How would I fix this?


/* Body Styling */
body {
    background:<?php global $data; echo $data['body_background'];?>;
    background-image:url(<?php global $data; echo $data['body_background_background']; ?>);

a {
    color:<?php global $data; echo $data['link_color'];?>;

a:hover {
    color:<?php global $data; echo $data['link_color_hover'];?>;

html,body {
    font-family:<?php global $data; $arraytype = $data['typography_body']; $stringtype=implode(",",$arraytype); echo $stringtype;?>; 
    color:<?php global $data; echo $data['font_color_select'];?>;
    font-size:<?php global $data; echo $data['font_size_select'];?>;

h1,h2,h3,h4 {
    font-family:<?php global $data; $arrayheading = $data['typography_h1']; $stringheading=implode(",",$arrayheading); echo $stringheading; ?>

/* General Styling */
.singlebutton,.tags-button a,.contactbutton input,#commentsubmit,.btn-standard-blog,.search-submit {
    background-color:<?php global $data; echo $data['button_color_select'];?>;
    color:<?php global $data; echo $data['button_color_text'];?>;

.singlebutton:hover,.tags-button a:hover,.contactbutton input:hover,#commentsubmit:hover,.btn-standard-blog:hover,.search-submit:hover {
    background-color:<?php global $data; echo $data['button_color_hover'];?>;
    color:<?php global $data; echo $data['button_color_text'];?>;



wp_enqueue_style( 'albaband-dynam-css', get_template_directory_uri() . '/includes/css/style.php' );


2 Answers 2


The easiest way to add dynamic CSS is to put it inside a callback and hook the callback into the template, e.g. via wp_head (or wp_print_styles).

You've not posted your code in full context, so you will need to modify to suit your specific needs. That said, here's the basic principle:


function wpse_129259_enqueue_dynamic_css() {
    // Grab your variable
    global $data;
<style type="text/css">
a {
    color:<?php echo $data['link_color'];?>;


add_action( 'wp_head', 'wpse_129259_enqueue_dynamic_css' );

Using style.php

You can put your dynamic CSS in its own PHP file, then simply include it inside your callback. e.g.:

function wpse_129259_enqueue_dynamic_css() {
    // Include dynamic CSS file
    include( get_template_directory() . '/style.php' );
add_action( 'wp_head', 'wpse_129259_enqueue_dynamic_css' );
  1. wp_enqueue_style means you have to add a .css format.
  2. wp_enqueue_script means you have to add a .js format.

In this case, you want to add php format. You have to call in your main php file (index.php, header.php or etc) not in functions.php.

Use this get_template_part() or require_once. I advice you to put in header.php.

  • using require_once imports the file as is and not as a CSS file Jan 10, 2014 at 13:17
  • you can follow like Chip Bennet said. It should be hook in. I want to tell you about the hook, but I think it would be make you confuse.
    – ucon89
    Jan 10, 2014 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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