Sometimes you may want to allow users to download something from your site, so there’ll be a button for it, even another one for viewing it online in addition. In this practice, we’ll do it but for a more advanced case with Meta Box and Bricks.

We will create buttons to download and read e-books online as follows. Each button for each e-book will embed their own URL of a PDF file.

Create buttons to download and read e-books online.

Video Version

Before Getting Started

Each e-book will be a post in a custom post type. There is some typical information in each post. For the PDF file, we’ll use a custom field created by Meta Box to save it.

In this practice, we need these tools:

Create a New Custom Post Type

Go to Meta Box > Post Types > Add New to create a new post type for your e-books.

Create a new post type for your e-books.

Create Custom Fields

I’ll use a custom field to store the PDF file of the e-book. Choose the File Advanced type to save this kind of data.

Choose the File Advanced type to store the PDF file of the e-book.

In the real case, you may want to add more custom fields for extra information, but I skip it to make this practice simpler.

After creating the field, move to the Settings tab > choose Location as Post type > select E-book to apply this field to this post type.

In the Settings tab, choose Location as Post type and select E-book to apply this field to this post type.

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

The created custom field

Then, just fill in the information and upload a file.

Create the Buttons

I already have an archive page that displays all the e-books along with some detailed information. I’d like to add a Download button and a Preview button to the place shown in the image below.

The place where we add a Download button and a Preview button.

Let’s edit the page with Bricks.

First, add a new Div element for the Download button.

Add a new Div element for the Download button.

In this Div, choose the HTML tag as a [Link]. This makes the button clickable.

Choose the HTML tag as a [Link] to make the button clickable.

Then, select the type of Link as Dynamic Data to have the option to connect this Div to a custom field. In this case, it's the PDF Upload field.

Select the type of Link as Dynamic Data to have the option to connect the Div element to a custom field.

Choose the PDF Upload field to connect this field to the Div element.

To allow users to download the file from the button, we should add an attribute to this Div. Go to the Style section > Attribute > Add Attribute. Add ‘download’ to the Name field. This is an HTML attribute.

To allow users to download the file from the button, add an attribute.

You can add CSS classes to style the button in the box like this.

Add CSS classes to style the button

Now, add the Basic Text element to name the button.

Add the Basic Text element to name the button

For the Preview button, do the same with the Download button. So, just duplicate the above Div and rename it as well.

Keep the type of HTML tag as a [Link] and connection with the PDF Upload field.

For the Preview button, keep the type of HTML tag as a [Link] and connection with the PDF Upload field.

If you want to display the PDF file in a new tab of the browser when clicking this Preview button, turn on the option shown in the image below.

To display the PDF file in a new tab, turn on the Open in new tap option

You can also change the CSS classes to have a different style with the Download button. Finally, this is just previewing, so remove the attribute that we used for downloading.

Change the CSS classes to have a different style and remove the attribute that we used for downloading.

Now, we have 2 buttons. Change the spacing a little bit, and then you get the final look of them.

On the frontend, you can click the buttons for testing. They work well as you can see in the gif.

The Download and Preview buttons work well.

Last Words

We have gone through all the steps to create download and preview buttons using Meta Box and Bricks. Don't miss out on the convenience they offer.

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 Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  31. How to Create a Recipe - P3 - Using Meta Box and Elementor
  32. How to Create a Recipe - P4 - Using Meta Box and Bricks
  33. How to Create a Recipe - P5 - Using Meta Box and Zion
  34. How to Create a Recipe - P6 - Using Meta Box and Brizy
  35. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  36. How to Create a Recipe - P8 - Using Meta Box and Kadence
  37. How to Create a Recipe - P9 - Using Meta Box and Divi
  38. How to Create a Recipe with Meta Box Plugin
  39. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  40. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  41. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  42. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  43. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  44. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  45. How to Create a Team Members Page - P4 - Just Meta Box
  46. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  47. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  48. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  49. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  50. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  51. How to Create a Video Gallery Page - P5 - Using MB Views
  52. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  53. How to Create a Video Gallery Page Using Meta Box + Oxygen
  54. How to Create ACF Flexible Content Field with Meta Box
  55. How to Create an Auto-Updated Cheat Sheet in WordPress
  56. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  57. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  58. How to create an FAQs page - P4 - Using Meta Box and Bricks
  59. How to Create an FAQs Page - P6 - Using MB Views
  60. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  61. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  62. How to Create an FAQs Page - P9 - Using MB Blocks
  63. How to Create an FAQs Page -P3- Using Meta Box
  64. How to Create Buttons with Dynamic Link using Custom Fields
  65. How to Create Category Thumbnails & Featured Images Using Custom Fields
  66. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  67. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  68. How to Create Download and Preview Buttons - P3 - Using MB Views
  69. How to Create Download Buttons in WordPress - Using Custom Fields
  70. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  71. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  72. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  73. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  74. How to Create Notification Using Custom HTML Field
  75. How to Create Online Admission Form for School or University
  76. How to Create Online Reservation Form for Restaurants using Meta Box
  77. How to Create Relationships - P1 - Using Meta Box and Oxygen
  78. How to Create Relationships - P2 - Using Meta Box and Bricks
  79. How to Create Relationships - P3 - Using MB Views
  80. How to Create Relationships - P4 - Using Meta Box and Breakdance
  81. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  82. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  83. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  84. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  85. How To Display All Listings On A Map With Meta Box
  86. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  87. How to Display Author Bio in WordPress - P2 - Using MB Views
  88. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  89. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  90. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  91. How to Display Images from Cloneable Fields - P3 - with Elementor
  92. How to Display Images from Cloneable Fields - P4 - with Bricks
  93. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  94. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  95. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  96. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  97. How to Display Product Variations - P3 - Using Meta Box and Bricks
  98. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  99. How to Display The Latest Products - P5 - Using Meta Box and Bricks

Leave a Reply

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