wordpress: a designer's cms

40
FOLLOW ALONG CHEXEE.NET/WCPDX (I AM ACTUALLY IN THE PICTURE)

Upload: chelsea-otakan

Post on 17-May-2015

2.820 views

Category:

Documents


1 download

DESCRIPTION

for WordCamp PDX

TRANSCRIPT

Page 1: WordPress: A Designer's CMS

FOLLOW ALONG

C H E X E E . N E T / W C P D X

( I AM ACTUALLY IN THE PICTURE)

Page 2: WordPress: A Designer's CMS

T H E

D E S I G N E R ’ S C M S

Page 3: WordPress: A Designer's CMS

R O O T S I N D E S I G N

Page 4: WordPress: A Designer's CMS

W H A T D O W E N E E D ?

?

Page 5: WordPress: A Designer's CMS

The goal of any information design is to communicate a specific message to the end user in a way that is clear,

accessible, and easy to understand.

T H E I N F O R M A T I O N D E S I G N H A N D B O O K , J E N N + K E N V I S O C K Y O ’ G R A D Y

Page 6: WordPress: A Designer's CMS

Aa

Page 7: WordPress: A Designer's CMS

B U I L T - I N T O O L S

Page 8: WordPress: A Designer's CMS

W I D G E T S• Drag & Drop

interface

• Flexible content ordering

• Individually designed content area

• Preserves design integrity

• Not specifically for sidebars

Page 9: WordPress: A Designer's CMS
Page 10: WordPress: A Designer's CMS
Page 12: WordPress: A Designer's CMS

J Q U E R Y M A S O N R YUsage

('#container').masonry({ singleMode: true });

('#container').masonry({ columnWidth: 200 });

C O D E V I A H T T P : / / W W W . W P L O V E R . C O M / 1 8 1 8 / T U T O R I A L - U S I N G - J Q U E R Y - M A S O N R Y - W I T H - W O R D P R E S S

Page 13: WordPress: A Designer's CMS

C U S T O M P A G E T E M P L A T E S

Page 14: WordPress: A Designer's CMS

C U S T O M P A G E T E M P L A T E S• Allow flexible design templates non-

designers can set

• Not limited to homepage, subpage, and posts

• Can integrate widget areas, conditionals, and custom styles

Page 15: WordPress: A Designer's CMS

U S A G EJust add this to the top of any file:

<?php /*

Template Name: Zombie Template

*/ ?>

Page 16: WordPress: A Designer's CMS

W O R D P R E S S C S S C L A S S E S

• <?php body_class(); ?>

• adds unique classes for categories, tags, archives, pages, page templates, posts, etc.

• <?php post_class(); ?>

Page 17: WordPress: A Designer's CMS

U S A G E<body class=”<?php body_class(); ?>”>

returns

<body class=”page-34 page-template etc”>

Page 18: WordPress: A Designer's CMS

rtlhomeblog

archivedate

searchpaged

attachmenterror404

singlesingle-{post_id}postid-{post_id}

attachmentid-{post_id}attachment-{mime_type}

authorauthor-{user_nicename}

categorycategory-{category_slug}

tag

pagepage-id-{page_id}

page-parentpage-child

parent-pageid-{parent_id}page-template

page-template-{page_template}-phpsearch-results

search-no-resultslogged-in

paged-{page_number}single-paged-{page_number}page-paged-{page_number}

category-paged-{page_number}tag-paged-{page_number}

date-paged-{page_number}author-paged-{page_number}search-paged-{page_number}

Page 19: WordPress: A Designer's CMS

P L U G I N S

Page 20: WordPress: A Designer's CMS

S I M P L E S E C T I O N W I D G E T

• Creates a submenu based on the top level page of the current page

• <?php simple_section_nav(); ?>

Page 21: WordPress: A Designer's CMS

S I M P L E S E C T I O N W I D G E T

Page 22: WordPress: A Designer's CMS

S I M P L E S E C T I O N W I D G E T

Page 23: WordPress: A Designer's CMS

T I N Y M C E A D V A N C E D

Page 24: WordPress: A Designer's CMS
Page 25: WordPress: A Designer's CMS
Page 26: WordPress: A Designer's CMS

J Q U E R Y L I G H T B O X F O R N A T I V E G A L L E R I E S

Page 27: WordPress: A Designer's CMS

W P G O O G L E F O N T S

Page 28: WordPress: A Designer's CMS

W P T Y P O G R A P H Y• Adds CSS classes to

ampersands, quotes, etc.

• Transforms TM and Registration marks

• Transform fractions to appropriate entities

• Prevents widows

Page 29: WordPress: A Designer's CMS

W T F I S A W I D O W ?

Page 30: WordPress: A Designer's CMS

W I D O W S & O R P H A N Sthought, their mouths probably seize up.

After a few months' consideration and observation

he abandoned this theory in favour of a new one. If

they don't keep on exercising their lips, he thought,

their brains start working. After a while he

abandoned this one as well as being obstructively

cynical.

One of the things Ford Prefect had always found

hardest to understand about humans was their habit of

continually stating and repeating the very very obvious,

as in It's a nice day, or You're very tall, or Oh dear you

seem to have fallen down a thirty-foot well, are you

alright? At first Ford had formed a theory to account

for this strange behaviour. for this strange behaviour.

If human beings don't keep exercising their lips, he

widow my husband died :[

orphani have a horrible red afro and no parents :[

Page 31: WordPress: A Designer's CMS

P R O O F D E S I G N E R S A R E S A D I S T S

A common mnemonic is An orphan has no past; a widow has no future

or An orphan is left behind, where as a widow

must go on alone

V I A W I K I P E D I A ( I C A N ’ T M A K E T H I S S H I T U P )

Page 32: WordPress: A Designer's CMS

W P T Y P O G R A P H Y• Adds CSS classes to

ampersands, quotes, etc.

• Transforms TM and Registration marks

• Transform fractions to appropriate entities

• Prevents widows orphans

Page 33: WordPress: A Designer's CMS

O T H E R C O O L S H I T

Page 34: WordPress: A Designer's CMS

E L A S T I C• Drag-n-drop

WordPress themes

• Column-based

elastictheme.org

Page 35: WordPress: A Designer's CMS

C A R R I N G T O N B U I L D• Drag-n-drop

page templates

• Column-based

• Per-page basis

crowdfavorite.com/wordpress/carrington-build

Page 36: WordPress: A Designer's CMS

T H E M E F R A M E W O R K S

Theme Hybrid

Thematic

Carrington

Page 37: WordPress: A Designer's CMS

T E X T E D I T O R P L U G I N S

yoast.com/tools/textmate/

coda-clips.com/category/wordpress

Page 38: WordPress: A Designer's CMS

T H E W O R D P R E S S D A S H B O A R D

Page 39: WordPress: A Designer's CMS

C O N T R I B U T E !• make.wordpress.org/ui

• Tuesdays at 2p eastern

• That means 11a western

• irc.freenode.net #wordpress-ui

G A T E K E E P E R S : J A N E W E L L S , M A T T T H O M A S , J O H N O ’ N O L A N , B E N D U N K L E

Page 40: WordPress: A Designer's CMS

C H E L S E A O T A K A N@chexee [email protected]

DON’TPANIC

real name

nickname

not what i am doing right now

its alive!