Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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/JSSEPARATELY.   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/ directoryKeep related code together in...
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 thefunctionality you build.
Marketing Sliders.Typical in many business/sales sites.     Not just your blog posts.  Promotions, teasers, and more.
What’s in a slide?                 2   Headline & Text                     Lorem ipsum dolor sit                     amet,...
Custom Post TypeThese pieces map perfectly to a custom post      type with minimal custom fields.
Mapping FieldsSlide Data                  Custom Post TypeBanner/Image                Featured ImageHeadline              ...
Custom Code   Nerd Alert.
Register the post type.
There’s a lot more   you can do with Custom Post Types.See Jared’s presentation later!
Add ameta box.
Output themeta form.
Handle savingmeta on save_post.
2        1    3
2     Featured ImageWill be used in our markup as theslide background/banner image.                                       ...
2       Headline/TextPost title and content used for the    headling/text of the slide.           1                       ...
2                 Call to ActionCustom fields managed via meta box UI for better user experience for our non-tech business...
Pulling SlidesIt’s as easy as get_posts().
Handle saving  Pulling ouron save_post.custom slides.
Custom TaxonomyWe could push this even further by assigning          context (tag/category).
Creating ageneric taxonomy.
General TaxonomyAssigning to all our post types allows us to     assign context and relate things.
Pulling our slides via wcsd-content-tag
Contextual Uses   Relate other post types to posts/pagese.g. quotes, testimonials, press releases, slides
Real WorldPage-specific sliders     Quotes     Statistics
Slide Post Type  Selected by Content Tag orindividually via custom meta UI
Statistic Post Type Up to 8 pulled based on     Content Tag(s)
Quote Post TypeSpecial widget, pulls quote based on Content Tag(s)
Contact Data     Widget output based on      matching Content Tagfor location (defaults to general if          no tags mat...
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 templ...
Pulling Gallery     Pages
Now What?  More code.
Pulling Gallery                                  PagesAre there galleries?         YUUUUUUP.Loop through each      Output ...
// Example Source                    Pulling Gallery                         Pages
Pulling Gallery// Example Source// See page-gallery.php                               Pages
What’s Possible?    Screenshot time.
page-galleries.php
page-galleries.phpGallery 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-gallery.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)
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, ...
Wrap It Up.
Sometimes you need  MOREFEATURESthan free plugins provide.
Customizing plugins can be    MORE    WORK  then using Core APIs.
GET CREATIVE    with the free &POWERFUL TOOLS  you’ve already got.
Create usable & meaningfulEXPERIENCES.
Core API’s keep youCOMPATIBLE.Upgrades / Environment / Security         Other Plugins
Use  CONTEXTwhen solving problems.    What makes sense?
Add    CONTEXT                    to your    CONTENTLike relating different types of content via taxonomy.
Serve your users’BEST INTEREST      and you CAN’T FAIL
Thanks ;]
Accomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + More
Upcoming SlideShare
Loading in …5
×

Accomplish It With Core: Sliders Galleries + More

668 views

Published on

