In today's post, we'll walk you through the way to create an e-book page with download and preview buttons using Meta Box and Oxygen. The e-book files can be downloaded easily or viewed online by website visitors with just one click.

Take a look through the e-book page with two kinds of buttons that I created:

The e-book page with two kinds of buttons

Video Version

Before Getting Started

This is an archive page that shows the product's detailed information along with the buttons. The first kind of button allows directly downloading a PDF file. And the second button is to view it online.

Each e-book will be a unique post of a custom post type. The name of the e-book and its image are the title and featured image of the post. We'll use a custom field provided by Meta Box to store the PDF file.

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

We’ll need some Meta Box’s extensions for the advanced features:

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

I use Oxygen to build the page. You should use its 3.9 version or higher, which has native integration with Meta Box.

Create a Custom Post Type

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

Create a new post type for the e-books

After publishing, you’ll see a new item appear in the admin dashboard.

A new item appear in the admin dashboard

Create Custom Fields

I’ll create only one custom field to store the PDF file of the e-book. So choose the File Advanced type to save this kind of data. The file will be used for both Download and Preview buttons.

Create one custom field to store the PDF file of the e-book

Next, move to the Settings tab. Choose Location as Post Type and then select E-book to apply the field to the post type.

Choose Location as Post Type and then select E-book to apply the field to the post type

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

The created custom fields

Create the Page

Go to Oxygen > Templates to add a new template.

Add a new template

Go to Oxygen > Templates to add a new template

Next, create a new page.

Create a new page

Set the created template to apply it to the new page.

Set the created template to apply to the new page

Then, edit the template with Oxygen.

Edit the template with Oxygen

Remember to set the preview.

Set the preview

Select the Section component to cover the page content.

Select the Section component to cover the page content

Then, add a Heading and insert data from the page title.

Add a Heading

Insert data from the page title

We will display all the e-books first, then add buttons later.

Display E-books information

Inside the Section, add a Repeater component to get all the posts of the e-book post type.

Add a Repeater component to get all the posts of the e-book post type

Go to the Query section in the settings of the Repeater to choose the source of data.

Go to the Query section to choose the source of data

Choose Custom, and set the Post type as ‘e-book’ to get posts from the post type.

Choose Custom, and set the Post type as ‘e-book’ to get posts from the post type

Set the Post type as ‘e-book’ to get posts from the post type

Inside the Repeater, there will be a Div. I’ll add some components into the Div to display the e-book information.

Inside the Repeater, there will be a Div

First, add an Image component.

Add an Image component

Insert data from the Featured Image of the post.

Insert data from the Featured Image of the post

Insert data from the Featured Image of the post

You can change the settings of the Div a little bit to put the e-book into columns and see all the images.

Change the settings of the Div a little bit to put the e-book into columns and see all the images

For the name of the books, add a Text component.

Add a Text component

Then insert data from the Post Title.

Then insert data from the Post Title

For the book description, use the Text component.

Use the Text component

And insert data from Post Content.

Choose insert data

Insert data from Post Content

Now, move ahead to create the buttons.

Create the Buttons

Add a Button component.

Add a Button component

Change the button label.

Change the button label

In the URL setting, insert data from the custom field to the button. Choose Meta Box Field option, then select the name of the field that we used to store the PDF file.

Insert data from the custom field to the button

This action just helps to embed the URL of the PDF file into the button. To allow users to download the file from it, we should add an attribute to the button.

Go to the Advanced > Attributes section in the settings of the Button component.

Go to the Advanced > Attributes section in the settings of the Button component

Then add an attribute as download to the button.

Add an attribute as download to the button

That’s done for the Download button. For the Preview button, you can do the same way.

Add Button component.

Add Button component

Set the label.

Set the label

Insert URL from the field that stores the PDF file.

Insert URL from the field that stores the PDF file

It’s a little bit different with the Download button. There is no need to add any attribute as well as any action for the Preview button. The file will be open to view when people click on the button.

After getting all the data, we have an e-book page with buttons like this.

Style the Page

Just change the settings of each component to have a better look for them.

A better look for e-book page

Last Words

The URL in each button will correspond with the e-book automatically. That’s so easy, do you see that? Keep track of us to see more useful practices. Thanks!

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

Leave a Reply

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