Sarah Moyer

LEARNING BY

DOING 10 Lessons in Pushing Your Skills

@ayellowdaisy · sarah-moyer.com

➤ WP designer / developer

➤ Prefer Genesis Framework

➤ Love to learn new things(like running a circular saw)

about me

SARAH-MOYER.COM

Design File

Custom Slider from Design File

Which Slider?

Try each one!

Lesson

Research takes time

Lesson

customize CSS (styling)

change HTML (plugin code)

customize JS (animation)

For the custom slider, I can:

Lesson

Reach out and ask

Lesson

WP.org Forums

Colleagues / Co-working Spaces

Wordcamps / Local WP Meetups

Theme and Plugin Forums

Places to get help:

Can you build this?Dear Colleague,

How does this work?Dear Designer,

Lesson

Define your scope

Lesson

continous loop

arrows (not auto-slide)

link to page (not post)

unique styling (for edge slides)

mobile responsive

Slider Features:

continous loop

arrows (not auto-slide)

link to page (not post)

unique styling (for edge slides)

mobile responsive

Dear colleague, Can you

build this?

Try using thekenwheeler.github.io/slickSlick Carousel

kenwheeler.github.io/slickSlick Carousel

kenwheeler.github.io/slickSlick Carousel

continous loop

arrows (not auto-slide)

link to page (not post)

unique styling (for edge slides)

mobile responsive

Slider Features:

Lesson

Read other people’s codeLesson

Slick Carousel code:

➤ add HTML

➤ add CSS

➤ add JS

The slider didn’t work!

Lesson

Lesson

Test each piece separately

Test each piece before combiningLesson

HTML

Piece 1

HTMLCopy code from Slick website

HTMLPaste code into theme file

HTMLWorks on website?

CSS

Piece 2HTML

CSSFile structure in FTPCopy Slick files and add to website

CSSAdd CSS from Slick

CSSCall the CSS in theme file

CSSWorks on website?

Lesson

Compare code if broken Lesson

Compare using Chrome Inspector or Firebug for FirefoxCSS

CSSChrome Inspector Code into theme file

CSSWorks on website?

JSJavascript

Piece 3

HTMLCSS

JSAdd JS from Slick

Call the JS in theme fileJS

JSWorks on website?

Compare demo to websiteJS

class in HTMLJS

class in JS

JSWorks on website?

Lesson

Take breaks to renew inspiration

Lesson

Take breaks to renew inspiration

Lesson

Take breaks to renew inspiration

Lesson

Match DesignSlick on WordPress Photoshop Design File

Match Design

HTML before

HTML after

Match Design

CSS from Chrome Inspector to

style.css

Match DesignSlick on WordPress Photoshop Design File

Add Slick to WP

Match Design

Build user friendly admin

sweat or no-sweat?

Build user friendly admin

Advanced Custom Fields plugin

Build user friendly admin

Advanced Custom Fields - Repeater

User-friendly layoutInstead of code layout

Pull ACF data into slider

Lesson

Search the CodexLesson

Pull ACF data into slider

Lesson

Comment your codeLesson

Lesson

If at first you don’t succeed

try, try again

and again and again.

Sarah Moyer

Questions? Thanks for listening!

@ayellowdaisy · sarah-moyer.com

Photo credits at sarah-moyer.com/slides

LEARNING BY

DOING