Liz Nix

Category: WordPress

Responsive Background Images Using the WordPress Featured Image

Recently, I wanted to create responsive background images using WordPress’s featured image feature.

One of the handy features of the WordPress media uploader is that it automatically creates multiple instances of your image at different dimensions. Thumbnail, medium, large and full images are available by default and it’s easy to add your own custom sizes.

The design for the site I was working on called for full width background images in the header. I wanted to use the smallest file size that would still look great depending on the device / viewport width, and still allow the client the ability to update the background image easily. I decided to use the featured image to allow the client to dynamically set the image on each page, and media queries to choose the WordPress generated image size for the current display width. Here’s the basic recipe.

First, in functions.php make sure your theme supports thumbnails, look for add_theme_support( 'post-thumbnails' );
and then declare any sizes you need in addition to the defaults using add_image_size(); inside your theme’s setup function. Parameters are the name and width (and optional height if you want your image to be cropped), for example:

	add_image_size( 'extra-large', 1000);
        add_image_size( 'xx-large', 1600);

You’ll need to use PHP to dynamically create the CSS, so if the featured image has been set add a <style> element to to your header.php like so:


<?php if (has_post_thumbnail($post->ID)){ ?>
<style>
body .site-header{
	background-image: url(<?php echo get_the_post_thumbnail_url($post->ID, 'large'); ?>>);
}
@media (min-width:768px){
	body .site-header{
		background-image: url(<?php echo get_the_post_thumbnail_url($post->ID, 'extra-large'); ?>);
	}	
}
@media (min-width:1200px){
	body .site-header{
		background-image: url(<?php echo get_the_post_thumbnail_url($post->ID, 'xx-large'); ?>);
	}	
}
</style>
<?php } ?>

That’s all there is to it. For quick reference here are the default sizes if you’ve only enabled theme support for thumbnails:


the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

Flexnav is clearly superior to Bootstrap Nav

I just released the starter theme that this site is based on with one very important change, I used Flexnav by Jason Weaver instead of Bootstrap’s built in navbar.

Flexnav solved several key issues with the BS (3.x) navbar which, frankly, drove me nuts!

  1. Flexnav allows for basically unlimited subnav depth out of the box.
  2. Drop down parent items can be actual links
  3.  Hover reveal for desktop
  4. Installation is easier – there is no need for a bunch of extraneous classes to nest subnavs so there is no need for a complicated nav walker class on your wp_nav_menu function.
  5. The code is more elegant for its simplicity

I’m curious to find out whether BS 4 will give me reason to switch back, but I doubt it because Flexnav is everything I ever wanted in a responsive nav menu. You can get it from jasonweaver.name/lab/flexiblenavigation/

Filtering your custom post type archive results

I’m working on a custom post type with lot’s of custom meta data.

Today I accomplished filtering my post archive by user input, either entering a name into a text filed, or choosing a taxonomy term for a drop down. I had to switch from using get_posts to query_posts to make use of the query_posts search parameter, which saves me from manually having to sanitize the input and match the query string. Which is great, because I don’t know how to do that yet. Long story short, foreach became if … while … and everything else remained exactly the same.

My category select was another challenge to overcome. Even though WordPress has a really cool built in function wp_dropdown_categories it wasn’t working for me because I wanted additional options, not just the terms list. I ended up using get_terms instead and putting my term slug and term name values in the appropriate place and it works beautifully. This was after I almost gave up and hard-coded my list since I was trying to use get_the_terms at first until I realized get_the_terms is obviously post-specific which is why I used it in my post results, but get_terms applies to the whole taxonomy that I specify.