So, there's actually a tremendous amount going on here. If you're not familiar with HTML5 Boilerplate or the Starkers theme (upon which this theme is based) you should check them out.
Choose below which options you want included in your site.
The clumsiest part of this plug-in is dealing with the CSS files. Check the Read Me file for details on how I suggest handling them.
Kill the IE6 Image Toolbar that appears when users hover over images on your site.
'; echo 'Selecting this option will add the following code to the <head> of your pages:
<meta http-equiv="imagetoolbar" content="false">';
}
// callback fn for google_chrome
function google_chrome_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['google_chrome']) && $options['google_chrome']) ? 'checked="checked" ' : '';
echo '';
echo 'Force the most-recent IE rendering engine or users with Google Chrome Frame installed to see your site using Google Frame.
'; echo 'Selecting this option will add the following code to the <head> of your pages:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">';
}
// callback fn for google_verification
function google_verification_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['google_verification']) && $options['google_verification'] && $options['google_verification_account'] && $options['google_verification_account'] !== 'XXXXXXXXX...') ? 'checked="checked" ' : '';
$account = (isset($options['google_verification_account']) && $options['google_verification_account']) ? $options['google_verification_account'] : 'XXXXXXXXX...';
$msg = ($account === 'XXXXXXXXX...') ? ', where XXXXXXXXX... will be replaced with the code you insert above' : '';
echo '';
echo 'Add Google Verificaton code to the <head> of all your pages.
To include Google Verificaton, select this option and include your Verificaton number here:
';
echo '
Selecting this option will add the following code to the <head> of your pages'.$msg.'
<meta name="google-site-verification" content="'.$account.'">';
}
// callback fn for viewport
function viewport_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['viewport']) && $options['viewport']) ? 'checked="checked" ' : '';
echo '';
echo 'Force iThings to show site at full-zoom, instead of trying to show the entire page.
'; echo 'Selecting this option will add the following code to the <head> of your pages:
<meta name="viewport" content="width=device-width">';
}
// callback fn for favicon
function favicon_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['favicon']) && $options['favicon']) ? 'checked="checked" ' : '';
echo '';
echo 'If you plan to use a favicon for your site, place the "favicon.ico" file in the root directory of your site.
'; echo 'If the file is in the right location, you don\'t really need to select this option, browsers will automatically look there and no additional code will be added to your pages.
'; echo 'Selecting this option will add the following code to the <head> of your pages:
<link rel="shortcut icon" href="/favicon.ico">';
}
// callback fn for favicon_ithing
function favicon_ithing_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['favicon_ithing']) && $options['favicon_ithing']) ? 'checked="checked" ' : '';
echo '';
echo 'To allow iThing users to add an icon for your site to their Home screen, place the "apple-touch-icon.png" file in the root directory of your site.
'; echo 'If the file is in the right location, you don\'t really need to select this option, browsers will automatically look there and no additional code will be added to your pages.
'; echo 'Selecting this option will add the following code to the <head> of your pages:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">';
echo '<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">';
echo '<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">';
echo '<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">';
}
// callback fn for ie_css
function ie_css_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['ie_css']) && $options['ie_css']) ? 'checked="checked" ' : '';
echo '';
echo 'If you would like to add a IE-specific CSS file, Boilerplate provides a starter file located in:
'; echo '' .get_template_directory_uri(). '/css/ie-starter.css';
echo 'I recommend adding any custom IE-specific CSS to this file and either copying from the starter file or using an @import to add the starter file rather than editing the starter file itself. This will help to avoid your changes being overwritten during upgrades.
And remember, you don\'t need IE-specific hacks if you activate the IE-Conditional <html> above, because you can target IE specifically by using the IE classes that are being added to <html>. Sweet!
Selecting this option will add the following code to the <head> of your pages:
<!--[if IE ]><link rel="stylesheet" href="' .get_template_directory_uri(). '/css/ie.css"><![endif]-->';
}
// callback fn for modernizr_js
function modernizr_js_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['modernizr_js']) && $options['modernizr_js']) ? 'checked="checked" ' : '';
echo '';
echo 'Modernizr is a JS library that appends classes to the <html> that indicate whether the user\'s browser is capable of handling advanced CSS, like "cssreflections" or "no-cssreflections". It\'s a really handy way to apply varying CSS techniques, depending on the user\'s browser\'s abilities, without resorting to CSS hacks.
Selecting this option will add the following code to the <head> of your pages (note the lack of a version, when you\'re ready to upgrade, simply copy/paste the new version into the file below, and your site is ready to go!):
<script src="//ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>';
//echo '<script>!window.Modernizr && document.write(unescape(\'%3Cscript src="' .BP_PLUGIN_URL. 'js/modernizr.js"%3E%3C/script%3E\'))</script>';
echo '<script src="' .get_template_directory_uri(). '/js/modernizr.js"></script>';
echo 'Note: If you do not include Modernizr, the IEShiv JS will be added to accommodate the HTML5 elements used in Boilerplate in weaker browsers:
'; echo '<!--[if lt IE 9]>';
echo ' <script src="//html5shiv.googlecode.com/svn/trunk/html5.js" onload="window.ieshiv=true;"></script>';
echo ' <script>!window.ieshiv && document.write(unescape(\'%3Cscript src="' .get_template_directory_uri(). '/js/ieshiv.js"%3E%3C/script%3E\'))</script>';
echo '<![endif]-->';
}
// callback fn for respond_js
function respond_js_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['respond_js']) && $options['respond_js']) ? 'checked="checked" ' : '';
echo '';
echo 'Respond.js is a JS library that helps IE<=8 understand @media queries, specifically min-width and max-width, allowing you to more reliably implement responsive design across all browsers.
Selecting this option will add the following code to the <head> of your pages (note the lack of a version, when you\'re ready to upgrade, simply copy/paste the new version into the file below, and your site is ready to go!):
<script src="' .get_template_directory_uri(). '/js/respond.js"></script>';
}
// callback fn for jquery_js
function jquery_js_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['jquery_js']) && $options['jquery_js']) ? 'checked="checked" ' : '';
$version = (isset($options['jquery_version']) && $options['jquery_version'] && $options['jquery_version'] !== '') ? $options['jquery_version'] : '1.7.1';
$inhead = (isset($options['jquery_head']) && $options['jquery_head']) ? 'checked="checked" ' : '';
echo '';
echo 'jQuery is a JS library that aids greatly in developing high-quality JavaScript quickly and efficiently.
'; echo 'Selecting this option will add the following code to your pages just before the </body>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js"></script>';
echo '<script>!window.jQuery && document.write(unescape(\'%3Cscript src="'.get_template_directory_uri().'js/jquery.js"%3E%3C/script%3E\'))</script>';
echo '';
echo 'Note: Best-practices recommend that you load JS as close to the </body> as possible. If for some reason you would prefer jQuery and jQuery plug-ins to be in the <head>, please select this option.
The above code first tries to download jQuery from Google\'s CDN (which might be available via the user\'s browser cache). If this is not successful, it uses the theme\'s version.
'; echo 'Note: This plug-in tries to keep current with the most recent version of jQuery. If for some reason you would prefer to use another version, please indicate that version:
';
echo ' (see all versions available via Google\'s CDN)
If you choose to use any jQuery plug-ins, I recommend downloading and concatenating them together in a single JS file, as below. This will reduce your site\'s HTTP Requests, making your site a better experience.
'; echo 'Selecting this option will add the following code to your pages just before the </body>:
<script type=\'text/javascript\' src=\'' .get_template_directory_uri(). '/js/plug-in.js?ver=x\'></script>';
echo '(The single quotes and no-longer-necessary attributes are from WP, would like to fix that... maybe next update...)
'; echo 'Note: If you do not include jQuery, this file will not be added to the page.
'; } // callback fn for site_js function site_js_setting() { $options = get_option('plugin_options'); $checked = (isset($options['site_js']) && $options['site_js']) ? 'checked="checked" ' : ''; echo ''; echo 'If you would like to add your own site JavaScript file, Boilerplate provides a starter file located in:
'; echo '' .get_template_directory_uri(). '/js/script-starter.js';
echo 'Add what you want to that file and select this option.
'; echo 'Selecting this option will add the following code to your pages just before the </body>:
<script type=\'text/javascript\' src=\'' .get_template_directory_uri(). '/js/script-starter.js?ver=x\'></script>';
echo '(The single quotes and no-longer-necessary attributes are from WP, would like to fix that... maybe next update...)
'; } // callback fn for cache_buster function cache_buster_setting() { $options = get_option('plugin_options'); $checked = (isset($options['cache_buster']) && $options['cache_buster']) ? 'checked="checked" ' : ''; $version = (isset($options['cache_buster_version']) && $options['cache_buster_version']) ? $options['cache_buster_version'] : '1'; echo ''; echo 'To force browsers to fetch a new version of a file, versus one it might already have cached, you can add a "cache buster" to the end of your CSS and JS files. ';
echo 'To increment the cache buster version number, type something here:
';
echo '
Selecting this option will add the following code to the end of all of your CSS and JS file names on all of your pages:
'; echo '?ver='.$version.'';
}
/* 4) Create functions to add above elements to pages */
// $options['toolbar']
function add_toolbar() {
echo ''.PHP_EOL;
}
// $options['google_chrome']
function add_google_chrome() {
echo ''.PHP_EOL;
}
// $options['google_verification']
function add_google_verification() {
$options = get_option('plugin_options');
$account = $options['google_verification_account'];
echo ''.PHP_EOL;
}
// $options['viewport']
function add_viewport() {
echo ''.PHP_EOL;
}
// $options['favicon']
function add_favicon() {
echo ''.PHP_EOL;
}
// $options['favicon_ithing']
function add_favicon_ithing() {
echo ''.PHP_EOL;
echo ''.PHP_EOL;
echo ''.PHP_EOL;
echo ''.PHP_EOL;
}
// $options['ie_css'];
function add_ie_stylesheet() {
$cache = cache_buster();
echo ''.PHP_EOL;
}
// $options['modernizr_js']
function add_modernizr_script() {
$cache = cache_buster();
wp_deregister_script( 'ieshiv' ); // get rid of IEShiv if it somehow got called too (IEShiv is included in Modernizr)
wp_deregister_script( 'modernizr' ); // get rid of any native Modernizr
//dropping cdnjs per Paul & Divya recommendation, leaving below line as it will hopefully soon become a Google CDN link
//echo ''.PHP_EOL; // try getting from CDN
//echo ''.PHP_EOL; // fallback to local if CDN fails
echo ''.PHP_EOL;
}
// $options['ieshiv_script']
function add_ieshiv_script() {
$cache = cache_buster();
echo ''.PHP_EOL;
}
// $options['respond_js']
function add_respond_script() {
$cache = cache_buster();
echo ''.PHP_EOL;
}
// $options['jquery_js']
function add_jquery_script() {
$cache = cache_buster();
$options = get_option('plugin_options');
$version = ($options['jquery_version']) ? $options['jquery_version'] : '1.7.1';
wp_deregister_script( 'jquery' ); // get rid of WP's jQuery
echo ''.PHP_EOL; // try getting from CDN
echo ''.PHP_EOL; // fallback to local if CDN fails
}
// $options['plugins_js']
function add_plugin_script() {
$cache = cache_buster();
echo ''.PHP_EOL;
}
// $options['site_js']
function add_site_script() {
$cache = cache_buster();
echo ''.PHP_EOL;
}
// $options['cache_buster']
function cache_buster() {
$options = get_option('plugin_options');
return (isset($options['cache_buster']) && $options['cache_buster']) ? '?ver='.$options['cache_buster_version'] : '';
}
/* 5) Add Boilerplate options to page as requested */
if (!is_admin() ) {
// get the options
$options = get_option('plugin_options');
// check if each option is set (meaning it exists) and check if it is true (meaning it was checked)
if (isset($options['toolbar']) && $options['toolbar']) {
// if yes to both, apply option
add_action('wp_print_styles', 'add_toolbar');
}
if (isset($options['google_chrome']) && $options['google_chrome']) {
add_action('wp_print_styles', 'add_google_chrome');
}
if (isset($options['google_verification']) && $options['google_verification'] && $options['google_verification_account'] && $options['google_verification_account'] !== 'XXXXXXXXX...') {
add_action('wp_print_styles', 'add_google_verification');
}
if (isset($options['viewport']) && $options['viewport']) {
add_action('wp_print_styles', 'add_viewport');
}
if (isset($options['favicon']) && $options['favicon']) {
add_action('wp_print_styles', 'add_favicon');
}
if (isset($options['favicon_ithing']) && $options['favicon_ithing']) {
add_action('wp_print_styles', 'add_favicon_ithing');
}
if (isset($options['modernizr_js']) && $options['modernizr_js']) {
add_action('wp_print_styles', 'add_modernizr_script');
} else {
// if Modernizr isn't selected, add IEShiv inside an IE Conditional Comment
add_action('wp_print_styles', 'add_ieshiv_script');
}
if (isset($options['respond_js']) && $options['respond_js']) {
add_action('wp_print_styles', 'add_respond_script');
}
if (isset($options['ie_css']) && $options['ie_css']) {
add_action('wp_print_styles', 'add_ie_stylesheet');
}
if (isset($options['jquery_js']) && $options['jquery_js'] && isset($options['jquery_version']) && $options['jquery_version'] && $options['jquery_version'] !== '') {
// check if should be loaded in or at end of
$hook = (isset($options['jquery_head']) && $options['jquery_head']) ? 'wp_print_styles' : 'wp_footer';
add_action($hook, 'add_jquery_script');
}
// for jQuery plug-ins, make sure jQuery was also set
if (isset($options['jquery_js']) && $options['jquery_js'] && isset($options['plugins_js']) && $options['plugins_js']) {
// check if should be loaded in or at end of
$hook = (isset($options['jquery_head']) && $options['jquery_head']) ? 'wp_print_styles' : 'wp_footer';
add_action($hook, 'add_plugin_script');
}
if (isset($options['site_js']) && $options['site_js']) {
add_action('wp_footer', 'add_site_script');
}
} // if (!is_admin() )
?>