Accomplish It With Core: Sliders, Galleries and More


Published on

Building custom theme/plugin functionality using powerful built-in core API's / libraries. Thinking about things in terms of core functionality and rolling your own.

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Accomplish It With Core: Sliders, Galleries and More

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