Ahmad Awais

NAVIGATE


SHARE


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

Back-end#

Screen Shot 2015-06-24 at 10.30.27 pm

Front-end#

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.

Helping businesses understand developers. Head of Developer Relations RapidAPI.

📟 Edutainer at Node.js CLI Automation course (100 videos · 22 Projects) & VSCode.pro course (over 20K devs). 🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel 🚀 Mars Ingenuity Helicopter code contributor 🏆 8th GitHub Stars Award recipient 🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator.

✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide WordPress Core Developer 📣 TEDx Speaker with 100+ international talks.

🔥 Satya Nadella · CEO of Microsoft, said — Awais is an awesome example for developers.
🙌 Leading developers and publishing technical content for over a decade 💜 Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

👋… Awais is mostly active on Twitter @MrAhmadAwais

📨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam — pinky-promise!

👨‍💻👩‍💻 118,947 Developers Already Subscribed
Comments 19
  • Matt Cromwell
    Posted on

    Matt Cromwell Matt Cromwell

    Reply Author

    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?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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 :)


  • Rami
    Posted on

    Rami Rami

    Reply Author

    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.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.


    • bimo
      Posted on

      bimo bimo

      Reply Author

      Yes,, its simple and work

      but this article is very compleete

      thanks


  • Eusebiu Oprinoiu
    Posted on

    Eusebiu Oprinoiu Eusebiu Oprinoiu

    Reply Author

    That’s a very elegant approach, Ahmad!
    I always hated the pricing tables that relied on shortcodes…


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.


  • Matt Cromwell
    Posted on

    Matt Cromwell Matt Cromwell

    Reply Author

    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.


  • Tanatip
    Posted on

    Tanatip Tanatip

    Reply Author

    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 :)


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.


  • Ryan
    Posted on

    Ryan Ryan

    Reply Author

    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.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Ryan!
      Glad I could help. Thanks for stopping by.


  • Shariq Khan
    Posted on

    Shariq Khan Shariq Khan

    Reply Author

    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?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      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.


      • Shariq Khan
        Posted on

        Shariq Khan Shariq Khan

        Reply Author

        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?


        • Ahmad Awais
          Posted on

          Ahmad Awais Ahmad Awais

          Reply Author

          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).

          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.

          Would you concede that sometimes shortcodes are a necessary evil?

          Yes, that’s true. But it is us (the developers) who have a way of making things more evil then they are.

          Never heard about shortcakes before. I will give it a read. Thanks for introducing to a new thing :)

          Sure! Check it out. Shortcake is the Shortcode UI.

          Just curiosity, what do you specifically hate about the shortcodes UX

          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.


  • Moshiur Rahman
    Posted on

    Moshiur Rahman Moshiur Rahman

    Reply Author

    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


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      data_sources.php should be in there. But metabox-init.php was probably my custom file.
      Use metabox.io instead. Much better plugin than Vafpress.


  • Nazmul Hassan
    Posted on

    Nazmul Hassan Nazmul Hassan

    Reply Author

    How can I add category here ?