Forums

WordPress › Support » Themes and Templates

[resolved] Using Theme Options in CSS (6 posts)

  1. equalmark
    Member
    Posted 2 years ago #

    I am trying to offer some styling options in my theme options page. I have created theme options for the body color and this is retrievable with <?php echo get_option('st_bgcolor'); ?> which works fine when placed in my index.php file for example, but fails in my stylesheet which I have below:

    <?php header("Content-type: text/css"); ?>
body {
	background-color: #<?php get_option('st_bgcolor'); ?>;
}

    I have also included the following in the header.php page to call the new stylesheet:

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-options.php" type="text/css" media="screen" />

    The stylesheet works and styles the page until I add the <?php echo get_option('st_bgcolor'); ?> which is where it fails.

    Anybody any ideas why? Or perhaps how to fix it? Or even another way of doing this?

    Thanks,

  2. Jeremy Clark
    Moderator
    Posted 2 years ago #

    It's because the wordpress functions aren't available on your style-options.php file because it isn't included are called in any way by wordpress. The best way is to use a custom query in wordpress. http://willnorris.com/2009/06/wordpress-plugin-pet-peeve-2-direct-calls-to-plugin-files

    I've adapted this for use in themes:
    http://clark-technet.com/2010/01/wordpress-theme-developers-tip-call-dynamic-css-the-right-way

  3. equalmark
    Member
    Posted 2 years ago #

    Thanks for the quick response.

    So that code that is on this page is included in the themes functions.php?

  4. equalmark
    Member
    Posted 2 years ago #

    I understand why the php file will not accept WP functions however studying the links you have provided I am not able to understand how to get the style-options.php file to accept WP functions.

    Could you explain a little further how this is done?

    Thanks

  5. alchymyth
    The Sweeper
    Posted 2 years ago #

    could be what jeremy is talking about, and also, imho, get_option does not actually output anything, it needs to be echoed:
    http://codex.wordpress.org/Function_Reference/get_option

  6. equalmark
    Member
    Posted 2 years ago #

    OK I have finally worked this one out. You need to add the following to your themes functions.php file:

    <?php
add_filter('query_vars', 'add_new_var_to_wp');
function add_new_var_to_wp($public_query_vars) {
    $public_query_vars[] = 'my_theme_custom_var';
    //my_theme_custom_var is the name of the custom query variable that is created and how you reference it in the call to the file
    return $public_query_vars;
}
add_action('template_redirect', 'my_theme_css_display');
function my_theme_css_display(){
    $css = get_query_var('my_theme_custom_var');
    if ($css == 'css'){
        include_once (TEMPLATEPATH . '/style-options.php');
        exit;  //This stops WP from loading any further
    }
}
?>

    Then call the php css file with the following in your themes header.php file inside <head>

    <link rel="stylesheet" href="<?php bloginfo('url'); ?>/?my_theme_custom_var=css" type="text/css" media="screen" />

    You should then be able to create a file called style-options.php which will be able to accept WP functions.

    Thanks to jeremyclark13

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags