The Five-Figure WordPress Website

63
notlaura.com • @laras126 Hey! I’m Lara, not Laura. notlaura.com @laras126

Transcript of The Five-Figure WordPress Website

Page 1: The Five-Figure WordPress Website

notlaura.com • @laras126

Hey!I’m Lara, not Laura.

notlaura.com • @laras126

Page 2: The Five-Figure WordPress Website

notlaura.com • @laras126

NYC PA UT

Page 3: The Five-Figure WordPress Website

notlaura.com • @laras126

Lara Schenck, LLCOwner, Founder, CEO

Page 4: The Five-Figure WordPress Website

notlaura.com • @laras126

$75,000$14,000

Page 5: The Five-Figure WordPress Website

notlaura.com • @laras126

Page 6: The Five-Figure WordPress Website

notlaura.com • @laras126

StackOverflow Developer Survey, 2015StackOverflow Developer Survey, 2016

Page 7: The Five-Figure WordPress Website

notlaura.com • @laras126

😎🤓

Page 8: The Five-Figure WordPress Website

notlaura.com • @laras126Inside Amy Schumer, Mom Computer Therapy

Page 9: The Five-Figure WordPress Website

notlaura.com • @laras126

The Five-Figure Wordpress Websitecapital_P_dangit( $text );

The Five-Figure WordPress Website

Page 10: The Five-Figure WordPress Website

notlaura.com • @laras126

Chunks or BustPart 1:

Page 11: The Five-Figure WordPress Website

notlaura.com • @laras126

Karen McGrane…is awesome.

CHUNKS OR BUST

Page 12: The Five-Figure WordPress Website

notlaura.com • @laras126

Content Strategy for MobileRead it ASAP.

CHUNKS OR BUST

Read all A Book Apart’s, for that matter. By Karen McGrane

Page 14: The Five-Figure WordPress Website

notlaura.com • @laras126

Example: MtnMeister.com

CHUNKS OR BUST

Page 15: The Five-Figure WordPress Website

notlaura.com • @laras126A content “blob” in the WordPress editor.

CHUNKS OR BUST

Page 16: The Five-Figure WordPress Website

notlaura.com • @laras126

HTML from aforementioned “blob”.

CHUNKS OR BUST

Page 17: The Five-Figure WordPress Website

notlaura.com • @laras126

Using Advanced Custom Fields for “chunks”.

CHUNKS OR BUST

Page 18: The Five-Figure WordPress Website

notlaura.com • @laras126

Repeater Field in ACF and Twig

Cobalt 2 Sublime Theme by Wes Bos

Page 19: The Five-Figure WordPress Website

notlaura.com • @laras126

“Wait, that’s not PHP!”

CHUNKS OR BUST

“Dang right. PHP is gross.”

Page 20: The Five-Figure WordPress Website

notlaura.com • @laras126

CHUNKS OR BUST

TwigA PHP Templating Engine

Page 21: The Five-Figure WordPress Website

notlaura.com • @laras126

TimberUse Twig in WordPress Themes

CHUNKS OR BUST

By Upstatement

Page 22: The Five-Figure WordPress Website

notlaura.com • @laras126

PHP vs. Twig

Cobalt 2 Sublime Theme by Wes Bos

Nice Twig

Nasty PHP

Page 23: The Five-Figure WordPress Website

notlaura.com • @laras126

MVC Architecture

PHP files are “Controllers”, Twig files are “Views”.

CHUNKS OR BUST

Page 24: The Five-Figure WordPress Website

notlaura.com • @laras126

Process, Not Product

Part 2:

Page 25: The Five-Figure WordPress Website

notlaura.com • @laras126

Step 1: Content Mapping Post, Page, or neither?

PROCESS, NOT PRODUCT

Page 26: The Five-Figure WordPress Website

notlaura.com • @laras126

Designing in TextStephen Hay’s Responsive Design Workflow

PROCESS, NOT PRODUCT

Page 27: The Five-Figure WordPress Website

notlaura.com • @laras126

Step 2: Build Chunks …the back-end.

PROCESS, NOT PRODUCT

Page 28: The Five-Figure WordPress Website

notlaura.com • @laras126

ACF ProBest $100 I’ve ever spent.

PROCESS, NOT PRODUCT

Page 29: The Five-Figure WordPress Website

notlaura.com • @laras126

Custom Post TypesCOPE: Create Once, Publish Everywhere.

PROCESS, NOT PRODUCT

Page 30: The Five-Figure WordPress Website

notlaura.com • @laras126

PROCESS, NOT PRODUCT

Page 31: The Five-Figure WordPress Website

notlaura.com • @laras126

archive.twig

Page 32: The Five-Figure WordPress Website

notlaura.com • @laras126

tease-source.twig

Page 33: The Five-Figure WordPress Website

notlaura.com • @laras126

FeeBee eating grass.

Page 34: The Five-Figure WordPress Website

notlaura.com • @laras126

stage.whatev.comHeader set X-Robots-Tag "noindex, nofollow"

.htaccess

Step 3:

kmg.nlstage.co

PROCESS, NOT PRODUCT

Page 35: The Five-Figure WordPress Website

notlaura.com • @laras126

WP Migrate DB ProThe best $199/year I have spent.

PROCESS, NOT PRODUCT

Page 36: The Five-Figure WordPress Website

notlaura.com • @laras126

