-
Posts
-
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 🙂or maybe you could add a very cool improvment in a next version to output x-customizer-css-output to an external file ? 🙂
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
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.
txs, great tip
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.
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.
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…
Thanks for sharing Annoni.
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…
FYI I’m using the Ethos stack and child theme…
Hmmm…
From http://codex.wordpress.org/Child_Themes#Using_functions.php:
TIP FOR THEME DEVELOPERS. The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.:
if ( ! function_exists( ‘theme_special_nav’ ) ) {
function theme_special_nav() {
// Do something.
}
}
In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.————————-
Seems to me that conditional statement is needed in X-core’s functions if you want this trick to work as intended. Am I wrong?
Thanks for your feedback Lisa. We’ll forward this to our development department and update you the reason why this is not implemented and might implement it in a future release.
Awesome news!
While I’m not as good of a programmer as I used to be, I’m pretty sure this conditional should be added to the X Core functions to ensure any child functions can “overwrite” the parents without people having to hack into core.
We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!
