{"id":1663,"date":"2021-09-01T08:56:49","date_gmt":"2021-09-01T07:56:49","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=1663"},"modified":"2021-09-01T08:56:51","modified_gmt":"2021-09-01T07:56:51","slug":"add-pdf-files-wordpress","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/add-pdf-files-wordpress\/","title":{"rendered":"The 2 easy methods to add PDF files in WordPress"},"content":{"rendered":"\n<p>For new users, it might not be obvious that the Media Library on WordPress backend can be used for more than just images. PDF is one of the file types that can be uploaded.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>But how would they look on the website&#8217;s frontend?<\/strong><\/p>\n\n\n\n<p>There are at least two different ways to upload and display them, I&#8217;ll share them with you below&#8230;<\/p>\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"   has-main-text-color-color has-text-color wp-block-heading\"><strong>Did you know?<\/strong><\/h3>\n\n\n\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/07\/maintenance-marcosrego-opengraph-1024x538.png\" alt=\"Marcos Rego Maintenance Opengraph Image\" class=\"wp-image-1022\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/07\/maintenance-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/07\/maintenance-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/07\/maintenance-marcosrego-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/07\/maintenance-marcosrego-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<p class=\"  has-main-text-color-color has-text-color\"><strong>All registered users<\/strong> get access to more sections of the website, including a <strong>client area,<\/strong> where it is possible to <strong>check the status and renew maintenance services<\/strong> via online-payment.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/marcosrego.com\/account\/.\/client-area\/\"><strong>go to client area<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><li><a href=\"#the_new_and_easy_method_to_add_and_display_pdfs_in_wordpress\"><span class=\"toc_number toc_depth_1\">1<\/span> The new and easy method to add and display PDFs in WordPress<\/a><ul><li><a href=\"#using_the_8220file8221_block\"><span class=\"toc_number toc_depth_2\">1.1<\/span> Using the &#8220;File&#8221; block<\/a><\/li><\/ul><\/li><li><a href=\"#other_method_to_add_pdfs_with_a_link\"><span class=\"toc_number toc_depth_1\">2<\/span> Other method to add PDFs with a link<\/a><ul><li><a href=\"#using_the_media_library\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Using the Media Library<\/a><\/li><li><a href=\"#adding_pdf_link_into_text\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Adding PDF link into text<\/a><\/li><li><a href=\"#adding_pdf_link_with_html\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Adding PDF link with HTML<\/a><\/li><\/ul><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">3<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"the_new_and_easy_method_to_add_and_display_pdfs_in_wordpress\"><strong>The new and easy method to add and display PDFs in WordPress<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"using_the_8220file8221_block\"><strong>Using the &#8220;File&#8221; block<\/strong><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\" rel=\"noreferrer noopener\">Since WordPress version 5.8<\/a>, that you can use the &#8220;File&#8221; block to embed a file directly inside a page.<\/p>\n\n\n\n<figure class=\"   wp-block-gallery columns-1 wp-block-gallery-4 is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01-1024x517.png\" alt=\"Wordpress - File Block - Prompts for upload or select\" data-id=\"1690\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01.png\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1690\" class=\"wp-image-1690\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01-1024x517.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01-300x151.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01-768x388.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01-1536x775.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_01.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">When choosing the &#8220;File&#8221; block, you&#8217;ll be prompt to upload or select a file from the Media Library.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02-1024x517.png\" alt=\"Wordpress - File Block - Showing a blank PDF\" data-id=\"1691\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02.png\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1691\" class=\"wp-image-1691\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02-1024x517.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02-300x151.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02-768x388.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02-1536x775.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_02.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">By uploading\/selecting a PDF file, it will be shown directly inside the page.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03-1024x517.png\" alt=\"Wordpress - File Block - Showing a button\" data-id=\"1692\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03.png\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1692\" class=\"wp-image-1692\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03-1024x517.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03-300x151.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03-768x388.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03-1536x775.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-block-editor_03.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">You can also choose to show a button to download it.<br>And if you only want to display the button without the embed, you can still do that here also.<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"other_method_to_add_pdfs_with_a_link\"><strong>Other method to add PDFs with a link<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"using_the_media_library\"><strong>Using the Media Library<\/strong><\/span><\/h3>\n\n\n\n<p>The previous method is the easiest if you use the block editor. Here&#8217;s another method that can be used anywhere (also on categories&#8217; descriptions).<\/p>\n\n\n\n<figure class=\"   wp-block-gallery columns-1 wp-block-gallery-6 is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01-1024x517.png\" alt=\"Wordpress - Add PDF - Media Library\" data-id=\"1693\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01.png\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1693\" class=\"wp-image-1693\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01-1024x517.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01-300x151.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01-768x388.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01-1536x775.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_01.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">Upload a PDF into the Media Library<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02-1024x517.png\" alt=\"Wordpress - Add PDF - Copy link\" data-id=\"1694\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02.png\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1694\" class=\"wp-image-1694\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02-1024x517.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02-300x151.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02-768x388.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02-1536x775.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_02.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">Copy the PDF link like shown on the image<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"adding_pdf_link_into_text\"><strong>Adding PDF link into text<\/strong><\/span><\/h3>\n\n\n\n<figure class=\"  wp-block-gallery columns-1 wp-block-gallery-8 is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"521\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03-1024x521.png\" alt=\"Wordpress - Add PDF - Add link to text\" data-id=\"1695\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03.png\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1695\" class=\"wp-image-1695\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03-1024x521.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03-300x153.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03-768x391.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03-1536x782.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/08\/adding-pdf-wp_03.png 1903w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">Add a link to a text using the editor<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"adding_pdf_link_with_html\"><strong>Adding PDF link with HTML<\/strong><\/span><\/h3>\n\n\n\n<p>If you don&#8217;t have an editor you can use HTML like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"http:\/\/127.0.0.1:5000\/wp-content\/uploads\/2021\/08\/blank.pdf\" target=\"_blank\" class=\"button\"&gt;See pdf&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>You can transform the linked text into a button by replacing the class with your own button class.<\/p>\n\n\n\n<h2><span id=\"comments\"><b>Comments<\/b><\/span><\/h2>\n<div id=\"disqus_thread\"><\/div>\n<script>\nif(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {\n    var disqus_config = function () {\n        this.page.url = (location.protocol+'\/\/'+location.host+location.pathname).replace(\"\/account\/\", \"\/\");\n        this.page.identifier = document.querySelector(\"article\").id.replace(\"post-\", \"\");\n    };\n    \n    (function() {\n    var d = document, s = d.createElement('script');\n    s.src = 'https:\/\/marcosrego-web.disqus.com\/embed.js';\n    s.setAttribute('data-timestamp', +new Date());\n    (d.head || d.body).appendChild(s);\n    })();\n} else {\n    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class=\"  cli_manage_current_consent\" style=\"cursor:pointer;\">Manage your consent.<\/a>';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>For new users, it might not be obvious that the Media Library on WordPress backend can be used for more than just images. PDF is one of the file types that can be uploaded.<\/p>\n","protected":false},"author":1,"featured_media":1784,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[70,64,65],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1663"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=1663"}],"version-history":[{"count":0,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/1784"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=1663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=1663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=1663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}