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.
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
- 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_messages()is a function to customize notification messages for this CPT.
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.
#2: Metabox with repeatable fields#
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
- Free: VafPress (https://github.com/vafour/vafpress-framework)
- Free: CMB2 from WebDevStudios (https://github.com/WebDevStudios/CMB2)
- Free/Paid: Metabox.io (https://metabox.io/)
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.
Including Metabox for our CPT#
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.
Creating a metabox with repeatable fields#
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
Here are few screenshots to demonstrate how things finally turned out