Most of the posts in this section are currently outdated. Until I get time to write some fresh content on here, you should keep in mind that the posts below are from 2013. A lot have changed since then.
Most of the posts in this section are currently outdated. Until I get time to write some fresh content on here, you should keep in mind that the posts below are from 2013. A lot have changed since then.
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).
With the new WP_Date_Query in WordPress 3.7+ it’s easy to list most commented posts within a certain time span from a specific category.
Note: this example lists most commented articles posted within X date, not looking for most amount of comments within that time span among all articles.
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