Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Architect the Shortcodes
Lab: Let’s Build the Collapsible Content Plugin – Part 1
Video Runtime: 15:05
First, we need to commit our code into our Git repository. Next, let’s talk about shortcodes. We’ll do an introduction to shortcodes including what it is and what is its intent.
Deep Dive into Shortcodes
A shortcode is a placeholder for additional content to be processed on the server when the content is being processed. You use a shortcode when you want to embed additional dynamic content, a set HTML structure, or redundant content.
In this episode, we will dive deep into the process of how and why a shortcode works.
The process starts when you register a custom shortcode using add_shortcode
. When the_content()
or get_the_content()
runs, WordPress scans the post content for all of the registered shortcodes. When found, the callback runs. That gives you the means to run your code, process the shortcode, build the HTML, and then send it back. What you return back replaces the shortcode in the content before it’s rendered out to the browser.
You’ll learn about how to load and return a view file instead of rendering it directly out to the browser. You will use the PHP output buffer. You’ll turn it on with ob_start()
, load the view file, and then grab the content out of the output buffer and return it to WordPress using ob_get_clean()
.
Architecting Our Shortcode Processor
Let’s talk about what we will do in our plugin. How will we adapt the shortcode boilerplate code from add_shortcode
to fit our needs.
Keep It Simple, Stupid (KISS) - the best kiss you'll get in code.
Episodes
Total Lab Runtime: 04:18:43
- 1 Lab Introductionfree 10:15
- 2 Planning Out the Pluginfree 12:53
- 3 Plugin Architecturepro 12:42
- 4 Plugin Header - Tell WordPress "Hey, I'm a Plugin"pro 09:36
- 5 Add UpGulppro 13:45
- 6 Setup the GitHub Repositorypro 12:04
- 7 Architect the HTML Markuppro 08:47
- 8 Build Q&A HTML Viewpro 13:20
- 9 Build Teaser HTML Viewpro 08:16
- 10 Architect the Shortcodespro 15:05
- 11 Shortcode Runtime Configuration Parameterspro 06:42
- 12 Build the Shortcode Processerpro 11:26
- 13 Autoloadpro 01:45
- 14 Test the Shortcodepro 09:38
- 15 Architect the jQuery Scriptpro 11:47
- 16 Build the jQuery Basic Structurepro 16:21
- 17 Enqueue the Assetspro 20:35
- 18 Passing PHP Values to JavaScriptpro 12:46
- 19 Refactorpro 07:40
- 20 Building the Click Handlerpro 08:48
- 21 Get the Element's Indexpro 08:50
- 22 Is the Hidden Content Showing?pro 04:24
- 23 Animate the Hidden Contentpro 04:06
- 24 Change the Iconpro 12:50
- 25 Commit Changes & Wrappro 04:22