Being a full stack WordPress developer, I think user experience matters a lot. While creating a premium WordPress theme, one should take care of how users are going to use it. WordPress premium themes are known for worst UX(user experience) while having good UIs (user interfaces). I keep exploring new ways of creating better user experience since curiosity about life in all of its aspects, I think, is still the secret of creative people.
For a theme developer user experience is not a feature it is an attitude.
Developing a Pricing Table#
Last week while I was developing a new WordPress premium theme. I thought it would be nice to provide users with a better way of creating pricing tables in WordPress, since I was using shortcodes for this very task and I guess we all know how bad it could be to build a pricing table with shortcodes.
Quest begins#
Everything starts with a wild guess and it takes a while to get confident that you are guessing pretty good. Let’s plan what we are going to build here.
- A custom post type for Pricing Tables called
aa_tables
- Metabox with repeatable fields i.e. property value pairs for entities of a pricing table
- Getting the values of repeatable property value pairs and using these values at the front-end
#1: Custom Post Type aa_tables#
I wrote the following code to create a custom post type called
aa_tables where
aa_Tables_messages() is a function to customize notification messages for this CPT.
Update #1#
As my friend Matt Cromwell mentioned in the comments, make sure you realize that code for CPT belongs in a Core Functionality plugin which is exactly what I am doing behind the scene. So, make sure you try to differentiate between what goes in your theme and what goes in a core plugin for your theme.
I used GenerateWP.com to create this CPT, you should try it out.
Creating a set of repeatable fields with key value pairs is most definitely a tough task. A good number of developers recommend to write your own code instead of relying on a framework. But instead of shooting arrows at somebody else’s target… I make my own target around wherever my arrow has happened to have landed. We are going to create repeatable metaboxes/field so after bit of a research I found few viable options
While CMB2 looks like a worthy option, I had have some experience with VafPress which was why I chose it. I really liked Metabox.io and plan to use it in a future product or two.
Including VafPress in a WordPress theme#
I have created a file called admin-init.php and required it in functions.php, you can choose to add the following code directly in functions.php if you’d like.
I have created another file called metabox-init.php and inside it I have required a file called aa_tables_mb.php. This file will contain our metabox code.
Inside aa_tables_mb.php I have coded a single metabox which is responsible for following fields
- Price of the table
- Text below price
- Repeatable property-value pairs (E.g. Property = Support and Value = 1 Year)
- Link for the buy button
#3 Getting the repeatable values#
Finally we need to get the values of repeatable property value pairs and print them on the front-end
Final Outcome#
Here are few screenshots to demonstrate how things finally turned out
Back-end#
That’s about it. I know I haven’t been forth-coming with a lot of details, but for any decent developer, these gists have documented code. I am open to questions. Let me know.
Ahmad Awais
Great details and walkthrough. I’ve also researched tons of Pricing table plugins and been disappointed every time. It seems like such an important thing and should be relatively easy, but the plugins available seem to all be very buggy or overly gludgy.
But they ARE content, so don’t you think this belongs in a Core Functionality plugin instead of your theme’s functions.php?
Hey Matt, thanks for liking the post. Actually, I believe you might have read the context where I stated that I did create it while I was building a Premium WP Theme. Except for the CPT part, I did add everything in the theme. I have created a Core Plugin for my theme, which contains all the CPTs and stuff which shouldn’t be part of a theme. But for the sake of this tutorial I just didn’t want to confuse the readers. I have added a note now :)
Very nive post Ahmad.
Soon you won’t need to use external libraries…
GenerateWP.com will offer a meta-box generator.
It’s in final development stages.
Rami I just updated the post to mention that I used GenerateWP.com to create the CPT in first place. I think meta box generator would be a great addition to GenWP toolset.
Yes,, its simple and work
but this article is very compleete
thanks
That’s a very elegant approach, Ahmad!
I always hated the pricing tables that relied on shortcodes…
It’s good to find out I am not all alone to hate the shortcodes way for creating pricing tables. Once my theme is out, I’d like you to test the live version of how things turned out.
I’ve been hoping GenerateWP had plans for a metabox generator. Wow. That’s quite an undertaking and I’m sure the Theme and Plugin review teams are going to LOVE that. But I’m curious. Will you be using an existing library to output these, or will it be just purely the WordPress Settings API and whatnot? I just signed up for your newsletter to get the latest but would love to hear more details.
Thanks for sharing this! Valpress is a great framework to help you build theme options or meta boxes. However, it is no longer support by the author or community. ( Last committed since 2014 ) . Just curious, why you still using it? Why not CMB2?
BTW, Love your post :)
I have kept updating it. I even sent some pull requests. CMB2 was not good enough when it came to repeatable metaboxes. I am trying to go framework agnostic here. Going to try Metabox.io.
A great resource and tutorial!
I love approaches to bespoke developments and have used this logic in a few items of my own work which work perfectly. Thanks for the walkthrough, helped massively.
Hey, Ryan!
Glad I could help. Thanks for stopping by.
Hey Ahmad, many thanks for the nice tutorial!
A question, though. You’ve said you hate shortcodes. I am wondering then how do you display the pricing table in middle of a page or post?
I may be wrong here, but with the implementation you’ve here, it looks like the pricing table will be displayed only on a separate page of its own. There looks to be no way of insert the pricing table at a desired place-say, in the middle of a post or page.
Your thoughts?
Why not? You can build a simple shortcode that could be used to display a particular table’s ID. Just like displaying a particular post ID. I hate the UX around shortcodes. It can be improved via ShortCake.
That’s what I asked: how do you display it in middle of a page without using shortcodes. I asked this because you said you hated shortcode.
So, what I was thinking is correct: we do have to use shortcodes if we want to do it (insert the pricing table in middle of the page).
Would you concede that sometimes shortcodes are a necessary evil?
Never heard about shortcakes before. I will give it a read. Thanks for introducing to a new thing :)
Just curiosity, what do you specifically hate about the shortcodes UX?
You misunderstood my stance against using shortcodes. I don’t hate the fundamental idea of shortcodes, I hate the way they are used. Building a pricing table with shortcodes is really hard. Including a simple shortcode like [ptable id=’39’] to include the entire table that you built with what I wrote about in this post is real easy.
Yes, that’s true. But it is us (the developers) who have a way of making things more evil then they are.
Sure! Check it out. Shortcake is the Shortcode UI.
Didn’t expect a question like this. But here it is, shortcodes were never meant to build complex things like Pricing Tables and what not. The fact that they are being used by so many devs for stuff like this goes against almost every rule of UX there is. Did you ever try to create a pricing table based on Shortcodes? And then tried editing it?
I hope that helps.
Hi,
I’m trying to use as the direction of this tutorial. But including Vafpress problem. I didn’t find the metabox-init.php, data_sources.php inside the sources. If you help me what can I do now. Please suggest me.
Thanks,
Moshiur
data_sources.phpshould be in there. Butmetabox-init.phpwas probably my custom file.Use metabox.io instead. Much better plugin than Vafpress.
How can I add category here ?