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:
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:
- MB Custom Post Type: to create a custom post type for the e-books;
- Meta Box Builder: to have a UI on the back end to create custom fields to store the PDF files.
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.
After publishing, you’ll see 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.
Next, move to the Settings tab. 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.
Create the Page
Go to Oxygen > Templates to add a new template.
Next, create a new page.
Set the created template to apply it to the new page.
Then, edit the template with Oxygen.
Remember to set the preview.
Select the Section component to cover the page content.
Then, add a Heading and 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.
Go to the Query section in the settings of the Repeater to choose the source of data.
Choose Custom, and 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.
First, add an Image component.
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.
For the name of the books, add a Text component.
Then insert data from the Post Title.
For the book description, use the Text component.
And insert data from Post Content.
Now, move ahead to create the buttons.
Add a Button component.
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.
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.
Then 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.
Set the label.
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.
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!
- 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
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display a User List On the Frontend with Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts to WordPress Using Meta Box
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- 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 Buttons Using Custom Fields with Meta Box Plugin
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
- How to Show the Featured Restaurants - P5 - Using Meta Box and Elementor
- How to Show the Featured Restaurants - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
- How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS