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)
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
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.
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.
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:
- 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.
- Click Insert into Post
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.
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:
- Highlight the words “download my catalog” with your mouse cursor
- Click the hyperlink button designated by the chain link
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.
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.
- Note the blue hyperlink text
- Note the image of a PDF icon we’ve added
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.
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.