Adding a Responsive JQuery Slider to Your WordPress Theme

8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme

1/62

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 agroundbreaking tutorial but it's one that's rarely done right, so I'dlike to try and fx that. In this tutorial e're going to !over everystep "rom !reating a !ustom post type to hold our slides, toa!tually using the slider ithin our site.

We're going to be using the lovely #lex$lider % by WooThemes asit's a very ell&!oded responsive slider that's li!ensed under theP(v% (i!ense. I" you're interested, you !an take a look at the !ode"or #lex$lider in its it)ub *epository.

+e"ore e do anything, e're going to take a step ba!k and thinkabout

• What fles the slider re-uires

• What fles we re-uire

The frst thing e're going to do is donload #lex$lider.

"ter you've done that, go ahead an un/ip it.

http://www.woothemes.com/flexslider/http://woothemes.com/https://github.com/woothemes/FlexSlider/https://github.com/woothemes/FlexSlider/zipball/masterhttp://woothemes.com/https://github.com/woothemes/FlexSlider/https://github.com/woothemes/FlexSlider/zipball/masterhttp://www.woothemes.com/flexslider/


2/62

There are a "e fles there e're interested in, mainly

• fexslider.css

•

images!g"direction"nav.png

• j#uery.fexslider$min.js

They're all e really need "rom the #lex$lider donload.

Step % Setting &p the 'iles

