Creating buttons with dynamic links

Dynamic links are created to show various links in different posts and are displayed as buttons. It can be made in a variety of ways. One method is to use custom fields.

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

Video version

Preparation

In addition to using Meta Box, make sure you already have these extensions:

• Meta Box Builder: It provides UI to create custom fields;
• MB Views: Build front-end templates for WordPress without touching theme files. Support Twig and all field types.

If you are using a page builder such as Elementor or Beaver Builder, please activate the corresponding integration from Meta Box.

All these extensions are available in the Meta Box AIO, which includes the Developer and Lifetime licenses.

Creating 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, and copy it to get the fields.

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

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

Creating buttons without 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 easily 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 custom fields with IDs. By the way, because I’m using the eStar theme, 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.

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

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

Creating buttons with dynamic links using Oxygen

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

I will set a container to contain two buttons right under the featured image of the post.

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 the ID of the wanted field to connect to the button.

The remaining thing to do is style the 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.

Creating buttons with dynamic links using Beaver Builder

I also created a similar template with Beaver Builder.

First, I add columns to set the layout, and then I add a button. There’s a Link section for inserting a static link to the button’s settings. Click the plus icon to receive Meta Box URLs.

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

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.

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

Creating buttons with dynamic links using Bricks

The last page builder is Bricks. 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 from a dropdown list. To get data from custom fields in Meta Box, please choose Dynamic Data.

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

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

After that, all the work is styling.

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

Finally, here they are on a post.