Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Conditional IE Classes, Browser defaults + conditional logic moved to functions.php #20

Closed
wants to merge 3 commits into from

2 participants

@jeffsebring

Some minor additions for mobile and browser support:

  1. Conditional IE classes will help child theme authors support older browsers with more accuracy from the stylesheet. See - http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

  2. Ask Internet Explorer and Chrome to use the latest rendering engine.

  3. Modified meta viewport to prevent mobile browser scaling.

Moved conditional header image logic from the template file to a new function, twentytwelve_get_header_image(), in functions.php

Moved front end css and script callbacks from header.php to twentytwelve_scripts() in functions.php.

@lancewillett
Collaborator

Hi Jeff and thanks for stopping by and adding the pull requests and notes.

Moved front end css and script callbacks from header.php to twentytwelve_scripts() in functions.php.

We discussed the enqueue on the core Trac ticket quite a bit, and came to the agreement to keep it in header.php for simplicity. I don't think moving the header code to a function is an improvement — I think it'd make sense if it were used in more than one place in the template files, to make it easier to maintain.

Ask Internet Explorer and Chrome to use the latest rendering engine.

Why is that needed? (I don't think it is.)

Modified meta viewport to prevent mobile browser scaling.

Yes, we were missing the initial scale bit—thanks for the nudge on that. I'll add that part in shortly.

Conditional IE classes will help child theme authors support older browsers with more accuracy from the stylesheet.

In my opinion this is out of scope for a default theme like Twenty Twelve — it's main purpose is not to be a super-awesome parent theme, so if child themes want to add in the classes on the html element they should override header.php.

Also, you should stop worrying so much about the older IEs. :)

@lancewillett
Collaborator
@jeffsebring

Thanks Lance. I should really be using Trac if I'm going to attempt to contribute.

My 2 cents is that the default theme is a way many people like myself first learn to build a theme. I don't think views should ever contain logic, and it would be best to teach people good practices.

Some of the other elements I added are from HTML5 Boilerplate, also much of which is just best practices. Here the bit about rendering engines - http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/html/#make-sure-the-latest-version-of-ie-is-used

I agree about old Explorer, but it's good to have the tools to whip it into shape when needed.

Thank you for the consideration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 36 additions and 17 deletions.
  1. +26 −2 source/functions/functions.php
  2. +10 −15 source/templates/header.php
View
28 source/functions/functions.php
@@ -191,13 +191,37 @@ function twentytwelve_admin_header_image() { ?>
<?php }
endif;
+if ( ! function_exists( 'twentytwelve_get_header_image' ) ) :
/**
- * Enqueue scripts for front-end.
+ * Print Header Image if it exists
+ *
+ * Referenced via header.php
+ *
+ * @since Twenty Twelve 1.0
+ */
+function twentytwelve_get_header_image() {
+ $header_image = get_header_image();
+
+ if ( ! empty( $header_image ) ) ?>
+ <img src="<?php echo esc_url( $header_image ); ?>" alt="" />
+
+<?php }
+endif;
+
+/**
+ * Enqueue scripts and styles for front-end.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_scripts() {
+ if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
+ wp_enqueue_script( 'comment-reply' );
+
wp_enqueue_script( 'navigation', get_template_directory_uri() . '/javascripts/theme.js', array( 'jquery' ), '20130320', true );
+
+ wp_enqueue_style( 'fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' );
+
+ wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts' );
@@ -401,4 +425,4 @@ function twentytwelve_body_class( $classes ) {
return $classes;
}
-add_filter( 'body_class', 'twentytwelve_body_class' );
+add_filter( 'body_class', 'twentytwelve_body_class' );
View
25 source/templates/header.php
@@ -8,11 +8,15 @@
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
-?><!DOCTYPE html>
-<html <?php language_attributes(); ?>>
+?><!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes( 'html' ); ?>> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" <?php language_attributes( 'html' ); ?>> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes( 'html' ); ?>> <![endif]-->
+<!--[if gt IE 8]> <!--> <html class="no-js" <?php language_attributes( 'html' ); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
-<meta name="viewport" content="width=device-width" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
@@ -44,14 +48,7 @@
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/javascripts/html5.js" type="text/javascript"></script>
<![endif]-->
-<?php
-if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
- wp_enqueue_script( 'comment-reply' );
-
-wp_enqueue_style( 'fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' );
-wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
-?>
<?php wp_head(); ?>
</head>
@@ -69,10 +66,8 @@
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
- <?php $header_image = get_header_image();
- if ( ! empty( $header_image ) ) : ?>
- <img src="<?php echo esc_url( $header_image ); ?>" alt="" />
- <?php endif; ?>
+ <?php twentytwelve_get_header_image(); ?>
+
</header><!-- #masthead -->
- <div id="main">
+ <div id="main">
Something went wrong with that request. Please try again.