About Rochester Oliveira
I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff.
We've seen before a lot of blogging tips and tools. Well, today we'll learn how to create a good tool for your blog – a FAQ page plugin. But the most important thing is not only the plugin itself, but what you can do with this principle. You'll learn how to store any type of data in your WP site and how to integrate it with external libraries (like jQuery UI) creating custom components for your site. Let's get started!
Our goal here is to create a plugin that can be used for a lot of things, but fits pretty well for FAQ pages.
But apart from that our main achievement will be the understanding of WordPress custom post types, shortcodes, interactions with external JS / jQuery plugin. With this idea you could create a lot of stuff based on other crazy plugins you may find out there, this is just the starting point for you, dear Padawan.
So here you can find jQuery API demo for the component we'll be using – but the really cool stuff is the code using to generate that component (PHP).
First of all we need to create a custom post type to store our data.
Custom Post Types are a big part of WP's magic, it allows you to create a new data type (kind of like posts, pages, attachments..) so it can be called and manipulated using WP’s functions. This may seem simple for beginners but only the old-time PHP programmers (is that still a thing?) know how hard it was just to connect and store data in your DB. Let alone dynamically create new data types, this is subtle but allows a big flexibility in our code.
For us to have this we need a plugin, but probably you are familiar with this concept already. Plugins are like Lego blocks for WordPress, they add or transform the current functionality using some code that can easily be plugged (duh!) or also unplugged if you want.
Keep in mind that the file name must be unique so when someone installs your plugin (even yourself) there will be no conflicts with current plugins. In our case for a better organization we’ll add a new folder with the name faq-whsr, and inside of it a file called faq-whsr.php.
Now for the metada, just add something like this in the beginning of your plugins file (right after <?php ):
Which means:
Ok, now we've got our plugin created, added some relevant metadata. As soon as you save your plugin file you should be able to see it in your wp-admin interface
Let's activate it and see what happens.
Wait, nothing? Well, that’s a good thing, if anything was wrong right now you’d see an error. Let’s move on to our custom post type creation now.
In our case the CPT is FAQ item, but you could create books, videos, testimonials and so on. The important thing to keep in mind here is: functions names should be unique. Repeat with me now: functions names should be unique, functions names should be unique. Got it? Good this will save you a lot of trouble until we can use OOP (maybe in the next tutorial).
The wizardry is done with this code:
And this is what the relevant parts mean:
Save it and hold your breath. You should see now a new section in your main wp-admin menu
Wait, that’s it? Yeah. That snippet creates the whole CPT functionality. If you don’t find this cool, wait that it’ll get cooler in the next section.
Before we leave the wp-admin, add some dummy data (a few faqs with at least 2 categories).
Now it’s finally time to see some action and we’ll use jQuery UI Accordion element for this.
jQuery UI has pretty much the same advantages as jQuery itself:
The question now is: How do we call it?
There are 2 approaches to this:
We won't loose too much time with the wrong approach today, but the good one is basically telling WP “hey buddy, we’ll need jQuery UI at some point in our code, please include it in the page”. This way WP can check if anybody else has already included it or included a different version of it and avoid a lot of trouble with duplicated libraries. Ok, how to translate that nice chat into code?
Using the enqueue function:
And now we’re back to the wp-admin. We’ve got the FAQ items, and we’ve got the library to style the items as we want, what else is missing? Well, we need to call the items!
We have a lot of options for this, but the easiest for this case is to create a shortcode. Shortcode is something that you add in your content field (for pages, posts, CPTs…) and WP will actually search for a function to run on it. There are 2 types of shortcodes:
Let’s see how it works then. Create a new page in your wp-admin and add this code there:
[faq-whsr]
Save and visit that page and see what happens…
Just kidding, it won’t do a thing right? Well, that’s because we haven’t created a function for it yet.
Add this in your plugin file:
Now refresh your page and I promise something really cool will happen.
Cool, huh? Now you can see that it is running and the sky is the limit for you now. What that code does is just tell WP that there is a shortcode that is called [faq-whsr] and if WP finds it, WP should run a function in that point of the page.
In our case we’ll need to achieve this structure for the jQuery UI panel to be created:
And for that we’ll create a WP Query, load our FAQ items and their contents. Replace the shortcode function with this one:
Ok, now your FAQ items will be called. What we've done is to call the wp_query to call our custom post type, and then pass it to the shortcode return so WP will display all of them following the desired structure.
It's good but something is missing, right? What about some options there? Well, we can add options for a shortcode, let’s see how to create a few of WP_Query arguments in our shortcode:
This way you can call items using the following arguments (you can combine as many as you want):
But like I said, the sky is the limit for you my friend. Here are a few options for WP_Query that you could implement and use:
This is just a starting point for you, as you can see. We all can learn a lot of other cool things to improve this simple plugin, here are a few suggestions for you to dig deeper:
Don't forget to leave your thoughts in the comments! And here is our challenge for you: Is it possible to you apply a “default item” option for the shortcode (so when the page is loaded another item will be open, that is not the first one)? How would you do it?