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.
WP-ShowHideLester Chan (@gamerz)
About Me• Web Engineer at mig33• Blogger at lesterchan.net• Famous Inactive WordPress Plugins Developer       – Still main...
What Is WP-ShowHide?• It is my latest WordPress Plugin       – Created in 2011       – Simple plugin                 • Wro...
Why You Create It?• Inspired from Engadget• Request from fellow bloggers• As a blogger       – Embed lengthy press release...
How Is It Done?• Using WordPress Shortcode API       – A simple set of functions for creating macro codes for         use ...
Advanced Usage• [showhide][/showhide]       – type                 • type="pressrelease"       – more_text                ...
CSS Styling• Based on type       – Default: pressrelease        .pressrelease-link A {                   text-align: cente...
Demo & Examples• Real Life Usage         – lesterchan.net         – techielobang.com         – justinng.sg         – mhish...
Links• Official Site       – http://wordpress.org/extend/plugins/wp-         showhide/                 • OR http://lc.sg/w...
Questions & Answers• Any       – Questions?       – Feedback?       – Comments?• Contact Me       – lesterchan AT gmail   ...
Upcoming SlideShare
Loading in …5
×

WP-ShowHide

1,993 views

Published on

My presentation slides for WP-ShowHide during WordPress Wednesdays September 2012 organised by Singapore WordPress User Group.

Published in: Software, Technology, Business
  • Be the first to comment

  • Be the first to like this

WP-ShowHide

  1. 1. WP-ShowHideLester Chan (@gamerz)
  2. 2. About Me• Web Engineer at mig33• Blogger at lesterchan.net• Famous Inactive WordPress Plugins Developer – Still maintaining them to ensure it works with latest version of WP• Started Developing WordPress Plugins since 2003lesterchan.net [2]
  3. 3. What Is WP-ShowHide?• It is my latest WordPress Plugin – Created in 2011 – Simple plugin • Wrote it in 2 hours• Allows you to toggle the visibility of a portion of your blog cotent via a link – Think Engadget’s Style Press Release – http://www.engadget.com/2012/08/29/samsung- galaxy-note-ii/lesterchan.net [3]
  4. 4. Why You Create It?• Inspired from Engadget• Request from fellow bloggers• As a blogger – Embed lengthy press release – Post a movie spoilerlesterchan.net [4]
  5. 5. How Is It Done?• Using WordPress Shortcode API – A simple set of functions for creating macro codes for use in post content • http://codex.wordpress.org/Shortcode_API • [gallery]• Using jQuery $.toggle() • http://api.jquery.com/toggle/ • “Show” or “Hide” the element• Examples – [showhide]Press Release goes in here.[/showhide] • Translate to – Show Press Release (5 More Words)lesterchan.net [5]
  6. 6. Advanced Usage• [showhide][/showhide] – type • type="pressrelease" – more_text • more_text="Show Press Release (%s More Words)" – less_text • less_text="Hide Press Release (%s Less Words)" – hidden • hidden="yes"lesterchan.net [6]
  7. 7. CSS Styling• Based on type – Default: pressrelease .pressrelease-link A { text-align: center; color: red; } .pressrelease-link A:hover { text-decoration: underline; color: blue; } . pressrelease-content { border-left: 5px solid blue; padding-left: 10px; }lesterchan.net [7]
  8. 8. Demo & Examples• Real Life Usage – lesterchan.net – techielobang.com – justinng.sg – mhisham.org• Examples – http://lesterchan.net/wordpress_dev/2012/09/03 /wp-showhide-examples/Footer [8]
  9. 9. Links• Official Site – http://wordpress.org/extend/plugins/wp- showhide/ • OR http://lc.sg/wpshowhide• My WordPress Plugins – http://lesterchan.net/portfolio/programming/php / • OR http://lc.sg/wordpresslesterchan.net [9]
  10. 10. Questions & Answers• Any – Questions? – Feedback? – Comments?• Contact Me – lesterchan AT gmail – twitter.com/gamerz – fb.com/lesterchan.netlesterchan.net [ 10 ]

×