Let’s get you started building custom (from scratch) WordPress plugins. In Part 1 of this series, you are going to build the basics of the Collapsible Content plugin. As you are building it with Tonya, you’ll learn deeply about custom plugin development, file structures, jQuery, PHP, WordPress core, shortcodes, Gulp, and much more.
What You Will Learn
In this hands-on lab, you and I will walk through the entire process of building the features in the Scope of Work for your client. We’ll walk through the thought processes, planning, architecture, and implementation. We’ll discuss different strategies for accomplishing the desired result. The intent is to teach the process of building custom plugins for WordPress. It’s a holistic approach from A to Z.
This lab goes deep into bootstrapping a plugin, animating with jQuery, HTML view files, and shortcodes.
Your Scope of Work
Your client (or boss) wants a feature that allows them to show a teaser and then hide away the rest of the content. The hidden content will be revealed when the viewer clicks on the teaser. The client then wants the hidden content to slide down. There will be a visual indicator to alert the viewer of the click action and direction of movement.
The client wants to use this feature for different types of content including embedding question and answer type content (such as hints and Q&As) and marketing teasers. In addition, they want to have Frequently Asked Questions (FAQ).
For the FAQs, they want the ability to display all of them in a particular order on an archive page and to embed individual ones into other content on the website.
Your job is to build these features for your client. Let’s get started.
In this part 1, you will build the basic plugin that gives your client the Q&A and collapsible content features. You’ll use shortcodes to provide them with the embedded content they want. You’ll use jQuery and JavaScript for animating the sliding effects when the viewer clicks on the visible content.
You are going to learn deeply about plugin development, PHP, jQuery, HTML, and of course WordPress. Let’s get started!
Want to cheat and look at what you’ll be building? That’s cool. Check out the GitHub repository here.
Prerequisites
See the list of prerequisites and suggestions on the series landing page.
Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."
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
What to Do Next?
