jump to navigation

Embed PDF Documents into WordPress July 13, 2011

Posted by tournasdimitrios1 in Wordpress - 3.
trackback

In the following simple solution , I’ll show you how to easily embed PDF documents into your WordPress posts / page . There are many times in which I have needed to embed PDF files into a page or post for clients , enabling a visitor to read the PDF document right from the page . The process of embedding PDF files into a WordPress post / page is fairly simple :

First method :

    • Login to your administration panel ( Dashboard ) .
    • Select ” Media -> Add New ” from the left side-bar .
    • Select  a PDF document to upload
    • From the pop-up  window copy the link location of the uploaded file .
    • Press ” Save all Changes ” .
    • Create a new post / page and embed the following code ( in HTML mode )
      < e m b ed width="800" height="600" src="http://localhost/wordpress/wp-content/uploads/2011/07/Index.TT_.Adobe_.Flex3_.RIA_.2dvs1.pdf" />
    • The ” src” attribute represents the URL of the uploaded document . Customize  width –  high  and  Save your post .

WordPress is a Framework that can be extended just by adding plugins . Plethora of plugins extend ( or even replace ) the default WYSIWYG editor . These editors may not be friendly with the   < e m b e d  >   method  , a good practice would be to temporarily  disable the  editor until  the  blog post is stored with the < e m b ed> tag .
Disabling the editor is done as follows :  Dashboard -> Your Profile  ->  Personal Options  ->  Visual editor .

Second Method : 

Download a WordPress plugin : PDF and PPT Viewer   , helps you embed PDF documents and Power Point presentations easily. Does not require Flash to be installed on your computer, pure JavaScript! The plugin makes use of Google Docs undocumented feature .

Each plugin adds extra working – cycles on the server , avoid to install plugins , specially when the same functionality can be done with simple ” code – snippets ” .

Third method :

Install TinyMCE Advanced  plugin which is a superior visual editor that enables the user to edit HTML content in a more user friendly way . Here is a screenshot of the various buttons it adds to your WordPress Edit post area :

  • Login to your WordPress admin panel
  • Select “ Media -> Add New ” from the left side-bar and select  a PDF document to upload.
  • From the pop-up  window copy the link location of the uploaded file .
  • Select the post or page you would like to add the PDF document to
  • From the WYSIWYG editor, select the option to Insert/edit embedded media
  • For Type , select Shockwave , enter the URL to your .pdf file , set your dimensions and Click Insert
  • Save your post, then go view your post

 

About these ads

Comments»

1. madmanbowman - July 19, 2011

Hi, I was trying to install these plugins to my blogs but I must be missing something because I can never seem to find the places in which the instructions say to install the plugin. I cannot seem to find “wp-content/plugins/directory” on my computer OR a “Plugins” menu in WordPress. It may be as obvious as my nose, but I have gone through every menu item, drop down, and read through all the settings. Could it just be that I have a theme that does not allow plugins? Is there another way to get PDFs to view in blogs? [I want folks to be be able to view a 2-page PDF and then print it, if wanted]. I tried everything from this site, and nothing has worked. It would NOT let me embed it with a snippet (even after changing settings to disable the viewer) and I could not install any of the plugins… any ideas?

tournasdimitrios1 - July 19, 2011

@madmanbowman
If you host your blog on WordPress.com then you don’t have the option to install plugins .
WordPress.com users are out of luck . They don’t have the freedom to install new plugins nether to access core files . Read this article from the official site .
There is an alternative way to “insert” PDF documents into WordPress.com websites(like this article ) . If you are interested , let me know and I’ll set-up a quick how-to .


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 73 other followers