Skip to content

Commit

Permalink
Load WordPress Theme Customizer CSS via external CSS file. See #116.
Browse files Browse the repository at this point in the history
  • Loading branch information
@raamdev
raamdev committed May 21, 2015
1 parent 0cf5e77 commit ed49d32
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 89 deletions.
8 changes: 8 additions & 0 deletions css/customizer.css.php
View file
@@ -0,0 +1,8 @@
<?php
/*
* Outputs Customizer CSS for use on the front-end
*
* See inc/customizer.php
*/
header("Content-type: text/css; charset: UTF-8");
IndependentPublisher_Customize::header_output();
28 changes: 26 additions & 2 deletions functions.php
View file
Expand Up @@ -120,7 +120,7 @@ function independent_publisher_setup() {
'chat',
'image',
'video',
'audio'
'audio'
)
);
}
Expand Down Expand Up @@ -233,7 +233,31 @@ function independent_publisher_stylesheet() {
}
endif;

/*
* Loads the PHP file that generates the Customizer CSS for the front-end
*/
function independent_publisher_customizer_css() {
require(get_template_directory().'/css/customizer.css.php');
wp_die();
}

/*
* Enqueue the AJAX call to the dynamic Customizer CSS
* See http://codex.wordpress.org/AJAX_in_Plugins
*/
function independent_publisher_customizer_stylesheet() {
wp_enqueue_style('customizer', admin_url('admin-ajax.php').'?action=independent_publisher_customizer_css');

}
add_action('wp_ajax_independent_publisher_customizer_css', 'independent_publisher_customizer_css');
add_action('wp_ajax_nopriv_independent_publisher_customizer_css', 'independent_publisher_customizer_css');

/*
* IMPORTANT: Customizer CSS *must* be called _after_ the main stylesheet,
* to ensure that customizer-modified styles override the defaults.
*/
add_action( 'wp_enqueue_scripts', 'independent_publisher_stylesheet' );
add_action( 'wp_enqueue_scripts', 'independent_publisher_customizer_stylesheet' );

