Created
December 27, 2017 22:13
-
-
Save carasmo/819e0e0c6f146a31d3eaa0a9b6919e5d to your computer and use it in GitHub Desktop.
In Genesis add a no-js to the html tag and a touch-device or desktop-device class depending on server side detection. See comments under the gist.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| ///DO NOT copy above | |
| remove_action( 'genesis_doctype', 'genesis_do_doctype' ); | |
| add_action( 'genesis_doctype', 'childthemeprefix_html5_no_js_device_doctype' ); | |
| /** | |
| * Add Doc Type no-js default | |
| * reference: http://alxmedia.se/code/2013/11/using-a-no-js-class-in-your-wordpress-theme/ | |
| */ | |
| function childthemeprefix_html5_no_js_device_doctype() { | |
| if ( ! current_theme_supports( 'html5' ) ) : | |
| genesis_do_doctype(); | |
| endif; | |
| $device = ''; | |
| if ( ! wp_is_mobile() ) : | |
| $device = 'desktop-device'; | |
| else: | |
| $device = 'touch-device'; //tablets and smart phones | |
| endif; | |
| ?> | |
| <!DOCTYPE html> | |
| <html class="<?php echo $device; ?> no-js" <?php language_attributes( 'html' ); ?>> | |
| <head> | |
| <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> | |
| <meta charset="<?php bloginfo( 'charset' ); ?>" /> | |
| <?php | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This snippet adds the no-js class to the html tag and removes it if js is active. This is much faster than using .js prefixes on CSS and then adding a js class via jQuery. You just simply write everything as if js is active and then use .no-js before fewer styles.
This snippet also adds the device-X class so that you can style your inputs for desktop with a smaller than 16px font size and then use
.touch-device input[type="text"], [other inputs go here] {font-size: 16px}so that on IOS the zoom doesn't engage messing up a user's page. I added to the html tag instead of the body class tag because woocommerce styles are either the body or a parent div and it's hard to determine which is which.