1

I am busy with the Customizer from WordPress and that is working fine i only getting the output of the css in the style tags (inline) and i want it in the customizer.css file.

Does somebody know how i can add the CSS into the customizer.css?

<?php
    function customizerCSS() {
        wp_enqueue_style('custom-style', get_template_directory_uri() . '/customizer.css');

        $color = fw_get_db_customizer_option('body_background');

        $custom_css = '
                html, body {
                        background-color : ' . $color . ';
                }';
        wp_add_inline_style('custom-style', $custom_css );
    }
    add_action( 'wp_enqueue_scripts', 'customizerCSS' );
 ?>
5
  • In your Backend go to: Design ⇒ Custom CSS and add your Stylesheet there. Then it appears in custom.css If you don't mean this way, please clarify your question. Commented Feb 3, 2018 at 12:28
  • @suther where is Design ⇒ Custom CSS in default wp installation? Commented Feb 3, 2018 at 12:33
  • 1
    you want to add css from $custom_css variable to customizer.css file? Commented Feb 3, 2018 at 12:43
  • I want $custom_css getting outputed in customizer.css yes. Now i have just one value in it but it will be more so i dont want to get a whole inline CSS list included in the website. Commented Feb 3, 2018 at 12:47
  • 1
    @SamvelAleqsanyan, sorry had the wrong translation.... in English "design" is the Menu "Appearance": see: goo.gl/tkUGZL Commented Feb 5, 2018 at 10:32

1 Answer 1

2

You can use file_get_contents for getting all css written in the customizer.css file and file_put_contents for adding new css rules into customizer.css file.

Your code will be:

function customizerCSS() {
    $color = fw_get_db_customizer_option('body_background');

    $custom_css = '
                html, body {
                        background-color : ' . $color . ';
                }';

    $file = file_get_contents(TEMPLATEPATH.'/customizer.css');

    if (strpos($file, $custom_css) === false) { // for not rewriting file every time, when there is no changes
        $file .= $custom_css;
        file_put_contents(TEMPLATEPATH.'/customizer.css', $file);
    }

    wp_enqueue_style('custom-style', get_template_directory_uri() . '/customizer.css');
}
add_action( 'wp_enqueue_scripts', 'customizerCSS' );

We are getting all new css rules from $custom_css, everything from customizer.css and comparing them. If there is new css rules in the $custom_css which aren't exists in the customizer.css stylesheet, then we just writе them into file.

Edit:

Function below will override customizer.css file with values from $custom_css variable every time:

function customizerCSS() {
    $color = fw_get_db_customizer_option('body_background');

    $custom_css = '
                html, body {
                        background-color : ' . $color . ';
                }';

    file_put_contents(TEMPLATEPATH.'/customizer.css', $custom_css);

    wp_enqueue_style('custom-style', get_template_directory_uri() . '/customizer.css');
}
add_action( 'wp_enqueue_scripts', 'customizerCSS' );
Sign up to request clarification or add additional context in comments.

11 Comments

glad to help you
Can i ask you still one question? the scripts add everytime the new value but dont remove the old one. How can i fix that?
your $custom_css everytime changes? or new css rules added to old $custom_css values?
The user can change the value. And when it is changed it's add the new value to the CSS file but dont overwrite/delete the old one. So now i have 3 times a html,body background color in the file. (Changed it 3 times)
ok, then use code from updated answer. Your customizer.css file will contain only rules from last added $custom_css
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.