Load WordPress Theme Customizer CSS via external CSS file? #116

huphtur opened this Issue Jun 30, 2014 · 8 comments


None yet

4 participants

huphtur commented Jun 30, 2014

Looking at the HTML output of the theme, it seems that the WordPress Theme Customizer CSS is inserted internally (embedded on every page). Would it be possible to load this via an external CSS file?

I searched around but haven't found any solutions (nor plugins) for this. Am I the only one silly enough to care about this? It could potentially result in a slight performance improvement right?

raamdev commented Jun 30, 2014

The Theme Customizer echos the CSS dynamically to apply any custom changes you've made (via the Theme Customizer) for things like font color, options, etc.

So, what would be needed, is a separate PHP file (e.g., custom-css.php) that loads any Theme Customizer changes and echos the CSS for those customizations. That PHP file could then be enqueued like a normal CSS file:

wp_enqueue_style( 'wp-customizer-css', get_template_directory_uri() . '/custom-css.php', array(), '1.5.1' );

It would then show up in the page HTML something like this:

<link rel='stylesheet' id='wp-customizer-css'  href='...wp-content/themes/independent-publisher/custom-css.php' type='text/css' media='all' />

See also: http://css-tricks.com/css-variables-with-php/

@raamdev raamdev added the enhancement label Jun 30, 2014
@raamdev raamdev modified the milestone: Next Release Sep 2, 2014

Hi Raam,

Great theme, I'm very satisfied with it and would like to thank you for your hard work on it.

I too would be interested in loading the theme customizer CSS which appears in-line via an external CSS file if possible. Will this enhancement be included in the next release?

raamdev commented Mar 30, 2015

@nathannicholls Yes, I'll get this done for the Next Release. :-)

raamdev commented May 21, 2015

@huphtur @nathannicholls The Theme Customizer CSS is now loaded via an external PHP file, which cleans up the main HTML source a bit. :-) I also have the dynamically-generated CSS loading compressed, so that should save on some bandwidth as well.

This will go out with the next theme update.

@raamdev raamdev closed this May 21, 2015

Thanks @raamdev, great work :)


