1

How can I load Additional CSS style manually in functions.php?

This is how I load my css files and js files:

function xxx_scripts() {

    // Load our CSS bundle.
    wp_enqueue_style('xxx-master-style', get_template_directory_uri() . '/assets/dist/bundle.min.css', array(), '1.0.0');

    // Load style.css.
    wp_enqueue_style('xxx-local-style', get_template_directory_uri() . '/style.css', array(), '1.0.0');

    // Load our JS bundle.
    wp_enqueue_script('cupola-script', get_template_directory_uri() . '/assets/dist/bundle.min.js', array(), '20150330');
}
add_action('wp_enqueue_scripts', 'xxx_scripts');

But what about Additional CSS under Appearance > Customise > Additional CSS?

For instance, I have added the css below under Appearance > Customise > Additional CSS:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.row.row-banner {
background-color: #000;
}

But the style above is not loaded.

In my HTML header:

<style type="text/css" id="wp-custom-css"></style>

It is not there.

Any ideas?

EDIT:

I found out that it is actually crashed with the function below that I have in functions.php:

// MINIFY JAVASCRIPT AND HTML FOR WORDPRESS WITHOUT A PLUGIN.
// http://setuix.com/minify-javascript-html-wordpress-without-plugin/
class WP_HTML_Compression
{
    // Settings
    protected $info_comment = true;

    // Variables
    protected $html;

    public function __construct($html)
    {
        if (!empty($html)) {
            $this->parseHTML($html);
        }
    }

    public function __toString()
    {
        return $this->html;
    }

    protected function bottomComment($raw, $compressed)
    {
        $raw = strlen($raw);
        $compressed = strlen($compressed);

        $savings = ($raw-$compressed) / $raw * 100;
        $savings = round($savings, 2);

        return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';
    }

    protected function minifyHTML($html)
    {
        require_once ("vendor/phpwee-php-minifier/phpwee.php");

        $compressed = PHPWee\Minify::html($html);
        // $compressed = PHPWee\Minify::css($compressed);
        // $compressed = PHPWee\Minify::js($compressed);
        return $compressed;
    }

    public function parseHTML($html)
    {
        $this->html = $this->minifyHTML($html);

        if ($this->info_comment) {
            $this->html .= "\n" . $this->bottomComment($html, $this->html);
        }
    }
}

function wp_html_compression_finish($html) {
    return new WP_HTML_Compression($html);
}

function wp_html_compression_start() {
    ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');

Any ideas why and how I can fix this?

  • 1
    The Additional CSS in the customiser has nothing to do with functions.php. All you need is wp_head() in the theme header. – Jacob Peattie Dec 20 '17 at 4:54
  • @JacobPeattie I have wp_head() in my theme header already but it shows nothing: <style type="text/css" id="wp-custom-css"></style>. – laukok Dec 20 '17 at 4:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.