Working with Shortcodes in WordPress
Download as PPTX, PDF1 like366 views
This document discusses how to use shortcodes in WordPress. Shortcodes allow reusable pieces of content like videos, images, tweets, and more to be embedded throughout a WordPress site. The document provides examples of how to build shortcodes for things like policies, widgets, galleries, and more. It also explains how to install plugins to enable more advanced shortcode functionality and use shortcodes in widgets.
![[BuildingPolicies]](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-8-320.jpg)
![Components of other plugins
• Formidable
• Elegant Themes
• $89/year
• 3D Viewer: [stl file="/2016/09/filename.stl" ]](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-10-320.jpg)
![[audio]
[video]](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-13-320.jpg)
![[gallery]](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-16-320.jpg)
![Build a basic text substitution shortcode
1. Put your reusable text in the top edit box
2. Set the ShortCode Type dropdown to Simple Snippet
3. Choose a ShortCode Tag – this is the text you’ll use to
trigger your Shortcode
4. Click the Publish button
5. Go put [YourShortcodeTag] somewhere in a Page or
Post.](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-18-320.jpg)
![Build a Twitter widget shortcode
1. Get the code for your Twitter widget from
twitter.com/settings/widgets
2. Put your Twitter widget code in the top edit box
3. Set the ShortCode Type dropdown to Simple Snippet
4. Choose a ShortCode Tag – this is the text you’ll use to
trigger your Shortcode
5. Click the Publish button
6. Go put [YourShortcodeTag] somewhere in a Page or
Post.](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-19-320.jpg)
![Build a libraryh3lp shortcode (advanced!)
1. Set the ShortCode Type dropdown to Simple One Tag
ShortCode
2. Give your Shortcode this tag: libraryh3lp
3. Paste one of your libraryh3lp code snippets in the ShortCode
Template box
4. In your libraryh3lp snippet, replace the ID number with {id}
5. Scroll down to ShortCode Attributes, click the plus button
6. Fill in:
1. Name: id
2. Default Value: 0
7. Click Publish or Update
8. Find the id of the libraryh3lp snippet you want to embed
9. On any WordPress Page, put [libraryh3lp id=“1234”],
replacing your snippet ID as appropriate](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-21-320.jpg)
![[gallery]](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-22-320.jpg)
![[[gallery]]](https://image.slidesharecdn.com/wordpressshortcodes-floridalibrarywebinars-haefele2016-final-161109152633/85/Working-with-Shortcodes-in-WordPress-23-320.jpg)
Working with Shortcodes in WordPress
- 1. DON’T TYPE IT OVER AND OVER Chad Haefele Interim Head of User Experience UNC Chapel Hill Libraries [email protected] Working with Shortcodes in WordPress
- 2. Previously on Florida Library Webinars… https://floridalibrarywebinars.org/building-a-library-website-in-wordpress-ondemand/
- 3. Previously on Florida Library Webinars… https://floridalibrarywebinars.org/media-in-wordpress-ondemand/
- 9. What would you use one for? •Policies •Widgets •Twitter •Libraryh3lp •Galleries •Library hours •Library events
- 10. Components of other plugins • Formidable • Elegant Themes • $89/year • 3D Viewer: [stl file="/2016/09/filename.stl" ]
- 11. Working with 3D Models
- 12. <img src =“wordpress.png” alt=“WordPress logo”>
- 13. [audio] [video]
- 14. .com usage • Video • en.support.wordpress.com/videos/ • Audio • en.support.wordpress.com/audio/
- 15. .org usage (built-in) • Video • codex.wordpress.org/Audio_Shortcode • Audio • codex.wordpress.org/Video_Shortcode • Other built-in shortcodes • Caption • Embed: https://codex.wordpress.org/Embeds • Playlist: https://codex.wordpress.org/Playlist_Shortcode • Gallery: https://codex.wordpress.org/Gallery_Shortcode
- 16. [gallery]
- 17. Installing & Using Shortcodes UI wordpress.org/plugins/shortcodes-ui/
- 18. Build a basic text substitution shortcode 1. Put your reusable text in the top edit box 2. Set the ShortCode Type dropdown to Simple Snippet 3. Choose a ShortCode Tag – this is the text you’ll use to trigger your Shortcode 4. Click the Publish button 5. Go put [YourShortcodeTag] somewhere in a Page or Post.
- 19. Build a Twitter widget shortcode 1. Get the code for your Twitter widget from twitter.com/settings/widgets 2. Put your Twitter widget code in the top edit box 3. Set the ShortCode Type dropdown to Simple Snippet 4. Choose a ShortCode Tag – this is the text you’ll use to trigger your Shortcode 5. Click the Publish button 6. Go put [YourShortcodeTag] somewhere in a Page or Post.
- 20. Enable shortcodes in WP widgets WARNING! THIS COULD BREAK THINGS! 1. Under Appearance, go to Editor 2. Edit your functions.php file (it might be called Theme Functions) 3. Add this code near the top of the file: // Enable shortcodes in widgets add_filter('widget_text', 'do_shortcode'); 4. Click Update File Alternatively, use this plugin: wordpress.org/plugins/shortcode-widget/
- 21. Build a libraryh3lp shortcode (advanced!) 1. Set the ShortCode Type dropdown to Simple One Tag ShortCode 2. Give your Shortcode this tag: libraryh3lp 3. Paste one of your libraryh3lp code snippets in the ShortCode Template box 4. In your libraryh3lp snippet, replace the ID number with {id} 5. Scroll down to ShortCode Attributes, click the plus button 6. Fill in: 1. Name: id 2. Default Value: 0 7. Click Publish or Update 8. Find the id of the libraryh3lp snippet you want to embed 9. On any WordPress Page, put [libraryh3lp id=“1234”], replacing your snippet ID as appropriate
- 22. [gallery]
- 23. [[gallery]]
- 27. DON’T TYPE IT OVER AND OVER Chad Haefele Interim Head of User Experience UNC Chapel Hill Libraries [email protected] Working with Shortcodes in WordPress Slides:
Editor's Notes
- #6: .com – good first playground
- #7: .org – the real deal
- #8: Shortcodes put the content management in content management system. Text between brackets automatically displays a pre-set chunk of content.
- #9: Shortcodes put the content management in content management system. Text between brackets automatically displays a pre-set chunk of content.
- #10: Policies Widgets Galleries
- #16: Show shortcuts in the Add Media screen
- #23: Shortcodes put the content management in content management system. Text between brackets automatically displays a pre-set chunk of content.
- #24: Shortcodes put the content management in content management system. Text between brackets automatically displays a pre-set chunk of content.