How to Embed a PDF in WordPress: Complete Guide

WordPress makes uploading a PDF straightforward, but displaying that document well requires more than adding a basic file link. A PDF may open in a new browser tab, begin downloading immediately, appear inside an iframe, or load through a dedicated viewer. Each method creates a different experience for your visitors.

This guide explains the main ways to embed a PDF in WordPress, including file links, Gutenberg, iframes, Google Docs Viewer, and dedicated PDF viewer plugins. Compare each method and choose the right option for responsive on-page PDF reading.

What Does It Mean to Embed a PDF in WordPress?

Embedding a PDF means displaying the document inside a WordPress page or post instead of providing only a link to the file. A normal PDF link sends the visitor to the document. An embedded PDF keeps the visitor on the page and places the document inside the surrounding website layout.

This distinction matters when the PDF forms part of the page content. A store may need to display a product catalog. A business may publish a technical manual. A public institution may present a report, while a course website may include a workbook that students need to read before continuing.

In these situations, the document should feel connected to the page around it.

Five Ways to Add a PDF to WordPress

WordPress site owners commonly use one of five methods:

1. Add a normal PDF link.
2. Use the WordPress File block.
3. Embed the document with an iframe.
4. Use an external service such as Google Docs Viewer.
5. Use a dedicated WordPress PDF viewer plugin.

All five methods can place a PDF on a website, but they do not provide the same level of control.

Method 1: Add a Basic PDF Link

The simplest option is to upload the PDF to the WordPress Media Library and insert a link to the file.

How to Add a PDF Link

1. Open the WordPress page or post editor.
2. Upload the PDF to the Media Library.
3. Copy or select the file URL.
4. Add a text link or button that points to the PDF.
5. Publish or update the page.

The link may open the PDF in a new browser tab, load the browser’s built-in PDF interface, or begin a download. The exact behavior depends on the visitor’s browser and device settings.

When a Basic PDF Link Works Well

A normal link is suitable when the document is intended mainly as a downloadable file. Examples include application forms, invoices, printable checklists, press kits, and documents that visitors may want to save locally.

Limitations of a Basic PDF Link

• The visitor may leave the current page or open another tab.
• The website has little control over the viewer interface.
• Mobile behavior can vary between browsers.
• The document is not visually integrated into the page.
• Print, Download, and navigation controls depend on the browser.

A basic link is efficient for file distribution, but it does not create a complete PDF reading experience.

Method 2: Use the WordPress File Block

The Gutenberg editor includes a File block that can display a file name, link, and optional Download button.

How to Use the WordPress File Block

1. Edit a page or post with Gutenberg.
2. Select the Add Block button.
3. Search for the File block.
4. Upload a PDF or select one from the Media Library.
5. Choose whether to display the Download button.
6. Publish the page.

The File block provides a cleaner workflow than manually creating a link, but it still focuses on file access rather than embedded reading.

Advantages of the File Block

• It is built into WordPress.
• No additional plugin is required.
• It is easy to add through Gutenberg.
• An optional Download button is available.

Limitations of the File Block

• It does not provide a complete PDF viewer interface.
• The document may still open in a browser tab.
• There are no dedicated reading modes.
• Viewer controls remain browser dependent.
• Presentation options are limited.

The File block works well for straightforward downloads. It becomes less useful when visitors should read the document directly inside the page.

Method 3: Embed a PDF With an Iframe

An iframe loads another resource inside a defined area of the page. You can point the iframe directly to the uploaded PDF file.

A basic iframe may look like this:

<iframe
    src="https://example.com/wp-content/uploads/document.pdf"
    width="100%"
    height="700"
    title="Embedded PDF document">
</iframe>

How to Add an Iframe in WordPress

1. Upload the PDF to the Media Library.
2. Copy the direct PDF URL.
3. Add a Custom HTML block or page-builder HTML element.
4. Paste the iframe code.
5. Adjust the width and height.
6. Preview the page on desktop and mobile.

Advantages of an Iframe

• No dedicated PDF plugin is required.
• The document may appear inside the page.
• The width and height can be adjusted manually.
• It works in many editors and page builders.

Problems With Iframe PDF Embeds

An iframe does not create a consistent PDF viewer. It usually displays the browser’s own PDF interface inside the frame.

This can lead to several problems:

• The toolbar may look different in each browser.
• The viewer height may be too short or too tall.
• Mobile users may need to scroll inside both the iframe and the page.
• The PDF may not load consistently on every device.
• You have little control over Print and Download buttons.
• Watermarks and per-document settings are not available.

