How can I use WordPress functions in my stylesheet?

I have my style.php file looking like this.

<?php  header('Content-Type: text/css');?>
#div{
    background:<?php  echo get_option('bgcolor');?>;
}

This does not work, but when I do this it works.

<?php  header('Content-Type: text/css');?>
#div{
    background: <?php  echo 'blue';?>;
}

What would be the problem?

This is the mainfile.php

 <?php 

    function test(){
    global get_option('bgcolor');?>

        <input type="text" id="bgcolor" name="post_popup_settings[bgcolor]" value="<?php echo get_option('bgcolor');?> " />
    <?php
}
    add_action('admin_head','test');

This is actually in the admin section.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

WordPress functions are available only if WordPress is loaded. If you call your style.php directly you cannot use a WordPress function.

One simple way to load WordPress for your PHP driven stylesheet is to add an endpoint to WordPress: a custom, reserved URL where you load your template file.

To get there you have to:

1. Register an endpoint on 'init' with add_rewrite_endpoint(). Let’s name it 'phpstyle'.
2. Hook into 'request' and make sure the endpoint variable 'phpstyle' is not empty if it is set. Read Christopher Davis’ excellent A (Mostly) Complete Guide to the WordPress Rewrite API to understand what’s going on here.
3. Hook into 'template_redirect' and deliver your file instead of the default template file index.php.

To keep things short I combined all three simple steps in one function in the following demo plugin.

Plugin PHP Style

<?php # -*- coding: utf-8 -*-
/*
 * Plugin Name: PHP Style
 * Description: Make your theme's 'style.php' available at '/phpstyle/'.
 */
add_action( 'init',              'wpse_54583_php_style' );
add_action( 'template_redirect', 'wpse_54583_php_style' );
add_filter( 'request',           'wpse_54583_php_style' );

function wpse_54583_php_style( $vars = '' )
{
    $hook = current_filter();

    // load 'style.php' from the current theme.
    'template_redirect' === $hook
        && get_query_var( 'phpstyle' )
        && locate_template( 'style.php', TRUE, TRUE )
        && exit;

    // Add a rewrite rule.
    'init' === $hook && add_rewrite_endpoint( 'phpstyle', EP_ROOT );

    // Make sure the variable is not empty.
    'request' === $hook
        && isset ( $vars['phpstyle'] )
        && empty ( $vars['phpstyle'] )
        && $vars['phpstyle'] = 'default';

    return $vars;
}

Install the plugin, visit wp-admin/options-permalink.php once to refresh the rewrite rules, and add a style.php to your theme.

Sample style.php

<?php # -*- coding: utf-8 -*-
header('Content-Type: text/css;charset=utf-8');

print '/* WordPress ' . $GLOBALS['wp_version'] . " */nn";

print get_query_var( 'phpstyle' );

Now visit yourdomain/phpstyle/. Output:

/* WordPress 3.3.2 */

default

But if you go to yourdomain/phpstyle/blue/ the output is:

/* WordPress 3.3.2 */

blue

So you can use the endpoint to deliver different stylesheets with one file depending on the value of get_query_var( 'phpstyle' ).

Caveat

This will slow down your site. WordPress has to be loaded two times for each visit. Don’t do it without aggressive caching.

Method 2

You could do this by loading the output via admin-ajax.php, but a better approach to that is to use WordPress SHORTINIT constant so you can load just what functions you need, but you will need to find and load wp-load.php to do this:

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

// faster load by reducing memory with SHORTINIT
define('SHORTINIT', true);

// recursively find WordPress load
function find_require($file,$folder=null) {
    if ($folder === null) {$folder = dirname(__FILE__);}
    $path = $folder.DIRECTORY_SEPARATOR.$file;
    if (file_exists($path)) {require($path); return $folder;}
    else {
        $upfolder = find_require($file,dirname($folder));
        if ($upfolder != '') {return $upfolder;}
    }
}

// load WordPress core (minimal)
$wp_root_path = find_require('wp-load.php');
define('ABSPATH', $wp_root_path);
define('WPINC', 'wp-includes');

At this point you will need to be sure include whatever other wp-includes files you need to get your theme options – which will vary depending on your how you are saving and thus accessing those. (You will probably need to add more to this list so that you do not get fatal errors – but as you are going, the fatal errors will tell you which files you need to add.) eg.

include(ABSPATH.WPINC.DIRECTORY_SEPARATOR.'version.php');
include(ABSPATH.WPINC.DIRECTORY_SEPARATOR.'general-template.php');
include(ABSPATH.WPINC.DIRECTORY_SEPARATOR.'link-template.php');

Then once you have all the functions you need, you can output the CSS using those functions… eg.

echo 'body {color:' . get_theme_mod('body_color') . ';}';
echo 'body {backgroundcolor:' . get_theme_mod('body_background_color') . ';}';
exit;

Then you can enqueue the file as normal, for example:

wp_enqueue_style('custom-css',trailingslashit(get_template_directory_uri()).'styles.php');

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0