if ( ! function_exists( 'independent_publisher_wp_fullscreen_title_editor_style' ) ) :
/**
Expand Down Expand Up @@ -1175,4 +1199,4 @@ function independent_publisher_show_page_load_progress_bar() { ?>

<?php
}
endif;
endif;
160 changes: 73 additions & 87 deletions inc/customizer.php
View file
Expand Up @@ -363,94 +363,83 @@ public static function register( $wp_customize ) {
}

/**
* This will output the custom WordPress settings to the live theme's WP head.
* This will output any custom styles configured by the Theme Customizer
*
* Used by hook: 'wp_head'
* This is used by css/customizer.css.php
*
* @see add_action('wp_head',$func)
* @since Independent Publisher 1.0
*/
public static function header_output() {
?>


<!--WordPress Theme Customizer CSS-->
<style type="text/css">

/* Background Color */

<?php self::generate_css('.site', 'background-color', 'background_color', '#'); ?>

/* Comment Form Background Color */

<?php self::generate_css('.comment-respond', 'background-color', 'comment_form_background_color'); ?>

/* Text Color */

<?php self::generate_css('body,input,select,textarea', 'color', 'text_color'); ?>
<?php self::generate_css('.format-aside .entry-content a, .format-aside .entry-content a:hover, .format-aside .entry-content a:visited, .format-aside .entry-content a:active, .format-aside .entry-content a:focus', 'color', 'text_color'); ?>
<?php self::generate_css('.format-quote .entry-content a, .format-quote .entry-content a:hover, .format-quote .entry-content a:visited, .format-quote .entry-content a:active, .format-quote .entry-content a:focus', 'color', 'text_color'); ?>
<?php self::generate_css('.post-excerpts .format-standard .entry-content a, .post-excerpts .format-standard .entry-content a:focus, .post-excerpts .format-standard .entry-content a:hover, .post-excerpts .format-standard .entry-content a:active, .post-excerpts .format-standard .entry-content a:visited', 'color', 'text_color'); ?>
<?php self::generate_css('.post-excerpts .format-chat .entry-content a, .post-excerpts .format-chat .entry-content a:focus, .post-excerpts .format-chat .entry-content a:hover, .post-excerpts .format-chat .entry-content a:active, .post-excerpts .format-chat .entry-content a:visited', 'color', 'text_color'); ?>

/* Link Color */

<?php self::generate_css('a, a:visited, a:hover, a:focus, a:active', 'color', 'link_color'); ?>
<?php self::generate_css('.enhanced-excerpts .enhanced-excerpt-read-more a, .enhanced-excerpts .enhanced-excerpt-read-more a:hover', 'color', 'link_color'); ?>
<?php self::generate_css('.post-excerpts .sticky.format-standard .entry-content a, .post-excerpts .sticky.format-standard .entry-content a:focus, .post-excerpts .sticky.format-standard .entry-content a:hover, .post-excerpts .sticky.format-standard .entry-content a:active, .post-excerpts .sticky.format-standard .entry-content a:visited', 'color', 'link_color'); ?>
<?php self::generate_css('.post-excerpts .format-standard.show-full-content-first-post .entry-content a', 'color', 'link_color'); ?>
<?php self::generate_css('.post-excerpts .format-standard .entry-content a.moretag', 'color', 'link_color'); ?>
<?php self::generate_css('.post-excerpts .format-standard .entry-content a.more-link', 'color', 'link_color'); ?>
<?php self::generate_css('.read-more a, .read-more a:hover', 'color', 'link_color'); ?>
<?php self::generate_css('.entry-title a:hover', 'color', 'link_color'); ?>
<?php self::generate_css('.entry-meta a:hover', 'color', 'link_color'); ?>
<?php self::generate_css('.site-footer a:hover', 'color', 'link_color'); ?>
<?php self::generate_css('blockquote', 'border-color', 'link_color'); ?>
<?php self::generate_css('#infinite-footer .blog-credits a, #infinite-footer .blog-credits a:hover', 'color', 'link_color'); ?>
<?php self::generate_css('#nprogress .bar', 'background', 'link_color'); ?>
<?php self::generate_css('#nprogress .spinner-icon', 'border-top-color', 'link_color'); ?>
<?php self::generate_css('#nprogress .spinner-icon', 'border-left-color', 'link_color'); ?>
<?php self::generate_css('#nprogress .peg', 'box-shadow', 'link_color', '', '', true, '%1$s { %2$s:0 0 10px %3$s, 0 0 5px %3$s; }'); ?>

<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s:%3$s; /* Old browsers */ }'); ?>
<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -moz-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* FF3.6+ */ }'); ?>
<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -webkit-gradient(linear, left top, left bottom, color-stop(60%%, %3$s), color-stop(100%%, %3$s)); /* Chrome,Safari4+ */ }'); ?>
<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -webkit-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* Chrome10+,Safari5.1+ */ }'); ?>
<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -o-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* Opera 11.10+ */ }'); ?>
<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -ms-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* IE10+ */ }'); ?>
<?php self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: linear-gradient(top, %3$s 60%%, %3$s 100%%); /* W3C */ }'); ?>

/* Header Text Color */

<?php self::generate_css('.site-published', 'color', 'header_text_color'); ?>
<?php self::generate_css('.site-title a', 'color', 'header_text_color'); ?>
<?php self::generate_css('h1,h2,h3,h4,h5,h6', 'color', 'header_text_color'); ?>
<?php self::generate_css('.entry-title a', 'color', 'header_text_color'); ?>
<?php self::generate_css('.author .archive-title a', 'color', 'header_text_color'); ?>
<?php self::generate_css('.author .archive-title a', 'color', 'header_text_color'); ?>

/* Primary Meta Text Color */

<?php self::generate_css('.site-description', 'color', 'primary_meta_text_color'); ?>
<?php self::generate_css('.site-published-date a, .site-published-date a:hover, .site-published-date a:visited, .site-published-date a:focus, .site-published-date a:active', 'color', 'primary_meta_text_color'); ?>
<?php self::generate_css('.pinglist-title,.taglist-title,.pinglist li::after', 'color', 'primary_meta_text_color'); ?>

