Make IE 8,7 and 6 more compliant with CSS3, mediaqueries and HTML5

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:

  • html5shiv.js (source) – HTML5 support
  • selectivizr.js (source) – CSS pseudo-class support (eg :last-child)
  • respond.js (source) – mediaquery support

Read more

Using a no-js class in your WordPress theme

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.

Read more

Make WordPress default video embeds responsive

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.

Thumbnail upscale & correct crop in WordPress

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.

Read more

Simple better titles for your WordPress website

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:

Read more

Add custom thumbnail sizes to your WordPress theme

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' ); } ?>

Read more

Add sidebar widget support to your WordPress theme

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