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!

Leave a Reply

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