Using Theme Customizer & External style.php?

Hi There,

How do you integrate WordPress 3.5 Theme Customizer to output the styles? I’m working with the following,

I’m displaying the output using the action wp_head,

function example_embed_customizer() {
echo '<style type="text/css">';
echo '</style>';
}
add_action( 'wp_head', 'example_embed_customizer' ); 

The problem i’m trying to get my head round is, i would have to pretty much strip the css in my original style.css stylesheet and be left with the layout styles, all the colours e.t.c. would be echoed in the wp_head.

So when the user activates the theme, the theme is shown at its bare minimum, what i mean by this is, all of the colour styles are shown in the wp_head but because the user hasn’t saved and published the theme customizer the wp_head style output is wrong, even when i use default options for the customizer the user must make an edit to show the correct css/styles.

How do you output the css? After changing the original style.css and moving them to show in the header i have ended up with alot of code and quite frankly its a mess.

I would be interested in knowing what your approach is to the Theme Customizer and displaying the results.

Cheers

We let our style.css be as it is, then we added the styles that could be changed inside the functions.php file to output in the Wphead and made them more specific. This way the custom style will be accepted before the style.css style because it is more specific.

Maybe there is a more ‘correct’ way to do this, but it works great and requires little to none adjustments

Note: #wrap is our main wrap around the body of our theme.

Try using this function:

wpminima said
We let our style.css be as it is, then we added the styles that could be changed inside the functions.php file to output in the Wphead and made them more specific. This way the custom style will be accepted before the style.css style because it is more specific. #wrap #post-pagination a:hover{color: <?php echo $accent_color; ?>;} and the original code was: #post-pagination a:hover

Maybe there is a more ‘correct’ way to do this, but it works great and requires little to none adjustments

Note: #wrap is our main wrap around the body of our theme.

Thats an interesting way using the #wrap at least then you won’t have to use !important after every style, i would never had thought of that. One thing that does concern me though is having all the css in the head of the theme.

OriginalEXE said
Try using this function: http://codex.wordpress.org/Function_Reference/wp_add_inline_style

You sir may have found the perfect solution. I will give it a try. Thanks

Glad I could help

Ok i ran into a problem, i’m using the following code,

function my_styles_method() {
    wp_enqueue_script(
        'custom-style',
        get_template_directory_uri() . '/css/skin.css'
    );
        $options = get_option('viroshop_theme_options');
        $topmargin = $options['viro_top_margin'];
        $custom_css =     "#header {
                            margin-top: {$topmargin};
                           }";
        wp_add_inline_style('custom-style',$custom_css);
}
add_action('wp_enqueue_scripts', 'my_styles_method');

and in my css file i have this,

#header {
    margin-top: 55px;
}

No changes have been made to the top margin of my header element. Checking the error using chrome the skin.css stylesheet has been loaded and in the stylesheet i see this,

#header {
Uncaught SyntaxError: Unexpected token ILLEGAL
margin-top: 55px;
}

Any ideas what could be causing the problem?

Cheers

PixelStores said

wpminima said
We let our style.css be as it is, then we added the styles that could be changed inside the functions.php file to output in the Wphead and made them more specific. This way the custom style will be accepted before the style.css style because it is more specific. #wrap #post-pagination a:hover{color: <?php echo $accent_color; ?>;} and the original code was: #post-pagination a:hover

Maybe there is a more ‘correct’ way to do this, but it works great and requires little to none adjustments

Note: #wrap is our main wrap around the body of our theme.

Thats an interesting way using the #wrap at least then you won’t have to use !important after every style, i would never had thought of that. One thing that does concern me though is having all the css in the head of the theme.

OriginalEXE said
Try using this function: http://codex.wordpress.org/Function_Reference/wp_add_inline_style

You sir may have found the perfect solution. I will give it a try. Thanks

We place it in our functions file and hook it to the wp_head So no cluttery header file!

Try this:

function my_styles_method() {
    wp_enqueue_script(
        'custom-style',
        get_template_directory_uri() . '/css/skin.css'
    );
        $options = get_option('viroshop_theme_options');
        $topmargin = $options['viro_top_margin'];
        $custom_css =     "#header {
                            margin-top: $topmargin;
                           }";
        wp_add_inline_style('custom-style',$custom_css);
}
add_action('wp_enqueue_scripts', 'my_styles_method');

OriginalEXE said
Try this:

function my_styles_method() {
    wp_enqueue_script(
        'custom-style',
        get_template_directory_uri() . '/css/skin.css'
    );
        $options = get_option('viroshop_theme_options');
        $topmargin = $options['viro_top_margin'];
        $custom_css =     "#header {
                            margin-top: $topmargin;
                           }";
        wp_add_inline_style('custom-style',$custom_css);
}
add_action('wp_enqueue_scripts', 'my_styles_method');

Thanks original for the code, however i’m still receiving the unexpected token error and i’m not sure why…

Would like to use the function as it seems to be the right choice, hmm kinda lost for ideas.

Cheers

I tried it and it works for me.

Try var_dump on $topmargin, maybe that does not contain what you think it should.