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.
MORE DECKS TO EXPLORE
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
LESSON 1
Photo by horizontal.integration
Try them out
Photo by VinothChandar
Research Takes Time
Photo by Nathan O'Nions
LESSON 2
Photo by Leo Reynolds
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
Photo by 【Kelly D Photography】
Slick Carousel
Voila!
LESSON 4
Photo by Leo Reynolds
Read other people's code!
Photo by Daniel Y. Go
LESSON 5
Photo by Leo Reynolds
before combining
Photo by audreyjm529
Pieces
- Add to Slick to WordPress
- Match approved design
- Input custom meta
- Wrap in shortcode
Photo by Jim Nix / Nomadic Pursuits
Grab HTML
HTML in front-page.php
Grab CSS and JS
Theme
Files
--
CSS / JS enqueued
in front-page.php
Grab Center Mode JS
Piece 1: Add Slick to WordPress
- HTML
- CSS and JS
- CenterMode JS Init
- Make it work!
Photo by Jim Nix / Nomadic Pursuits
LESSON 6
Photo by Leo Reynolds
Slick in WP!
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
Photo by Jim Nix / Nomadic Pursuits
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
Photo by Jim Nix / Nomadic Pursuits
Combine all with sprintf
Register widget
Add widget area
Insert Shortcode
LESSON 9
Photo by Timothy Valentine
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.
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
