How can I use WordPress functions in my stylesheet?

Question

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.

wp_enqueue_style('my_style', plugin_dir_url(FILE) .'Includes/style.php'); — Ronny K
– Ronny K, Commented Jun 8, 2012 at 16:44
I’m pretty sure you don’t use that in your style.php. If the style file is not called by WordPress no WordPress function is available. — fuxia
– fuxia ♦, Commented Jun 8, 2012 at 18:09

fuxia · Accepted Answer · 2012-06-08 19:48:00Z

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:

Register an endpoint on 'init' with add_rewrite_endpoint(). Let’s name it 'phpstyle'.
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.
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'] . " */\n\n";

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.

+1 for porting this to WP. Short idea: get_query_var( 'phpstyle' ) AND ! defined( 'SHORTINIT' ) AND define( 'SHORTINIT', true ) to speed things up... and if then all the needed functions are available... — kaiser
– kaiser, Commented Dec 12, 2012 at 14:33
Great technique! I find the conditionals and hook jumbling in this answer terrible to read and understand. Here is a gist with cleaner split of the basic functionality. — kontur
– kontur, Commented Oct 17, 2024 at 6:33

majick · Accepted Answer · 2016-06-03 11:41:51Z

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');

When adding your code to my files, it still says undefined. This is my code: pastebin.com/BJaUWX1x — J. Doe
– J. Doe, Commented Jun 3, 2016 at 12:18
you don't need the ../../ on the wp-load.php path, the function given will find it for you as is... but like I said you do need to find and include whatever files you need that have the functions you are using, eg. get_background_image is in theme.php etc... as you add to the CSS you may need more so you will need to learn how to find them to use this method effectively and reliably. — majick
– majick, Commented Jun 4, 2016 at 1:08

Stack Exchange Network

How can I use WordPress functions in my stylesheet?

2 Answers 2

Your Answer

Linked

Hot Network Questions

How can I use WordPress functions in my stylesheet?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions