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

1. WP-ShowHide
Lester Chan (@gamerz)

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
2003
lesterchan.net [2]

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. Why You Create It?
• Inspired from Engadget
• Request from fellow bloggers
• As a blogger
– Embed lengthy press release
– Post a movie spoiler
lesterchan.net [4]

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. 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. 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. 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. 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/wordpress
lesterchan.net [9]

10. Questions & Answers
• Any
– Questions?
– Feedback?
– Comments?
• Contact Me
– lesterchan AT gmail
– twitter.com/gamerz
– fb.com/lesterchan.net
lesterchan.net [ 10 ]