Load WordPress Theme Customizer CSS via external CSS file?

[huphtur]

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]

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]

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/

[nathannicholls]

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?

[nathannicholls]

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]

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

[raamdev]

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

[raamdev]

@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]

@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.

[nathannicholls]

Thanks @raamdev, great work :)

[nathannicholls]

Thanks @raamdev, great work :)

[expertsuraz]

`<?php
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?

[expertsuraz]

`<?php
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?

[expertsuraz]

https://gist.github.com/expertsuraz/0a9912b939f52453e30ef562ed336380#file-custom-css-php

[expertsuraz]

https://gist.github.com/expertsuraz/0a9912b939f52453e30ef562ed336380#file-custom-css-php

[raamdev]

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

[raamdev]

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