Introduct about Wordpress Shortcode, style & layout website with shortcode

1. Wordpress [Shortcode]
Wordpress’s mantras

2. Who am I ?
Đặng Ngọc Bình.com
Developer , 2 year with WP

3. Problems for users: Style

4. Problems for users: Layout

5. Problems: Html/css code
• WordPress user with minimal html experience
spend too much time trying to create and
format content

6. Outline
• What Shortcode ?
• Why Shortcode ?
• Layout & Style with Shortcode
• Shortcode on Widget
• Some useful Shortcode
• Shortcode Best practices
• Create Shortcode for your own
• Q/A

7. What is shortcode ?
Very simple code use in post’s content to create special
things

8. What is shortcode?
• Shortcode is [Tag]
• May be have enclose tag like this: [tag]content[/tag]
• May be have attributes like this: [tag attribute1=“abc”]
• Many be in other shortcode:
[tag-parent]
[tag-child]
[/tag-parent]

9. Demo1:
• Create your button like this

10. Demo 2 – Home page
• Theme setup & not setup
• Setup ? You can’t change layout ?
• Layout with shortcode!

11. Create it with shortcode!

12. Demo

13. Why Shortcode ?
• Easy use to format content
• It’s text, It can use any where (Page/Post/Widget)
• It’s simple
• It’s easy to create
• Clean up your post’s content

14. Built-in shortcode
• [gallery]
• [audio]
• [caption]
• [embed]
• [video]
[gallery id=“99]

15. Pretty your content!
• Click Bump
• WP Canvas
• Shortcode Ultimate

16. Shortcode on Widget

17. Turn on Widget Short code
• Solution 1: for Dev
add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );
• Solution 2: for User
Install plugin:
+ Ultimate Short code
+ Short code Widget

18. Useful Shortcodes

19. Useful Shortcodes
WP Canvas - Shortcodes

20. Useful Shortcodes
Meta Slider

21. So many

22. Create Shortcode for yourown
• WP User:
• Shortcoder Plugin
• WP Developer:
• http://generatewp.com/shortcodes/

23. Best practices with Shortcode
• Don’t use shortcode in theme.
• When you change theme ?  Use plugin
• Hide broken shortcodes: Hide Broken Shortcodes Plugin

24. More easier
• http://wp-editor.com/

25. What will we do?
• Play with shortcode

26. Q/A
Ask and you have answers