371 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 1 year
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
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.

1506 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
OriginalEXE says
371 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
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 :)

1506 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
OriginalEXE says

Glad I could help :)

371 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 1 year
  • Has sold $1,000+ on Envato Market
  • Sells items exclusively on Envato Market
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!

1506 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
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');
371 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
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

1506 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by