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.

View Outline

MORE DECKS TO EXPLORE

7 Strategies to Write a Speech with Ease

84636 views

10 ways

45183 views

TXLA Wrap-up 2015

9450 views

Techno Teaching

26945 views

How to make a portfolio

17012 views

Writing Your Book: The 5 Most Helpful Habits

19288 views

Kathy's Kitchen

5880 views

What is Creativity

67850 views

PRESENTATION OUTLINE

1.

Pushing Your WP Development Skills

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

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

3.

Custom Slider

4.

Which Slider?

Photo by Melanctha
5.

LESSON 1

Photo by horizontal.integration
6.

Try them out

Photo by VinothChandar
7.

Research Takes Time

Photo by Nathan O'Nions
8.

LESSON 2

Photo by Leo Reynolds
9.

Define your scope

Photo by m-s-y
10.

LESSON 3

Photo by Monceau
11.

Reach out and ask

Photo by BenSpark
12.

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
13.

Question:
Can you build this?

14.

Answer: Try Slick

Photo by 【Kelly D Photography】
15.

Slick Carousel

16.

Voila!

17.

LESSON 4

Photo by Leo Reynolds
18.

Read other people's code!

Photo by Daniel Y. Go
19.

Steps to the
Final Slider

Photo by OmarC
20.

Steps to Final Slider

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

LESSON 5

Photo by Leo Reynolds
22.

Test separately

Photo by Hindrik S
23.

before combining

Photo by audreyjm529
24.

What pieces to test?

Photo by OmarC
25.

Pieces

  • Add to Slick to WordPress
  • Match approved design
  • Input custom meta
  • Wrap in shortcode
Photo by Jim Nix / Nomadic Pursuits
26.

Add Slick to WordPress

PIECE 1
Photo by OmarC
27.

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
  • CenterMode JS Init
Photo by Jim Nix / Nomadic Pursuits
28.

Piece 1: Add Slick to WordPress

  • HTML
Photo by Jim Nix / Nomadic Pursuits
29.

Grab HTML

30.

HTML in front-page.php

31.

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
Photo by Jim Nix / Nomadic Pursuits
32.

Grab CSS and JS

33.

Theme
Files

--

34.

CSS / JS enqueued
in front-page.php

35.

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
  • CenterMode JS Init
Photo by Jim Nix / Nomadic Pursuits
36.

Grab Center Mode JS

37.

Piece 1: Add Slick to WordPress

  • HTML
  • CSS and JS
  • CenterMode JS Init
  • Make it work!
Photo by Jim Nix / Nomadic Pursuits
38.

LESSON 6

Photo by Leo Reynolds
39.

Compare code if broken

Photo by Peter Ras
40.

Slick in WP!

41.

Pieces

  • Add to Slick to WordPress
  • Match approved design
Photo by Jim Nix / Nomadic Pursuits
42.

Match Design

PIECE 2
Photo by OmarC
43.

Approved Slider

44.

HTML in WP

45.

up close

46.

CSS - Chrome Inspector

47.

LESSON 7

Photo by Leo Reynolds
48.

Take breaks
to
renew inspiration.

Photo by Will Montague
49.

Match Approved Design

50.

Pieces

  • Add to Slick to WordPress
  • Match approved design
  • Input custom meta
Photo by Jim Nix / Nomadic Pursuits
51.

Input Custom Meta

PIECE 3
Photo by OmarC
52.

Client Updates

53.

Clean UI

54.

Pull custom fields (ACF)

55.

LESSON 8

Photo by Leo Reynolds
56.

Search the Codex

57.

Pieces

  • Add to Slick to WordPress
  • Match approved design
  • Input custom meta
  • Wrap in shortcode
Photo by Jim Nix / Nomadic Pursuits
58.

Wrap in Shortcode

PIECE 4
Photo by OmarC
59.

Combine all with sprintf

60.

Register widget

61.

Add widget area

62.

Insert Shortcode

63.

LESSON 9

Photo by Timothy Valentine
64.

Comment your code

65.

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.
66.

LESSON 10

Photo by Leo Reynolds
67.

If at first you don't succeed...

68.

... try, try again ...

69.

... and again and again.

70.

Q?

Photo by anieto2k

Sarah Moyer

sarah-moyer.com