/* Secondary Meta Text Color */

<?php self::generate_css('.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-comment label, .comment-form-subscriptions label, .comment-form-reply-title', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.entry-title-meta, .entry-title-meta a, .entry-title-meta a:hover, .entry-title-meta a:visited, .entry-title-meta a:focus, .entry-title-meta a:active', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.entry-meta, .entry-meta a, .entry-meta a:hover', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.format-aside .entry-format, .format-quote .entry-format, .format-chat .entry-format, .format-status .entry-format, .format-image .entry-format, .format-link .entry-format, .format-gallery .entry-format', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.comment-meta, .comment-meta a', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.widget_rss .rss-date, .widget_rss li > cite, .widget_twitter .timesince', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.site-footer', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('.comment-content.unapproved', 'color', 'secondary_meta_text_color'); ?>
<?php self::generate_css('#infinite-footer .blog-credits', 'color', 'secondary_meta_text_color'); ?>

</style>
<!--/WordPress Theme Customizer CSS-->

<?php
/* Background Color */

self::generate_css('.site', 'background-color', 'background_color', '#');

/* Comment Form Background Color */

self::generate_css('.comment-respond', 'background-color', 'comment_form_background_color');

/* Text Color */

self::generate_css('body,input,select,textarea', 'color', 'text_color');
self::generate_css('.format-aside .entry-content a, .format-aside .entry-content a:hover, .format-aside .entry-content a:visited, .format-aside .entry-content a:active, .format-aside .entry-content a:focus', 'color', 'text_color');
self::generate_css('.format-quote .entry-content a, .format-quote .entry-content a:hover, .format-quote .entry-content a:visited, .format-quote .entry-content a:active, .format-quote .entry-content a:focus', 'color', 'text_color');
self::generate_css('.post-excerpts .format-standard .entry-content a, .post-excerpts .format-standard .entry-content a:focus, .post-excerpts .format-standard .entry-content a:hover, .post-excerpts .format-standard .entry-content a:active, .post-excerpts .format-standard .entry-content a:visited', 'color', 'text_color');
self::generate_css('.post-excerpts .format-chat .entry-content a, .post-excerpts .format-chat .entry-content a:focus, .post-excerpts .format-chat .entry-content a:hover, .post-excerpts .format-chat .entry-content a:active, .post-excerpts .format-chat .entry-content a:visited', 'color', 'text_color');

/* Link Color */

self::generate_css('a, a:visited, a:hover, a:focus, a:active', 'color', 'link_color');
self::generate_css('.enhanced-excerpts .enhanced-excerpt-read-more a, .enhanced-excerpts .enhanced-excerpt-read-more a:hover', 'color', 'link_color');
self::generate_css('.post-excerpts .sticky.format-standard .entry-content a, .post-excerpts .sticky.format-standard .entry-content a:focus, .post-excerpts .sticky.format-standard .entry-content a:hover, .post-excerpts .sticky.format-standard .entry-content a:active, .post-excerpts .sticky.format-standard .entry-content a:visited', 'color', 'link_color');
self::generate_css('.post-excerpts .format-standard.show-full-content-first-post .entry-content a', 'color', 'link_color');
self::generate_css('.post-excerpts .format-standard .entry-content a.moretag', 'color', 'link_color');
self::generate_css('.post-excerpts .format-standard .entry-content a.more-link', 'color', 'link_color');
self::generate_css('.read-more a, .read-more a:hover', 'color', 'link_color');
self::generate_css('.entry-title a:hover', 'color', 'link_color');
self::generate_css('.entry-meta a:hover', 'color', 'link_color');
self::generate_css('.site-footer a:hover', 'color', 'link_color');
self::generate_css('blockquote', 'border-color', 'link_color');
self::generate_css('#infinite-footer .blog-credits a, #infinite-footer .blog-credits a:hover', 'color', 'link_color');
self::generate_css('#nprogress .bar', 'background', 'link_color');
self::generate_css('#nprogress .spinner-icon', 'border-top-color', 'link_color');
self::generate_css('#nprogress .spinner-icon', 'border-left-color', 'link_color');
self::generate_css('#nprogress .peg', 'box-shadow', 'link_color', '', '', true, '%1$s { %2$s:0 0 10px %3$s, 0 0 5px %3$s; }');

self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s:%3$s; /* Old browsers */ }');
self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -moz-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* FF3.6+ */ }');
self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -webkit-gradient(linear, left top, left bottom, color-stop(60%%, %3$s), color-stop(100%%, %3$s)); /* Chrome,Safari4+ */ }');
self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -webkit-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* Chrome10+,Safari5.1+ */ }');
self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -o-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* Opera 11.10+ */ }');
self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: -ms-linear-gradient(top, %3$s 60%%, %3$s 100%%); /* IE10+ */ }');
self::generate_css('button, html input[type="button"], input[type="reset"], input[type="submit"], button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover', 'background', 'link_color', '', '', true, '%1$s { %2$s: linear-gradient(top, %3$s 60%%, %3$s 100%%); /* W3C */ }');

