Displaying a PDF File with Dynamic Widgets

This solution requires the JetElements plugin installed and activated.

The PDF file should be added to the “Media” field. For this case, the “Media” meta field stores the value as “Media ID”.

Go to the post and add the PDF file to the “Media” field.

Proceed to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetElements > Widgets & Extensions and enable the Download Button toggle.

Move to the page where you need to display the PDF file. Add the Download Button widget. 

In the Download ID dropdown, select the “Custom Field” option. In the newly opened pop-up, choose the Field that stores the PDF file. You can set up the desired Download Link Text. 

Click the “Publish” button once you are ready and open the front-end page. 

Now, when you click the “Download” button, the file is downloaded. 

The second solution describes how to display a link to the PDF file. 

To achieve this, first of all, install the Attachment link callback addon. You can find it on the DevTools page and install it for free. 

The Value Format of the “Media” field should have the “Media ID” option selected. 

Proceed to the page where you need to display the PDF file. Add the Dynamic Field widget.

In the Source dropdown, choose “Meta Data”. Then, select the custom Media field you have created with JetEngine (it’s called “PDF-Media” in our case) in the Meta Field dropdown.

Enable the Filter field output toggle. In the Callback field, select the “Get attachment file link by ID” option.

Click the “Publish” button and proceed to the front-end page. Now, clicking the link we added, we can open and download the PDF file on the same page. 

The third option supports only the “Media URL” Value Format of the “Media” field.

Move to the needed page and add the Dynamic Field widget. 

Select the “Meta Data” option from the Source dropdown. Then, choose the custom Media field you’ve created (“PDF-Media URL” in this case) in the Meta Field dropdown.

Enable the Customize field output toggle. In the newly appeared Field format input, add the following code:

<object>
    <a href="%s" target="_blank" rel="noopener">Download PDF</a>.</p>
</object>

Publish the template and proceed to the front end. Clicking the link opens a PDF file in a new tab and lets you download it.