• Hello I want Execute my current Customizer CSS to external file and enqueue instead of execute it as Inline css in wp-head section.
    Is there any Way to do it?
    Please Suggest me. My Idea is to make header more clean.
    Below is Code that executed CSS from Customizer to header/

    <?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"> 
    
    <?php 
    
    	/*
    		BACKGROUND
    	*/
    
    	// If there's a background image
    	if(bl_utilities::get_option('bl_background_image')){
    		$background_styling = 'url("' . bl_utilities::get_option('bl_background_image') . '") no-repeat fixed right top;';
    		$background_size = 'cover';
    	}
    	// If there's a custom pattern
    	elseif(bl_utilities::get_option('bl_background_pattern_custom')){
    		$background_styling = 'url("' . bl_utilities::get_option('bl_background_pattern_custom') . '") repeat;';
    		$background_size = 'auto';
    	}
    	// If there's a pattern
    	elseif(bl_utilities::get_option('bl_background_pattern')){
    		$background_styling = 'url("' . get_template_directory_uri() . '/assets/img/pattern/large/' . bl_utilities::get_option('bl_background_pattern') . '.png") repeat;';
    		$background_size = 'auto';
    	}
    	// If there's nothing, then use the color
    	else{
    		$background_styling = bl_utilities::get_option('bl_background_color');
    		$background_size = 'auto';
    	} ?>
    
    	/*
    		CSS
    	*/
    
    blockquote{
        width: <?php echo get_theme_mod('bquote_width', '92%'); ?> !important;
        color: <?php echo get_theme_mod('bquote_text_color', '#505050'); ?>;
        background:<?php echo get_theme_mod('bquote_bg_color', '#eeeeee'); ?> !important;
    
    }
    
    blockquote p{
        font-size: <?php echo get_theme_mod('bquote_font_size', '14px'); ?> !important;
        color: <?php echo get_theme_mod('bquote_text_color', '#505050'); ?>;}
    
    blockquote.style1 {
        font-style: italic;
        width: <?php echo get_theme_mod('blockquote_width', '200px'); ?> !important;
        margin: 0.25em 0;
        padding: 1.25em 20px !important;
        line-height: 1.45 !important;
        position: relative;
        color: <?php echo get_theme_mod('blockquote_text_color', '#fff'); ?>;
        background:<?php echo get_theme_mod('blockquote_bg_color', '#fff'); ?> !important;
        margin-left:20px;
        margin-right: 0;
    }
    
    blockquote.style1 p{
        font-size: <?php echo get_theme_mod('blockquote_font_size', '18px'); ?> !important;
        font-style: italic;
        line-height: 1.45 !important;
        position: relative;
        color: <?php echo get_theme_mod('blockquote_text_color', '#fff'); ?>;}
    
    	@media screen and (min-width: 824px) {
    .mwidget{
    display:none !important;
    }
    }
    @media all and (max-width:824px)
    {
    .adlinks {
      display:none !important;
    }
    }
    
    .mwidget, .mwidget p {
      color:<?php echo bl_utilities::get_option('bl_mwidget_text_color');?> !important;
      width:98%;
      display: block;
      margin: 20px 0 0 20px;
    }
    
    .mwidget a, .mwidget a:hover  {
      color:<?php echo bl_utilities::get_option('bl_miwdget_link_color');?> !important ;
      text-decoration:<?php bl_utilities::get_option('bl_miwdget_link_decoration');?> !important;
    }
    	body{
    		background: <?php echo $background_styling; ?>;
    		background-size: <?php echo $background_size; ?>;
    	}
    	h1, h2, h3, h4, h5, h6, .widget_calendar table > caption{
     		letter-spacing: <?php echo bl_utilities::get_option('bl_heading_font_letter_spacing'); ?>;
     	}
    
     	a.menu-brand:hover, a.brand-image:hover{
     	    background-color:<?php echo bl_utilities::get_option('bl_brand_bg_color'); ?> !important;   }
    
    .brand-text span, .brand-text, .brand-image
    {
     	    color:<?php echo bl_utilities::get_option('bl_brand_color'); ?> !important;
     	    background-color:<?php echo bl_utilities::get_option('bl_brand_bg_color'); ?> !important;
    
     	}
     	.header-bg{
     	    background:url("<?php echo bl_utilities::get_option('bl_header_background_image'); ?>");
     	    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width:100%;
    margin-top: 50px;
    
     	}
    
     .box {
      background:<?php echo bl_utilities::get_option('bl_widget_bg_color'); ?> !important;
    }
    #side-bar .widget-head, #footer-body .widget-head{line-height:<?php echo bl_utilities::get_option('bl_widget_head_line_height'); ?> !important;}
    #side-bar .widget-head {
        background-color:<?php echo bl_utilities::get_option('bl_widget_titlebg_color'); ?> !important;
    }
     	#side-bar ul li {
     	    background:url("<?php echo bl_utilities::get_option('bl_sidebar_bullet_img'); ?>");
     	    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("<?php echo bl_utilities::get_option('bl_sidebar_bullethover_img'); ?>")";
     	    background-repeat:no-repeat;
     	    padding: 0px 0 0px 20px;
     	}
    	.container{
    		width: <?php echo bl_utilities::get_option('bl_layout_width'); ?>px;
    	}
    	#masthead a, .menu-main, .menu-main ul, .menu-main a, .menu a{
    		color: <?php echo bl_utilities::get_option('bl_menu_color'); ?> !important;
    	}
    	#masthead .menu-main a:hover, .menu a:hover{
    		background: <?php echo bl_utilities::get_option('bl_header_hover_background_color'); ?>;
    		border-color: <?php echo bl_utilities::get_option('bl_header_hover_background_color'); ?> !important;
    		color: <?php echo bl_utilities::get_option('bl_header_hover_font_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:<?php echo bl_utilities::get_option('bl_menu_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:<?php echo bl_utilities::get_option('bl_menu_color'); ?>;
     		border-top-color:<?php echo bl_utilities::get_option('bl_menu_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:<?php echo bl_utilities::get_option('bl_sidebar_link_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:<?php echo bl_utilities::get_option('bl_sidebar_linkhover_color'); ?>!important;
     	}
     	.site-footer a, #footer-body a, .site-footer a:hover,  #footer-body a:hover{
     	color:<?php echo bl_utilities::get_option('bl_footer_link_color'); ?>!important;
     	}
     	.dropdown-menu{
     		border-top: 2px solid <?php echo bl_utilities::get_option('bl_menu_color'); ?>!important;
     	} 
    
     	.entry-content a, .entry-container a{
     	    text-decoration:<?php echo bl_utilities::get_option('bl_main_link_decoration'); ?>!important;
     	}
    
     	.entry-content a, .entry-container a{
     	    text-decoration:<?php echo bl_utilities::get_option('bl_main_link_decoration'); ?>!important;
     	     color: <?php echo bl_utilities::get_option('bl_contentarea_link_color'); ?>!important;
     	}
    
     	.entry-content a:hover, .entry-container a:hover, .entry-container a:hover, a:hover, a:focus {
     	   text-decoration:<?php echo bl_utilities::get_option('bl_main_linkhover_decoration');?> !important;
     	     color: <?php echo bl_utilities::get_option('bl_contentarea_linkhover_color'); ?>!important;
    
    }
     	.pagination > a{
     		border-color: <?php echo bl_utilities::get_option('bl_theme_color'); ?>!important;
     	}
     	.bl_tabs ul li .tab_text a, .bl_tabs ul li .tab_text a, .textwidget ul li a{
     	    text-decoration:<?php echo bl_utilities::get_option('bl_sidebar_link_decoration'); ?> !important;
     	    color: <?php echo bl_utilities::get_option('bl_sidebar_link_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:<?php echo bl_utilities::get_option('bl_sidebar_linkhover_decoration'); ?> !important;
     	    color: <?php echo bl_utilities::get_option('bl_sidebar_linkhover_color'); ?> !important;
     	}
     	.bl_tabs ul li .tab_text a span, a{
     		color: <?php echo bl_utilities::get_option('bl_sidebar_link_color'); ?>!important;
     	}
     	.custom-logo span{
     	    font-size:<?php echo bl_utilities::get_option('bl_custom_logo_size'); ?>!important;
     	    color:<?php echo bl_utilities::get_option('bl_customlogo_font_color'); ?> !important;
     	    opacity:<?php echo bl_utilities::get_option('bl_custom_logo_opacity'); ?>!important;
     	}
     	.entry-content h1{font-size:<?php echo bl_utilities::get_option('bl_h1_size'); ?>!important;
     	   color:<?php echo bl_utilities::get_option('bl_h1_font_color'); ?>!important;
     	}
     		.entry-content h2, .widget-body h2{font-size:<?php echo bl_utilities::get_option('bl_h2_size'); ?>!important;
     	   color:<?php echo bl_utilities::get_option('bl_h2_font_color'); ?>!important;
     	}
     		.entry-content h3{font-size:<?php echo bl_utilities::get_option('bl_h3_size'); ?>!important;
     	   color:<?php echo bl_utilities::get_option('bl_h3_font_color'); ?>!important;
     	}
    
     	.entry-content h4{font-size:<?php echo bl_utilities::get_option('bl_h4_size'); ?>!important;
     	   color:<?php echo bl_utilities::get_option('bl_h4_font_color'); ?>!important;
     	}
    
     	h3.widget-head, .textwidget h3, .widget-body h3, #footer-widget h3{
    font-size:<?php echo bl_utilities::get_option('bl_sidebar_title_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:<?php echo bl_utilities::get_option('bl_sidebar_link_size'); ?>!important;
     	    color:<?php echo bl_utilities::get_option('bl_sidebar_link_color'); ?>!important;
     	     text-decoration:<?php echo bl_utilities::get_option('bl_sidebar_link_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:<?php echo bl_utilities::get_option('bl_sidebar_linkhover_decoration'); ?>!important;
    
     	}
    
     	.entry-content{
     		font-size: <?php echo bl_utilities::get_option('bl_main_font_size'); ?>;
     		line-height:<?php echo bl_utilities::get_option('bl_main_font_line_height'); ?>;
     	}
     	.entry-content, .entry-content p, p{
     		color: <?php echo bl_utilities::get_option('bl_p_font_color'); ?>;
     	}
    	.widget-head, .textwidget h3,  #footer-widget h3 {
    		color: <?php echo bl_utilities::get_option('bl_widget_header_font_color'); ?> !important;
    	}
    
    	/* HEADER SIZE */
    	.menu-main{ height: <?php echo bl_utilities::get_option('bl_menu_height'); ?>px; }
    	.brand, .menu-brand, .open-menu{ line-height: <?php echo bl_utilities::get_option('bl_menu_height'); ?>px; }
    	.menu-wrapper{ top: <?php echo bl_utilities::get_option('bl_menu_height'); ?>px; }
          /* #main{ padding-top: <?php echo bl_utilities::get_option('bl_menu_height')+30; ?>px; } */
    	/* HEADER BACKGROUND COLOR */
    	.menu-main,
     	.menu-main ul,
     	.menu-wrapper,
     	.menu-search .searchform input{
     		background-color:<?php echo bl_utilities::get_option('bl_header_color'); ?>;
     	}
    	.comments{
    		background: <?php echo bl_utilities::get_option('bl_comments_background_color'); ?>;
    	}
    	.comments h3{
    		color: <?php echo bl_utilities::get_option('bl_comments_title_font_color'); ?>;
    	}
    	.site-footer{
    		background: <?php echo bl_utilities::get_option('bl_footer_background_color'); ?> !important;
    	}
    	#footer-body p,
     	.site-footer p{
    		color: <?php echo bl_utilities::get_option('bl_footer_font_color'); ?> !important;
    	}
    	.site-footer .widget-head{
    		color: <?php echo bl_utilities::get_option('bl_footer_header_font_color'); ?> !important;
    	}
    <?php
    	if(bl_utilities::get_option('bl_standard_post_color')){
    
    		$post_format_color['standard'] 	= bl_utilities::get_option('bl_standard_post_color');
    		$post_format_color['gallery'] 	= bl_utilities::get_option('bl_gallery_post_color');
    		$post_format_color['quote'] 	= bl_utilities::get_option('bl_quote_post_color');
    		$post_format_color['link'] 		= bl_utilities::get_option('bl_link_post_color');
    		$post_format_color['audio'] 	= bl_utilities::get_option('bl_audio_post_color');
    		$post_format_color['video'] 	= bl_utilities::get_option('bl_video_post_color');
    		$post_format_color['status'] 	= bl_utilities::get_option('bl_status_post_color');
    		$post_format_color['sticky'] 	= bl_utilities::get_option('bl_sticky_post_color');
    
    		foreach($post_format_color as $name => $color){ ?>
    
    			.post-format-<?php echo $name ?>,
    			.format-<?php echo $name ?> .post-meta ~ * a,
    			.format-<?php echo $name ?> .post-meta a:hover,
    			.format-<?php echo $name ?> .entry-title a:hover,
    			.format-<?php echo $name ?> a.moretag,
    			.format-<?php echo $name ?> a.more-link{
    				color: <?php echo $color ?>;
    			}
    			.tab_<?php echo $name ?>,
    			.format-<?php echo $name ?> a.moretag:hover,
    			.format-<?php echo $name ?> a.more-link:hover,
    			.format-<?php echo $name ?> .entry-image .entry-category a,
    			.format-<?php echo $name ?> .entry-image > a:after,
    			.format-<?php echo $name ?> .page-links > a:hover,
    			.format-<?php echo $name ?> .page-links > span{
    				background-color: <?php echo $color ?>;
    			}
    			.format-<?php echo $name ?> *::selection{
    				color: #FFFFFF;
    				background-color: <?php echo $color ?>;
    			}
    			.format-<?php echo $name ?> *::-moz-selection{
    				color: #FFFFFF;
    				background-color: <?php echo $color ?>;
    			}
    			.format-<?php echo $name ?> a.moretag,
    			.format-<?php echo $name ?> a.more-link,
    			.format-<?php echo $name ?> .page-links > a:hover,
    			.format-<?php echo $name ?> .page-links > span{
    				border-color: <?php echo $color; ?>;
    			}
    			.format-<?php echo $name ?> footer.entry-meta .post-tags li a:hover,
    			.post-format-badge.post-format-<?php echo $name; ?>{
    				color: <?php echo $color ?>;
    			}
    			article.type-post.format-<?php echo $name ?> p a,
    			article.type-post.format-<?php echo $name ?> p a:hover span:before,
    			article.type-post.format-<?php echo $name ?> p a:focus span:before{
    				color: <?php echo $color ?>;
    			} <?php
    		} ?>
    		/* sticky post */
    		article.sticky:before{
    			border-color: <?php echo bl_utilities::get_option('bl_sticky_post_color'); ?> <?php echo bl_utilities::get_option('bl_sticky_post_color'); ?> transparent;
    		} <?php
    
    		if(!empty($blu_css_options['sticky_post_color'])){
    			echo '.sticky .post-format-badge{color: '.$blu_css_options['sticky_post_color'].'};';
    			echo '.sticky .post-meta ~ * a, .sticky .post-meta a:hover, .sticky .entry-title a:hover{color: '.$blu_css_options['sticky_post_color'].';}';
    		}
    	}
    
    	/*
    		CUSTOM CSS
    	*/
    	echo bl_utilities::get_option('bl_custom_css');
    
    	?>
    .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>
    
    <?php
    if(1 == 2){ ?>
    <style type="text/css"> <?php
    
    	if(!empty($blu_css_options['background_color'])){ ?>
    	 	body{   }<?php
    	}
    	if(!empty($blu_css_options['post_header_color'])){ ?>
    	 	.entry-title a{ color:<?php echo $blu_css_options['post_header_color']; ?>; }  <?php
    	}
    	if(!empty($blu_css_options['h1_font_color'])){ ?>
    	 	#masthead h1,
    	 	#masthead h1 small{
    	 		color:<?php echo $blu_css_options['h1_font_color']; ?>;
    	 	}
    	 	.nav a .caret{
    	 		border-bottom-color:<?php echo $blu_css_options['h1_font_color']; ?>;
    	 		border-top-color:<?php echo $blu_css_options['h1_font_color']; ?>;
    	 	}  <?php
    	}
    
    	?>
    </style>
    <?php }
    }
    add_action( 'wp_head', 'bluth_custom_css', 100 );
    ?>

  • The topic ‘Execute Customizer CSS To External File and Enque’ is closed to new replies.