Due to very low traffic from Internet Explorer users, and because WordPress no longer supports this obsolete browser, default themes have removed some IE-specific scripts and styles to give everyone else a better experience.
Most default themes had a skip-link focus fix script for navigating by keyboard in Internet Explorer and old versions of Chrome. As of WordPress 6.3, Twenty Thirteen and Twenty Fourteen no longer include it in their functions.js files, and the six themes from Twenty Fifteen to Twenty Twenty-One do not enqueue or print the script.
In addition, special stylesheets and the HTML5 Shiv script are not enqueued or included in the header.php template for three themes:
- Twenty Thirteen (its conditional code is also removed)
- Twenty Fifteen
- Twenty Seventeen
Future versions of Twenty Eleven, Twenty Twelve, Twenty Fourteen and Twenty Sixteen may remove their special styles and conditional code too.
What if I want to continue supporting Internet Explorer?
Restoring the skip-link focus fix
Twenty Thirteen users can add a minified version of the script found in later themes:
function wpdocs_twentythirteen_add_skip_link_fix_inline() {
wp_add_inline_script(
'twentythirteen-script',
'/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);'
);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentythirteen_add_skip_link_fix_inline', 11 );
Twenty Fourteen would need an adjustment for the fixed header The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.:
function wpdocs_twentyfourteen_add_skip_link_fix_inline() {
wp_add_inline_script(
'twentyfourteen-script',
'/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus(),window.scrollBy(0,-80))},!1);'
);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyfourteen_add_skip_link_fix_inline', 11 );
Enqueue the theme’s script for Twenty Fifteen, Twenty Sixteen or Twenty Seventeen:
function wpdocs_twentyseventeen_add_skip_link_fix() {
wp_enqueue_script( 'twentyseventeen-skip-link-focus-fix' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyseventeen_add_skip_link_fix' );
Add the theme’s function to the wp_print_footer_scripts action for Twenty Nineteen, Twenty Twenty or Twenty Twenty-One:
add_action( 'wp_print_footer_scripts', 'twenty_twenty_one_skip_link_focus_fix' );
Restoring conditional code, styles and scripts
Sites may have been severely broken when using old versions of Internet Explorer, even with the HTML5 Shiv script and IE-specific styles, but you could add them again.
If you have a child theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of Twenty Thirteen, you can ensure it has a header.php template that includes the conditional code and HTML5 script from previous versions of the theme. Then you could enqueue the styles in the child theme functions (or a plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party).
function wpdocs_twentythirteen_ie_restore() {
wp_enqueue_style( 'twentythirteen-ie' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentythirteen_ie_restore' );
For Twenty Fifteen, you could enqueue the two IE stylesheets. If a child theme does not already have the HTML5 script in a header.php template, the same function could enqueue that too.
function wpdocs_twentyfifteen_ie_restore() {
// Enqueue stylesheets.
wp_enqueue_style( 'twentyfifteen-ie' );
wp_enqueue_style( 'twentyfifteen-ie7' );
// If the header template does not have the HTML5 script already, enqueue it.
wp_enqueue_script(
'twentyfifteen-html5',
get_template_directory_uri() . '/js/html5.js',
array(),
'3.7.0',
false
);
wp_script_add_data( 'twentyfifteen-html5', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyfifteen_ie_restore' );
With Twenty Seventeen, both the style and script can be enqueued.
function wpdocs_twentyseventeen_ie_restore() {
wp_enqueue_style( 'twentyseventeen-ie8' );
wp_enqueue_script( 'html5' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyseventeen_ie_restore' );
For more details, see Trac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets #54421 and #56699.
Props to @westonruter and @joedolson for technical review, to @stevenlinx and @audrasjb for review.
#6-3, #bundled-theme, #core-themes, #dev-notes, #dev-notes6-3
