Adding a Responsive jQuery Slider to Your WordPress

Theme
Today I'm going to take you through integrating a responsive
jQuery slider into your WordPress theme or site. It's not a
groundbreaking tutorial but it's one that's rarely done right, so I'd
like to try and fix that. In this tutorial we're going to cover every
step from creating a custom post type to hold our slides, to
actually using the slider within our site.
We're going to be using the lovely FlexSlider 2 by WooThemes as
it's a very well-coded responsive slider that's licensed under the
GPLv2 License. If you're interested, you can take a look at the code
for FlexSlider in its GitHub Repository.
Before we do anything, we're going to take a step back and think
about:
What files the slider requires
What files we require
The first thing we're going to do is download FlexSlider.
After you've done that, go ahead an unzip it.

There are a few files there we're interested in, mainly:

flexslider.css
images/bg_direction_nav.png
jquery.flexslider-min.js
They're all we really need from the FlexSlider download.
Step 1 Setting Up the Files
Let's move those 3 files from the above into our theme's directory
now. Depending on your theme or set-up you can place the files
wherever you'd like, just take note of where those files are
sourced/referenced and adjust the code to fit their new location.
For the sake of this tutorial, we'll be using the default Twenty
Eleven theme. In the inc/ directory, create a new folder
calledslider. In there, let's create a few folders:
css

 images
js
Let's put flexslider.css in
the css folder, bg_direction_nav.png in the images folder
and jquery.flexslider-min.js in the, you guessed it, js folder.
Note: Normally I would place these in css/images/js folders
throughout the theme's directory with other files but in order to
make this tutorial 'universal', we're organising our files this way. If
you're experienced with WordPress theme development you may
want to manually organise your files.
Now we're going to create 2 more files in the slider folder:
slider.php - creates the slider's template & loads the slider's
files
slider_post_type.php - creates the slider post type
You should now have a slider folder that looks something like this:

Before we go ahead, open up your functions.php file and add in

