How to Create Download and Preview Buttons - P4 - Using Meta Box and Kadence

Do you have a WordPress website to share knowledge, documentation, product information files, portfolios, etc.? It’s convenient to allow visitors to have two options: read the preview or download the PDF file. Therefore, creating download and preview buttons on an e-book page can be a useful topic for you. Today, let’s do it using Meta Box and Kadence.

Take a look through the e-book page with two buttons that I created as an example:

Video Version

Before Getting Started

The archive page shows detailed information about the books along with two buttons. The Download button is to save the PDF file to your device. And, the Preview button allows you to view it online.

Each e-book will be a post of a custom post type. The basic information of the e-book such as image, name, and description are respectively featured images, title, and description of the post. To store the PDF file, we'll use a custom field provided by Meta Box.

So, to get started, we need the Meta Box core plugin to have the framework for creating the custom post type and custom fields. You can download it directly from wordpress.org.

Besides, we’ll need some Meta Box extensions for the advanced features:

• MB Custom Post Type: to create a custom post type for the e-book;
• Meta Box Builder: to have a UI on the back end to create a custom field for storing the PDF files.

You can install them individually or use Meta Box AIO to have them all.

And, the last one is the pro version of Kadence with some extra types of blocks to build the page.

Create a Custom Post Type

Go to Meta Box > Post Types > Add New to create a new one for the e-book.

After publishing, the created custom post type will be displayed in the admin dashboard.

Create Custom Fields

Go to Meta Box > Custom Fields to create a new field group as usual.

In this practice, I’ll create only one custom field to store the PDF file for the e-book. So, add the File Advanced field.

I keep this field as default without special settings. In the real case, you may want to have some advanced settings for this field or add more custom fields for extra information. But I skip them to make this practice simpler.

After that, move to the Settings tab. Then, set the Location as Post type, and select E-book to apply the field to this post type.

Go to the post editor, you will see the created custom field.

Just fill in the information. And, click on the + Add Media button to upload a file.

These are some posts I’ve added.

Display E-books on the Archive Page

As I mentioned, e-books will be displayed on the archive page. So, we need to create the page first.

Go to Pages > Add New to create a new one as usual.

Next, we will get and display e-books on this page.

We have multiple e-books, so I’ll create a query loop to get them all. To do it, add the Advanced Query Loop block. It is provided by Kadence.

In the Post Types option, choose the post type we used for the e-books.

There are some default layouts you can choose for the e-book. Choose one of them.

After that, all of the e-books are displayed with the chosen layout.

You can adjust it as you want.

Next, we will add the download and preview buttons for each e-book into this query loop.

Add Download and Preview Buttons

Add a Download Button

First, for the download button, add an Advanced Buttons block.

Then, add a label for the button.

To connect the button to the PDF file, click on the Link icon to add a dynamic link to the button.

The documentation file was saved in the custom field created with Meta Box. So, set the Link as Post Custom Field.

At the same time, select the field that we used to store the PDF file.

To set the download function for this button, open the Advanced section of the button, and enable the Download option.

That’s done.

Add a Preview Button

For the preview button, do the same.

Also use the Advanced Buttons block to add the preview button.

Set the dynamic link for it as the field we used.

However, after that, there is no need to add advanced settings to the button since previewing the attached file is the default function of the button. It means that when visitors click on it, the uploaded file will be shown automatically.

Then, go to the page on the front end, you will see the buttons work well.

Next, it seems like we should style the page a little bit to have a better appearance.

Style the Page

Back to the page editor with Kadence. Just change some parameters and settings in the Style and Advanced tab on the right sidebar of each block.

Then, we will have the page with a better look.

Last Words

As you can see, with the help of Meta Box and Kadence, adding download and preview buttons to your website is quite easy. If you use other page builders or just use Meta Box, you can refer to others posts in this series.

In the case that you just want to display the download button on your site, the article on creating a download button using custom fields can be helpful for you.

Enjoy them and share your application with us. As well as, keep track of our blog for more exciting tutorials. Thanks for reading!

• How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
• How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
• How to Create Download and Preview Buttons - P3 - Using MB Views
• How to Create Download and Preview Buttons - P4 - Using Meta Box and Kadence