My revised presentation

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Accomplish It With Core: Sliders Galleries + More

  1. 1. Accomplish It With CoreSliders, Galleries & More. WordCamp NYC 2012 #wcnyc @theandystratton
  2. 2. Leveraging plugins? Custom themes or market-place... There are some common pitfalls.
  3. 3. Missing features. Almost enough. Close but not exact.
  4. 4. Too many features. Bloated. Can be slow. UX could overload user.
  5. 5. Difficult to integrate.
  6. 6. Painful user-experience. Some stray from core UI. Some are confusing to use.
  7. 7. Custom Theming? Even child-theming...
  8. 8. Develop HTML/CSS/JSSEPARATELY. Verifies browser compatibility. Easy to troubleshoot later.
  9. 9. Stay Organized. Quickly create theme files from your HTML/CSS.
  10. 10. Bundling Functionality: Traditional Plugins. /mu-plugins/ Plugins. Library of auto-included code...
  11. 11. Develop Faster: Script will load all PHP files in your theme’s /lib/ directoryKeep related code together in well-named files.
  12. 12. What makes sense? Should the functionality transfer to other themes? Is the functionality optional?
  13. 13. Building Stuff. Marketing Sliders. Photo Galleries. Press Releases & More...
  14. 14. Context is Queen.Examples are common denominators.
  15. 15. Your content should dictate thefunctionality you build.
  16. 16. Marketing Sliders.Typical in many business/sales sites. Not just your blog posts. Promotions, teasers, and more.
  17. 17. What’s in a slide? 2 Headline & Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor tempor dui. 1Banner/Image 3 Call to Action/Button »
  18. 18. Custom Post TypeThese pieces map perfectly to a custom post type with minimal custom fields.
  19. 19. Mapping FieldsSlide 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
  20. 20. Custom Code Nerd Alert.
  21. 21. Register the post type.
  22. 22. There’s a lot more you can do with Custom Post Types.See Jared’s presentation later!
  23. 23. Add ameta box.
  24. 24. Output themeta form.
  25. 25. Handle savingmeta on save_post.
  26. 26. 2 1 3
  27. 27. 2 Featured ImageWill be used in our markup as theslide background/banner image. 1 3
  28. 28. 2 Headline/TextPost title and content used for the headling/text of the slide. 1 3
  29. 29. 2 Call to ActionCustom fields managed via meta box UI for better user experience for our non-tech business users. 1 3
  30. 30. Pulling SlidesIt’s as easy as get_posts().
  31. 31. Handle saving Pulling ouron save_post.custom slides.
  32. 32. Custom TaxonomyWe could push this even further by assigning context (tag/category).
  33. 33. Creating ageneric taxonomy.
  34. 34. General TaxonomyAssigning to all our post types allows us to assign context and relate things.
  35. 35. Pulling our slides via wcsd-content-tag
  36. 36. Contextual Uses Relate other post types to posts/pagese.g. quotes, testimonials, press releases, slides
  37. 37. Real WorldPage-specific sliders Quotes Statistics
  38. 38. Slide Post Type Selected by Content Tag orindividually via custom meta UI
  39. 39. Statistic Post Type Up to 8 pulled based on Content Tag(s)
  40. 40. Quote Post TypeSpecial widget, pulls quote based on Content Tag(s)
  41. 41. Contact Data Widget output based on matching Content Tagfor location (defaults to general if no tags match)
  42. 42. Photo GalleriesOf course: the Gallery API/shortcode.
  43. 43. But What If?You’ve got custom HTML/CSS already. You can’t duplicate it with [gallery].
  44. 44. Use/Hack Plugins? Could be bloated code. Could be insecure. Could take longer.
  45. 45. Image Attachments. They’re a post type. You can query ‘em. You can do anything with ‘em.
  46. 46. Galleries of Galleries. Photo Galleries parent page can list all child pages (galleries). Can display photos via templates or quick call shortcode API.
  47. 47. Pulling Gallery Pages
  48. 48. Now What? More code.
  49. 49. Pulling Gallery PagesAre there galleries? YUUUUUUP.Loop through each Output post thumbnail Output title Link to permalink for page
  50. 50. // Example Source Pulling Gallery Pages
  51. 51. Pulling Gallery// Example Source// See page-gallery.php Pages
  52. 52. What’s Possible? Screenshot time.
  53. 53. page-galleries.php
  54. 54. page-galleries.phpGallery Thumb/PreviewFeatured image for child page.
  55. 55. page-galleries.php Gallery NamePost Title for child page.
  56. 56. page-galleries.php Gallery DescriptionPost Content for child page.
  57. 57. page-gallery.php
  58. 58. page-gallery.php Image AttachmentsCustom markup calls lightbox.
  59. 59. page-gallery.php
  60. 60. page-gallery.php Original Image URLwp_get_attachment_url( $id );
  61. 61. page-gallery.php CaptionCan be post_title, post_excerpt, or post_content (Title, Caption, or Description)
  62. 62. Why Do This?
  63. 63. Custom Markup.
  64. 64. Extended Behaviors.
  65. 65. Anal Retentive.Complete control over client output. Maximum UX/empowerment.
  66. 66. Leverage Core UI.
  67. 67. Leverage Core UI.
  68. 68. More Attachments. PDF’s can be attached (e.g. press releases)‘post_mime_type’ => ‘application/pdf’ Anything, really.
  69. 69. Wrap It Up.
  70. 70. Sometimes you need MOREFEATURESthan free plugins provide.
  71. 71. Customizing plugins can be MORE WORK then using Core APIs.
  72. 72. GET CREATIVE with the free &POWERFUL TOOLS you’ve already got.
  73. 73. Create usable & meaningfulEXPERIENCES.
  74. 74. Core API’s keep youCOMPATIBLE.Upgrades / Environment / Security Other Plugins
  75. 75. Use CONTEXTwhen solving problems. What makes sense?
  76. 76. Add CONTEXT to your CONTENTLike relating different types of content via taxonomy.
  77. 77. Serve your users’BEST INTEREST and you CAN’T FAIL
  78. 78. Thanks ;]

×