360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
PixelStores says

Hi There,

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

https://gist.github.com/2968549

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

153 posts
  • Exclusive Author
  • Has been a member for 1-2 years
  • Sold between 1 000 and 5 000 dollars
wpminima says

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.

1400 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says
360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
PixelStores says

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.


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 :)

1400 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

Glad I could help :)

360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
PixelStores says

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

153 posts
  • Exclusive Author
  • Has been a member for 1-2 years
  • Sold between 1 000 and 5 000 dollars
wpminima says


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.


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!

1400 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

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');
360 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Has been a member for 4-5 years
  • New Zealand
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
PixelStores says

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

1400 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

I tried it and it works for me.

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

by
by
by
by
by
by