(et's move those 0 fles "rom the above into our theme's dire!toryno. 1epending on your theme or set&up you !an pla!e the flesherever you'd like, just take note o" here those fles aresour!ed2re"eren!ed and adjust the !ode to ft their ne lo!ation.

#or the sake o" this tutorial, e'll be using the de"ault Tenty3leven theme. In the inc dire!tory, !reate a ne "older!alledslider. In there, let's !reate a "e "olders

• css


3/62

• images

• js

(et's put fexslider.css in

the css "older, !g"direction"nav.png in the images "olderand j#uery.fexslider$min.js in the, you guessed it, js "older.

(ote) 4ormally I ould pla!e these in css2images2 js "oldersthroughout the theme's dire!tory ith other fles but in order tomake this tutorial 'universal', e're organising our fles this ay. I"you're experien!ed ith WordPress theme development you mayant to manually organise your fles.

4o e're going to !reate % more fles in the slider "older

• slider.php & !reates the slider's template 5 loads the slider'sfles

• slider"post"type.php & !reates the slider post type

6ou should no have a slider "older that looks something like this

+e"ore e go ahead, open up your *unctions.php fle and add inthe "olloing to lines, hi!h ill load the to .php fles e just!reated

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


4/62


5/62

8

0

9

1

0

1

1

1

2

1

3

1

4

1

5

1

6

1

7

1

8

1

9

2

0

2

1

2

'add_ne' => __( '%dd &e !lide' )"

'add_ne_item' => __( '%dd &e

!lide' )"

'edit_item' => __( 'dit !lide' )"

'ne_item' => __( '&e !lide' )"

'ie_item' => __( 'ie !lide' )"

'search_items' => __( '!earch

!lides' )"

'not_*o#nd' => __( '!lide' )"

'not_*o#nd_in_trash'=> __( '!lide' )"

'parent_item_colon'

=> __( '!lide'

)"

'men#_name' => __( '!lides' )

);

$taonomies = array();

$s#pports = array('title'"'th#mbnail');


6/62

2

2

3

2

4

2

5

2

6

2

7

2

8

2

9

3

0

3

1

3

2

3

3

3

4

3

5

3

$post_type_args = array(

'labels' => $labels"

'sing#lar_label' => __('!lide')"

'p#blic' => tr#e"

'sho_#i' => tr#e"

'p#blicly_+#eryable'=> tr#e"

'+#ery_ar' => tr#e"

'capability_type' => 'post'"

'has_archie' => *alse"

'hierarchical' => *alse"

'rerite' => array( 'sl#g' => 'slide

s'" 'ith_*ront' => *alse )"

's#pports' => $s#pports"

'men#_position' => ,-"

'men#_icon' =>

get_template_directory_#ri() . '/inc/slider/images/ic

on.png'"


7/62

6

3

7

3

8

3

9

4

0

4

1

4

2

4

3

'taonomies' => $taonomies

);

register_post_type('slides'"$post_type_args);

add_action('init'" 'register_slides_posttype');

8ustom Post Type added7 +elo that e'll add the metabox here

there's a feld "or the >*( that the slide should link to. We're nogoing to !opy the "olloing big all o" !ode

0

0

1

0

0

2

0

0

3

0

0

$slidelin_,_metabo = array(

'id' => 'slidelin'"

'title' => '!lide 0in'"

'page' => array('slides')"


8/62

4

0

0

5

0

0

6

0

0

7

0

0

8

0

0

9

0

1

0

0

1

1

0

1

2

0

13

0

1

4

0

'contet' => 'normal'"

'priority' => 'de*a#lt'"

'*ields' => array(

array(

'name' => '!lide 120'"

'desc' => ''"

'id' => 'pt#ts_slide#r

l'"

'class' => 'pt#ts_slide

#rl'"

'type' => 'tet'"

'rich_editor' =>

3"

'ma' => 3

)"


9/62

1

5

0

16

0

1

7

0

1

8

0

1

9

0

2

0

0

2

1

0

2

2

0

2

3

02

4

0

2

5

)

);

add_action('admin_men#'" 'pt#ts_add_slidelin_,_

meta_bo');

function pt#ts_add_slidelin_,_meta_bo() {

global $slidelin_,_metabo;

foreach($slidelin_,_metabo4'page'5 as $page

) {

add_meta_bo($slidelin_,_metabo4'id'5"

$slidelin_,_metabo4'title'5"'pt#ts_sho_slidelin_,

_bo'" $page" 'normal'" 'de*a#lt'" $slidelin_,_metab

o);


10/62

0

2

6

02

7

0

2

8

0

2

9

0

3

0

0

3

1

0

3

2

0

3

3

0

3

4

0

3

5

0

3

6

function pt#ts_sho_slidelin_,_bo() {

global $post;


global $pt#ts_pre*i;

global $p_ersion;

echo '';

echo '';

foreach ($slidelin_,_metabo4'*ields'5

as $*

ield) {


11/62

0

3

7

03

8

0

3

9

0

4

0

0

4

1

0

4

2

0

4

3

0

4

4

0

4

5

0

4

6

0

4

7

$meta = get_post_meta($post9

>8:" $*ield4'id'5" tr#e);

echo ''"

''"stripslashes($*ield4'name'

5)" ''"

'';

switch ($*ield4'type'5) {

case 'tet'

echo '
'" ''"stripslashes($*ield4'desc'5);

break;


12/62

0

4

8

04

9

0

5

0

0

5

1

0

5

2

0

5

3

0

5

4

0

5

5

0

5

6

0

5

7

0

5

8

echo ''"

'';

echo '';

add_action('sae_post'" 'pt#ts_slidelin_,_sae'

);

function pt#ts_slidelin_,_sae($post_id) {

global $post;


if (@


13/62

0

5

9

06

0

0

6

1

0

6

2

0

6

3

0

6

4

0

6

5

0

6

6

0

6

7

0

6

8

0

6

9

p_eri*y_nonce($_AB!C4'pt#ts_slidelin_,_meta_bo_no

nce'5" basename(__780__))) {

return $post_id;

if (de*ined(':B8&D_%1CB!%') EE

:B8&D_%1CB!%) {

return $post_id;

if ('page' == $_AB!C4'post_type'5) {

if (@c#rrent_#ser_can('edit_page'" $post_

id)) {

return $post_id;

elseif (@c#rrent_#ser_can('edit_post'" $pos


14/62

0

7

0

07

1

0

7

2

0

7

3

0

7

4

0

7

5

0

7

6

0

7

7

0

7

8

0

7

9

0

8

0

t_id)) {

return $post_id;

foreach ($slidelin_,_metabo4'*ields'5 as $*

ield) {

$old =

get_post_meta($post_id" $*ield4'id'5" tr#e);

$ne = $_AB!C4$*ield4'id'55;

if ($ne EE $ne @= $old) {

if($*ield4'type'5 == 'date') {

$ne = pt#ts_*ormat_date($ne);

#pdate_post_meta($post_id" $*ield4'id'5" $ne);

else {


15/62

0

8

1

08

2

0

8

3

0

8

4

0

8

5

0

8

6

0

8

7

0

8

8

0

8

9

0

9

0

0

9

if(is_string($ne)) {

$ne = $ne;

#pdate_post_meta($post_id" $*ield

4'id'5" $ne);

elseif ('' == $ne EE $old) {

delete_post_meta($post_id" $*ield4'id

'5" $old);


16/62

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

00

1

0

1

1


17/62

0

2

1

03

1

0

4

1

0

5

1

0

6

1

0

7

1

0

8

1

0

9

1

1

0

11

1

1

1

2


18/62

Phe. That's over. o to your 1ashboard and you'll see a ne shiny'$lides' 8ustom Post Type.

Step , -oad Slider 'iles

=pen up slider.php. 4o e're going to en-ueue jQuery, the#lex$lider jQuery s!ript and the #lex$lider stylesheet. lternativelyyou !ould !opy the !ode "rom fexslider.css to your style.css fle

i" desired.

0

1

0

2

0

3

0

4

0

5


19/62

0

6

0

7

0

8

0

9

1

0

1

1

1

2

get_template_directory_#ri() . '/inc/slider/css/*les

lider.css' );

p_en+#e#e_script( '*le9script'"

get_template_directory_#ri() . '/inc/slider/Fs/F+#er

y.*leslider9min.Fs'"array( 'F+#ery' )" *alse"

tr#e );

add_action( 'p_en+#e#e_scripts'" 'pt#ts_slider_

scripts' );

While e're doing this, there's something you need to do. 1ue toour fle stru!ture, the fexslider.css needs some editing so itknos here to fnd the arro image. =pen it up and do a sear!h

and repla!e "or

• images ith ../images

Step /nitiali0e Slider

4o e need to add some jQuery to our in order to

initiali/e the slider. (et's add in the "olloing linesto slider.phpbelo the !ode e just added7

0

1

0

2

function pt#ts_slider_initialie() { ?>


20/62

0

3

0

4

0

5

0

6

0

7

0

8

0

9

1

0

1

1

1

2

1

3

1

4

1

5

FH#ery(indo).load(function() {

FH#ery('.*leslider').*leslider({

animation 6*ade6"

direction 6horiontal6"

slidesho!peed -333"

animation!peed I33

);

);


21/62

!hanging slide to *ade , or horiontal to ertical . 6ou !an

take a look at all o" the paremeters over here.

(ote) @eep in mind that another ay to do the above is using

the p_localie_script "un!tion :see in 8odex< but this is alittle bit advan!ed "or this tutorial. )oever, Pippin Williamson:another WptutsA author< has just ritten an ex!ellent tutorial onthe subje!t i" you're interested.

Step 1 2reate Slider

4o e're going to a!tually !reate the template "or the slider. #irst,

e'll do a JA_H#ery to pull 'posts' "rom the $lides 8ustom Post

Type. 4ext, e'll !he!k "or slides and i" so start the slider. We'llthen start the loop. 3a!h 'slide' ill then !he!k i" a slide >*( hasbeen set and i" so, !reate a link "or it. The slide's image ill then bedisplayed and the loop ill be !losed up.

0

1

0

2

0

3

0

4

0

5

06

0

7

0

function pt#ts_slider_template() {

$args = array(

'post_type' => 'slides'"

'posts_per_page' => K

);

https://gist.github.com/3883059http://codex.wordpress.org/Function_Reference/wp_localize_scripthttp://pippinsplugins.com/making-php-variables-available-to-your-js/http://codex.wordpress.org/Class_Reference/WP_Queryhttps://gist.github.com/3883059http://codex.wordpress.org/Function_Reference/wp_localize_scripthttp://pippinsplugins.com/making-php-variables-available-to-your-js/http://codex.wordpress.org/Class_Reference/WP_Query


22/62

8

0

9

1

0

11

1

2

1

3

1

4

1

5

1

6

17

1

8

1

9

2

0

2

1

2

2

$the_+#ery = new JA_H#ery( $args );

if ( $the_+#ery9>hae_posts() ) {


23/62

2

3

2

4

2

5

2

6

2

7

2

8

2

9

3

0

3

1

3

2

3

3

3

4

3

5

3

6

3

d()" 'pt#ts_slide#rl'" tr#e) @= '' ) { ?>


24/62

7

3

8

3

9

4

0

4

1

4

2

4

3

4

4

4

5

4

6

4

7

4

8

4

9


25/62

Well, e've fnally made the slider7 4o it's time to a!tually use it. 6ou !an open up any template fle, su!h as index.php, and e!ho

the pt#ts_slider_template "un!tion to display the slider.

$o i" e anted to sho the slider in Tenty 3leven right a"ter theheader on the home page, e ould open up index.php and just

beneath get_header(); ?> , add the "olloing

1

+ut hat i" you're making this "or a !lient or someone ho justdoesn't ant to tou!h template fles and P)P; We should probably!reate a shortcode "or them, so they !an just use the slider ith

a 4slider5 short!ode.

dd this at the bottom o" slider.php

1

2

3

4

5

6

7

8

9

function pt#ts_slider_shortcode() {

ob_start();

pt#ts_slider_template();

$slider = ob_get_clean();

return $slider;

add_shortcode( 'slider'" 'pt#ts_slider_shortcode'

http://codex.wordpress.org/Shortcode_APIhttp://codex.wordpress.org/Shortcode_API


26/62

);

The slider !an no be used ithin posts, pages or anyhere elsethat a!!epts a short!ode7

4o5nload

I" you'd like, you !an donload the slider "older, hi!h !ontainseverything e ent through in this tutorial. 6ou just need to drop itin your theme's inc "older :or somehere else is fne, but be sureto adjust the !ode belo< and add the "olloing toyour*unctions.php

1

2

3

4

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

r_post_type.php' );

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

r.php' );


27/62

(ote) #or the sake o" this tutorial, the namespa!e2text

domain pt#ts has been used. 6ou should do a sear!h and

repla!e on all !ode i" you're just !opying2pasting it and repla!e

• pt#ts_ ith yo#rname_

• 'pt#ts' ith 'yo#rname'

I" you liked this tutorial, let me kno and I'll !ontinue ith a tutorialon !ustomising our slider7 We'll then take a look at usingthumbnails "or navigation, integrating video slides and adding in!aptions.


28/62

6uilding a 7o!ile 'irst Responsive WordPress Theme

Theme building is at the heart o" WordPress. It's the te!hni-ue youuse to build bespoke ebsites "or yoursel" or your !lients and it's avital skill "or anyone anting to design and develop ithWordPress.

Bore and more WordPress themes no are responsive & they use8$$ media -ueries to adapt to diCerent s!reen idths, adjustingthe layout and making design and inter"a!e !hanges to make anysite !reated using the theme easier to read and intera!t ith on arange o" devi!es and s!reen si/es.

In this tutorial I'm going to sho you ho to build a Bobile #irst

WordPress theme, hi!h starts ith the styling "or the smallests!reens and orks upards.

What You8ll (eed *or This Tutorial

In this tutorial I'm going to take a WordPress theme ith minimalstyling and then style it to make it mobile frst. The eventualdesign ill be very simple & the idea is to !over the building blo!kso" the !ontent and layout and you !an add your on designgoodies a"terards i" you ant.

To "ollo the steps in this tutorial you'll need the "olloing

• text or !ode editor. I" you don't already have one,

both TextWrangler and @ompo/er are "ree.

• I" you're developing lo!ally, BBP, WBP or DBPP so that

you !an run P)P and By$Q( and ork lo!ally usingWordPress.

•

I" you're developing remotely, an #TP !lient su!h as #ileEilla.

• lo!al WordPress installation :or a remote one you're happy

to use "or testing<

I'm assuming that you're already "amiliar ith installing andorking ith WordPress. I'll ork on a remote WordPress

http://www.alistapart.com/articles/responsive-web-design/http://www.barebones.com/products/textwrangler/http://www.kompozer.net/http://www.mamp.info/en/index.htmlhttp://www.wampserver.com/en/http://www.apachefriends.org/en/xampp.htmlhttp://filezilla-project.org/http://wordpress.org/download/http://www.alistapart.com/articles/responsive-web-design/http://www.barebones.com/products/textwrangler/http://www.kompozer.net/http://www.mamp.info/en/index.htmlhttp://www.wampserver.com/en/http://www.apachefriends.org/en/xampp.htmlhttp://filezilla-project.org/http://wordpress.org/download/


29/62

installationand provide links as I go along.

>nless you have your on theme you're orking on, you'll alsoneed the starting !ode "or the tutorial. 6ou !an see my theme

athttp22ra!helm!!ollin.!o.uk2nettuts&presponsive&tutorial2 anddonload the !ode "or the theme at various stages o" itsdevelopment "rom xxx Fto be added based on nettutsA donloadssystemG.

6e*ore We Start) What8s 7o!ile 'irst9

Bobile #irst is a term hi!h as frst !oined by (uke Wrobleski. Itre"ers to thestrategy o" turning the ay e design ebsites and themes on its

head. Instead o" starting ith a desktop design and then adjustingit "or mobile devi!es, e ork in the other dire!tion & e start bydesigning and !oding "or mobile devi!es and then add hat'sneeded "or larger s!reens. This has a "e advantages

• It's "aster & !ontent or styling hi!h isn't needed on small

s!reens isn't sent to them. This !an be "aster than just hidingor overriding it.

• It !hanges the ay e plan !ontent & by "o!using on small

s!reens, e "o!us on hat's really important rather than onhat e're in!luding be!ause have the spa!e. 1esigning inthis ay !an have a drasti! impa!t on the eventual desktopdesign.

%. :ur Starting Theme

The starting theme has minimal styling applied to it, and no layoutstyling at all yet & that ill be added as e ork through thetutorial.

The elements hi!h the theme in!ludes are shon belo

http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/http://www.lukew.com/ff/entry.asp?933http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/http://www.lukew.com/ff/entry.asp?933


30/62

t present, the theme looks like this on a smartphone :i.e. at 0%9 xH9px s!reen si/e


31/62

1

This instru!ts smartphones to display the page at the devi!e'ss!reen idth rather than !reate a virtual JK9px ide vieporthi!h is the de"ault behaviour.

4o the theme looks like this on a small s!reen

I" you've !reated responsive stylesheets be"ore but not Bobile #irstones, this ill be a bit o" a revelation. *emember all that extrastyling you added to your media -ueries "or small s!reens; 6ou'llneed very little o" it, as a page ith minimal layout styling alreadylooks better on mobile than it does on the desktop, as you !an see"rom this s!reenshot, taken at L9%Hpx ide


32/62


33/62

+ut I still need to add some layout styling "or small s!reens, hi!his the next step.

,. Style the 7ain -ayout 6loc;s *or Small Screens

I'll start by adding some idths and ?oats "or the main elements,to ensure that they stret!h a!ross the s!reen. I add some idths

and a clearboth de!laration to the relevant elements

1

2

3

4

header" na.main" .container" .content" .sidebar"

*ooter {

width L33;

clear both;

4ext, to avoid the design looking s-uee/ed into the small s!reen,I'll add padding to some elements

1

2

3

header" na.main" .container" *ooter {

padding L3p;

4ote that these are the only hori/ontal values I'll be defning inpixels, and I do this be!ause I don't ant the padding to be!ometoo big as the s!reen si/e in!reases.

4o the site looks less !roded and the main elements aredisplayed beneath ea!h other


34/62

4ext I'll tidy up the idget areas and improve the navigation.

. Add Additional Styling *or Small Screens

The navigation needs to span the idth o" the s!reen and I'd like to!entre ea!h menu item, so I'll add some styling "or the menu

1

2

3

4

5

na.main {

background MNb*;

overflow a#to;

text-align center;

This gives me a mu!h smarter looking menu


35/62

The idget areas are all -uite !lose together and it's diM!ult to seehere one ends and another begins. I'll add some borders andpadding to address that

1

2

3

4

.sidebar .idget {

padding L3p 3;

border-top Lp solid MNb*;

4ext, the "ooter idgets. I'll do something similar to them too

1

2

3

4

*ooter .idget {

padding L3p 3;

border-top Lp solid M***;


36/62

This adds some separation beteen my idgets

I no have a simple layout "or my theme on small s!reens, ithsome !olours, borders, margins and padding to help things along. Ion't add any extra styling here as it !ould slo the theme don

on mobile devi!es and I don't believe it's alays ne!essary onsmall s!reens. $o the next step is to start !reating media -ueries.

1. Add Some 7edia Queries

#or this theme I'm going to target three additional s!reen si/es

• K99px ide and up, hi!h ill en!ompass tablets in portrait

or lands!ape as ell as desktop s!reens

•99px ide and up, hi!h ill in!lude tablets in lands!apemode and desktops

• L9%Npx ide and up, hi!h ill en!ompass all but the

smallest desktop s!reens. I'm deliberately going one pixelabove L9%Hpx so that large tablets aren't aCe!ted by thismedia -uery.


37/62

6ou may have spotted that my media -ueries aren't all based onthe idth o" a spe!if! devi!e. This is be!ause as the range o"devi!es and s!reen idths expands, targeting spe!if! devi!esbe!omes less reliable than setting media -ueries at the point athi!h the layout benefts "rom them. I've tested the layout by

resi/ing my broser indo and at K99px ide it looks like this


38/62


39/62

In my vie, the design looks rong at this idth and !an beneft"rom some layout !hanges.

$o, I start by adding my media -ueries at the end o" thestylesheet

1

2

3

4

5

6

7

8

Omedia screen and ( min-width I33p) {

Omedia screen and ( min-width G33p) {

Omedia screen and ( min-width L3,Kp) {

4ote that I've used min9idth , not ma9idth as you ould i"

you ere styling desktop frst and riting media -ueries "or smallers!reens.

4ext I'll move on to styling "or tablet devi!es.

3. Add Styling *or Ta!let 4evices in Portrait 7ode

I ant to improve my layout to make better use o" the s!reenspa!e on these larger s!reens, and I'll also add some 8$$ gradientsto make the design a bit more polished.

#irstly, the layout. Inside my media -uery "or s!reens K99px andlarger, I add

01 *ooter {


40/62

02

03

04

05

06

07

08

09

10

11

12

13

14

overflow a#to;

.sidebar .idget"

*ooter aside {

float le*t;

width N;

margin-right ,;

.sidebar .idgetnth9child(een)"

*ooter asidenth9child(een) {

margin-right 3;

This adds ?oats and some margins to make better use o" thes!reen idth


41/62


42/62

I'm no going to alter the navigation, as the !urrent layout leavesa lot o" empty spa!e next to ea!h item and takes up a lot o" room. Iadd the "olloing styling to !reate a hori/ontal navigation bar

01

02

03

04

05

06

07

08

09

10

11

12

na.main {

text-align le*t;

padding 3 L3p;

na.main li {

float le*t;

margin 3;

na.main li a {

padding 3 ,3p;

I'll also add a gradient to the menu "or this s!reen si/e and above

1

2

3

na.main" na.main a {

background MLGcKb;


43/62

4

5

6

7

8

9

background 9mo9linear9

gradient(top" MLGcKb 3" MNb* L33);

background 9ebit9

gradient(linear" le*t top" le*t bottom" color9

stop(3"MLGcKb)" color9stop(L33"MNb*));

background 9ebit9linear9

gradient(top" MLGcKb 3"MNb* L33);

background 9o9linear9


background 9ms9linear9


background linear9


1epending on the devi!es and brosers I'm targeting, I !ould omitsome o" those broser prefxes but I've le"t them in "or any otherusers o" my theme.

$o, I no have an improved layout "or tablets in portraitorientation, as shon in the s!reenshot


44/62


45/62


46/62


47/62

=. Add 4es;top Styling

I" I had built my responsive theme in the traditional ay, desktopfrst, I ould be orking on this s!reen si/e frst, but here I'm


48/62

orking ith it last. 6ou may have noti!ed by no that this makesthings very eM!ient & in my experien!e, removing desktop stylingin media -ueries aimed at mobile takes mu!h more ork thanteaking my mobile layout "or desktop.

I'm going to adjust the "ooter layout to have all "our "ooter idgetareas next to ea!h other, and add a ba!kground image to theheader. This image isn't !ru!ial to the !ontent but is there "orde!oration, so I'm !om"ortable ith the "a!t that it isn't in mymarkup.

#irst, the layout. s ell as adjusting "ooter layout, I'll add a ma9

idth value to the body tag to avoid stret!hing the layout

a!ross the "ull idth o" very ide s!reens

01

02

03

04

05

06

07

08

09

10

11

12

13

body {

width K;

max-width I3p;

margin 3 a#to;

*ooter aside {

float le*t;

width ,.K;

margin-right ,;


49/62

14

15

16

*ooter asidenth9child(een) {

margin-right ,;

*ooter aside.*o#rth {

margin-right 3;

The styling above goes in the media -uery "or s!reens ith

a min9idth o" L9%Npx, and does the "olloing

• dds ma9idth to the body

• djusts the idth and right hand margin on

the aside elements in the "ooter

• djusts the margin "or even numbered idget areas to %O in

line ith the other idget areas

• >sing the !lass assigned to the "ourth idget area in the

theme : .*o#rth


50/62


51/62

4ot bad. #inally I'll add a ba!kground image to my header.

1

2

3

4

header {

background 120(images/banner9

image.Fpg) center bottom no9repeat;

padding-bottom ,L3p;

This adds my image as a ba!kground ith some padding to allospa!e "or it


52/62


53/62

The advantage o" using this approa!h is that this image ill only bedonloaded by desktop ma!hines. s it's not in the !ore styling orthe media -ueries "or smaller devi!es, it on't slo them don.

There are donsides to using images as ba!kgrounds though,espe!ially relating to a!!essibility & so it's important to only use

this te!hni-ue hen the image is "or design only and isn't part o"the !ontent. lternatively, I !ould have added a smaller version o"the image in my markup and used 8$$ to hide that and display alarger version o" the same image as a ba!kground "or largers!reens.

Summary

I no have a responsive, Bobile #irst theme. +y starting ith smalls!reens and orking my ay up I redu!ed the amount o" !ode

needed to !reate my responsive design and as able to ensurethat a large image isn't sent to mobile devi!es.

s more developers and site oners re-uire their sites to beresponsive, being able to build responsive WordPress themes illbe!ome an invaluable skill. In this tutorial I've shon that itneedn't be an onerous pro!ess and shouldn't take too long. ="!ourse, you !an take the pro!ess "urther and add mobile&spe!if!!ontent or additional styling targeted at spe!if! devi!es, but that'ssomething "or another day7


54/62

ll bout *esponsive I!onography

This arti!le is the third in a three&part series shoing the ne

approa!hes to i!onography I!oni! ill be delivering. I" you like hat

you see in this arti!le, please !onsider ba!king I!oni! on

@i!kstarter

What is *esponsive I!onography;

*esponsive i!onography is the approa!h o" displaying i!ons o"

appropriate fdelity based on an i!on's display si/e to ensure

optimal legibility.

Why This is *elevant

The !ontent e !reate is vieed in more permutations than ever.1evi!e, s!reen density, resolution, plat"orm, broser. $o many

variablesall o" hi!h have an impa!t :to varying degrees< on our

!ontent's legibility. I!ons in parti!ular !an be -uite sensitive to the

si/e in hi!h they are displayed.

The prime dire!tive o" an i!on is to be understood. To that end, an

i!on's legibility must be ensured hen it is displayed. There are

ays to design i!ons "or greater legibilityespe!ially at smaller

si/es. 1esigning in this "ashion !an o"ten !ome at the expense o"

aestheti!sor at least aestheti! options.

estheti!s also play a vital role in i!onography. >n"ortunately,

legibility and aestheti!s !an o"ten be opposing "or!es. n i!on's

design usually has an optimal size here legibility and aestheti!

are ell balan!ed. ery "e, i" any, i!ons !an strike a per"e!t

balan!e o" legibility and aestheti! at every si/e. $o i" e ant our

i!ons to be legible and attra!tive a!ross a ide si/e range, it

re-uires multiple versions o" i!ons optimi/ed "or spe!if! si/e

ranges.

http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-webhttp://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-webhttp://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-webhttp://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web


55/62

This idea is not ne. This approa!h used to be !ommon "or raster

i!ons. With the permeation o" ve!tor imagery on the eb, e as

i!on designers mistook s!alability "or legibility. $o hat makes


56/62

I!oni!'s take on this old approa!h uni-ue; I!oni! is shipping ith

three si/es o" every i!on and it !omes ith !ode "or the i!ons to

provide the optimally legible version o" ea!h i!on automati!ally.

The 3asy Way and the )ard Way

There are to basi! ays to adjust i!ons. =ne plays on assumption,

the other is more a!!urate. =ne is simple, the other more !omplex.

The simple approa!h uses media -ueries to adjust i!ons at spe!if!

s!reen idths. This can ork sin!e !ontent si/e o"ten s!ales don

in relation to s!reen si/emeaning an i!on vieed on a desktop

s!reen is likely to be set at a larger si/e than on a mobile

s!reen. Maybe.


57/62


58/62


59/62

$ee demo

Web&"onts and element&-uery polyflls

s previously mentioned, adjusting i!ons based on s!reen idth is

not the best approa!h to ensure legibility. I!ons need to respond to

their on display dimensions. >n"ortunately, e do not yet havethe ability to !reate element -ueries ithin 8$$. The good nes is

that people are thinking about this and !reating orkarounds. The

demo belo uses element -ueries and eb "onts "or a dynami!ally&

adjusting i!on based on its display si/e.

http://tutsplus.github.io/Responsive-Iconography/screen-width/index.htmlhttp://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/https://github.com/tysonmatanich/elementQueryhttp://tutsplus.github.io/Responsive-Iconography/screen-width/index.htmlhttp://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/https://github.com/tysonmatanich/elementQuery


60/62

$ee demo

$ breakpoints

There's been some great thinking in this spa!e, spe!if!ally

"rom ndreas +ovens ho has been talking about $

breakpoints"or -uite some time no. This approa!h relies on the"a!t that media -ueries ithin an $ fle re"eren!ed as

an img , embed or obFect use the display dimensions o" the

$. Beaning a media -uery o" min9idthN33p ithin the $

ould trigger i" the image as H99 pixels or moreregardless o"

s!reen idth. The demo belo shos that "un!tionality in a!tion.

http://tutsplus.github.io/Responsive-Iconography/element-width/index.htmlhttps://twitter.com/andreasbovenshttp://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizeshttp://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizeshttp://tutsplus.github.io/Responsive-Iconography/element-width/index.htmlhttps://twitter.com/andreasbovenshttp://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizeshttp://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes


61/62

$ee demo

There's !urrently one problem ith this approa!h. Those internal

breakpoints no longer ork hen the $ fle is inje!ted in 1=B.

$ 1=B&inje!tion is vital to other "eatures o" I!oni!, so this ill be

something e'll need to fgure out in the near "uture.

8on!lusion

n illegible i!on "ails in its most important duty. We need to stop

thinking o" ve!tor imagery as the !at!h&all "or i!on legibility. We

need to design i!ons that a!!ommodate diCerent si/e ranges and

e need tools that display i!ons at the proper fdelity based on

their display si/e. 4one o" the !urrent opinions are per"e!t. +ut

they're a step "orard in the right dire!tion.

+a!k I!oni! on @i!kstarter

The goal o" I!oni! is to help provide ne approa!hes to

i!onography.

http://tutsplus.github.io/Responsive-Iconography/responsive-svg/index.htmlhttp://useiconic.com/http://tutsplus.github.io/Responsive-Iconography/responsive-svg/index.htmlhttp://useiconic.com/


62/62

Please !onsider ba!king I!oni! on @i!kstarter
http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-webhttp://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web

Documents

Adding a Responsive JQuery Slider to Your WordPress Theme