Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Five-Figure WordPress Website

Loading in …3

Check these out next

1 of 63 Ad

More Related Content

Similar to The Five-Figure WordPress Website (20)


Recently uploaded (20)

The Five-Figure WordPress Website

  1. 1. • @laras126 Hey! I’m Lara, not Laura. • @laras126
  2. 2. • @laras126 NYC PA UT
  3. 3. • @laras126 Lara Schenck, LLC Owner, Founder, CEO
  4. 4. • @laras126 $75,000$14,000
  5. 5. • @laras126
  6. 6. • @laras126 StackOverflow Developer Survey, 2015StackOverflow Developer Survey, 2016
  7. 7. • @laras126 😎🤓
  8. 8. • @laras126 Inside Amy Schumer, Mom Computer Therapy
  9. 9. • @laras126 The Five-Figure Wordpress Website capital_P_dangit( $text ); The Five-Figure WordPress Website
  10. 10. • @laras126 Chunks or Bust Part 1:
  11. 11. • @laras126 Karen McGrane …is awesome. CHUNKS OR BUST
  12. 12. • @laras126 Content Strategy for Mobile Read it ASAP. CHUNKS OR BUST Read all A Book Apart’s, for that matter. By Karen McGrane
  13. 13. • @laras126 A slide from Content in a Zombie Apocalypse, Karen McGrane.
  14. 14. • @laras126 Example: CHUNKS OR BUST
  15. 15. • @laras126 A content “blob” in the WordPress editor. CHUNKS OR BUST
  16. 16. • @laras126 HTML from aforementioned “blob”. CHUNKS OR BUST
  17. 17. • @laras126 Using Advanced Custom Fields for “chunks”. CHUNKS OR BUST
  18. 18. • @laras126 Repeater Field in ACF and Twig Cobalt 2 Sublime Theme by Wes Bos
  19. 19. • @laras126 “Wait, that’s not PHP!” CHUNKS OR BUST “Dang right. PHP is gross.”
  20. 20. • @laras126 CHUNKS OR BUST Twig A PHP Templating Engine
  21. 21. • @laras126 Timber Use Twig in WordPress Themes CHUNKS OR BUST By Upstatement
  22. 22. • @laras126 PHP vs. Twig Cobalt 2 Sublime Theme by Wes Bos Nice Twig Nasty PHP
  23. 23. • @laras126 MVC Architecture PHP files are “Controllers”, Twig files are “Views”. CHUNKS OR BUST
  24. 24. • @laras126 Process, Not Product Part 2:
  25. 25. • @laras126 Step 1: Content Mapping Post, Page, or neither? PROCESS, NOT PRODUCT
  26. 26. • @laras126 Designing in Text Stephen Hay’s Responsive Design Workflow PROCESS, NOT PRODUCT
  27. 27. • @laras126 Step 2: Build Chunks …the back-end. PROCESS, NOT PRODUCT
  28. 28. • @laras126 ACF Pro Best $100 I’ve ever spent. PROCESS, NOT PRODUCT
  29. 29. • @laras126 Custom Post Types COPE: Create Once, Publish Everywhere. PROCESS, NOT PRODUCT
  30. 30. • @laras126 PROCESS, NOT PRODUCT
  31. 31. • @laras126 archive.twig
  32. 32. • @laras126 tease-source.twig
  33. 33. • @laras126 FeeBee eating grass.
  34. 34. • @laras126 Header set X-Robots-Tag "noindex, nofollow" .htaccess Step 3: PROCESS, NOT PRODUCT
  35. 35. • @laras126 WP Migrate DB Pro The best $199/year I have spent. PROCESS, NOT PRODUCT
  36. 36. • @laras126 Git You have to use it. PROCESS, NOT PRODUCT
  37. 37. • @laras126 Just enough design to not be a terrible eyesore. PROCESS, NOT PRODUCT
  38. 38. • @laras126
  39. 39. • @laras126 Website Proposal Custom, Responsive WordPress Website The following is a proposed process and pricing outline for a custom WordPress website for Yuling Designs. The total cost is estimated to be between $6,500 and $13,000 and a timeframe of between 1.5 and three months. 1. CONTENT STRATEGY AND BACK-END Following a two hour meeting to determine the content structure of the website, I will build out the back-end, or WordPress Admin area. This step will result in a primarily unstyled site that is ready for real content. By task, this step can be broken down into: • Two hour strategy meeting to map out content and come up with initial feature list • Setup hosting environment • Build out back-end data structure • Training on content entry into WordPress Admin and best practices • Fundamental styling and front-end development • Resulting site will be similar to Note that this step does not result in a completed site, rather, it sets the stage for the a mid-project check-in to determine the final Scope of Work. $3,500 2. BRAND DEVELOPMENT OPTION 1: YOU DO IT We will work collaboratively to develop style tiles outlining the look and feel for the site. You will be responsible for delivering style tiles as directed. I will bill hourly for meetings and consultation regarding the development of these materials, and estimate two to four hours for this role. OPTION 2: I DO IT I will be in charge of the style tile deliverables and visual brand development. We will work together to iterate over initial visual design options to determine an initial look and feel for the site. This option includes: • Design research and development • Deliverable of two style tiles • Review meetings • Two rounds of revisions (additional visual design development will occur in stage four) $175/HR $3,000
  40. 40. • @laras126 Step 4: Front-end & Design Different every time. 😩 PROCESS, NOT PRODUCT
  41. 41. • @laras126 Style Tiles Samantha Warren Carlisle INVITATION The Carlisle collection is inspired by Yuling’s love of mixing and matching graphic patterns and hues, with careful attention paid to every fine detail. Featuring striking patterns and vivid colors, the pieces in this collection evoke a nostalgia for the glamour of the art deco era. This statement invitation is graphic and eye-catching with a bow tie pattern, metallic copper foil-stamping, and a bi-color design. The piece is flat printed single-sided on luxuriously thick cover stock with a subtle eggshell textured finish with the names richly foil-stamped in a metallic copper sheen. $ X for 100 Flat Printed, Foil-stamped Invitations with matching Matte Envelopes. Or $ X for 100 Flat Printed Invitations with matching Matte Envelopes. QUANTITY COLORS Mint and Navy with Metallic Copper Foil-stamping PRODUCT DETAILS CONCIERGE Ordering Process Frequently Asked Questions Share ADD TO WISHLIST 25 ADD TO WISHLISTSUBMIT Favicon BESPOKE WORLD OF YULING STORIES CONCIERGECOLLECTIONS #B83074#E6E6E3#FFFFFF#000000#916300 GRAPHIC LUXE SOPHISTICATED ARCHITECTURAL REFINED This turned into PROCESS, NOT PRODUCT
  42. 42. • @laras126 Photoshop I’m totally fine with it. This turned into PROCESS, NOT PRODUCT
  43. 43. • @laras126 HTML Wireframes PROCESS, NOT PRODUCT This turned into
  44. 44. • @laras126 _variables.scss Is the single, most important part. See this one here. PROCESS, NOT PRODUCT
  45. 45. • @laras126 Scaling … problem. Part 3:
  46. 46. • @laras126 SCALING…PROBLEM Katrina 10th Anniversary, Features
  47. 47. • @laras126 Content Blocks With ACF’s Flexible Content Field SCALING…PROBLEM
  48. 48. • @laras126 Front-end Content Blocks are fantastic for long form. Hold the Fort, Features SCALING…PROBLEM
  49. 49. • @laras126 1400 3207 3376 2359 SCALING…PROBLEM 15917
  50. 50. • @laras126 Lessons Learned 1. If they can mess it up, they will. SCALING…PROBLEM
  51. 51. • @laras126 45-75???!!! One option too many. The Spillway, Features SCALING…PROBLEM
  52. 52. • @laras126 Lessons Learned 1. If they can mess it up, they will. 2. Environments get confusing. SCALING…PROBLEM
  53. 53. • @laras126 “Why isn’t that article on staging anymore?” “Weren’t you working on production?” SCALING…PROBLEM “No, I put it on staging.” “Crap, I pulled from production today. ” (restores backup)
  54. 54. • @laras126 Lessons Learned 1. If they can mess it up, they will. 2. Environments get confusing. 3. Performance…oof. SCALING…PROBLEM
  55. 55. • @laras126 85 Blocks …is too many blocks. SCALING…PROBLEM
  56. 56. • @laras126 SCALING…PROBLEM Fatal Error …love those.
  57. 57. • @laras126 Solution Split block sets into Chapters, display as Custom Type archive. SCALING…PROBLEM Aside: Watch out for ALL CAPS - that should be in CSS.
  58. 58. • @laras126 Lessons Learned 1. If they can mess it up, they will. 2. Environments get confusing. 3. Out of memory… 4. Pick your battles; swallow your pride. SCALING…PROBLEM
  59. 59. • @laras126 Remus the llama. May he rest in peace.
  60. 60. • @laras126 – Me paraphrasing Dan Mall or Mike Monteiro, I can’t remember which. They are both so smart. “You are charging for an experience. The website is a bonus.”
  61. 61. • @laras126 Mike Monteiro What a rad dude.
  62. 62. • @laras126
  63. 63. • @laras126 • @laras126 Thanks!