May 4, 2012 E3

How to Add PDFs by Uploading into WordPress

One of the most popular file formats on the web is Adobe PDF and many site admins would like to offer brochures, marketing materials, bios, and other documents available for download on their WordPress website.  With a click of a button site visitors will be able to view, save, or print your document right from your website.  This tutorial will guide the site admin through the process of how to add a PDF into WordPress pages or posts.

Get to the Page/Post You Want

First, go to the post or page where you want to add the PDF.  The process of adding a PDF is the same for both pages and posts.

From your WordPress Dashboard go to:

Pages > Add New (if your creating a new page for the PDF)

or:

Pages > All Pages > Edit Page for the page you want (if adding PDF into an existing page)

Alternatively, if your uploading a PDF into a post, head on over to:

Posts > Add New

or:

Posts > All Posts > Edit Post for the post you want

Upload the PDF into WordPress

In our example, we are going to be adding a new page called “My Catalog” and will be uploading a PDF document into it.  Click the Upload/Insert icon represented by the camera and musical notes.  In the latest version of WordPress, they’ve consolidated all the different media upload options (Audio, Image, Media, etc.) into a single upload media button.  Also, if you’ve installed any special plugins, like Gravity Forms, you may see other “Upload/Insert” buttons here.  For instance, the Gravity Forms plugin creates an “Insert Forms” button next to here.  You want to click the one immediately to the right of Upload/Insert designated by the musical notes and camera.

How to Add PDFs by Uploading into WordPress 1

After you click the button, the Add Media screen will popup.  Go ahead and click Select Files.  Browse your computer files and select the PDF you want.  You can also drag and drop the file from your local computer into the designated area if you like.

How to Add PDFs by Uploading into WordPress 2

In our example, we are uploading a PDF file named “Test.pdf”.  Once you’ve selected the PDF you want, you’ll notice that the Add Media screen shows you the name of the file and its type.  Go ahead and change the Title of the document if you like.  We just left it as “Test”.  To finish the upload process:

  1. Take note of the Link URL.  Copy and paste this location.  It is where the PDF file is stored on your web server.  You’ll need this Link URL for the rest of the tutorial.
  2. Click Insert into Post

How to Add PDFs by Uploading into WordPress 3

The popup screen will disappear and you’ll be taken back to the Edit Page screen. Notice that the Title of the PDF you set in the Add Media screen becomes the text hyperlink that leads someone to the PDF.

How to Add PDFs by Uploading into WordPress 4

Styling the PDF Download Link

While the text link looks OK, most people will want to style their PDF link a little better.  Let’s say you want to link the words “download my catalog” to the PDF instead of the text “Test” that was added automatically.  Go ahead and delete the text “Test”.  Then:

  1. Highlight the words “download my catalog” with your mouse cursor
  2. Click the hyperlink button designated by the chain link

How to Add PDFs by Uploading into WordPress 5

The Insert/Edit Link screen will popup.  Paste the Link URL of your PDF here.  Give it a nice title, like “My Catalog PDF”.  Then click Add Link.

How to Add PDFs by Uploading into WordPress 6

When you click Add Link the popup will disappear.  Now the text “download my catalog” will be a blue hyperlink.  Some of you may want to go a little further and add an image of a PDF icon that links to the relevant PDF.  Use a Google Search to find an image of the PDF icon you like and save it to your computer.  Then, using the Upload/Insert tool, add the image to the page or post.

  1. Note the blue hyperlink text
  2. Note the image of a PDF icon we’ve added

How to Add PDFs by Uploading into WordPress 7

Now we have to link the PDF icon to the actual PDF you want your visitors to go to after clicking on it.  Click the image of the Adobe PDF icon once.  Two options will appear.  One looks like a photograph, this is the Edit Image button.  The other looks like a “no smoking sign”, this is the Delete Image button.  Click the Edit Image button.

How to Add PDFs by Uploading into WordPress 8

When you click the Edit Image button a new screen will popup.  Here, you can change the Title of the Adobe Icon if you like.  You can make it My Catalog, or Download Here, or whatever else you want.  Head on down to the area labeled Link URL.  Delete the Link that is there by default.  This link will send the visitor to an image file of the Adobe Icon if they click on it.  Instead, you want them to go to the PDF.  Therefore, go ahead and paste the Link URL of your PDF file.  Click Update.  As always, make sure to click Publish Page/Post or Update Page/Post whenever you’re done editing.

There ya go!  Now the Adobe Icon will send visitors to the PDF file.  You can also edit style properties for the Adobe Icon in the Edit Image screen.  You can change the alignment of the icon, add padding and margins, etc. using the Edit Image screen.  You should also note that you don’t necessarily have to use an Adobe PDF icon.  You can also upload a custom graphic or image of your catalog, your business, or whatever you want and link it to the PDF.

Please let me know if you have any comments or questions on how to upload a PDF into WordPress.

Tagged: ,

Comments (4)

  1. Hello! I’ve been reading your website for a while now and finally got the courage to go ahead and give you a shout out from Atascocita Texas! Just wanted to say keep up the great job!

  2. Hi!
    Thanks for your tutorial! I have a problem. I can easily upload a PDF of one page and make it work on the webpage. But I can not upload and make work PDF s that consist of many pages. Is taht normal, or do have a suugestion on how to solve the problem?

    Greeting from Norway!

    Subhadra

    • E3

      Hey Subhadra, that is an unusual problem. Can you provide a link to the URL you are having the problem with? I have uploaded a Multi-Page PDF document before and it worked, what I did was: upload Multi-Page PDF with the WordPress Media Uploader, then copy the Source URL, and hyperlink an image or text to the Source File using the Source URL. Let me know if you need more help! You may also be having an issue with combining the PDF into multiple pages, try this product out:

      http://www.pdfmate.com/free-pdf-merger.html

      It’s pretty good and free. There are also tons of other PDF combiners out there.

  3. enjoy reading your blog. i want to ask you one thing. I uploaded document and linked it up. the problem is that when ever i open my website and click on the document it downloaded automatically but i want my website visitor just to read not download. how can i do for that?
    i will be be thankful if you can help me.

Leave a Reply

Your email address will not be published. Required fields are marked *

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