WordPress allows us to embed videos and audios directly to the posts and pages without the use of any plugins. But this is not the case with PDF files. There is no default option to embed PDF files in WordPress.The only available alternative is to upload the PDF file and then add a link to this uploaded file in our post or page. The greatest disadvantage of this option is that the visitors have to leave our website to view the PDF content. Luckily we have some options to embed PDF files in our WordPress blog directly using either a plugin or the Google drive embed option. Let us now see each of these options in detail.
Option1: Embed PDF file via a plugin
Step1: Install and activate the PDF embedder WordPress plugin.
Step2: Now go to plugin settings under the PDF Embedder option in WordPress dashboard settings.
Here we have options to configure the height, width, Toolbar location, and Toolbar hover options. Adjust these options as per our requirement.
Step3: Let us now go to the WordPress Add/Edit post section. I will first explain the steps to embed PDF file via classic WordPress editor and later move on to Gutenberg enabled editor.
Classic users must click Add Media button and select the required PDF file.
This will display an embed code similar to the one displayed in the above image.
Gutenberg block enabled users should search for PDF Embedder block under Add New Block option.
Now click on the block to add the PDF file to this newly created block.
Thus both classic and block enabled users can add PDF files to the posts. Let us now Publish/Update this post to save the changes. We can now view the post to see the embedded PDF file.
Option2: Embed PDF file from Google drive
Step1: Go to Google Drive and sign in with our credentials.
Step2: Now go to the File upload option by clicking the New button as shown below.
Once the upload is complete we have to double click on the file name to open the file preview.
Step3: Click on the three dots on the right top corner to view the window with the share option as shown below.
Here we have to select the option Anyone with the link can view
Now click on the Advanced link at the bottom to view the below screen.
Here we have to check the two checkboxes at the bottom to prevent edit or download access to this document for others. Now click the Save changes button at the bottom.
Step4: Again we have to click the three dots at the top right corner to open the file preview screen.
Now click Open in new window link to open this file preview in a new window. The embed option will only be available if we open this preview viewer in a new window.
Step5: Click on the Embed Item link on the screen to view the iframe embed code.
Copy this code to notepad.
Step6: We have to now go to our WordPress post/page add/edit section. Here again, I will first demonstrate the embed process for the classic editor and then for block enabled editor. Classic users have to just go to the post edit/add section and click on the Text tab.
After this just paste the embed code that we have copied before. Block enabled should first add a Custom HTML block.
Within this block, we have to paste the embed code that we have already copied to the notepad.
Step7: Now click the Publish/Update button to save the changes. We can now go to the post/page to view the embedded PDF file.
Note: We can also embed Google forms and Google docs to our WordPress blog in a few simple steps.
Leave a Comment