WordPress / 6 MIN READ
WP pdf embeds
Embedding PDFs in WordPress
From the original Fervor library. Examples may use older package versions.
Displaying PDFs in WordPress can be done in several ways, depending on your needs and the level of customization you require. Here’s a step-by-step tutorial on how to display PDFs in WordPress using different methods.
Method 1: Using the Default WordPress Block Editor (Gutenberg)
Step 1: Upload the PDF
- Log in to your WordPress admin dashboard.
- Go to
Media > Add New. - Click “Select Files” and upload your PDF file.
- Once uploaded, click on the PDF file to get the file URL. Copy this URL.
Step 2: Insert the PDF into a Post or Page
- Go to
Posts > Add NeworPages > Add Newto create a new post or page. - In the block editor, click on the “+” button to add a new block.
- Search for the “File” block and click on it.
- Click “Upload” to upload a new PDF or “Media Library” to select the PDF you uploaded earlier.
- Alternatively, paste the URL of the PDF file you copied earlier.
Method 2: Using a PDF Embedder Plugin
Plugins provide additional features and more control over how PDFs are displayed. Here, we’ll use the PDF Embedder plugin.
Step 1: Install and Activate the Plugin
- Log in to your WordPress admin dashboard.
- Go to
Plugins > Add New. - Search for “PDF Embedder”.
- Click “Install Now” next to the PDF Embedder plugin.
- After installation, click “Activate”.
Step 2: Embed the PDF in a Post or Page
- Go to
Posts > Add NeworPages > Add Newto create a new post or page. - In the block editor, click on the “+” button to add a new block.
- Search for the “PDF Embedder” block and click on it.
- Click “Media Library” to select a PDF file from your media library or upload a new one.
- The PDF will be embedded directly in your post or page, with an inline viewer.
Method 3: Using Shortcodes
If you prefer to use shortcodes or your theme doesn’t support Gutenberg blocks, you can also use shortcodes provided by PDF plugins.
Step 1: Install and Activate a PDF Embedder Plugin (like PDF Embedder)
- Follow the installation steps from Method 2.
Step 2: Use the Shortcode
-
Go to
Posts > Add NeworPages > Add Newto create a new post or page. -
Switch to the Classic Editor if you’re not using Gutenberg.
-
Insert the shortcode provided by the PDF Embedder plugin where you want the PDF to appear:
[pdf-embedder url="URL-of-your-PDF"]Replace
URL-of-your-PDFwith the URL of the PDF you uploaded.
Method 4: Using a Custom HTML Block
If you want to have more control over the appearance and behavior, you can use an iframe to embed the PDF.
Step 1: Upload the PDF
- Follow the steps from Method 1 to upload your PDF and copy the file URL.
Step 2: Embed the PDF with an iframe
-
Go to
Posts > Add NeworPages > Add Newto create a new post or page. -
In the block editor, click on the “+” button to add a new block.
-
Search for the “Custom HTML” block and click on it.
-
Paste the following HTML code into the block:
<iframe src="URL-of-your-PDF" width="100%" height="600px"></iframe>Replace
URL-of-your-PDFwith the URL of the PDF you uploaded.
Conclusion
These methods give you multiple options to display PDFs in WordPress, from using the built-in Gutenberg blocks to leveraging plugins for additional functionality. Choose the method that best fits your needs and provides the desired user experience for your site visitors.
Happy embedding!
Bonus more plugins.
There are plugins specifically designed to handle PDFs like a slideshow in WordPress. These plugins can convert PDFs into a flipbook or slideshow format, making them interactive and visually appealing. Here are a few plugins you can use:
1. PDF Embedder
While not a slideshow by default, the PDF Embedder plugin allows users to navigate through PDF pages with next/previous buttons, giving a slideshow-like experience.
Features:
- Simple embedding using shortcodes.
- Responsive and mobile-friendly.
- Next and previous navigation buttons.
How to Use:
- Install and activate the PDF Embedder plugin.
- Upload your PDF to the Media Library.
- Embed the PDF in your post or page using the shortcode:
Replace[pdf-embedder url="URL-of-your-PDF"]URL-of-your-PDFwith the actual URL of the PDF file.
2. 3D FlipBook
3D FlipBook is a more advanced plugin that turns your PDFs into interactive flipbooks, providing a slideshow-like experience with a realistic page-turning effect.
Features:
- Realistic 3D page-turning effect.
- Supports PDFs and images.
- Responsive and mobile-friendly.
- Customizable appearance and controls.
How to Use:
- Install and activate the 3D FlipBook plugin.
- Go to
3D FlipBook > Add New FlipBook. - Upload your PDF or images.
- Configure settings such as page width, height, and controls.
- Embed the flipbook in your post or page using the shortcode provided by the plugin, like:
Replace[3d-flip-book mode="fullscreen" pdf="URL-of-your-PDF"]URL-of-your-PDFwith the actual URL of the PDF file.
3. Flowpaper
Flowpaper allows you to create stunning flipbooks from PDFs, perfect for catalogs, magazines, and brochures.
Features:
- Page flip effect.
- Embed PDFs as flipbooks.
- Customizable viewer.
- Mobile-friendly.
How to Use:
- Install and activate the Flowpaper plugin.
- Upload your PDF to the Media Library.
- Create a new flipbook in the Flowpaper settings and upload your PDF.
- Embed the flipbook in your post or page using the shortcode provided by the plugin, like:
Replace[flipbook pdf="URL-of-your-PDF"]URL-of-your-PDFwith the actual URL of the PDF file.
4. Real3D FlipBook
Real3D FlipBook is another great option for turning your PDFs into interactive flipbooks.
Features:
- Realistic 3D page flip effect.
- PDF and image support.
- Fully customizable.
- Mobile-friendly.
How to Use:
- Install and activate the Real3D FlipBook plugin.
- Go to
Flip Books > Add New Flip Book. - Upload your PDF or images.
- Configure the flipbook settings.
- Embed the flipbook in your post or page using the shortcode provided by the plugin, like:
Replace[real3dflipbook id="ID-of-your-flipbook"]ID-of-your-flipbookwith the actual ID provided by the plugin.
Conclusion
Using these plugins, you can create interactive, slideshow-like experiences for your PDFs in WordPress. Whether you want a simple navigation interface or a more advanced flipbook effect, these plugins have you covered.
If you need help with any of the steps or have any other questions, feel free to ask. Happy embedding!