Sometimes you may need a button that can show different links in different posts. That’s a button with a dynamic link. There are different ways to create it, one of them is using custom fields. Links will be saved into custom fields then pulled out and put into the button automatically. And, that’s where the Meta Box plugin comes in handy.

For instance, I have a website about theme reviews here. Each post about a theme has buttons to their own demo and download pages. They are dynamic links.

A website about theme reviews that have buttons with dynamic link

Let’s find out how to create those buttons.

Before Getting Started

As I said, Meta Box is the first tool we put on the list.

If you love UI, Meta Box Builder is the next one for having UI on the dashboard. It’s available in the Meta Box AIO or MB Core, so if you’ve had one of them, just check to make sure that you’ve already enabled the Meta Box Builder extension.

If you are using Elementor or Beaver Builder, please activate the corresponding integration from Meta Box. For others as Oxygen or Bricks, just go ahead.

In the event that you don’t use any website builder, you may need MB Views.

I’m going to have a comprehensive tutorial for both non-using-page-builder and using page builders such as Oxygen, Beaver Builder, and Bricks as follows.

Video Version

Create Custom Fields for URLs

First, we need custom fields for saving URLs for each post. If you’ve had Meta Box Builder in your pocket, you will have a UI on the backend to create custom fields visually. Otherwise, please go to the Online Generator, create fields, generate code, then copy it to get the fields.

They are quite simple with type is URL and there are no special settings.

Meta Box Builder help to have a UI on the backend to create custom fields visually to have URL button

After having these fields, please go to posts, input some links. That's way you will have data to check if the buttons work.

Create Buttons Without Using any Page Builder

For someone who is not using any page builder on their site, this part may help. MB Views from Meta Box will help to create a button easier with a shortcode.

Just go to Views and create a new view with this code:

<a class="wp-block-button__link" href="{{ post.view_demo }}">
    View demo
</a>
<a class="wp-block-button__link" href="{{ post.download }}">
    Download
</a>

In there, view_demo and download are the IDs of the custom fields that we’ve created above. By the way, because I’m using the eStar theme, so I must use the wp-block-button__link class to create buttons.

The view will generate a shortcode as you see in the below image. Just copy and embed it somewhere.

The view will generate a shortcode for the URL button

For instance, I pasted it to a sidebar on the single blog post page and got these buttons.

Display buttons on sidebar with dynamic link

Note that this look of the button is from the theme default.

Create Buttons with Dynamic Link using Oxygen

I’ve already pre-made a template using Oxygen. It is applied to blog posts.

I will add two buttons right under the featured image of the post. However, before creating any button, we need to set a container for them.

I will add two buttons right under the featured image of the post in this template by Oxygen

Now, add a button. At the end of the URL section, there is a button linked to dynamic data. Click it, then choose Meta / Custom Field in the Post section. Next, Scroll your mouse until you find out the ID of the wanted field to connect to the button.

connect the button to a Meta Box custom fields to make it dynamic link

The remaining thing to do is style the button as you want.

style the URL button as you want

I also created another one with a new style and linked it to another field. And, here they are in a post, with links.

buttons with dynamic URL created by Oxygen and Meta Box custom fields

Create Buttons with Dynamic Link using Beaver Builder

On another website, I also have a pre-made template by Beaver Builder with the same location and style as the one made by Oxygen. The buttons also will be under the featured image.

I also add columns to set the layout first, then add a button. There is also a Link section for inserting a static link in the button’s settings. But, to get the URLs from Meta Box fields, please click the plus icon.

connect the custom fields of Meta Box to the button in Beaver Builderto make it dynamic

You will see the Meta Box Field option in the drop-down list. Choose it by clicking Connect.

You will see the Meta Box Field option in the drop-down list of Beaver Builder

Then, choose the name of the field you want.

The last thing, style your button. That’s all.

To have another button, you can duplicate this one to save time, then reconnect it to another field as well as restyle it.

reconnect the button to another custom fields in Beaver Builder to auto get data

Now, go to a post, you will see the buttons with links.

Buttons with dynamic URL created by Beaver Builder and Meta Box custom fields

Create Buttons with Dynamic Link using Bricks

The last website builder in this tutorial is Bricks with the same template and position for buttons. In the same way, add a container with 4 columns first then buttons.

Different from other page builders, Bricks allows you to choose the type of link on a dropdown list. To get data from custom fields of Meta Box, please choose Dynamic Data.

Choose Dynamic Data in Bricks to connect button with custom fields of Meta Box

After that, you will see Meta Box is suggested with the name of custom fields following. Choose one as we want.

Meta Box is suggested with the name of custom fields following

Bricks will render a corresponding link to this preview post that you can check if the data is correct.

Bricks will render a corresponding link to this preview post that you can check if the data is correct.

After that, all the work is styling.

style the URL button with Bricks

Then, I’ve got an ace button in the preview. Let’s duplicate it to have a new one. I’ll change the data’s source and restyle this new button.

create new URL button, reconnect to custom fields then restyle in Bricks

Finally, here they are on a post.

Buttons with dynamic link created by Bricks and Meta Box custom fields

Last Words

These are just small tips for creating buttons with dynamic links. By the way, we also hope that you know somewhat how to connect custom fields created by Meta Box to a page builder element. Do you find it work for you?

If you have any questions, please feel free to leave us a comment below. And, remember to keep track of our blog to have more tutorials.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

5 thoughts on “How to Create Buttons with Dynamic Link using Custom Fields

    1. It seems the answers to our questions are not the MetaBox team priority. I also asked a question in another post, but unfortunately, there is no answer. Better to remove the content area, do not create headaches for them...

    2. Maybe you should ask in Meta Box User Group on Facebook. This group is quite active and the team are supportive here.

  1. This is not dynamic. You need to put the URL by yourself.
    How to put the URL of the post dynamically? The video is not showing how the URL field get the post URL?

Leave a Reply

Your email address will not be published. Required fields are marked *