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
I wrote the following code to create a custom post type called
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.
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.
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
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.