the following two lines, which will load the two .php files we just
created:
1 require( get_template_directory() . '/inc/slider/slide

2 r_post_type.php' );
3 require( get_template_directory() . '/inc/slider/slide
4 r.php' );

Now... let's start coding!

Step 2 Slider Post Type
First thing we're going to do is create a custom post type that will
hold all our slides. Custom Post Types were introduced in WordPress
3.0 and are probably the coolest thing to ever happen to the world
(too far? I just love them).
Open up slider_post_type.php and add the following code to
create the slide custom post type:
0 <?php
1
0
2
0
3
0
4
0
5
0
6

function register_slides_posttype() {
$labels = array(
'name'
general name' ),
'singular_name'

0
7 type singular name' ),
0

=> _x( 'Slides', 'post type

=> _x( 'Slide', 'post

'add_new'

0
9

'add_new_item'

1
0

=> __( 'Add New Slide' ),

=> __( 'Add New

Slide' ),
'edit_item'

1
1

'new_item'

1
2

'view_item'

1
3

'search_items'

=> __( 'Edit Slide' ),

=> __( 'New Slide' ),
=> __( 'View Slide' ),
=> __( 'Search

1 Slides' ),
4
'not_found'

1
5

'not_found_in_trash'=> __( 'Slide' ),

1
6

'parent_item_colon' => __( 'Slide' ),

1
7
1
8

=> __( 'Slide' ),

'menu_name'

=> __( 'Slides' )

);

1
9
2
0
2
1
2

$taxonomies = array();

$supports = array('title','thumbnail');

$post_type_args = array(

2
3

'labels'

2
4

'singular_label'

2
5

'public'

2
6

'show_ui'

2
7
2
8

=> __('Slide'),

=> true,
=> true,

'publicly_queryable'=> true,
'query_var'

=> true,

'capability_type'

2
9

'has_archive'

3
0

'hierarchical'

3
1

'rewrite'

3
2

=> $labels,

=> 'post',
=> false,
=> false,

=> array( 'slug' => 'slide

s', 'with_front' => false ),

'supports'

3
3

'menu_position'

3
4

'menu_icon'

=> $supports,
=> 27,
=>

get_template_directory_uri() . '/inc/slider/images/ic
3
5 on.png',
3

6
3
7
3
8

'taxonomies'
);

3
9

register_post_type('slides',$post_type_args);

4
0
4
1

=> $taxonomies

}
add_action('init', 'register_slides_posttype');

4
2
4
3
Custom Post Type added! Below that we'll add the metabox where
there's a field for the URL that the slide should link to. We're now
going to copy the following big wall of code:
0
0
1
0
0
2
0
0
3
0
0

$slidelink_2_metabox = array(
'id' => 'slidelink',
'title' => 'Slide Link',
'page' => array('slides'),

'context' => 'normal',

0
0
5

'priority' => 'default',

0
0
6

'fields' => array(

0
0
7
0
0
8

array(

0
0
9
0
1 l',
0

'desc'

=> '',

'id'

=> 'wptuts_slideur

'type'

0
1
2

=> 'wptuts_slide

=> 'text',

'rich_editor'

0 0,
1
3

=> 'Slide URL',

'class'

0
1 url',
1

0
1
4

'name'

'max'
),

=> 0

=>

1
5

)
);

0
1
6
0
1
7

add_action('admin_menu', 'wptuts_add_slidelink_2_
meta_box');

0
1
8

function wptuts_add_slidelink_2_meta_box() {

0
1
9

global $slidelink_2_metabox;

0
2
0
foreach($slidelink_2_metabox['page'] as $page

0
2) {
1

add_meta_box($slidelink_2_metabox['id'],
0
2
2 $slidelink_2_metabox['title'],'wptuts_show_slidelink_2
_box', $page, 'normal', 'default', $slidelink_2_metab
0
2 ox);
3
0
2
4
0
2
5

}
}

0
2
6

function wptuts_show_slidelink_2_box()

0
2
7

global $post;

0
2
8

global $slidelink_2_metabox;
global $wptuts_prefix;

0
2
9

global $wp_version;

0
3
0
0
3
1

echo '<input type="hidden"

name="wptuts_slidelink_2_meta_box_nonce" value="',

0 wp_create_nonce(basename(__FILE__)), '" />';

3
2
0
3
3
0
3
4
0 ield) {
3
5
0
3
6

echo '<table class="form-table">';

foreach ($slidelink_2_metabox['fields'] as $f

0
3
7

$meta = get_post_meta($post-

0
>ID, $field['id'], true);
3
8
0
3
9

echo '<tr>',

0
'<th style="width:20%"><label
4
0 for="', $field['id'], '">',stripslashes($field['name'
0 ]), '</label></th>',
4
1
'<td
0 class="wptuts_field_type_' . str_replace('
4
', '_', $field['type']) . '">';
2
0
4
3
0
4
4

switch ($field['type']) {
case 'text':
echo '<input type="text"

name="', $field['id'], '" id="', $field['id'], '"

0
value="', $meta ? $meta : $field['std'], '"
4
5 size="30" style="width:97%"
0 /><br/>', '',stripslashes($field['desc']);
4
6
break;
0
4
7

0
4
8

}
echo

0
4
9

'</tr>';

0
5
0

0
5
1
0
5
2

'<td>',

echo '</table>';
}

0
5
3
0
5 );
4

add_action('save_post', 'wptuts_slidelink_2_save'

0
5
5

function wptuts_slidelink_2_save($post_id) {

0
5
6

global $post;
global $slidelink_2_metabox;

0
5
7
0
5
8

if (!

0 wp_verify_nonce($_POST['wptuts_slidelink_2_meta_box_no
5
9 nce'], basename(__FILE__))) {
0
6
0
0
6
1
0
6
2

return $post_id;
}

if (defined('DOING_AUTOSAVE') &&

0
DOING_AUTOSAVE) {
6
3
return $post_id;
0
6
}
4
0
6
5
0
6
6
0
6
7 id)) {

if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_

0
6
8
0
6
9

return $post_id;
}
} elseif (!current_user_can('edit_post', $pos

0 t_id)) {
7
0
0
7
1

return $post_id;

0
7
2

foreach ($slidelink_2_metabox['fields'] as $f

0 ield) {
7
3
0
7
4
0
7
5
0
7
6

$old =
get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];

if ($new && $new != $old) {

0
7
7
0
7
8

if($field['type'] == 'date') {
$new = wptuts_format_date($new);
update_post_meta($post_id, $field

0 ['id'], $new);
7
9
0
8
0

} else {

0
8
1

if(is_string($new)) {
$new = $new;

0
8
2

0
8
3 ['id'], $new);

update_post_meta($post_id, $field

0
8
4
0
8
5

0
8
6

} elseif ('' == $new && $old) {

delete_post_meta($post_id, $field['id

0 '], $old);
8
7
0
8
8
0
8
9
0
9
0
0
9

}
}

1
0
9
2
0
9
3
0
9
4
0
9
5
0
9
6
0
9
7
0
9
8
0
9
9
1
0
0
1
0
1
1

0
2
1
0
3
1
0
4
1
0
5
1
0
6
1
0
7
1
0
8
1
0
9
1
1
0
1
1
1
1
1
2

Phew. That's over. Go to your Dashboard and you'll see a new shiny
'Slides' Custom Post Type.

Step 3 Load Slider Files

Open up slider.php. Now we're going to enqueue jQuery, the
FlexSlider jQuery script and the FlexSlider stylesheet. Alternatively
you could copy the code from flexslider.css to your style.css file
if desired.
0 <?php
1
0
2
0
3

function wptuts_slider_scripts() {

0
4

wp_enqueue_script( 'jquery' );

0
5
wp_enqueue_style( 'flex-style',

0 get_template_directory_uri() . '/inc/slider/css/flexs
6
lider.css' );
0
7
0
8

wp_enqueue_script( 'flex-script',

get_template_directory_uri() . '/inc/slider/js/jquer
0
9 y.flexslider-min.js',array( 'jquery' ), false,
1 true );
0
}
1
1
add_action( 'wp_enqueue_scripts', 'wptuts_slider_
1
scripts' );
2
While we're doing this, there's something you need to do. Due to
our file structure, the flexslider.css needs some editing so it
knows where to find the arrow image. Open it up and do a search
and replace for:
images with ../images
Step 4 Initialize Slider
Now we need to add some jQuery to our <head> in order to
initialize the slider. Let's add in the following lines
to slider.phpbelow the code we just added!
0
1
0
2

function wptuts_slider_initialize() { ?>

0
3
0
4 8">

<script type="text/javascript" charset="utf-

0
5

jQuery(window).load(function() {

0
6

jQuery('.flexslider').flexslider({

0
7

animation: "fade",

0
8

direction: "horizontal",
slideshowSpeed: 7000,

0
9

animationSpeed: 600

1
0

});

1
1
1
2

});
</script>

1
3

<?php }

1
4 );

add_action( 'wp_head', 'wptuts_slider_initialize'

1
5
One of the reasons I chose to use FlexSlider is because of its
flexability. There are quite a few parameters you can tinker with,
but I just included four important ones above. Try

changing slide to fade , or horizontal to vertical . You can

take a look at all of the paremeters over here.
Note: Keep in mind that another way to do the above is using
the wp_localize_script function (see in Codex) but this is a
little bit advanced for this tutorial. However, Pippin Williamson
(another Wptuts+ author) has just written an excellent tutorial on
the subject if you're interested.
Step 5 Create Slider
Now we're going to actually create the template for the slider. First,
we'll do a WP_Query to pull 'posts' from the Slides Custom Post
Type. Next, we'll check for slides and if so start the slider. We'll
then start the loop. Each 'slide' will then check if a slide URL has
been set and if so, create a link for it. The slide's image will then be
displayed and the loop will be closed up.
0
1
0
2

function wptuts_slider_template() {

0
3
0
4

$args = array(

0
5

'post_type' => 'slides',

0
6

'posts_per_page' => 5

0
7
0

);

8
0
9

$the_query = new WP_Query( $args );

1
0
11
1
2

if ( $the_query->have_posts() ) {

1
3
1
4
1
5

<div class="flexslider">
<ul class="slides">

1
6
1
7
1
8

<?php

while ( $the_query->have_posts()

1 ) : $the_query->the_post(); ?>
9
2
0
2
1
2
2

<li>

<?php
if ( get_post_meta( get_the_i

2 d(), 'wptuts_slideurl', true) != '' ) { ?>

3
2
4

<a href="<?php echo

esc_url( get_post_meta( get_the_id(),

2 'wptuts_slideurl', true) ); ?>">

5
2
6

<?php }

2
7
2
8

echo the_post_thumbnail();

2
9
3
0
if ( get_post_meta( get_the_i
3
1 d(), 'wptuts_slideurl', true) != '' ) { ?>
3
2
3
3
3
4
3
5
3
6
3

</a>
<?php } ?>

</li>
<?php endwhile; ?>

7
3
8
3
9
4
0

</ul><!-- .slides -->

4
1

</div><!-- .flexslider -->

4
2
<?php }

4
3
4
4
4
5
4
6

wp_reset_postdata();
}

4
7
4
8
4
9
Step 6 Using the Slider

Well, we've finally made the slider! Now it's time to actually use it.
You can open up any template file, such as index.php, and echo
the wptuts_slider_template function to display the slider.
So if we wanted to show the slider in Twenty Eleven right after the
header on the home page, we would open up index.php and just
beneath get_header(); ?> , add the following:

1 <?php echo wptuts_slider_template(); ?>

But what if you're making this for a client or someone who just
doesn't want to touch template files and PHP? We should probably
create a shortcode for them, so they can just use the slider with
a [slider] shortcode.
Add this at the bottom of slider.php:
1
2

function wptuts_slider_shortcode() {

ob_start();

4
5

wptuts_slider_template();

$slider = ob_get_clean();

return $slider;

8
9

}
add_shortcode( 'slider', 'wptuts_slider_shortcode'

);

The slider can now be used within posts, pages or anywhere else
that accepts a shortcode!

Download
If you'd like, you can download the slider folder, which contains
everything we went through in this tutorial. You just need to drop it
in your theme's inc folder (or somewhere else is fine, but be sure
to adjust the code below) and add the following to
yourfunctions.php:

1 require( get_template_directory() . '/inc/slider/slide

2 r_post_type.php' );
3 require( get_template_directory() . '/inc/slider/slide
4 r.php' );

Note: For the sake of this tutorial, the namespace/text

domain wptuts has been used. You should do a search and
replace on all code if you're just copying/pasting it and replace:
wptuts_ with yourname_
'wptuts' with 'yourname'
If you liked this tutorial, let me know and I'll continue with a tutorial
on customising our slider! We'll then take a look at using
thumbnails for navigation, integrating video slides and adding in
captions.

Building a Mobile First Responsive WordPress Theme

Theme building is at the heart of WordPress. It's the technique you
use to build bespoke websites for yourself or your clients and it's a
vital skill for anyone wanting to design and develop with
WordPress.
More and more WordPress themes now are responsive - they use
CSS media queries to adapt to different screen widths, adjusting
the layout and making design and interface changes to make any
site created using the theme easier to read and interact with on a
range of devices and screen sizes.
In this tutorial I'm going to show you how to build a Mobile First
WordPress theme, which starts with the styling for the smallest
screens and works upwards.
What You'll Need for This Tutorial
In this tutorial I'm going to take a WordPress theme with minimal
styling and then style it to make it mobile first. The eventual
design will be very simple - the idea is to cover the building blocks
of the content and layout and you can add your own design
goodies afterwards if you want.
To follow the steps in this tutorial you'll need the following:
A text or code editor. If you don't already have one,
both TextWrangler and Kompozer are free.
If you're developing locally, MAMP, WAMP or XAMPP so that
you can run PHP and MySQL and work locally using
WordPress.
If you're developing remotely, an FTP client such as FileZilla.
A local WordPress installation (or a remote one you're happy
to use for testing)
I'm assuming that you're already familiar with installing and
working with WordPress. I'll work on a remote WordPress

installation
and provide links as I go along.
Unless you have your own theme you're working on, you'll also
need the starting code for the tutorial. You can see my theme
athttp://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ and
download the code for the theme at various stages of its
development from xxx [to be added based on nettuts+ downloads
system].
Before We Start: What's Mobile First?
Mobile First is a term which was first coined by Luke Wroblewski. It
refers to the
strategy of turning the way we design websites and themes on its
head. Instead of starting with a desktop design and then adjusting
it for mobile devices, we work in the other direction - we start by
designing and coding for mobile devices and then add what's
needed for larger screens. This has a few advantages:
It's faster - content or styling which isn't needed on small
screens isn't sent to them. This can be faster than just hiding
or overriding it.
It changes the way we plan content - by focusing on small
screens, we focus on what's really important rather than on
what we're including because w have the space. Designing in
this way can have a drastic impact on the eventual desktop
design.
1. Our Starting Theme
The starting theme has minimal styling applied to it, and no layout
styling at all yet - that will be added as we work through the
tutorial.
The elements which the theme includes are shown below:

At present, the theme looks like this on a smartphone (i.e. at 320 x

480px screen size):

As I haven't applied any widths yet, the site should resize to

smaller screens - but it doesn't because the smartphone is
displaying it as if it were 960px wide. The first thing to do is tell
smartphones to display the site at the actual width of the screen.
2. Setting the Screen Width
To tell smartphones to behave nicely with regard to screen width, I
add a line into the <head> section in header.php, as follows:

<meta name="viewport" content="width=device-width" /

>

This instructs smartphones to display the page at the device's

screen width rather than create a virtual 960px wide viewport
which is the default behaviour.
Now the theme looks like this on a small screen:

If you've created responsive stylesheets before but not Mobile First

ones, this will be a bit of a revelation. Remember all that extra
styling you added to your media queries for small screens? You'll
need very little of it, as a page with minimal layout styling already
looks better on mobile than it does on the desktop, as you can see
from this screenshot, taken at 1024px wide:

But I still need to add some layout styling for small screens, which
is the next step.
3. Style the Main Layout Blocks for Small Screens
I'll start by adding some widths and floats for the main elements,
to ensure that they stretch across the screen. I add some widths
and a clear:both declaration to the relevant elements:

header, nav.main, .container, .content, .sidebar,

1 footer {
2

width: 100%;

3
clear: both;

4
}

Next, to avoid the design looking squeezed into the small screen,
I'll add padding to some elements:

header, nav.main, .container, footer {

padding: 10px;

2
3

Note that these are the only horizontal values I'll be defining in
pixels, and I do this because I don't want the padding to become
too big as the screen size increases.
Now the site looks less crowded and the main elements are
displayed beneath each other:

Next I'll tidy up the widget areas and improve the navigation.
4. Add Additional Styling for Small Screens
The navigation needs to span the width of the screen and I'd like to
centre each menu item, so I'll add some styling for the menu:

nav.main {
1
background: #3394bf;

overflow: auto;

3
4

text-align: center;

5
}

This gives me a much smarter looking menu:

The widget areas are all quite close together and it's difficult to see
where one ends and another begins. I'll add some borders and
padding to address that:

.sidebar .widget {

padding: 10px 0;

border-top: 1px solid #3394bf;

Next, the footer widgets. I'll do something similar to them too:

1 footer .widget {
2

padding: 10px 0;

3
4

border-top: 1px solid #fff;

This adds some separation between my widgets:

I now have a simple layout for my theme on small screens, with

some colours, borders, margins and padding to help things along. I
won't add any extra styling here as it could slow the theme down
on mobile devices and I don't believe it's always necessary on
small screens. So the next step is to start creating media queries.
5. Add Some Media Queries
For this theme I'm going to target three additional screen sizes:
600px wide and up, which will encompass tablets in portrait
or landscape as well as desktop screens
800px wide and up, which will include tablets in landscape
mode and desktops
1025px wide and up, which will encompass all but the
smallest desktop screens. I'm deliberately going one pixel
above 1024px so that large tablets aren't affected by this
media query.

You may have spotted that my media queries aren't all based on
the width of a specific device. This is because as the range of
devices and screen widths expands, targeting specific devices
becomes less reliable than setting media queries at the point at
which the layout benefits from them. I've tested the layout by
resizing my browser window and at 600px wide it looks like this:

In my view, the design looks wrong at this width and can benefit
from some layout changes.
So, I start by adding my media queries at the end of the
stylesheet:
1
2 @media screen and (min-width: 600px) { }
3
4

@media screen and (min-width: 800px) { }

5
6
7 @media screen and (min-width: 1025px) { }
8
Note that I've used min-width , not max-width as you would if
you were styling desktop first and writing media queries for smaller
screens.
Next I'll move on to styling for tablet devices.
6. Add Styling for Tablet Devices in Portrait Mode
I want to improve my layout to make better use of the screen
space on these larger screens, and I'll also add some CSS gradients
to make the design a bit more polished.
Firstly, the layout. Inside my media query for screens 600px and
larger, I add:
01 footer {

overflow: auto;
02 }
03

.sidebar .widget,

04
05

footer aside {

06

float: left;

07

width: 49%;

08
margin-right: 2%;

09
10 }
11

.sidebar .widget:nth-child(even),

12
13

footer aside:nth-child(even) {
margin-right: 0;

14
}

This adds floats and some margins to make better use of the
screen width:

I'm now going to alter the navigation, as the current layout leaves
a lot of empty space next to each item and takes up a lot of room. I
add the following styling to create a horizontal navigation bar:

nav.main {
01

text-align: left;

02
padding: 0 10px;

03
04

05

nav.main li {

06

float: left;

07
margin: 0;

08
09
10

}
nav.main li a {

11
padding: 0 20px;

12
}

I'll also add a gradient to the menu for this screen size and above:
1 nav.main, nav.main a {
2
3

background: #183c5b;

background: -moz-lineargradient(top, #183c5b 0%, #3394bf 100%);

background: -webkitgradient(linear, left top, left bottom, colorstop(0%,#183c5b), color-stop(100%,#3394bf));
4
background: -webkit-linear-

5
6

gradient(top, #183c5b 0%,#3394bf 100%);

background: -o-linear-

7
8

gradient(top, #183c5b 0%,#3394bf 100%);

background: -ms-lineargradient(top, #183c5b 0%,#3394bf 100%);

background: lineargradient(top, #183c5b 0%,#3394bf 100%);
}

Depending on the devices and browsers I'm targeting, I could omit

some of those browser prefixes but I've left them in for any other
users of my theme.
So, I now have an improved layout for tablets in portrait
orientation, as shown in the screenshot:

7. Add Styling for Tablet Devices in Landscape Mode

I'm only going to make one change for screens of this width: I'm
going to move the sidebar to the right of the content, as the
content looks a bit stretched if it spans the whole screen. To do
this, I add the following into the media query targeting minwidth of 800px:

01

.content {

02

width: 65%;

03
float: left;

04
05
06

}
.sidebar {

07
width: 33%;

08
09

float: right;

10

clear: right;

11
12
13

}
.sidebar .widget {

14

width: 100%;

15
float: none;

16
}

.sidebar .widget:first-child {
border-top: none;
}

This does a few things:

It moves the sidebar to the right of the content
It resizes the sidebar and content and adds floats and
a clear property for the layout
It removes floats on the widgets so they're now in a column
It removes the border-top from the first widget, which no
longer needs it
The theme now looks like this on a tablet in landscape mode:

8. Add Desktop Styling

If I had built my responsive theme in the traditional way, desktop
first, I would be working on this screen size first, but here I'm

working with it last. You may have noticed by now that this makes
things very efficient - in my experience, removing desktop styling
in media queries aimed at mobile takes much more work than
tweaking my mobile layout for desktop.
I'm going to adjust the footer layout to have all four footer widget
areas next to each other, and add a background image to the
header. This image isn't crucial to the content but is there for
decoration, so I'm comfortable with the fact that it isn't in my
markup.
First, the layout. As well as adjusting footer layout, I'll add a maxwidth value to the body tag to avoid stretching the layout
across the full width of very wide screens:
01

body {

02

width: 95%;

03
04

max-width: 960px;

05

margin: 0 auto;

06

07
08

footer aside {

09

float: left;

10

width: 23.5%;

11
margin-right: 2%;

12
13

footer aside:nth-child(even) {
margin-right: 2%;
14

15
16

footer aside.fourth {
margin-right: 0;
}

The styling above goes in the media query for screens with
a min-width of 1025px, and does the following:
Adds max-width to the body
Adjusts the width and right hand margin on
the aside elements in the footer
Adjusts the margin for even numbered widget areas to 2% in
line with the other widget areas
Using the class assigned to the fourth widget area in the
theme ( .fourth ), reduces its margin to 0. I've deliberately
used a class here instead of nth-child as I need this to
work across browsers
So, what does my theme look like in the desktop?

Not bad. Finally I'll add a background image to my header.

header {
1

background: URL(images/banner-

2 image.jpg) center bottom no-repeat;

3
padding-bottom: 210px;

4
}

This adds my image as a background with some padding to allow

space for it:

The advantage of using this approach is that this image will only be
downloaded by desktop machines. As it's not in the core styling or
the media queries for smaller devices, it won't slow them down.
There are downsides to using images as backgrounds though,
especially relating to accessibility - so it's important to only use
this technique when the image is for design only and isn't part of
the content. Alternatively, I could have added a smaller version of
the image in my markup and used CSS to hide that and display a
larger version of the same image as a background for larger
screens.
Summary
I now have a responsive, Mobile First theme. By starting with small
screens and working my way up I reduced the amount of code
needed to create my responsive design and was able to ensure
that a large image isn't sent to mobile devices.
As more developers and site owners require their sites to be
responsive, being able to build responsive WordPress themes will
become an invaluable skill. In this tutorial I've shown that it
needn't be an onerous process and shouldn't take too long. Of
course, you can take the process further and add mobile-specific
content or additional styling targeted at specific devices, but that's
something for another day!

All About Responsive Iconography

This article is the third in a three-part series showing the new
approaches to iconography Iconic will be delivering. If you like what
you see in this article, please consider backing Iconic on
Kickstarter
What is Responsive Iconography?
Responsive iconography is the approach of displaying icons of
appropriate fidelity based on an icon's display size to ensure
optimal legibility.
Why This is Relevant
The content we create is viewed in more permutations than ever.
Device, screen density, resolution, platform, browser. So many
variablesall of which have an impact (to varying degrees) on our
content's legibility. Icons in particular can be quite sensitive to the
size in which they are displayed.
The prime directive of an icon is to be understood. To that end, an
icon's legibility must be ensured when it is displayed. There are
ways to design icons for greater legibilityespecially at smaller
sizes. Designing in this fashion can often come at the expense of
aestheticsor at least aesthetic options.
Aesthetics also play a vital role in iconography. Unfortunately,
legibility and aesthetics can often be opposing forces. An icon's
design usually has an optimal size where legibility and aesthetic
are well balanced. Very few, if any, icons can strike a perfect
balance of legibility and aesthetic at every size. So if we want our
icons to be legible and attractive across a wide size range, it
requires multiple versions of icons optimized for specific size
ranges.

This idea is not new. This approach used to be common for raster
icons. With the permeation of vector imagery on the web, we as
icon designers mistook scalability for legibility. So what makes

Iconic's take on this old approach unique? Iconic is shipping with

three sizes of every icon and it comes with code for the icons to
provide the optimally legible version of each icon automatically.
The Easy Way and the Hard Way
There are two basic ways to adjust icons. One plays on assumption,
the other is more accurate. One is simple, the other more complex.
The simple approach uses media queries to adjust icons at specific
screen widths. This can work since content size often scales down
in relation to screen sizemeaning an icon viewed on a desktop
screen is likely to be set at a larger size than on a mobile
screen. Maybe.

The right way to do this is to apply an icon's responsive

functionality at the element levelmeaning that the right icon is
displayed based on the icon's dimensions, not the screen's

dimensions. The best approach is for icons to be aware of their

dimensions and simply change to the most appropriate
legible/aesthetic version. This ends up being a little more
complex
So, how can we do this?
Nuts and Bolts
Note: The examples below are still proof-of-concept prototypes.
None of the following code is final, let alone beta. We're still in the
R&D phase of this approach and we know there are many issues
that still need to be addressed. We will be working on a more
concrete direction for this method after the Kickstarter campaign is
complete.
There are a few ways we're tackling responsive iconography at this
point and the "final" directions are still up in the air. We'll share
three different ways we're thinking about the technique at the
moment.
Simple media-queries
First, the simplest approach. SVG has always been at the core of
Iconic, but it's easy to forget that Iconic was one of the first sets to
also ship as a web font. As it turns out, web fonts
work tremendously well for responsive iconography. The reason
why web-fonts work well for responsive iconography is that all
icons are added to a single font. This allows size ranges to be
treated as a different weight (e.g., Iconic-Large.otf, IconicMedium.otf, Iconic-Small.otf). Every icon on the screen can be
changed simply by changing the font-weight for the web-font. In
the demo below, the icons respond to screen width.

See demo
Web-fonts and element-query polyfills
As previously mentioned, adjusting icons based on screen width is
not the best approach to ensure legibility. Icons need to respond to
their own display dimensions. Unfortunately, we do not yet have
the ability to create element queries within CSS. The good news is
that people are thinking about this and creating workarounds. The
demo below uses element queries and web fonts for a dynamicallyadjusting icon based on its display size.

See demo
SVG breakpoints
There's been some great thinking in this space, specifically
from Andreas Bovens who has been talking about SVG
breakpointsfor quite some time now. This approach relies on the
fact that media queries within an SVG file referenced as
an img , embed or object use the display dimensions of the
SVG. Meaning a media query of min-width:400px within the SVG
would trigger if the image was 400 pixels or moreregardless of
screen width. The demo below shows that functionality in action.

See demo
There's currently one problem with this approach. Those internal
breakpoints no longer work when the SVG file is injected in DOM.
SVG DOM-injection is vital to other features of Iconic, so this will be
something we'll need to figure out in the near future.
Conclusion
An illegible icon fails in its most important duty. We need to stop
thinking of vector imagery as the catch-all for icon legibility. We
need to design icons that accommodate different size ranges and
we need tools that display icons at the proper fidelity based on
their display size. None of the current opinions are perfect. But
they're a step forward in the right direction.
Back Iconic on Kickstarter
The goal of Iconic is to help provide new approaches to
iconography.

Please consider backing Iconic on Kickstarter