How to embed and view pdf in WordPress page without plugin

- Advertisment -

If you want to embed a PDF file in WordPress Post or page but not want to add any other plugin. Then, here is the solution. Adding more and more plugins makes your website slow, however, we often required to embed or add the PDF file in our WordPress post, then why should, we compromise the speed.

By default, when you upload and add the PDF files from the Media section to WordPress post; it only embeds a PDF in your blog post and shows only the PDF file name along with a link. In case, if you just want to give a user the PDF file download capabilities then it is good but not if you want to show the PDF file in the post so that user can view and read it directly on your website without leaving it; that also decrease the bounce rate.

In this article, we will show you how to add a PDF viewer in WordPress without using any PDF embedder WordPress plugin.

Directly adding WordPress PDF Viewer is just like embedding the audio or video files, for example, YouTube.

 Steps to Embed PDF files in WordPress post:

    1. Go to WordPress post where you want to add the PDF file to view.
    2. Now click on the Add Media button.
    3. Click on the Upload files Tab.
    4. Now again click on the Select file button to upload the PDF file.
    5. Select and upload your PDF file to WordPress media gallery.
    6. Once it uploads, come back to your blog post. 
    7. Where you want to add the PDF file viewer click there and after that just click on the TEXT tab given on the right top side of your text editor.
    8. Inside the text editor just place the following code.
      <embed src="https://ww.example.com/demo.pdf" type="application/pdf" width="774" height="774"></embed>
    9. Now click on the Add media, select the PDF file and copy its URL given on the right side.
    10. After copying the URL, just replace the https://ww.example.com/demo.pdf with your own pdf file.
    11. You can also increase or decrease the size of embedded pdf file by altering the value of Width and height attributes given in the code.
    12. Once you replaced the URL you will see you have successfully added the embedded PDF file viewer on WordPress post without any external plugin.

Screenshot for the above tutorial to get a clear idea, how to add PDF file viewer without a plugin

Step 1: Go to Media and Upload the PDF file.

Add media PDF file

Step 2: After uploading,  just copy the URL of the PDF file and replace the: https://ww.example.com/demo.pdf in above give code with your own PDF file URL and that’s it; you are done!!

Select the PDF file you want to view in the WordPress post

 

pdf viewer wordpress
pdf viewer WordPress

Embed PDF Viewer on WordPress Demo:

 

The above method may not work in the Microsoft edge browsers. In such a case, you can use the iframe code:

<iframe src=”https://www.how2shout.com/wp-content/uploads/2018/08/pdf-sample.pdf” width=”688″ height=”688″> </iframe>

Note: Change the pdf link with yours and in the Text tab of the editor same as mentioned above in this article…

 

I hope this article would help you in somehow if you get any problem while adding PDF file and viewing in WordPress post then please let us know, the comment box is all yours!!

You might also to know about:

 

Rajkumar Mauryahttps://www.how2shout.com
Rajkumar Maurya is the H2S Media tech expert. He’s always been passionate about technology and has been writing on the subject since 2014. He has extensive knowledge of all kinds of technology, from consumer-tech to enterprise solutions. You can contact the author at-- raj@how2shout.com

11 COMMENTS

  1. I was able to follow each step, but when I preview or upload the code with my custom pdf url, it continues to display as a link, not an embedded pdf. Any insignt?

    • It might be possible some security plugin on your WordPress preventing the code from showing the PDF at frontend. If you have implemented the above correctly then please disable the installed plugins for a moment and then again test the above code.

  2. Thanks but if use tag “embed” don’t show on IE.
    Best upload file PDF to Google Drive and embed it use tag “iframe”

  3. Thank you BUT you have the old look of wordpress
    and it does not work the way you describe
    I click on the upload file and there is no select file to follow
    just opens my file where i keep the pdf files

    • After uploading the file just search it with its name in media, it will appear and then copy the URL. Or just upload the PDF file to google drive and copy the link from there…

  4. Hmm. I followed your instructions and double checked each step. I’m using Gutenberg, but added your embed code in a Classic editor block using “edit as HTML”. Nothing shows, however, in Preview or after Publishing. It’s just a blank space on the page under the title. Any idea how I can make this work? I love the idea of getting my PDF on the page without a plugin.

  5. Rajkumar, it’s me again with an update: your code works perfectly. For some reason, it doesn’t in my Firefox. When I tried Chrome, it’s there! Not sure why this has happened, but it has nothing to do with your code!

    Thanks for giving us a way to do this without a plugin!

    Linda

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Posts

Xbox Scarlett is now officially Xbox Series X

Ending every speculation and rumours, Microsoft named the next-gen console as Xbox Series X. Taking the opportunity of The...

What points one should look to get the best internet connection for gaming

Finding the right gaming computer of your choice might not be a difficult exercise today when you...

Microsoft’s next-generation 2020 console is Xbox Series X not Scarlett

At the stage of The Game Awards (TGA), Microsoft's vice-president of Gaming "Phil Spencer" announced that the new generation...

Now we can send and receive tabs on Firefox Reality VR Browser

Last year launched Firefox Reality browser especially meant for VR headsets has got some updates. This Mozilla VR browser's...
- Advertisement -

Best Way to find new Movies or TV series to Watch

Do you want to know how to discover something new to watch, I mean quality video content? If you...

What is Xbox Project Scarlett? Anaconda or Lockhart

Now the time of 9th gen gaming console is about to meet an end. Even the primary...
- Advertisement -

You might also likeRELATED
Recommended to you