Embed PDF on WordPress
Embed PDF On WordPress
Embedding a PDF on WordPress can be necessary for quite some reasons.
- Authors might want to upload their books as an ebook on their wordpress website
- Restaurant owners might want to upload their menu as pdf on their website.
- Agencies might want to share their plan as pdf
- Developers and designers might want to share their pricing or portfolio as pdf on their wordpress website.
But you can't display them directly on wordpress. Cause wordpress does not allow you to embed pdf files. To this date, wordpress does not have this feature.
What wordpress does is that it shows the pdf as a downloadable link when you upload a pdf on your wordpress page or post. So when the visitors will come, they can download the pdf and then watch it.
But with this procedure, visitors can lose their interest and may leave the website. So it will be really bad for the SEO performance of your website. Now the question is there a way to display or embed pdf on your website so that when visitors come they can read that right from your website. The answer is, there is a way to embed pdf on your wordpress website.
Now I will let you know how you can display and embed pdf on your wordpress page or post easily. Let's just jump into it.
How To Embed PDF On WordPress? (Step By Step Guide)
To embed a pdf on your wordpress website at first you need a check out a plugin. There are numerous pdf viewer plugins in the market but this plugin will not only allow you to embed pdf on your website but also your visitors can read them as a responsive flipbook. Flipbook mode comes totally free with the plugin. This is the easiest way to embed a pdf on a wordpress website. All the processes will be very simple and anyone can do it with some clicks of the mouse. But first, let's talk a bit more about the plugin that we are going to use.
The plugin is called pdf viewer for wordpress. It is created by ThemeNCode which is an elite author of Codecanyon. This plugin will give you a lot of features that we will talk about a bit later. But first, let's check out how we will embed pdf on wordpress using pdf viewer for wordpress.
Step 1: Download from CodeCanyon
- After Purchasing the plugin on CodeCanyon simply go to the Downloads page
- Find the Plugin on the list and click on Green Download Button
- Save the zip file on your computer and the first step is done.
Step 2: Install via WordPress Admin (wp-admin)
Please follow these steps to install via wp-admin
- Login as administrator to wp-admin using your username and password
- Go to Plugins-> Add New
- Click on the Upload Plugin button
- Click on Choose File and choose the file you just downloaded from codecanyon
- Click on Install Now
- Click on Activate Plugin once the installation is done
- That's all, and the plugin is installed on your site now!
Why We Should Use PDF Viewer For WordPress?
PDF viewer for the wordpress plugin is basically giving you two plugins for the price of just one. You might be thinking how. This plugin will give you a flipbook all free with this plugin. So now you can embed a pdf or display them as a stylish, responsive 3d flipbook on your wordpress website. Why we are talking so much about the flipbook option? Cause if you show them only as a pdf reader it looks a bit dull but when you use flipbook it gives a good impression to the visitors. Visitors can easily read them which helps to get better on SEO terms and gets your website higher on google rank. You can track all your growth after using pdf viewer for wordpress through google analytics. Give your pdf documents a bit more life and make them easier to read
PDF Viewer for WordPress is the best-selling PDF plugin for WordPress on CodeCanyon (5800+ Sales) since 2014. With this premium plugin, You can display and embed PDF Files of your WordPress Website with a modern PDF Reader & FlipBook. Use it for any kind of pdfs like eBooks, Invoices, Flyers, Brochures, Product Catalog, Product Manuals, Product Documentation, Service Quote, Proposal, Restaurant Menu, SEO report, Resume, Content. Reports and any other pdf file you may have. It has no size limit so no problem if you have any larger files.
After the latest update, you can use it with Gutenberg editor as well. Check out this link to get the PDF VIEWER FOR WORDPRESS PLUGIN
DOWNLOAD
Extra Features Of PDF Viewer For WordPress
- Automatically find pdf links & activate viewer if you choose that option.
- Translatable into 100+ Languages (French translation, Spanish translation, and many others)
- Fully Customizable PDF Viewer. Customize the colors of the viewer to match your site's color combination.
- Embed pdf with a feature-rich viewer on WordPress page/post
- Feature Rich Admin Panel & Shortcodes
- Share pdf on social networks
- Send link to friend via email
- Enable/Disable social sharing
- Enable/Disable Print Option
- Enable/Disable Download Option
- Enable/Disable Presentation mode
- Enable/Disable Find Option
- Enable/Disable Logo
- Enable/Disable Zoom
- Enable/Disable Page Navigation
- Enable/Disable auto-linking of pdf links to viewer
- Brand viewer with your own logo
- Logo links to the homepage of your site
- Default Shortcode parameters.
- Shortcode for viewing pdf file on any post/page
- Shortcode to add a text link to your pdf file on any post/page
- Fully Responsive PDF viewer
- Style & Customize all the single items.
- Compatible with Internet Explorer & most browsers even mobile browsers
- Fast & smooth user experience
- Retain Image Quality
- No Third-Party links, install the viewer on your website.
- No Limitation of pdf size
- It uses jQuery to replace URLs automatically, which won’t affect your Site’s SEO on google if you use the plugin on the old site.
- FlipBook View makes it look more appealing.
- The format on the option page
- Full-screen mode link with auto iframe feature
- Can use specific icons
- Any file types possible
All of these are built-in features. And if any further update comes you can upload features again.
How To Use PDF Viewer For WordPress?
PDF Viewer for WordPress comes with 2 types of integration:
- Automatic Link / Automatic Iframe
- Using Shortcodes
You can use any of these 2 options according to your needs.
Here's when to use which option:
Automatic Link / Automatic Iframe
This option is useful when you have lots of pdf files already linked on various pages of your site and want all these to use PDF Viewer for WordPress automatically.
You can enable Automatic Link if you want all the PDF links to be converted to a link that will open the PDF file with PDF Viewer for WordPress.
You can use Automatic iFrame if you want all the PDF links to be converted to an iFrame containing the PDF file inside PDF Viewer for WordPress.
More Details on Automatic links and how to set them up can be found here.
Using Shortcodes
PDF Viewer for WordPress comes with 5 shortcodes, which you can use on any post/page/anywhere on your site. Shortcodes can be created for individual files. Each shortcode have their own purpose Here are all the shortcodes:
1. Link Shortcode [tnc-pdf-viewer-link]
This shortcode outputs a link to open the specified file with PDF Viewer. Click here to find more information and the shortcode parameters of this shortcode.
2. iFrame code [tnc-pdf-viewer-iframe]
This shortcode outputs an iframe containing the specified file with PDF Viewer. Click here to find more information and the shortcode parameters of this shortcode.
3. Shortlink Shortcode [tnc-pdf-viewer-shortlink]
This shortcode works similar to Link Shortcode, the only difference is it has fewer parameters and the generated URL is shorter than the link shortcode and it uses settings from default options set in ThemeNcode PDF Viewer Settings page. Click here to find more information and the shortcode parameters of this shortcode.
4. Raw Link Shortcode [tnc-pdf-viewer-raw-link]
This shortcode outputs a link to the specified file with PDF Viewer but without any tag. This shortcode needs to be used inside the ahref attribute of a tag. Click here to find more information and the shortcode parameters of this shortcode.
5. Image Shortcode [tnc-pdf-viewer-image]
This shortcode is specialized to link an image to a link to the specified file containing PDF Viewer. You need to use this shortcode with the img tag. Click here to find more information and the shortcode parameters of this shortcode.
Plugin Setting Up
So now, You have the plugin installed on your WordPress Website, Congrats!
After activating the plugin, you'll notice a New Menu item Just below Media called ThemeNcode PDF Viewer. This menu has a few submenus. We'll know more about submenus later. For now, Let's have a look at the settings of the ThemeNcode PDF Viewer Page. Click On ThemeNcode PDF Viewer Menu.
Once you're on that page, You'll see a few sections, The options you'll be changing are under General Settings Section. Go to that section. Make the settings according to your need. This won't take too much of your time. If you need any more info follow this link to learn more. Click here
And you're done on this page. The next page is about changing the colors of the PDF Viewer.
Customize Colors
If you want to change the overall background and Toolbar Background color of PDF Viewer for WordPress to match with your site's main color, you need this page.
Go to ThemeNcode PDF Viewer > Customize Colors Menu
On this page, You'll see a Section Called Customize Colors of Viewer. Navigate to that section and you'll see 2 options.
- Viewer Background Color: This is the Overall Background color of PDF Viewer where the pdf file displays, Use the Color Selector to choose any color of your choice.
- TopBar Background Color: This is the background color of the Top Bar / Toolbar where all the items like Find, Zoom, Download, Share exists. Use the Color Selector to choose any color of your choice.
Click on Save to Save the new colors settings.
And you're done on this page.
PDF Uploader
With this PDF Viewer Plugin, to make the upload process and shortcode creation process effortless, We've included a PDF FIle Uploader Page. From This page, you can Upload any PDF File or Select any existing File from Media Library and get a direct URL to that pdf file instantly just within a few clicks. You'll use the link while creating shortcodes using TinyMCE Button on your post editor.
To Access This page, You'll have to Navigate to ThemeNcode PDF Viewer > Upload PDF File
To Upload or Select a PDF FIle:
- Click on Click Here to Upload PDF FIle and Get URL below button. WordPress Media Uploader Popup will appear and you can select any existing file or upload a new file.
- After selecting the file, click on the Get Link button on the bottom right
- The popup will be closed and The big input box will be populated with your selected PDF FIle URL
- Click on Copy Just beside the input box.
- The URL will be selected and you can simply copy the URL with ctrl+c
- Now you have the URL copied to your clipboard, you can paste it into a shortcode generator or anywhere you want.
PDF Importer
This is an option very similar to PDF File Uploader but on this page, you can import a pdf file from any URL just within a click. You don't have to download the file to your computer and upload it back to the website. PDF Viewer for WordPress will do it for you.
To Import a PDF File from URL:
- Navigate to ThemeNcode PDF Viewer > Import PDF FIle
- Put the link of the pdf file which you want to import in the big input box and click on the import
- Once the process is done, You'll get a section just below this input section
- Click on a copy just beside the new input box
- press ctrl + c to copy the URL to the clipboard
- Now, you can use this URL in the shortcode generator or anywhere you want!
Importer View
Automatic Linking
Automatic Linking is an exclusive Feature of PDF Viewer for Wordpress. This option is very useful if you have a Website with a lot of pdf file links on it. In that situation, It is really hard to manually replace all these URLs with new shortcodes.
That's why We've included this option. With this option, you can have all the pdf links on your website frontend open with PDF Viewer. What you'll need to do is just enable Automatic Link from ThemeNcode PDF Viewer Page.
This option will find all the pdf links on each page of your website and replace them with a PDF Viewer URL. Let's have a look at an example URL that pdf viewer will be able to replace:
<a href="http://mysite.com/pdf-file.pdf">I am a PDF</a>
If you have a link like this, PDF Viewer for WordPress will replace it with pdf viewer link.
** Only Requirement is that the href attribute must end in .pdf
To Enable Automatic Linking:
- Go to ThemeNcode PDF Viewer Page
- Select Automatic Link from The Automatic Display Options Dropdown Menu
- Navigate to Auto Link Settings Section
- Enter _parent (will open links in the same tab) or _blank (will open links in new tab) for the Link target
Automatic Iframe
Automatic Iframe is an exclusive Feature of PDF Viewer for Wordpress. This option is very useful if you have a Website with a lot of pdf file links on it. In that situation, It is really hard to manually replace all these URLs with new shortcodes.
That's why We've included this option. With this option, you can have all the pdf links on your website frontend to be converted to a PDF Viewer containing that specific pdf file in that place. What you'll need to do is just enable Automatic Iframe from ThemeNcode PDF Viewer Page.
This option will find all the pdf links on each page of your website and replace them with an Iframe with PDF Viewer containing the particular pdf file inside it. Let's have a look at an example URL that pdf viewer will be able to replace:
<a href="http://mysite.com/pdf-file.pdf">I am a PDF</a>
If you have a link like this, PDF Viewer for WordPress will replace it with pdf viewer link.
** Only Requirement is that the href attribute must end in .pdf
Creating Shortcodes
There are a few different ways to create shortcodes. Here you'll get all the details about every available method. The options available are:
- Tinymce button
- Admin Menu
- PVFW VC Addon
1. Tinymce Button (If you're using WordPress Classic Editor)
PDF Viewer for WordPress Provides a Tinymce Button on WordPress Editor. Go to Add a new post or add a new Page or Edit a Page/Post.
Once the Editor page is open, switch to Visual view of the editor (if you're in text view) and you'll find a Tinymce button called Insert PDF Viewer Shortcode. Clicking on that button will show the following options:
- Link
- Iframe
- Shortlink
- Thumbnail/Image Link
Clicking on any of these options will open a popup with a few options. Select/write all the fields and click on the Ok button Below. The system will create the shortcode with your provided settings and insert it into the editor!
That's how you can create PDF Viewer for WordPress Shortcodes. Pretty simple. isn't it?
Tinymce
2. Admin Menu
PDF Viewer for WordPress provides a few menu items to create shortcodes. All the menu items can be found under Themencode PDF Viewer Menu on your wp-admin. Just click on the menu item according to which shortcode you need to create, select the options and click on Generate Shortcode Button, The shortcode will be generated and displayed at the very bottom of the page. Menu items for this purpose are:
- Generate Link Shortcode
- Generate iFrame Shortcode
- Generate Direct Link
3. PVFW VC Addon (If you're using WPBakery Visual Composer)
This is an addon that connects PDF Viewer for WordPress and WPBakery Visual Composer plugins. It allows you to create PDF Viewer for WordPress Shortcodes using the Visual Composer interface. You can get the addon by clicking here
Addons / Integrations
There are a few add-ons and integrations currently available with PDF Viewer for WordPress.
1. WP File Access Manager
WP File Access Manager allows you to restrict access to WordPress Media Files by user's login status / individual user or user roles. You can use WP File Access Manager to set restrictions to your PDF file and it will work on PDF Viewer for WordPress according to the settings.
Click here to get WP File Access Manager
2. Navigative - Multiple PDF Viewers on the same page
Navigative is an addon for PDF Viewer for WordPress. It allows you to have multiple files on the same page by using only one shortcode. Normally you need to create a shortcode for every single file but with Navigative, you can do it for multiple files using only one shortcode. More Details and live preview available on the demo page.
Click here to get Navigative Addon
3. Visual Composer addon
This addon gives you the flexibility to create shortcodes for PDF Viewer for WordPress using the WPBakery Visual Composer interface, It's useful if you're using WPBakery Visual Composer.
Click here to get Visual Composer Addon
More integrations are on the way...
Updates and Support?
Updates?
PDF Viewer for WordPress comes with One Click Update Feature. You'll get update notifications on your wp-admin and update the plugin with just a click.
To get automatic updates, you need to register your copy of PDF Viewer for WordPress on the site using the ThemeNcode PDF Viewer > Updates page.
Once registered there to get updates, you'll be able to update PDF Viewer for WordPress easily.
Manual Update
You'll also get all the plugin updates from codecanyon. You'll see a notification in your wp-admin if there's a new update available. And then you can download the update from the codecanyon downloads page.
Click Here to go to CodeCanyon Downloads Page
Conclusion
Now we have solved the problem as Wordpress showed pdfs only as a link. Now you can show pdf with a reader and even as a flipbook. This will look much better for your website and your visitors will love this because they can easily read all of your works.
To know more check out this blog post just to be more clear. Click Here


Comments
Post a Comment