View
994
Download
0
Embed Size (px)
DESCRIPTION
You don't have to be a coding ninja to bend WordPress layouts to your will. Just edit the code in three files! These slides will show you how - and why - in Genesis and Underscores.
Citation preview
Make your site look like anything in
Genesis or Underscores.
Three files, unlimited design options:
Saturday, January 18, 14
30 years a creative.My firm: Marginhancers.Site = brand foundation.Marketing : revenue as brand : margin.
Saturday, January 18, 14
Are you too old to learn to code?Saturday, January 18, 14
Saturday, January 18, 14
What does a WP site look like?
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
So, great! Let’s just buy those.
Saturday, January 18, 14
Saturday, January 18, 14
Not a great idea.
Saturday, January 18, 14
Saturday, January 18, 14
So what’s a framework, anyway?
Saturday, January 18, 14
You may have heard of:
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Layout flexibility = control (widgets + markup).
Saturday, January 18, 14
Three files.
template.php
functions.php
style.css
Saturday, January 18, 14
template.php
Home page:
home.php
front-page.php
index.php
page_whatever.php
Saturday, January 18, 14
A formal Best Practices workflow:
Saturday, January 18, 14
Planning: strategy, design. Message strategy/creative brief.Visual texture.
PSD mockupmood board Style Tileswhatever.
Saturday, January 18, 14
From visuals to code:CSS defaults.
320 and up, Foundation, Bootstrap …
Elements:TypeColorsIcons
Buttonsform fieldsAnd more.
Saturday, January 18, 14
Build!@import:
type defaults style.css.
Saturday, January 18, 14
Three files.style.cssfunctions.phpfront-page.php
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
functions.phpSaturday, January 18, 14
Saturday, January 18, 14
index.php
Saturday, January 18, 14
index.php
Saturday, January 18, 14
front-page.php
Saturday, January 18, 14
index.php
Saturday, January 18, 14
front-page.php
Saturday, January 18, 14
style.cssSaturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Saturday, January 18, 14
Things we didn’t cover, but can.
Saturday, January 18, 14
Typography.
Why do I self-host my type?
Choosing faces that work together.
Saturday, January 18, 14
Laying out the header - it was different in the two frameworks.
Saturday, January 18, 14
Phone versions.Phones represent more than half of all web traffic.
No time for a fully responsive design?
At least make sure the site works on a phone.
Saturday, January 18, 14
Meaning:Body copy we can read. (Not 2px cap height.)
Do you like modals?
Saturday, January 18, 14
Questions?
Saturday, January 18, 14
Thanks!
Saturday, January 18, 14
Saturday, January 18, 14
Download the files:
Saturday, January 18, 14