adding a responsive jquery slider to your wordpress theme
TRANSCRIPT
-
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/
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
4/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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');
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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'"
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
)"
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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);
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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 $slidelin_,_metabo;
global $pt#ts_pre*i;
global $p_ersion;
echo '';
echo '';
foreach ($slidelin_,_metabo4'*ields'5
as $*
ield) {
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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;
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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;
global $slidelin_,_metabo;
if (@
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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 {
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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);
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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() { ?>
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
);
);
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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() ) {
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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) @= '' ) { ?>
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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' );
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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.
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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/
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
30/62
t present, the theme looks like this on a smartphone :i.e. at 0%9 xH9px s!reen si/e
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
32/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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***;
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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.
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
38/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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 {
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
41/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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;
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
gradient(top" MLGcKb 3"MNb* L33);
background 9ms9linear9
gradient(top" MLGcKb 3"MNb* L33);
background linear9
gradient(top" MLGcKb 3"MNb* L33);
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
44/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
45/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
46/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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 ,;
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
50/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
52/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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.
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
57/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
58/62
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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/
-
8/16/2019 Adding a Responsive JQuery Slider to Your WordPress Theme
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