Ahmad Awais



Repeatable Metabox fields to create Pricing Tables in WordPress

Ahmad AwaisAhmad Awais

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.

  1. A custom post type for Pricing Tables called aa_tables
  2. Metabox with repeatable fields i.e. property value pairs for entities of a pricing table
  3. 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.

#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

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#

Inside aa_tables_mb.php I have coded a single metabox which is responsible for following fields


#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


Screen Shot 2015-06-24 at 10.30.27 pm


Screen Shot 2015-06-24 at 10.31.08 pm


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.

👨‍🏫 Edutainer at VSCode.pro 🎩 An award-winning open-source engineer and developer advocate 🦊 Google Developers Expert for web 🌳 Node.js foundation Community Committee member ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer 📣 TEDx Speaker 🙌 Leading developers and publishing technical content for over a decade 😂 Self-confessed tech comedian cracking silly jokes in the JavaScript web and cloud communities 💜 Loves his wife (Maedah) ❯ Learn more about Awais ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the Developers Takeaway!


TheDevTakeaway: Developers' Newsletter!

Takeaway my professional opinion about Open Source, JavaScript/Cloud, Full Stack Development, building a business, growing a family, and everything in between! Delivered to your inbox once a month. 🤣 I'm even funny some times. 👻 I hate spam! Pinky Promise!