fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

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

  1. Log in to your WordPress admin dashboard.
  2. Go to Media > Add New.
  3. Click “Select Files” and upload your PDF file.
  4. 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

  1. Go to Posts > Add New or Pages > Add New to create a new post or page.
  2. In the block editor, click on the “+” button to add a new block.
  3. Search for the “File” block and click on it.
  4. Click “Upload” to upload a new PDF or “Media Library” to select the PDF you uploaded earlier.
  5. 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

  1. Log in to your WordPress admin dashboard.
  2. Go to Plugins > Add New.
  3. Search for “PDF Embedder”.
  4. Click “Install Now” next to the PDF Embedder plugin.
  5. After installation, click “Activate”.

Step 2: Embed the PDF in a Post or Page

  1. Go to Posts > Add New or Pages > Add New to create a new post or page.
  2. In the block editor, click on the “+” button to add a new block.
  3. Search for the “PDF Embedder” block and click on it.
  4. Click “Media Library” to select a PDF file from your media library or upload a new one.
  5. 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)

  1. Follow the installation steps from Method 2.

Step 2: Use the Shortcode

  1. Go to Posts > Add New or Pages > Add New to create a new post or page.

  2. Switch to the Classic Editor if you’re not using Gutenberg.

  3. 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-PDF with 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

  1. Follow the steps from Method 1 to upload your PDF and copy the file URL.

Step 2: Embed the PDF with an iframe

  1. Go to Posts > Add New or Pages > Add New to create a new post or page.

  2. In the block editor, click on the “+” button to add a new block.

  3. Search for the “Custom HTML” block and click on it.

  4. Paste the following HTML code into the block:

    <iframe src="URL-of-your-PDF" width="100%" height="600px"></iframe>
    

    Replace URL-of-your-PDF with 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:

  1. Install and activate the PDF Embedder plugin.
  2. Upload your PDF to the Media Library.
  3. Embed the PDF in your post or page using the shortcode:
    [pdf-embedder url="URL-of-your-PDF"]
    
    Replace URL-of-your-PDF with 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:

  1. Install and activate the 3D FlipBook plugin.
  2. Go to 3D FlipBook > Add New FlipBook.
  3. Upload your PDF or images.
  4. Configure settings such as page width, height, and controls.
  5. Embed the flipbook in your post or page using the shortcode provided by the plugin, like:
    [3d-flip-book mode="fullscreen" pdf="URL-of-your-PDF"]
    
    Replace URL-of-your-PDF with 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:

  1. Install and activate the Flowpaper plugin.
  2. Upload your PDF to the Media Library.
  3. Create a new flipbook in the Flowpaper settings and upload your PDF.
  4. Embed the flipbook in your post or page using the shortcode provided by the plugin, like:
    [flipbook pdf="URL-of-your-PDF"]
    
    Replace URL-of-your-PDF with 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:

  1. Install and activate the Real3D FlipBook plugin.
  2. Go to Flip Books > Add New Flip Book.
  3. Upload your PDF or images.
  4. Configure the flipbook settings.
  5. Embed the flipbook in your post or page using the shortcode provided by the plugin, like:
    [real3dflipbook id="ID-of-your-flipbook"]
    
    Replace ID-of-your-flipbook with 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!

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY