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!
The Idea, Demo & Download
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).
Warming up – Plugin file and Custom Post Type
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.
To create a plugin in a way that WP recognizes it you need 2 things:
- Create a file inside of your wp-content/plugins/
- Add metadata in the beginning of that file so WP can understand what that is about
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:
- Plugin Name: The nice name that will be shown in your wp-admin > plugins interface
- Plugin URI: If you want to add a link to your plugin's page (docs, examples, sales page)
- Description: This one is the small paragraph shown in your wp-admin > plugins interface. Keep it simple so users will remember what is it for
- Author / Author URI: The person / company who created the plugin and a link for credits
- License: So users will know what they can / can't do with your plugin
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:
- $labels – is an array with the labels and the text for different sections of your wp-admin area. So WP will know the proper way to call our items
- supports – this one tells what you can see in the wp-admin > FAQ > new screen. In our case we'll have the title, editor (the main content box), author, revisions and custom fields (in case you want them).
- taxonomies – here you tell WP which taxonomies are allowed (categories, tags or custom taxonomies)
- register_post_type(‘faq_whsr', $args) – this tells WP “Hey, create a new custom post type with the ID as faq_whsr using the arguments from $args”.
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).
Front-End – WP x jQuery interaction
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:
- A lot of developers working on it
- Cross-browser and mobile-ready code
- Well documented
- Plays nice with WP (WP itself uses them)
The question now is: How do we call it?
There are 2 approaches to this:
- The bad pure <script> / <style> tags in your wp_head
- The nice wp_enqueue
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:
The Shortcode
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:
- [self-enclosing] – Like tags <hr /> or <br /> this kind of shortcode just calls a function at some point – this is our guy
- [wrapped] Content [/wrapped] – This one is like tags <p></p> or <div></div> and actually can transform its contents, or use the content as arguments.
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):
- cat – category ID (multiple added as array) [faq-whsr cat=1]
- category_name – category name [faq-whsr category_name=”food”]
- order – ASC or DESC (DESC is default) [faq-whsr order=”ASC”]
- orderby – change the criteria for ordering items [faq-whsr orderby=”title”]
- posts_per_page – change the number of items loaded [faq-whsr posts_per_page=5]
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:
- Author
- Category ( adding exclude options with not_in)
- Search (cool if you want to give users the ability to search through them)
- Custom Field (since FAQ items have them you can use them to load items with specific custom fields and values)
Now it's your turn
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:
- Responsive design
- Widget creation
- Plugin activate / de-activate hooks
- Internationalization
- OOP
- Enqueueing only if needed (for certain pages)
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?
