1 of 70

Slide Notes

DownloadGo Live

Pushing your Development Skills: Learning By Doing It

Published on Mar 03, 2016

I pushed my limits in WordPress development by building a custom WordPress slider for a client website. I hope you will be inspired to take on challenging projects even though you might not know the outcome. In this project, I realized that advanced client specs aren’t indomitable; they are catalysts in pushing skills as a person and developer.

PRESENTATION OUTLINE

Pushing Your WP Development Skills

by Sarah Moyer | @ayellowdaisy | sarah-moyer.com
Photo by Omega Man

About me:
*WP dev for RedX Web Design
*prefer Genesis Framework
*learned to use the circular saw since last year's WCLanc

Custom Slider

Which Slider?

Photo by Melanctha

Try them out

Photo by VinothChandar

Research Takes Time

LESSON 2

Photo by Leo Reynolds

Define your scope

Photo by m-s-y

LESSON 3

Photo by Monceau

Reach out and ask

Photo by BenSpark

Scope

  • loop 9-12 img (not jump after final slide)
  • arrows (not slide on its own)
  • dimmed slides to left / right (fully appear as screen widens)
  • caption text (if not, then part of image)
  • slides link to WP page
  • responsive
Photo by OmarC

Question:
Can you build this?

Answer: Try Slick

Slick Carousel

Voila!

LESSON 4

Photo by Leo Reynolds

Read other people's code!

Photo by Daniel Y. Go

Steps to the
Final Slider

Photo by OmarC

Steps to Final Slider

  • Slider (Slick)
  • Custom look
  • Custom fields
  • Shortcode
Photo by OmarC

LESSON 5

Photo by Leo Reynolds

Test separately

Photo by Hindrik S

before combining

Photo by audreyjm529

What pieces to test?

Photo by OmarC

Pieces

  • Add to Slick to WordPress
  • Match approved design
  • Input custom meta
  • Wrap in shortcode

Add Slick to WordPress

PIECE 1
Photo by OmarC

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
  • CenterMode JS Init

Piece 1: Add Slick to WordPress

  • HTML

Grab HTML

HTML in front-page.php

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS

Grab CSS and JS

Theme
Files

--

CSS / JS enqueued
in front-page.php

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
  • CenterMode JS Init

Grab Center Mode JS

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
  • CenterMode JS Init
  • Make it work!

LESSON 6

Photo by Leo Reynolds

Compare code if broken

Photo by Peter Ras

Slick in WP!

Pieces

  • Add to Slick to WordPress
  • Match approved design

Match Design

PIECE 2
Photo by OmarC

Approved Slider

HTML in WP

up close

CSS - Chrome Inspector

LESSON 7

Photo by Leo Reynolds

Take breaks
to
renew inspiration.

Photo by Will Montague

Match Approved Design

Pieces

  • Add to Slick to WordPress
  • Match approved design
  • Input custom meta

Input Custom Meta

PIECE 3
Photo by OmarC

Client Updates

Clean UI

Pull custom fields (ACF)

LESSON 8

Photo by Leo Reynolds

Search the Codex

Pieces

  • Add to Slick to WordPress
  • Match approved design
  • Input custom meta
  • Wrap in shortcode

Wrap in Shortcode

PIECE 4
Photo by OmarC

Combine all with sprintf

Register widget

Add widget area

Insert Shortcode

LESSON 9

Comment your code

Final Website

In summary,
the 10 lessons I learned are:

10. If at first you don’t succeed, try, try again.
9. Comment your code.
8. Search the codex.
7. Take breaks to renew inspiration.
6. Compare your code to a working demo if it's broken.
5. Test pieces separately before combining.
4. Read other people’s code.
3. Reach out to people - networking and asking for help.
2. Define your scope and your abilities.
1. Research takes time - try out different solutions.

LESSON 10

Photo by Leo Reynolds

If at first you don't succeed...

... try, try again ...

... and again and again.

Q?

Photo by anieto2k

MORE DECKS BY THIS AUTHOR

Haiku Deck In Action

63 views