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.
The clumsiest part of this is dealing with the CSS and JS "starter" files. Check the Read Me file for details on how I suggest handling them.
Choose below which options you want included in your site.
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">';
}
endif; // H5BP_toolbar_setting
// callback fn for H5BP_google_chrome
if ( ! function_exists( 'H5BP_google_chrome_setting' ) ):
function H5BP_google_chrome_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_google_chrome']) && $options['H5BP_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">';
}
endif; // H5BP_google_chrome_setting
// callback fn for H5BP_google_verification
if ( ! function_exists( 'H5BP_google_verification_setting' ) ):
function H5BP_google_verification_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_google_verification']) && $options['H5BP_google_verification'] && $options['H5BP_google_verification_account'] && $options['H5BP_google_verification_account'] !== 'XXXXXXXXX...') ? 'checked="checked" ' : '';
$account = (isset($options['H5BP_google_verification_account']) && $options['H5BP_google_verification_account']) ? $options['H5BP_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.'">';
}
endif; // H5BP_google_verification_setting
// callback fn for H5BP_viewport
if ( ! function_exists( 'H5BP_viewport_setting' ) ):
function H5BP_viewport_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_viewport']) && $options['H5BP_viewport']) ? 'checked="checked" ' : '';
$setting = (isset($options['H5BP_viewport_setting']) && $options['H5BP_viewport_setting']) ? $options['H5BP_viewport_setting'] : 'width=device-width';
echo '';
echo 'Force iThings to show site at full-zoom, instead of trying to show the entire page.
'; echo 'The HTML5 Boilerplate project suggests using just width=device-width, but you can use any option you want:
Selecting this option will add the following code to the <head> of your pages:
<meta name="viewport" content="'.$setting.'">';
}
endif; // H5BP_viewport_setting
// callback fn for H5BP_favicon
if ( ! function_exists( 'H5BP_favicon_setting' ) ):
function H5BP_favicon_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_favicon']) && $options['H5BP_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">';
}
endif; // H5BP_favicon_setting
// callback fn for H5BP_favicon_ithing
if ( ! function_exists( 'H5BP_favicon_ithing_setting' ) ):
function H5BP_favicon_ithing_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_favicon_ithing']) && $options['H5BP_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" 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">';
echo '<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">';
echo '<link rel="apple-touch-icon" href="/apple-touch-icon.png">';
}
endif; // H5BP_favicon_ithing_setting
// callback fn for H5BP_ie_css
if ( ! function_exists( 'H5BP_ie_css_setting' ) ):
function H5BP_ie_css_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_ie_css']) && $options['H5BP_ie_css']) ? 'checked="checked" ' : '';
echo '';
echo 'If you would like to add an IE-specific CSS file, Boilerplate provides a starter file located in:
'; echo '' .H5BP_URL. '/css/ie-starter.css';
echo 'I recommend using that as a starter file, then creating and making your changes to the following file:
'; echo '' .H5BP_URL. '/css/ie.css';
echo 'This allows you to maintain your own code that will not get overwritten during Theme updates.
'; echo '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="' .H5BP_URL. '/css/ie.css"><![endif]-->';
}
endif; // H5BP_ie_css_setting
// callback fn for H5BP_modernizr_js
if ( ! function_exists( 'H5BP_modernizr_js_setting' ) ):
function H5BP_modernizr_js_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_modernizr_js']) && $options['H5BP_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="' .H5BP_URL. '/js/modernizr.js"></script>';
echo 'Note: If you do not include Modernizr, the IEShiv JS will be added to weaker browsers to accommodate the HTML5 elements used in Boilerplate:
'; 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="' .H5BP_URL. '/js/ieshiv.js"%3E%3C/script%3E\'))</script>';
echo '<![endif]-->';
}
endif; // H5BP_modernizr_js_setting
// callback fn for H5BP_respond_js
if ( ! function_exists( 'H5BP_respond_js_setting' ) ):
function H5BP_respond_js_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_respond_js']) && $options['H5BP_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!):
<!--[if lt IE 9]><script src="' .H5BP_URL. '/js/respond.js"></script><![endif]-->';
}
endif; // H5BP_respond_js_setting
// callback fn for H5BP_jquery_js
if ( ! function_exists( 'H5BP_jquery_js_setting' ) ):
function H5BP_jquery_js_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_jquery_js']) && $options['H5BP_jquery_js']) ? 'checked="checked" ' : '';
$version = (isset($options['H5BP_jquery_version']) && $options['H5BP_jquery_version'] && $options['H5BP_jquery_version'] !== '') ? $options['H5BP_jquery_version'] : '1.8.2';
$inhead = (isset($options['H5BP_jquery_head']) && $options['H5BP_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="' .H5BP_URL. '/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 would like to use any jQuery plug-ins, Boilerplate provides a starter file located in:
'; echo '' .H5BP_URL. '/js/plugins-starter.js';
echo 'I recommend using that as a starter file, then creating and making your changes to the following file:
'; echo '' .H5BP_URL. '/js/plugins.js';
echo 'This allows you to maintain your own code that will not get overwritten during Theme updates.
'; echo 'I also recommend downloading and concatenating your plugins together in this single JS file. 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=\'' .H5BP_URL. '/js/plugins.js\'></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.
'; } endif; // H5BP_plugins_js_setting // callback fn for H5BP_site_js if ( ! function_exists( 'H5BP_site_js_setting' ) ): function H5BP_site_js_setting() { $options = get_option('plugin_options'); $checked = (isset($options['H5BP_site_js']) && $options['H5BP_site_js']) ? 'checked="checked" ' : ''; $inhead = (isset($options['H5BP_site_head']) && $options['H5BP_site_head']) ? 'checked="checked" ' : ''; echo ''; echo 'If you would like to add your own site JavaScript file, Boilerplate provides a starter file located in:
'; echo '' .H5BP_URL. '/js/script-starter.js';
echo 'I recommend using that as a start file, then creating and making your changes to the following file:
'; echo '' .H5BP_URL. '/js/script.js';
echo 'This allows you to maintain your own code that will not get overwritten during Theme updates.
'; echo 'Selecting this option will add the following code to your pages just before the </body>:
<script type=\'text/javascript\' src=\'' .H5BP_URL. '/js/script.js\'></script>';
echo '(The single quotes and no-longer-necessary attributes are from WP, would like to fix that... maybe next update...)
'; echo '';
echo 'Note: Best-practices recommend that you load JS as close to the </body> as possible. If for some reason you would prefer your site-specific JS to be in the <head>, please select this option.
HTML5 allows numerous new input types, including type="search". These new types default to type="text" if the browser doesn\'t understand the new type, so there is no real penalty to using the new ones. ';
echo 'The new search also comes with a new placeholder attribute (sample text); to include placeholder text, type something here:
';
echo '
Selecting this option will replace your existing <input type="text"...> with the following code on all of your pages:
<input type="search" placeholder="'.$placeholder.'"... />';
}
endif; // H5BP_search_form_setting
// callback fn for H5BP_cache_buster
if ( ! function_exists( 'H5BP_cache_buster_setting' ) ):
function H5BP_cache_buster_setting() {
$options = get_option('plugin_options');
$checked = (isset($options['H5BP_cache_buster']) && $options['H5BP_cache_buster']) ? 'checked="checked" ' : '';
$version = (isset($options['H5BP_cache_buster_version']) && $options['H5BP_cache_buster_version']) ? $options['H5BP_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.'';
}
endif; // H5BP_cache_buster_setting
/* 4) Create functions to add above elements to pages */
// $options['H5BP_toolbar']
if ( ! function_exists( 'H5BP_add_toolbar' ) ):
function H5BP_add_toolbar() {
echo ''.PHP_EOL;
}
endif; // H5BP_add_toolbar
// $options['H5BP_google_chrome']
if ( ! function_exists( 'H5BP_add_google_chrome' ) ):
function H5BP_add_google_chrome() {
echo ''.PHP_EOL;
}
endif; // H5BP_add_google_chrome
// $options['H5BP_google_verification']
if ( ! function_exists( 'H5BP_add_google_verification' ) ):
function H5BP_add_google_verification() {
$options = get_option('plugin_options');
$account = $options['H5BP_google_verification_account'];
echo ''.PHP_EOL;
}
endif; // H5BP_add_google_verification
// $options['H5BP_viewport']
if ( ! function_exists( 'H5BP_add_viewport' ) ):
function H5BP_add_viewport() {
$options = get_option('plugin_options');
$setting = $options['H5BP_viewport_setting'];
echo ''.PHP_EOL;
}
endif; // H5BP_add_viewport
// $options['H5BP_favicon']
if ( ! function_exists( 'H5BP_add_favicon' ) ):
function H5BP_add_favicon() {
echo ''.PHP_EOL;
}
endif; // H5BP_add_favicon
// $options['H5BP_favicon_ithing']
if ( ! function_exists( 'H5BP_add_favicon_ithing' ) ):
function H5BP_add_favicon_ithing() {
echo ''.PHP_EOL;
echo ''.PHP_EOL;
echo ''.PHP_EOL;
echo ''.PHP_EOL;
echo ''.PHP_EOL;
}
endif; // H5BP_add_favicon_ithing
// $options['H5BP_ie_css'];
if ( ! function_exists( 'H5BP_add_ie_stylesheet' ) ):
function H5BP_add_ie_stylesheet() {
$cache = H5BP_cache_buster();
echo ''.PHP_EOL;
}
endif; // H5BP_add_ie_stylesheet
// $options['H5BP_modernizr_js']
if ( ! function_exists( 'H5BP_add_modernizr_script' ) ):
function H5BP_add_modernizr_script() {
$cache = H5BP_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
echo ''.PHP_EOL;
}
endif; // H5BP_add_modernizr_script
// $options['ieshiv_script']
if ( ! function_exists( 'H5BP_add_ieshiv_script' ) ):
function H5BP_add_ieshiv_script() {
$cache = H5BP_cache_buster();
echo ''.PHP_EOL;
}
endif; // H5BP_add_ieshiv_script
// $options['H5BP_respond_js']
if ( ! function_exists( 'H5BP_add_respond_script' ) ):
function H5BP_add_respond_script() {
$cache = H5BP_cache_buster();
echo ''.PHP_EOL;
}
endif; // H5BP_add_respond_script
// $options['H5BP_jquery_js']
if ( ! function_exists( 'H5BP_add_jquery_script' ) ):
function H5BP_add_jquery_script() {
$cache = H5BP_cache_buster();
$options = get_option('plugin_options');
$version = ($options['H5BP_jquery_version']) ? $options['H5BP_jquery_version'] : '1.8.2';
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
}
endif; // H5BP_add_jquery_script
// $options['H5BP_plugins_js']
if ( ! function_exists( 'H5BP_add_plugin_script' ) ):
function H5BP_add_plugin_script() {
$cache = H5BP_cache_buster();
echo ''.PHP_EOL;
}
endif; // H5BP_add_plugin_script
// $options['H5BP_site_js']
if ( ! function_exists( 'H5BP_add_site_script' ) ):
function H5BP_add_site_script() {
$cache = H5BP_cache_buster();
echo ''.PHP_EOL;
}
endif; // H5BP_add_site_script
// $options['H5BP_search_form']
if ( ! function_exists( 'H5BP_search_form' ) ):
function H5BP_search_form( $form ) {
$options = get_option('plugin_options');
$placeholder = $options['H5BP_search_placeholder_text'];
$form = '';
return $form;
}
endif; // H5BP_search_form
// $options['H5BP_cache_buster']
if ( ! function_exists( 'H5BP_cache_buster' ) ):
function H5BP_cache_buster() {
$options = get_option('plugin_options');
return (isset($options['H5BP_cache_buster']) && $options['H5BP_cache_buster']) ? '?ver='.$options['H5BP_cache_buster_version'] : '';
}
endif; // H5BP_cache_buster
/* 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['H5BP_toolbar']) && $options['H5BP_toolbar']) {
// if yes to both, apply option
add_action('wp_print_styles', 'H5BP_add_toolbar');
}
// repeat, repeatedly...
if (isset($options['H5BP_google_chrome']) && $options['H5BP_google_chrome']) {
add_action('wp_print_styles', 'H5BP_add_google_chrome');
}
if (isset($options['H5BP_google_verification']) && $options['H5BP_google_verification'] && $options['H5BP_google_verification_account'] && $options['H5BP_google_verification_account'] !== 'XXXXXXXXX...') {
add_action('wp_print_styles', 'H5BP_add_google_verification');
}
if (isset($options['H5BP_viewport']) && $options['H5BP_viewport']) {
add_action('wp_print_styles', 'H5BP_add_viewport');
}
if (isset($options['H5BP_favicon']) && $options['H5BP_favicon']) {
add_action('wp_print_styles', 'H5BP_add_favicon');
}
if (isset($options['H5BP_favicon_ithing']) && $options['H5BP_favicon_ithing']) {
add_action('wp_print_styles', 'H5BP_add_favicon_ithing');
}
if (isset($options['H5BP_modernizr_js']) && $options['H5BP_modernizr_js']) {
add_action('wp_print_styles', 'H5BP_add_modernizr_script');
} else {
// if Modernizr isn't selected, add IEShiv inside an IE Conditional Comment
add_action('wp_print_styles', 'H5BP_add_ieshiv_script');
}
if (isset($options['H5BP_respond_js']) && $options['H5BP_respond_js']) {
add_action('wp_print_styles', 'H5BP_add_respond_script');
}
if (isset($options['H5BP_ie_css']) && $options['H5BP_ie_css']) {
add_action('wp_print_styles', 'H5BP_add_ie_stylesheet');
}
if (isset($options['H5BP_jquery_js']) && $options['H5BP_jquery_js'] && isset($options['H5BP_jquery_version']) && $options['H5BP_jquery_version'] && $options['H5BP_jquery_version'] !== '') {
// check if should be loaded in or at end of
$hook = (isset($options['H5BP_jquery_head']) && $options['H5BP_jquery_head']) ? 'wp_print_styles' : 'wp_footer';
add_action($hook, 'H5BP_add_jquery_script');
// for jQuery plug-ins, jQuery must also be set
if (isset($options['H5BP_plugins_js']) && $options['H5BP_plugins_js']) {
add_action($hook, 'H5BP_add_plugin_script');
}
}
if (isset($options['H5BP_site_js']) && $options['H5BP_site_js']) {
// check if should be loaded in or at end of
$hook = (isset($options['H5BP_site_head']) && $options['H5BP_site_head']) ? 'wp_print_styles' : 'wp_footer';
add_action($hook, 'H5BP_add_site_script');
}
if (isset($options['H5BP_search_form']) && $options['H5BP_search_form']) {
add_filter( 'get_search_form', 'H5BP_search_form');
}
} // if (!is_admin() )
/* End customization for Boilerplate */
?>