Embed Size (px)
DESCRIPTION
Slides for WordCamp Montreal 2014 panel presentation on How To Get Started Building Custom Websites with WordPress.
Citation preview
Belinda Darcey
visual designer
@belindadarcey
dolcedesign.com
Julie Cloutier
web integrator
@jcloutierdesign
juliecloutier.com
Tippi Thole
art director
@tippithole
brightspotstudio.com
Shannon Smith
web developer
@cafenoirdesign
cafenoirdesign.com
How to Get Started Building Custom
Websites with WordPress
Belinda Darcey
@belindadarcey
dolcedesign.com
Visual Designer
• Art Director
• UX/UI Designer
• Graphic Designer
• Illustrator
Default Themes
Thesis Theme
Premium Themes
Starter Themes
Method 1: Default Themes
TwentyFourteen
TwentyThirteen
TwentyTwelve
TwentyEleven
TwentyTen
Live Demo Site
TwentyEleven: Out Of The Box TwentyEleven: Customized
Live Demo Site
TwentyTwelve: Out Of The Box TwentyTwelve: Customized
TwentyTwelve: Out Of The Box TwentyTwelve Customized
Live Demo Site
TwentyThirteen: Out Of The Box TwentyThirteen: Customized
Default Themes
Pros
• Free
• Robust code
• Plug-in compatibility
• Forum support
• Longevity
Cons
• Popular look…
• Code bloat
• Plugins or Child theme required for:
• changing HTML layout
• adding javascript
Tippi Thole
@tippithole
brightspotstudio.com
Web/Graphic Designer
• art director
• graphic designer
• photographer
Method 2: Premium Themes
“Filtered” from
ThemeTrust
List of the theme’s functionality and features.
“Filtered” Demo
• shows all the functionality and styles built into the theme.
Filtered: Out Of The Box Filtered: Customized
Filtered: Out Of The Box Filtered: Customized
Premium Theme Customization
(back end)
!
!
Using Theme Options:
!• adjust theme settings
• CSS (200+ lines)
• some modification of page templates and functions using PHP
Variations on a Theme
theme demo
tippithole.com
brightspotstudio.com
• can be used on multiple sites
• includes tech help on support forums
Premium Themes : Pricing
• $49 for two
Great if you’re indecisive
• $34.30 for one
(with 30% off coupon code)
Premium Themes
Pros
• Inexpensive
• Don’t have to code
• Fast
• Theme updates
• Tech support
Cons
• Time to research
• Limited changes
• Guesswork
• Need a lot of CSS
• Might need PHP
• Design bugs
• Tech support
ThemeTrust (www.themetrust.com) Premium WordPress themes that are affordable and easy to use.
W3 Schools (w3schools.com)Free HTML, CSS, SQL and PHP tutorials
Resources
Julie Cloutier
@jcloutierdesign
juliecloutier.com
Designer
• UX/UI Designer
• Intégrateur Web
• Web Designer
• Graphic Designer
Méthode 3 : Thesis
“Classic Skin”
Thesis Menu !• Thesis home
• Skin Content
• Custom CSS
• Skin Editor
• Manage Skins
• Manage Boxes
Thesis Skin Editor !Permet d’ajouter :
• des éléments
• des Div HTML
Thesis Prix !www.diythemes.com
!De base : 87 $ = un seul domaine. !Professional : 197 $ = Illimité* !!!*plus 40 $/client
Thesis
Pros
• Facile à apprendre
• Très flexible
• Bon support
• Robuste
Cons
• Mises à jour
• Payant
• Loin du “Core WordPress”
Thesis Ressources
http://diythemes.com
http://www.byobwebsite.com
http://girlsguidetowebdesign.com
https://getfirebug.com/
http://www.w3schools.com/
Shannon Smith
@cafenoirdesign
cafenoirdesign.com
Web Developer
• UX/UI Designer
• Web Developer
• Bilingual Development Specialist
Method 4: Blank Starter Theme
“_s or underscores” from Automattic
underscores.me
_s Starter ThemeOut of the Box
HeaderCongress Logo
H o m e E v e n t s A b o u t C o n t a c t
All rights reserved © World Federation of Hemophilia, 2014
Legal Sitemap
WFH Logo Editorial Box
Donate
Newsleter sign-up
300 x 250 Ad(Medium Rectangle)
300 x 250 Ad(Medium Rectangle)
300 x 250 Ad(Medium Rectangle)
300 x 100 Ad(3:1 Rectangle)
Featured Content Slider
Search
Event Highlights
Top Stories
Social Media Links
_s Starter ThemeThe Process
1. Visual Design 2. HTML + CSS
Starter Files
3. Blank WordPress
Starter Theme
_s Starter Theme
H O M E A R C H I V E S R E S O U R C E S E V E N T S A B O U T C O N T A C T
All rights reserved © World Federation of Hemophilia, 2014Legal Sitemap
Search
THE OFFICIAL NEWSPAPER OF THE WFH 2014 WORLD CONGRESS
THE
DAILYCONGRESS
Advertisements
1
PROJECTRECOVERY
MASTHEADThe Congress Daily is the daily journal of the WFH 2014World Congress, held in Melbourne, Australia from May 12-15, 2014. Opinions expressed are those of the individuals and organizations cited.
Editors: Anna Maria di Giorgio, Jay PoultonScientific advisor: XXXXXXXXX, MDPhotography: XXXXXXXXXXXX
Outcome assessments top priority for clinicians, researchersEfficiently build strategic materials whereas user friendly imperatives. Holisticly customize bricks-and-clicks content before worldwide users. Phosfluorescently plagiarize leading-edge resources for optimal bandwidth.
Quickly incubate competitive catalysts for change for go forward web services. Authoritatively fashion multimedia based e-commerce without corporate methodologies. Uniquely iterate competitive partnerships vis-a-vis an expanded array of initiatives. Read more...
WFH MEMBERSHIPSIGN UP TODAY
DONATECLOSE THE GAP
50 Years of advancing treatment for all
Outcome assessments top priority for clinicians, researchersCollaboratively architect client-based
channels via clicks-and-mortar strategic theme areas. Synergistically deploy cross-media e-markets through covalent infomediaries. Collaboratively coordinate installed base scenarios after ethical e-markets. Read more...
Efficiently build strategic materials whereas user friendly imperatives. Holisticly customize bricks-and-clicks content before worldwide users. Phosfluorescently plagiarize leading-edge resources for optimal bandwidth. Read more...
Top stories1
2
3
4
Outcome assessments top priority for clinicians, researchers50 Years of advancing treatment for all
Outcome assessments top priority for clinicians, researchersWelcoming the world to Melbourne
New advancements for hemophilia care around the world
5
00:00 - 00:00Ulpa int prem. On es ex et estiones adi sequid exped quo eum con earcia si aut.
00:00 - 00:00Restibuscit aut ut aligeni mustio. Nam in cullabore voloresequos et maximus.
00:00 - 00:00Ulpa int prem. On es ex et estiones adi sequid exped quo eum con earcia si aut.
00:00 - 00:00Restibuscit aut ut aligeni mustio. Nam in cullabore voloresequos et maximus.
Today at a glance
Project recovery turns unused blood products into hemophilia medicine for developing countries
Welcoming the world to Melbourne
Project recovery turns unused blood products into hemophilia medicine for developing countries
6
wfhcongressdaily.org
Design & Development
Blank Starter Theme
Pros
• Precise
• Lean
• Flexible
• Quick to build
• Quick to debug
• Free
Cons
• Can be more work
• Less support
• Need to understand the code
Digging Into WordPress
- Chris Coyier & Jeff Starr
Resources
Get a Blank Starter Theme
• underscoresunderscores.me
• Starkers github.com/viewportindustries/starkers
• Rootsroots.io
• Bonesthemble.com/bones
• HTML5 Blankhtml5blank.com
• WP-Foundation320press.com/themes/wp-foundation/
Default Themes
Premium Themes
Thesis!Theme
Blank Starter Theme
Coding!Required? No Some Some Yes
Learning Curve Very easy Easy Easy Difficult
Out-of-Box Flexibility re-
HTML & functionsLimited Limited Limited Unlimited
Risk of!plugin conflict or incompatibility
Low High High Low
Recommended for Beginner Intermediate Intermediate Advanced
Cost Free $40 - $140+ $90 - 200 Free
Which Method Is Right for You?
Questions? http://www.slideshare.net/dolcedesign/
how-to-get-started-building-custom-websites-with-wordpress
Belinda Darcey
visual designer
@belindadarcey
dolcedesign.com
Julie Cloutier
web integrator
@jcloutierdesign
juliecloutier.com
Tippi Thole
art director
@tippithole
brightspotstudio.com
Shannon Smith
web developer
@cafenoirdesign
cafenoirdesign.com
