Edit style.css via theme customizer

admin管理员组

文章数量:1130349

Till now in my Wordpress themes, I was implementing few necessary styling options in theme customizer which would edit the CSS and override it by outputting that CSS to head inside <style> tags, for example here I implemented color picker and I output the styles if the default state is changed:

function dc_get_gradient_colors() {
    $first_color = get_theme_mod( 'primary_color_1' ); 

    if ( $link_color != '#000000' ) :
    ?>
        <style type="text/css">
            .main-color-1-color{
                color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-background-color{
                background-color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-border-color{
                border-color: <?php echo $link_color; ?> !important;
            }
        </style>
    <?php
    endif;
}
add_action( 'wp_head', 'get_gradient_colors' );

Is there any better way for doing this, including editing CSS file directly. I know that stylesheet can be in form of PHP file, so there I could put the conditionals depending on theme options. But is that the best way, or is there way to write to style.css from theme customizer?

Till now in my Wordpress themes, I was implementing few necessary styling options in theme customizer which would edit the CSS and override it by outputting that CSS to head inside <style> tags, for example here I implemented color picker and I output the styles if the default state is changed:

function dc_get_gradient_colors() {
    $first_color = get_theme_mod( 'primary_color_1' ); 

    if ( $link_color != '#000000' ) :
    ?>
        <style type="text/css">
            .main-color-1-color{
                color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-background-color{
                background-color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-border-color{
                border-color: <?php echo $link_color; ?> !important;
            }
        </style>
    <?php
    endif;
}
add_action( 'wp_head', 'get_gradient_colors' );

Is there any better way for doing this, including editing CSS file directly. I know that stylesheet can be in form of PHP file, so there I could put the conditionals depending on theme options. But is that the best way, or is there way to write to style.css from theme customizer?

• theme-customizer
• css

Share Improve this question asked Nov 11, 2018 at 23:33 UsceUsce 46711 gold badge44 silver badges2020 bronze badges 3

• 1 Note that writing to a file will involve file system access, which would bypass version control, and also reduce security for those who put WP on a read only file system. Can you ellaborate further on the problem you're trying to solve? Your question mostly focuses on solutions without explaining why it's an issue – Tom J Nowell ♦ Commented Nov 12, 2018 at 0:45
• Thanks @TomJNowell on clarifying such security issues on this. Actually this in this state everything is working, but I am looking for "better" way to implement stylesheet which is generated from theme customizer, then creating output to head of the page. Is outputting to head of the page, the only way to override properties form style.css, with options retrieved from theme customizer? – Usce Commented Nov 12, 2018 at 0:49
• You can override style.css by having CSS inline or in a file appear after it, with a higher specificity, that part isn't a WP thing. Since what you have already works I'd stick with it – Tom J Nowell ♦ Commented Nov 12, 2018 at 0:55

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

function my_enqueue_customizer_stylesheet() {
    wp_register_style( 'my-custom-css', get_template_directory_uri() . 'assets/css/customizer.css', NULL, NULL, 'all' );
    wp_enqueue_style( 'my-custom-css' );
}
add_action( 'customize_controls_print_styles', 'my_enqueue_customizer_stylesheet' );

Till now in my Wordpress themes, I was implementing few necessary styling options in theme customizer which would edit the CSS and override it by outputting that CSS to head inside <style> tags, for example here I implemented color picker and I output the styles if the default state is changed:

function dc_get_gradient_colors() {
    $first_color = get_theme_mod( 'primary_color_1' ); 

    if ( $link_color != '#000000' ) :
    ?>
        <style type="text/css">
            .main-color-1-color{
                color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-background-color{
                background-color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-border-color{
                border-color: <?php echo $link_color; ?> !important;
            }
        </style>
    <?php
    endif;
}
add_action( 'wp_head', 'get_gradient_colors' );

Is there any better way for doing this, including editing CSS file directly. I know that stylesheet can be in form of PHP file, so there I could put the conditionals depending on theme options. But is that the best way, or is there way to write to style.css from theme customizer?

Till now in my Wordpress themes, I was implementing few necessary styling options in theme customizer which would edit the CSS and override it by outputting that CSS to head inside <style> tags, for example here I implemented color picker and I output the styles if the default state is changed:

function dc_get_gradient_colors() {
    $first_color = get_theme_mod( 'primary_color_1' ); 

    if ( $link_color != '#000000' ) :
    ?>
        <style type="text/css">
            .main-color-1-color{
                color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-background-color{
                background-color: <?php echo $link_color; ?> !Important;
            }
            .main-color-1-border-color{
                border-color: <?php echo $link_color; ?> !important;
            }
        </style>
    <?php
    endif;
}
add_action( 'wp_head', 'get_gradient_colors' );

Is there any better way for doing this, including editing CSS file directly. I know that stylesheet can be in form of PHP file, so there I could put the conditionals depending on theme options. But is that the best way, or is there way to write to style.css from theme customizer?

• theme-customizer
• css

Share Improve this question asked Nov 11, 2018 at 23:33 UsceUsce 46711 gold badge44 silver badges2020 bronze badges 3

• 1 Note that writing to a file will involve file system access, which would bypass version control, and also reduce security for those who put WP on a read only file system. Can you ellaborate further on the problem you're trying to solve? Your question mostly focuses on solutions without explaining why it's an issue – Tom J Nowell ♦ Commented Nov 12, 2018 at 0:45
• Thanks @TomJNowell on clarifying such security issues on this. Actually this in this state everything is working, but I am looking for "better" way to implement stylesheet which is generated from theme customizer, then creating output to head of the page. Is outputting to head of the page, the only way to override properties form style.css, with options retrieved from theme customizer? – Usce Commented Nov 12, 2018 at 0:49
• You can override style.css by having CSS inline or in a file appear after it, with a higher specificity, that part isn't a WP thing. Since what you have already works I'd stick with it – Tom J Nowell ♦ Commented Nov 12, 2018 at 0:55

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

function my_enqueue_customizer_stylesheet() {
    wp_register_style( 'my-custom-css', get_template_directory_uri() . 'assets/css/customizer.css', NULL, NULL, 'all' );
    wp_enqueue_style( 'my-custom-css' );
}
add_action( 'customize_controls_print_styles', 'my_enqueue_customizer_stylesheet' );

本文标签： Edit stylecss via theme customizer