/* Header Text Color */

self::generate_css('.site-published', 'color', 'header_text_color');
self::generate_css('.site-title a', 'color', 'header_text_color');
self::generate_css('h1,h2,h3,h4,h5,h6', 'color', 'header_text_color');
self::generate_css('.entry-title a', 'color', 'header_text_color');
self::generate_css('.author .archive-title a', 'color', 'header_text_color');
self::generate_css('.author .archive-title a', 'color', 'header_text_color');

/* Primary Meta Text Color */

self::generate_css('.site-description', 'color', 'primary_meta_text_color');
self::generate_css('.site-published-date a, .site-published-date a:hover, .site-published-date a:visited, .site-published-date a:focus, .site-published-date a:active', 'color', 'primary_meta_text_color');
self::generate_css('.pinglist-title,.taglist-title,.pinglist li::after', 'color', 'primary_meta_text_color');

/* Secondary Meta Text Color */

self::generate_css('.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-comment label, .comment-form-subscriptions label, .comment-form-reply-title', 'color', 'secondary_meta_text_color');
self::generate_css('.entry-title-meta, .entry-title-meta a, .entry-title-meta a:hover, .entry-title-meta a:visited, .entry-title-meta a:focus, .entry-title-meta a:active', 'color', 'secondary_meta_text_color');
self::generate_css('.entry-meta, .entry-meta a, .entry-meta a:hover', 'color', 'secondary_meta_text_color');
self::generate_css('.format-aside .entry-format, .format-quote .entry-format, .format-chat .entry-format, .format-status .entry-format, .format-image .entry-format, .format-link .entry-format, .format-gallery .entry-format', 'color', 'secondary_meta_text_color');
self::generate_css('.comment-meta, .comment-meta a', 'color', 'secondary_meta_text_color');
self::generate_css('.widget_rss .rss-date, .widget_rss li > cite, .widget_twitter .timesince', 'color', 'secondary_meta_text_color');
self::generate_css('.site-footer', 'color', 'secondary_meta_text_color');
self::generate_css('.comment-content.unapproved', 'color', 'secondary_meta_text_color');
self::generate_css('#infinite-footer .blog-credits', 'color', 'secondary_meta_text_color');

}

/**
Expand Down Expand Up @@ -550,8 +539,5 @@ function independent_publisher_sanitize_select_excerpt_options( $input ) {
// Setup the Theme Customizer settings and controls...
add_action( 'customize_register', array( 'IndependentPublisher_Customize', 'register' ) );

// Output custom CSS to live site
add_action( 'wp_head', array( 'IndependentPublisher_Customize', 'header_output' ) );

// Enqueue live preview javascript in Theme Customizer admin screen
add_action( 'customize_preview_init', array( 'IndependentPublisher_Customize', 'live_preview' ) );
add_action( 'customize_preview_init', array( 'IndependentPublisher_Customize', 'live_preview' ) );

0 comments on commit ed49d32

Please sign in to comment.