WordPress: A Designer's CMS

transcript

FOLLOW ALONG

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

( I AM ACTUALLY IN THE PICTURE)

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

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

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

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

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

W I D G E T S• Drag & Drop

interface

• Flexible content ordering

• Individually designed content area

• Preserves design integrity

• Not specifically for sidebars

J Q U E R Y M A S O N R Yby David Desandro

http://desandro.com/resources/jquery-masonry

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

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

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

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

<?php /*

Template Name: Zombie Template

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(); ?>

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

returns

rtlhomeblog

archivedate

searchpaged

attachmenterror404

singlesingle-{post_id}postid-{post_id}

attachmentid-{post_id}attachment-{mime_type}

authorauthor-{user_nicename}

categorycategory-{category_slug}

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}

P L U G I N S

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(); ?>

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

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

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

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

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

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

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 :[

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 )

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

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

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

WordPress themes

• Column-based

elastictheme.org

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

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

Theme Hybrid

Thematic

Carrington

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

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

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

C H E L S E A O T A K A N@chexee chexee@livelylabs.com

DON’TPANIC

real name

nickname

not what i am doing right now

its alive!

WordPress: A Designer's CMS

Documents