Do we still care about IE8, 7 and 6? I feel it’s becoming more okay to ignore them now, but IE8 support is still a bit of a should-I-or-should-I-not case.
There are 3 really helpful scripts to load in your theme if you want to support one or more of them. They add better compatibility for “modern” things such as responsive design, CSS pseudo-classes and attribute selectors as well as HTML5 tags.
We load these if we see that the web browser used is older than IE9:
The no-js class can often be seen in css and html, normally placed on the html or body tag. What is it all about? It’s to be able to add specific CSS styling for those who view the site with javascript disabled. How does it work? We run a simple javascript that replaces the “no-js” class with “js”. If no javascript is enabled, no-js remains. As simple as that.
Often you run into CSS issues with different browsers, and one way to easily make browser-specific CSS is if you have a browser class added to the body tag of your theme. That way you can for example just add .ie8 .myclass { cssfix } to specify CSS that will only be read by a certain browser (IE8 in this case).
Unfortunately WordPress does not add a div around embed codes by default, so this is the first thing we need to do to get it to work.
Add this to your theme’s functions.php:
/* Add responsive container to embeds
/* ------------------------------------ */
function alx_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack
And next up, we need to add the CSS that makes it responsive to our style.css:
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
And that’s it! You now make iframe, object, embed and video (html5) elements responsive. The responsive CSS will always show videos in 16:9 aspect ratio, which is HD.
This code will also work with Jetpack embeds.
By default, the WordPress custom thumbnail size functionality hard-crops large source images into smaller ones perfectly well. However, you will run into size issues when the source image is smaller than the custom thumbnail size.
It can be fixed by adding this code to your theme’s functions.php file. It upscales images to fit all thumbnail sizes and crops them correctly.
First, make sure that your theme uses wp_title(). So go to your theme’s header.php and check so that it has the following set:
<title><?php wp_title(''); ?></title>
You’ll need the ” there as well to remove some default arrows that WP adds.
Next, add this to your functions.php:
To add custom thumbnail sizes to your theme, add this to your theme’s functions.php:
/* Image thumbnail sizes
/* ------------------------------------ */
function alx_setup()
{
add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}
add_action( 'after_setup_theme', 'alx_setup' );
To display a featured image with your new size (in this case “thumb-small”) in a post, just add:
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>
First, let’s go to your theme’s sidebar.php. Add the following where you want your sidebar widgets to be listed:
<?php dynamic_sidebar( 'primary' ); ?>
Then, add this to your functions.php:
/* Register sidebars
/* ------------------------------------ */
function alx_sidebars() {
register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
}
add_action( 'widgets_init', 'alx_sidebars' );
That’s all you need to make your theme widget-ready. Give it a go!
Function reference: register_sidebar
If you want to get rid of the WordPress more link scroll, so that your more link doesn’t make a jump down to the continuing content, add this to your theme’s functions.php:
/* Remove more link scroll
/* ------------------------------------ */
function alx_remove_more_link_scroll( $link ) {
$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'alx_remove_more_link_scroll' );
Instead of adding your theme javascript manually in the header.php/footer.php, a better way is to enqueue the files, so that they are loaded via wp_head() or wp_footer().
Here is how – add the following to your theme’s functions.php:
/* Enqueue javascript
/* ------------------------------------ */
function alx_scripts()
{
wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ),'', false );
wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true );
if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }
}
add_action( 'wp_enqueue_scripts', 'alx_scripts' );
In this example I am loading flexslider in the header, and a general theme scripts file in footer. So, if you set to true, it will load in the footer.