1

I am literally pulling my hair out trying to figure this out. I have been at it for almost 12 hours now.

Being new to PHP and theme development I am having a hard time understanding how to get theme_options('value'); to display when putting in a PHP stylesheet.

I have taken an example off a blog post I read here using the parse_request method.

code in header.php

<link rel='stylesheet' type='text/css' href="<?php echo get_template_directory() ?>/css/theme_styles.php?my-custom-content=css" />

and in theme-styles.php

<?php
    add_action( 'parse_request', 'my_custom_wp_request' );
    function my_custom_wp_request( $wp ) {
        if ( !empty( $_GET['my-custom-content'] ) && $_GET['my-custom-content'] == 'css' ) {
            # get theme options
            header( 'Content-Type: text/css' );
?>
        a { color: <?php echo get_option('some_other_option') ?> !important; }
<?php
        exit;
        }
    }
?>

That's all it says to do in the post so now I am lost. I have tried many other solutions that also did not work. Any help is appreciated!

1

Although @Jevuska did solve my issue, I have found a much easier solution to adding dynamic CSS from my theme options page. Here we go!

Add this to functions.php

add_action('wp_head', 'my_custom_css');
function my_custom_css(){
require_once( get_template_directory() . '/css/theme-styles.php' );
}

Now you can treat theme-styles.php as a normal CSS stylesheet

<style type="text/css">
a {
    color: <?php echo get_option('some_other_option');?> !important;
}
</style>

Done! It was that simple.

  • Surely there are implications to this method and not using wp_enqueue_style? – Jacob Raccuia Apr 21 '17 at 22:47
  • Not for nothing, but this doesn't even work for me! Maybe I did something wrong but.. – Jacob Raccuia Apr 21 '17 at 22:57
0

CSS customizable by manipulate parse_query

@Scott Reinmuth, I think you misdirection about those tutorials, yes you use parse_request method.

If you follow, this code is a hook with function and you need to put in functions.php

<?php
    add_action( 'parse_request', 'my_custom_wp_request' );
    function my_custom_wp_request( $wp ) {
        if ( !empty( $_GET['my-custom-content'] ) && $_GET['my-custom-content'] == 'css' ) {
        # get theme options
        header( 'Content-Type: text/css' );
?>
a {color: <?php echo get_option('some_other_option'); ?> !important;}
<?php
        exit; 
        }
    }
?>

And in header.php with this code ( without file /css/theme_styles.php ) to make a request with parameter my-custom-content and value css. Thats why we need a hook with function to make it work.

<link rel='stylesheet' type='text/css' href="<?php bloginfo( 'url' ); ?>/?my-custom-content=css" />

we done here.


BUT if you need to use css in out side function, then you create custom-css.php. And your function in functions.php will be like this:

add_action( 'parse_request', 'my_custom_wp_request' );
function my_custom_wp_request( $wp ) {
    if ( !empty( $_GET['my-custom-content'] ) && $_GET['my-custom-content'] == 'css' ) {
    # get theme options
       header( 'Content-Type: text/css' );
       require dirname( __FILE__ ) . '/css/custom-css.php';
       exit;
    }
}       

and inside your custom-css.php

a {
  color: <?php echo get_option('some_other_option'); ?> !important;
} 

In header.php still the same above.


Similar approach with validate

My similar approach with validate data. We just use file functions.php theme to add this code.

/** Enqueue style for custom css
 *  we use parameter wpse_css and ( int ) 1 as value
 *
 */
add_action( 'wp_enqueue_scripts', 'wpse221867_enqueue_style', 99 );
function wpse221867_enqueue_style()
{
    /** check url ssl */
    $url = ( is_ssl() ) ?
            home_url( '/', 'https' ) : home_url( '/' );

    /** Register and enqueue wpse_style_php
     *  Build query with wpse_css as parameter, 1 as number to validation
     *
     */
    wp_register_style( 'wpse_style_php',
        add_query_arg( array(
            'wpse_css' => ( int ) 1
        ), $url ),
        array(), //your style handled
        null, //remove wp version
        'all' //media
    );
    wp_enqueue_style( 'wpse_style_php' );
}

/** Fire parse_request with function wpse221867_print_css
 *  Generate css in PHP
 *
 *  @return string CSS Content
 */
add_action( 'parse_request', 'wpse221867_print_css' );
function wpse221867_print_css()
{
    /** validate query on input */
    $css = filter_input( INPUT_GET, 'wpse_css', FILTER_VALIDATE_INT );

    if ( ! $css || ( int ) 1 != $css )
        return;

    ob_start();
    header( 'Content-type: text/css' );

    /** wpse_option_settings contain css in an array i.e
     *  array( 'wpse_css_content' => 'a{color:#ececec}' )
     *
     */
    $options = get_option( 'wpse_option_settings' );
    $raw_css = ( isset( $options['wpse_css_content'] ) )
                ? $options['wpse_css_content'] : '';

    /** sanitize for output */
    $content = wp_kses( $raw_css,
        array( '\'', '\"' )
    );
    $content = str_replace( '&gt;', '>', $content );
    echo $content; // output
    die();
}

IMHO, this method not recommended, especially for performance issue. Just use static css file, find another way to make it your css customizable, please take a look wp_add_inline_style ( example available ) and get_theme_mod.

  • What alternative would you recommend? I have recently started looking at wp_add_inline_style but have yet to get it to work. would this be a better method? – Scott Reinmuth Mar 28 '16 at 15:26
  • yes, it is recommended to use with get_theme_mod. – Jevuska Mar 28 '16 at 21:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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