function bluth_custom_css() {
global $blu_css_options;

$blu_css_options = array(
'custom_css'                    => html_entity_decode(of_get_option('custom_css')),


<style type="text/css"> /* CSS */ blockquote{ width: !important; color: ; background: !important; } blockquote p{ font-size: !important; color: ;} blockquote.style1 { font-style: italic; width: !important; margin: 0.25em 0; padding: 1.25em 20px !important; line-height: 1.45 !important; position: relative; color: ; background: !important; margin-left:20px; margin-right: 0; } blockquote.style1 p{ font-size: !important; font-style: italic; line-height: 1.45 !important; position: relative; color: ;} @media screen and (min-width: 824px) { .mwidget{ display:none !important; } } @media all and (max-width:824px) { .adlinks { display:none !important; } } .mwidget, .mwidget p { color: !important; width:98%; display: block; margin: 20px 0 0 20px; } .mwidget a, .mwidget a:hover { color: !important ; text-decoration: !important; } body{ background: ; background-size: ; } h1, h2, h3, h4, h5, h6, .widget_calendar table > caption{ letter-spacing: ; } a.menu-brand:hover, a.brand-image:hover{ background-color: !important; } .brand-text span, .brand-text, .brand-image { color: !important; background-color: !important; } .header-bg{ background:url(""); background-repeat: no-repeat; background-position: center center; background-size: cover; width:100%; margin-top: 50px; } .box { background: !important; } #side-bar .widget-head, #footer-body .widget-head{line-height: !important;} #side-bar .widget-head { background-color: !important; } #side-bar ul li { background:url(""); background-repeat:no-repeat; padding: 0px 0 0px 20px; margin: 0.5em 0 0.5em 0; line-height: 1.5em; background-position: 4px 8px; } #side-bar ul li:hover { background:url("")"; background-repeat:no-repeat; padding: 0px 0 0px 20px; } .container{ width: px; } #masthead a, .menu-main, .menu-main ul, .menu-main a, .menu a{ color: !important; } #masthead .menu-main a:hover, .menu a:hover{ background: ; border-color: !important; color: !important; } /* THEME COLOR */ .nav > li.open > a, .nav > li > a:hover, .nav > li.open > a:hover, .nav > li > a:focus, .nav > li.open > a:focus, .nav > li.open > a:focus, .nav > li.open > a span, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color:!important; } .nav li a:hover .caret, .nav li.open a .caret, .nav li.open a:hover .caret, .nav li.open a:focus .caret{ border-bottom-color:; border-top-color:!important; } .top-color, .top-line, .nav-line,.widget_tag_cloud .tagcloud,.gallery-item a:after,article.type-portfolio .moretag, article.type-portfolio .more-link{ background-color:!important; } .top-color, .top-line, .nav-line,.widget_tag_cloud .tagcloud a:hover,.gallery-item a:after,article.type-portfolio .moretag:hover,article.type-portfolio .more-link:hover{ background-color:!important; } .site-footer a, #footer-body a, .site-footer a:hover, #footer-body a:hover{ color:!important; } .dropdown-menu{ border-top: 2px solid !important; } .entry-content a, .entry-container a{ text-decoration:!important; } .entry-content a, .entry-container a{ text-decoration:!important; color: !important; } .entry-content a:hover, .entry-container a:hover, .entry-container a:hover, a:hover, a:focus { text-decoration: !important; color: !important; } .pagination > a{ border-color: !important; } .bl_tabs ul li .tab_text a, .bl_tabs ul li .tab_text a, .textwidget ul li a{ text-decoration: !important; color: !important; } .bl_tabs ul li .tab_text a:hover, .bl_tabs ul li .tab_text a:focus, .textwidget ul li a:hover{ text-decoration: !important; color: !important; } .bl_tabs ul li .tab_text a span, a{ color: !important; } .custom-logo span{ font-size:!important; color: !important; opacity:!important; } .entry-content h1{font-size:!important; color:!important; } .entry-content h2, .widget-body h2{font-size:!important; color:!important; } .entry-content h3{font-size:!important; color:!important; } .entry-content h4{font-size:!important; color:!important; } h3.widget-head, .textwidget h3, .widget-body h3, #footer-widget h3{ font-size:!important;} .textwidget h3, .widget-body h3, #footer-widget h3{font-weight:normal; text-align: left; padding-left: 15px; } .widget-body h2{ text-align: left; padding-left: 15px;} #side-bar ul li a, .widget_recent_entries li a, .widget_nav_menu ul li a, .widget_categories li a, .widget_recent_comments li a, .widget_pages li a, .widget_meta li a, .widget_rss li a, .widget_archive li a { font-size:!important; color:!important; text-decoration:!important; } #side-bar ul li a:hover, .widget_recent_entries li a:hover, .widget_nav_menu ul li a:hover, .widget_categories li a:hover, .widget_recent_comments li a:hover, .widget_pages li a:hover, .widget_meta li a:hover, .widget_rss li a:hover, .widget_archive li a:hover { text-decoration:!important; } .entry-content{ font-size: ; line-height:; } .entry-content, .entry-content p, p{ color: ; } .widget-head, .textwidget h3, #footer-widget h3 { color: !important; } /* HEADER SIZE */ .menu-main{ height: px; } .brand, .menu-brand, .open-menu{ line-height: px; } .menu-wrapper{ top: px; } /* #main{ padding-top: px; } */ /* HEADER BACKGROUND COLOR */ .menu-main, .menu-main ul, .menu-wrapper, .menu-search .searchform input{ background-color:; } .comments{ background: ; } .comments h3{ color: ; } .site-footer{ background: !important; } #footer-body p, .site-footer p{ color: !important; } .site-footer .widget-head{ color: !important; } $color){ ?> .post-format-, .format- .post-meta ~ * a, .format- .post-meta a:hover, .format- .entry-title a:hover, .format- a.moretag, .format- a.more-link{ color: ; } .tab_, .format- a.moretag:hover, .format- a.more-link:hover, .format- .entry-image .entry-category a, .format- .entry-image > a:after, .format- .page-links > a:hover, .format- .page-links > span{ background-color: ; } .format- *::selection{ color: #FFFFFF; background-color: ; } .format- *::-moz-selection{ color: #FFFFFF; background-color: ; } .format- a.moretag, .format- a.more-link, .format- .page-links > a:hover, .format- .page-links > span{ border-color: ; } .format- footer.entry-meta .post-tags li a:hover, .post-format-badge.post-format-{ color: ; } article.type-post.format- p a, article.type-post.format- p a:hover span:before, article.type-post.format- p a:focus span:before{ color: ; } /* sticky post */ article.sticky:before{ border-color: transparent; } .brd, img.brd { padding: 2px !important; border: 2px solid #ccc !important; float: left !important; margin: 4px 10px 5px 0 !important; } .bread-l {float: left;} .bread-c {text-align:center; font-size: 12px;} .bread-r {float: right;} </style> <style type="text/css"> body{ } .entry-title a{ color:; } #masthead h1, #masthead h1 small{ color:; } .nav a .caret{ border-bottom-color:; border-top-color:; } </style>


I have custom-css.php file with above code now how can i execute it externally instead of header?

raamdev commented Aug 15, 2016

@expertsuraz I reserve GitHub for filing bug reports and making feature requests. Please post support questions to the WordPress Community Forum. Thank you! :)

@raamdev raamdev locked and limited conversation to collaborators Aug 15, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.