GitYou have to use it.

PROCESS, NOT PRODUCT

Page 37: The Five-Figure WordPress Website

notlaura.com • @laras126Just enough design to not be a terrible eyesore.

PROCESS, NOT PRODUCT

Page 38: The Five-Figure WordPress Website

notlaura.com • @laras126

Page 39: The Five-Figure WordPress Website

notlaura.com • @laras126

Lara Schenck, LLC • 115 E. 23rd St. 3rd Fl, New York, NY 10010 • 724 244 2491 • [email protected]

Website ProposalCustom, 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 http://kmg.nlstage.co

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 ITWe 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 ITI 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

Lara Schenck, LLC • 115 E. 23rd St. 3rd Fl, New York, NY 10010 • 724 244 2491 • [email protected]

Now that we have had experience working together and a good idea of the content structure of the site, we

can scope out the front-end design and feature set. Following this check-in, we will have come up with a

proposed final cost that can be amended as needed throughout the remainder of the project.

3. CHECK-IN

5. TESTING AND LAUNCH

Test the site in all modern browsers and devices and make live at your domain.

Once significant content is added to WordPress and we have agreed on a feature scope and preliminary visual

design, it is time to implement it. Depending on the features determined in our check-in meeting, this cost will

vary. For example, a more static design such as https://www.cntpost.com/ would cost $3,500 whereas a design

with more animations and interactive features like http://www.dvf.com/ would be in the $5,500 range.

4. FRONT-END DESIGN AND DEVELOPMENT

• $500 deposit in order to draw up agreement and detailed timeline

• Both parties sign agreement

• Schedule kick-off meeting

• $1,750 deposit to begin development

NEXT STEPS

$3,000 - $6,500+

Page 40: The Five-Figure WordPress Website

notlaura.com • @laras126

Step 4: Front-end & Design Different every time.

😩

PROCESS, NOT PRODUCT

Page 41: The Five-Figure WordPress Website

notlaura.com • @laras126

Style TilesSamantha Warren

CarlisleINVITATION

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 yulingdesigns.com

PROCESS, NOT PRODUCT

Page 42: The Five-Figure WordPress Website

notlaura.com • @laras126

Photoshop I’m totally fine with it.

This turned into v2ratings.com

PROCESS, NOT PRODUCT

Page 43: The Five-Figure WordPress Website

notlaura.com • @laras126

HTML Wireframes

PROCESS, NOT PRODUCT

This turned into dijifi.com

Page 44: The Five-Figure WordPress Website

notlaura.com • @laras126

_variables.scssIs the single, most important part.

See this one here.

PROCESS, NOT PRODUCT

Page 45: The Five-Figure WordPress Website

notlaura.com • @laras126

Scaling … problem.Part 3:

Page 46: The Five-Figure WordPress Website

notlaura.com • @laras126

SCALING…PROBLEM

Katrina 10th Anniversary, Weather.com Features

Page 47: The Five-Figure WordPress Website

notlaura.com • @laras126

Content BlocksWith ACF’s Flexible Content Field

SCALING…PROBLEM

Page 48: The Five-Figure WordPress Website

notlaura.com • @laras126

Front-endContent Blocks are fantastic for long form.

Hold the Fort, Weather.com Features

SCALING…PROBLEM

Page 49: The Five-Figure WordPress Website

notlaura.com • @laras126

14003207 3376 2359

SCALING…PROBLEM

15917

Page 50: The Five-Figure WordPress Website

notlaura.com • @laras126

Lessons Learned1. If they can mess it up, they will.

SCALING…PROBLEM

Page 51: The Five-Figure WordPress Website

notlaura.com • @laras126

45-75???!!!One option too many.

The Spillway, weather.com Features

SCALING…PROBLEM

Page 52: The Five-Figure WordPress Website

notlaura.com • @laras126

Lessons Learned1. If they can mess it up, they will.

2. Environments get confusing.

SCALING…PROBLEM

Page 53: The Five-Figure WordPress Website

notlaura.com • @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)

Page 54: The Five-Figure WordPress Website

notlaura.com • @laras126

Lessons Learned1. If they can mess it up, they will.

2. Environments get confusing.

3. Performance…oof.

SCALING…PROBLEM

Page 55: The Five-Figure WordPress Website

notlaura.com • @laras126

85 Blocks…is too many blocks.

SCALING…PROBLEM

Page 56: The Five-Figure WordPress Website

notlaura.com • @laras126

SCALING…PROBLEM

Fatal Error…love those.

Page 57: The Five-Figure WordPress Website

notlaura.com • @laras126

SolutionSplit block sets into Chapters, display as Custom Type archive.

SCALING…PROBLEM

Aside: Watch out for ALL CAPS - that should be in CSS.

Page 58: The Five-Figure WordPress Website

notlaura.com • @laras126

Lessons Learned1. 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

Page 59: The Five-Figure WordPress Website

notlaura.com • @laras126

Remus the llama. May he rest in peace.

Page 60: The Five-Figure WordPress Website

notlaura.com • @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.”

Page 61: The Five-Figure WordPress Website

notlaura.com • @laras126

Mike MonteiroWhat a rad dude.

Page 62: The Five-Figure WordPress Website

notlaura.com • @laras126

tackleboxschool.com

Page 63: The Five-Figure WordPress Website

notlaura.com • @laras126

notlaura.com • @laras126

Thanks!