Iframes can be useful for a quick embed, but they often require manual adjustments and testing.

Method 4: Use Google Docs Viewer

Another common method is to load the PDF through Google Docs Viewer. The PDF is passed to an external service and displayed inside an iframe.

This method can help when a browser does not display the PDF directly, but it introduces an external dependency.

Advantages of Google Docs Viewer

• It provides an online viewer interface.
• It can display documents without relying entirely on the browser’s native PDF viewer.
• It does not require a dedicated WordPress plugin.

Limitations of Google Docs Viewer

• The document is loaded through an external service.
• The viewer interface is not controlled by your WordPress website.
• Loading can depend on the availability of the external service.
• The document URL may need to be publicly accessible.
• Design and toolbar options remain limited.
• Watermarking and per-viewer controls are not part of the workflow.

Google Docs Viewer can solve a basic display problem, but it may not suit websites where presentation, branding, control, or privacy matter.

Method 5: Use a WordPress PDF Viewer Plugin

A dedicated PDF viewer plugin gives WordPress site owners more control over how documents appear and behave inside the page.

The plugin usually connects directly to the WordPress Media Library. You select a PDF, add the viewer through a block, widget, builder element, editor button, or shortcode, then configure the presentation.

Features a Dedicated PDF Viewer May Provide

• Responsive viewer sizing
• Single Page and Continuous Scroll reading
• Previous and Next page navigation
• Zoom controls
• Fullscreen viewing
• Working PDF hyperlinks
• Configurable Print and Download controls
• Image watermarks
• Global defaults and per-viewer settings
• Multiple PDFs on the same page

This approach requires installing a plugin, but it creates a more predictable reading experience and reduces reliance on browser-specific behavior.

PDF Embedding Methods Compared

How to Embed a PDF With HexCoda PDF Viewer Pro

HexCoda PDF Viewer Pro provides native integration with Gutenberg, Classic Editor, Elementor Free, Flatsome UX Builder, and shortcodes.

The plugin uses PDFs stored in the WordPress Media Library and displays them through a locally bundled PDF.js viewer.

General Workflow

1. Install and activate HexCoda PDF Viewer Pro.
2. Upload a PDF to the WordPress Media Library or select an existing document.
3. Add the viewer through your preferred editor or page builder.
4. Choose Single Page or Continuous Scroll mode.
5. Configure dimensions, toolbar controls, watermarking, and protection options.
6. Preview the viewer on desktop and mobile.
7. Publish the page.

How to Add a PDF Viewer in Gutenberg

Gutenberg users can add a PDF through a native block.

1. Open the page or post in the block editor.
2. Select the Add Block button.
3. Search for the HexCoda PDF Viewer block.
4. Add the block to the page.
5. Choose or upload a PDF from the Media Library.
6. Configure the reading mode and available viewer settings.
7. Preview and publish the page.

This method keeps the complete PDF workflow inside Gutenberg and avoids manual iframe code.

How to Add a PDF Viewer in Elementor

HexCoda PDF Viewer Pro includes a native widget that works with Elementor Free.

1. Open the page with Elementor.
2. Search the widget panel for PDF Viewer.
3. Drag the HexCoda PDF Viewer widget into the layout.
4. Select the PDF from the WordPress Media Library.
5. Choose the reading mode and viewer options.
6. Preview the page on desktop, tablet, and mobile.
7. Publish or update the layout.

The native widget avoids the need to insert an iframe or build a shortcode manually.

How to Add a PDF Viewer in Flatsome UX Builder

Flatsome users can add a document through a native UX Builder element.

1. Open the page, product content, or layout in Flatsome UX Builder.
2. Select Add Elements.
3. Open the HexCoda element category.
4. Add the PDF Viewer element.
5. Select the PDF from the Media Library.
6. Configure the viewer.
7. Apply the changes and publish the page.

This workflow is useful for WooCommerce catalogs, product manuals, size guides, brochures, price lists, and technical documents.

How to Add a PDF Viewer in Classic Editor

Websites using Classic Editor can insert the viewer through a dedicated button.

1. Edit the page or post with Classic Editor.
2. Select the Add PDF Viewer button.
3. Choose or upload the PDF.
4. Configure the viewer settings.
5. Insert the viewer into the content.
6. Preview and publish the page.

The plugin generates the required viewer output without requiring the editor to construct shortcode parameters manually.

How to Embed a PDF With a Shortcode

