Accomplish It With CoreSliders, Galleries & More.

WordCamp San Diego 2012#wcsd

@theandystratton

Leveraging plugins?Custom themes or market-place...There are some common pitfalls.

Missing features.Almost enough.

Close but not exact.

Too many features.Bloated. Can be slow.

UX could overload user.

Difficult to integrate.

Painful user-experience.Some stray from core UI.

Some are confusing to use.

Custom Theming?Even child-theming...

Develop HTML/CSS/JS

SEPARATELY.Verifies browser compatibility.

Easy to troubleshoot later.

Stay Organized.Quickly create theme files

from your HTML/CSS.

Bundling Functionality:Traditional Plugins.

/mu-plugins/ Plugins.Library of auto-included code...

Develop Faster:

Script will load all PHP files in your theme’s /lib/ directory

Keep related code together in well-named files.

What makes sense?Should the functionality transfer

to other themes?Is the functionality optional?

Building Stuff.Marketing Sliders.Photo Galleries.

Press Releases & More...

Context is Queen.Examples are common denominators.

Your content should dictate the

functionality you build.

Marketing Sliders.Typical in many business/sales sites.

Not just your blog posts.Promotions, teasers, and more.

Banner/Image

Headline & TextLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor tempor dui.

Call to Action/Button »1

2

3

What’s in a slide?

Custom Post TypeThese pieces map perfectly to a custom post

type with minimal custom fields.

Mapping Fields

Slide Data Custom Post TypeBanner/Image Featured ImageHeadline Post TitleText Post ContentCall to Action Text Custom Field or Post ContentCall to Action URL Custom Field or Post ContentSlide Order Menu OrderDisplay/Hide Publish Status*

* We could use a custom taxonomy

Custom CodeNerd Alert.

Register thepost type.

There’s a lot moreyou can do with

Custom Post Types.See Jared’s presentation later!

Add ameta box.

Output themeta form.

Handle savingmeta on save_post.

1

2

3

1

2

3

Featured ImageWill be used in our markup as the slide background/banner image.

1

2

3

Headline/TextPost title and content used for the

headling/text of the slide.

1

2

3

Call to ActionCustom fields managed via meta box UI for better user experience for our non-tech business users.

Pulling SlidesIt’s as easy as get_posts().

Handle savingon save_post.

Pulling ourcustom slides.

Custom TaxonomyWe could push this even further by assigning

context (tag/category).

Creating a generic taxonomy.

General TaxonomyAssigning to all our post types allows us to

assign context and relate things.

Pulling our slides via wcsd-content-tag

Contextual UsesRelate other post types to posts/pages

e.g. quotes, testimonials, press releases, slides

Real WorldPage-specific sliders

QuotesStatistics

Slide Post TypeSelected by Content Tag or

individually via custom meta UI

Statistic Post TypeUp to 8 pulled based on

Content Tag(s)

Quote Post TypeSpecial widget, pulls quote

based on Content Tag(s)

Contact DataWidget output based on matching Content Tag

for location (defaults to general if no tags match)

Photo GalleriesOf course: the Gallery API/shortcode.

But What If?You’ve got custom HTML/CSS already.You can’t duplicate it with [gallery].

Use/Hack Plugins?Could be bloated code.

Could be insecure.Could take longer.

Image Attachments.They’re a post type.You can query ‘em.

You can do anything with ‘em.

Galleries of Galleries.Photo Galleries parent page can

list all child pages (galleries).Can display photos via templates or

quick call shortcode API.

Pulling Gallery Pages

Pulling Gallery Pages

// Loop through $galleries and use// get_the_post_thumbnail($id, ‘size’);// to pull the featured image

// Output with your custom markup!

Pulling Gallery Pages

// Example Source

Pulling Gallery Pages// Example Source

// See page-gallery.php

What’s Possible?Screenshot time.

page-galleries.php

Gallery Thumb/PreviewFeatured image for child page.

page-galleries.php

Gallery NamePost Title for child page.

page-galleries.php

Gallery DescriptionPost Content for child page.

page-galleries.php

page-gallery.php

Image AttachmentsCustom markup calls lightbox.

page-gallery.php

page-gallery.php

Original Image URLwp_get_attachment_url( $id );

page-gallery.php

CaptionCan be post_title, post_excerpt,

or post_content (Title, Caption, or Description)

page-gallery.php

Why Do This?

Custom Markup.

Extended Behaviors.

Anal Retentive.Complete control over client output.

Maximum UX/empowerment.

Leverage Core UI.

Leverage Core UI.

More Attachments.PDF’s can be attached (e.g. press releases)

‘post_mime_type’ => ‘application/pdf’Anything, really.

Wrap It Up.

Sometimes you need

MOREFEATURESthan free plugins provide.

Customizing plugins can be

MOREWORK

then using Core APIs.

GET CREATIVEwith the free &

POWERFUL TOOLSyou’ve already got.

Create usable & meaningful

EXPERIENCES.

Core API’s keep you

COMPATIBLE.Upgrades / Environment / Security

Other Plugins

Use

CONTEXTwhen solving problems.

What makes sense?

Add

CONTEXTto your

CONTENTLike relating different types of content via taxonomy.

Serve your users’

BEST INTERESTand you

CAN’T FAIL

Gracias, amigos.