Move inline CSS to external file – Themeco Community https://theme.co/archive/forums/topic/move-inline-css-to-external-file/feed/ Sat, 11 Oct 2025 09:16:38 +0000 https://bbpress.org/?v=2.6.14 en-US https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-73503 <![CDATA[Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-73503 Fri, 25 Jul 2014 18:59:57 +0000 GDM-Pixel Dear support,

I’m trying to improve SEO on my website.

But I’m having a bit of trouble with something :

the customizer add a lot of inline CSS into the head. I think it’s from /x/framework/functions/global/admin/customizer/output.php

The file call the content of the “output” folder above it.

Is there a way to move all thoses CSS to an external file ? It will reduce the text to code ratio and will be much more efficient for SEO purpose. I tried earlier with a plugin called autoptimize, but it doesn’t work with W3 Total cache…

Is there a way to modify or override the function file so that output.php doesn’t load, and so that I can add the content of x-customizer-css-output to my regular stylesheet ?

my config :

Wordpress 3.9.1
X theme 2.2
shortcode 2.3.2
Well, in fact, everything is up to date 🙂

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-73505 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-73505 Fri, 25 Jul 2014 19:03:18 +0000 GDM-Pixel or maybe you could add a very cool improvment in a next version to output x-customizer-css-output to an external file ? 🙂

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-73856 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-73856 Sat, 26 Jul 2014 23:34:19 +0000 Kosher K Hey Annoni,

You can use a Child theme and add the CSS directly in child theme style.css instead of customizer CSS.

You can follow this guide on how to set-up a child theme

Cheers

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-74118 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-74118 Sun, 27 Jul 2014 21:08:33 +0000 GDM-Pixel Hey Support,

I already have a child theme. I m referring here to the enormous amount of CSS code that is in the <head> section of a page, wich id is x-customizer-css-output

The code included on every page is the css entered in the database by the customizer.

Every time a user change some parameters in the customizer, the css code is updated, then downloaded by Php and output on pages.

But it’s quite big, and it’s very bad for text to code ratio.

So, as I found other people with the same issue, I checked at it.

If some other people on the forum wants to get rid of that enormous chunk of CSS in their head, please read the following (but please be aware that any modification done in the customizer won’t work anymore : you’ll have to uncomment the last line of /x/framework/functions/global/admin/customizer/output.php to see the css changes, copy it and paste it again in your child theme css). I guess this is for advanced users…

Here’s the trick :

  • The code is generated by /x/framework/functions/global/admin/customizer/output.php, so find it using your ftp client
  • Copy the content of this function to your function.php in your Child theme folder.
  • Display source code of your page on your prefered browser
  • Copy the css content of x-customizer-css-output (it’s in the head section of your html code) and paste it in your child theme css

Comment the last line of your functions.php file like this : //add_action( 'wp_head', 'x_customizer_options_output_css', 9998, 0 );

This will prevent Php to add the big css output in your head.

Did it’s magic : no more “x-customizer-css-output” on my page. But I repeat : you won’t be able to use the customizer like before. It’s a tips for people who wants to improve their SEO on a site that is fully designed.

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-74129 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-74129 Sun, 27 Jul 2014 22:14:31 +0000 Andrea G txs, great tip

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-74621 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-74621 Tue, 29 Jul 2014 01:31:20 +0000 Christian Thanks for sharing Annoni. We are improving performance of X overtime. For now, we are trying to balance everything. Please stay tuned for future updates.

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-77024 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-77024 Sun, 03 Aug 2014 06:48:06 +0000 TygrScott This just makes the site load blank now. I really wish x-customizer-css-output was sent to an external file somehow. It’s a huge block of code.

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-77162 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-77162 Sun, 03 Aug 2014 21:51:09 +0000 GDM-Pixel TygrScott, you may have a blank page cause there s a typo in your function.php file

If you haven’t edit this file yet, it should look like this : 

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// FUNCTIONS/GLOBAL/ADMIN/CUSTOMIZER/OUTPUT.PHP
// -----------------------------------------------------------------------------
// Sets up custom output from the Customizer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Customizer Options CSS Output
// =============================================================================

// Customizer Options CSS Output
// =============================================================================
 
function x_customizer_options_output_css() {

  $outp_path = get_template_directory() . '/framework/functions/global/admin/customizer/output';

  require_once( $outp_path . '/variables.php' );

  ob_start();

  ?>

  <style id="x-customizer-css-output" type="text/css">

    <?php

    require_once( $outp_path . '/' . $x_stack . '.php' );
    require_once( $outp_path . '/base.php' );
    require_once( $outp_path . '/masthead.php' );
    require_once( $outp_path . '/buttons.php' );
    require_once( $outp_path . '/widgets.php' );
    require_once( $outp_path . '/gravity-forms.php' );

    ?>

  </style>

  <?php

  $css = ob_get_contents(); ob_end_clean();

  //
  // 1. Remove comments.
  // 2. Remove whitespace.
  // 3. Remove starting whitespace.
  //

  $output = preg_replace( '#/\*.*?\*/#s', '', $css );            // 1
  $output = preg_replace( '/\s*([{}|:;,])\s+/', '$1', $output ); // 2
  $output = preg_replace( '/\s\s+(.*)/', '$1', $output );        // 3

  echo $output;

}
 
//add_action( 'wp_head', 'x_customizer_options_output_css', 9998, 0 );

But first, try to just add “//” at the bottom line of /x/framework/functions/global/admin/customizer/output.php and refresh your page

You won’t see the big CSS output anymore and your layout will be upside down :p

Add the content of /x/framework/functions/global/admin/customizer/output.php in your theme child function.php file will tell Php to overcharge the original function by the new one. All I did is comment the last line, the one that add the output in the head…

And I copied the content of the CSS output directly in my child theme css…

That’s it, it works, and it’s not a lot of coding…

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-77272 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-77272 Mon, 04 Aug 2014 03:43:30 +0000 Christian Thanks for sharing Annoni.

]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-97290 <![CDATA[Reply To: Move inline CSS to external file]]> https://theme.co/archive/forums/topic/move-inline-css-to-external-file/#post-97290 Wed, 03 Sep 2014 03:31:37 +0000 Lisa S Help!

When I do this, I get a PHP Fatal error: Cannot redeclare x_customizer_generated_css_output() previously declared in /home/…/wp-content/themes/x-child-ethos/functions.php:11) in /home/…/wp-content/themes/x/framework/functions/global/admin/customizer/output.php on line 56.

Any ideas?

I thought you could override a core function in the child theme’s functions.php. I realize I could delete the function in the X theme core, but when I upgrade X it’s going to come back to bite me again, and again…

]]>