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.
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.
See the list of prerequisites and suggestions on the series landing page.
Hands off the keyboard. Web development starts by thinking first, then planning it out, and then coding it.
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
- 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
In this hands-on lab, you and I will walk through the entire process of adding a new feature to an existing WordPress plugin. You'll start with the Collapsible Content plugin and then add a FAQ feature to it. This feature will require you to plan, think, and execute building a custom post type, custom taxonomy, advanced SQL queries, custom archive, and shortcode.
Check out the Plugin Development Library for more hands-on labs, insights, Docx, and more.
Check out the series page for more labs: Collapsible Content Plugin Series – WordPress Plugin Development A-Z