Date post: | 17-Dec-2014 |
Category: |
Technology |
Upload: | andy-stratton |
View: | 406 times |
Download: | 0 times |
Accomplish It With CoreSliders, Galleries & More.
WordCamp NYC 2012#wcnyc
@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
Now What?More code.
Pulling Gallery PagesAre there galleries?
Loop through eachOutput post thumbnailOutput titleLink to permalink for page
YUUUUUUP.
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
Thanks ;]