Shortcodes remain useful for custom templates, widgets, reusable content, theme areas, and other locations where a native block or builder element is not available.

The exact shortcode structure depends on the viewer configuration and the document selected through the plugin.

A shortcode workflow can also help developers place viewers inside custom WordPress templates while keeping the PDF settings managed through the plugin.

How to Make an Embedded PDF Responsive

Responsive PDF viewing requires more than setting an iframe width to 100%. The viewer must account for fixed PDF page dimensions, different screen widths, mobile controls, landscape pages, portrait pages, and the height of the surrounding layout.

Responsive PDF Recommendations

• Use a viewer that adapts to the container width.
• Test portrait and landscape PDFs separately.
• Avoid fixed pixel widths that exceed mobile screens.
• Provide fullscreen reading for detailed documents.
• Keep navigation controls large enough for touch interaction.
• Check the viewer inside columns and builder sections.
• Test the actual PDF, not only the empty viewer container.

A responsive page does not automatically guarantee a responsive PDF experience. The viewer itself must handle the document correctly.

Single Page vs Continuous Scroll

The best reading mode depends on the document.

Choose Single Page When:

• The PDF is short.
• Each page contains a visual layout.
• You want a stable viewer height.
• The document resembles a presentation or brochure.

Choose Continuous Scroll When:

• The document is long.
• Visitors need to scan several pages.
• The PDF contains a table of contents.
• The content resembles a manual, report, or workbook.

A six-page catalog may feel cleaner in Single Page mode. A 70-page manual will usually be easier to navigate with Continuous Scroll.

How to Keep PDF Links Working

PDF files may contain external website links, email links, internal page destinations, and named destinations.

These links can fail when a viewer renders the document as static images or does not process the PDF annotation layer correctly.

Before publishing, test:

• Website links
• Email addresses
• Clickable tables of contents
• Internal page references
• Named destinations

HexCoda PDF Viewer Pro supports these common PDF link types, allowing readers to use the navigation built into the original document.

Can You Disable PDF Downloads?

A PDF viewer can hide or disable its visible Download button. It can also block common browser interactions and make ordinary downloading less convenient.

However, hiding the Download control does not prevent the PDF from being captured.

Once the browser renders a document, a determined visitor may still use screenshots, screen recording, browser inspection, cached files, or more advanced extraction methods.

Common PDF Embedding Problems

The PDF Opens in a New Tab

This usually happens when the page contains a normal file link rather than an embedded viewer. Use a PDF viewer block, widget, element, or shortcode to keep the document inside the page.

The PDF Downloads Instead of Opening

The browser, server headers, or visitor settings may trigger a download. A dedicated viewer can render the document inside the page instead of relying on normal file-link behavior.

The Viewer Is Too Short

Increase the viewer height or use a reading mode designed for longer documents. Fixed iframe heights often create this problem.

The PDF Is Difficult to Read on Mobile

Use responsive sizing, fullscreen mode, and touch-friendly controls. Test the document on an actual phone because narrow screens can reveal problems that desktop previews do not show.

Internal PDF Links Do Not Work

The viewer may not support the PDF annotation layer, internal page destinations, or named destinations. Test the document with a viewer that explicitly supports these link types.

Multiple PDFs Interfere With Each Other

Each viewer should operate independently. A plugin designed for multiple viewers on the same page should provide separate controls and document states.

Which PDF Embedding Method Should You Choose?

Use a normal PDF link when the visitor mainly needs to download the file.

Use the WordPress File block when you want a simple Gutenberg-based file link with an optional Download button.

Use an iframe when you need a quick embed and can accept browser-dependent behavior.

Use Google Docs Viewer when an external service is acceptable and you do not need detailed control over the reading experience.

Use a dedicated WordPress PDF viewer plugin when the document should remain inside the page and requires responsive sizing, navigation, fullscreen reading, working hyperlinks, watermarks, or configurable viewer controls.

Final Recommendation

The best PDF embedding method depends on the role the document plays on your website.

A downloadable form may only need a file link. A product catalog, manual, report, course workbook, restaurant menu, or property brochure benefits from a proper viewer that keeps visitors on the page.

HexCoda PDF Viewer Pro provides native workflows for Gutenberg, Classic Editor, Elementor Free, Flatsome UX Builder, and shortcodes. It also supports responsive reading, Single Page and Continuous Scroll modes, document links, watermarks, fullscreen viewing, and configurable Print and Download controls.

Explore HexCoda PDF Viewer Pro and view the complete product details.

Frequently Asked Questions