How To Use PDF Viewer for WordPress With Gutenberg Or Any Other Page Builder?

by | Last updated Nov 2, 2022 | Tutorial / How to | 0 comments

ThemeNcode has recently released a new version (7.5) of PDF Viewer for WordPress which includes two additional pages in the admin panel for creating shortcodes. You can use these 2 pages to create tnc-pdf-viewer-link and tnc-pdf-viewer-iframe shortcodes.

You can use the generated shortcode anywhere on the site. It will work with any page builder. Here, we’ve created this short video to make it easier for you to understand quickly.


How To Use PDF Viewer for WordPress With Gutenberg / Other Page Builders? [A Complete Guideline]

WordPress 5.0 comes with a new editor called Gutenberg, which is replaced the previous classic editor. As a result, many users use different page builders for their WordPress websites. This above complete tutorial will help you understand how to use a PDF viewer for WordPress with all those visual page builders like as-Gutenberg.

Love to read? Start reading to explore the step-by-step guideline.

First of all, you need to log into your WordPress admin panel.  After installing and activating the PDF viewer for WordPress [ThemeNcode PDF viewer] plugin, you will get two new sub-menu items here if you use WordPress Version 7.5.

Hence, one is called ‘Generate Link Shortcode,’ and another is called ‘Generate Iframe Shortcode.’ You have to use both of the links for the integration.

In the beginning, take out the generated link shortcode. Once you click on the link, you will see a new page and the “Upload PDF File” button, which you can use to pick out the file or already uploaded video file from your media library. Otherwise, you can also use this pattern if you want to upload a new file right now. 

You can input this text using this shortcode if you want to add the link to the PDF file. 

For instance, select the file from your media library, and then you can preview the PDF file where you want the link to appear. Hence, you can choose all the additional options according to your needs.

When you are done selecting the settings, you need to click on generate shortcode. Then, this will provide you with a generated shortcode output at the bottom of the page, which you should copy to this link. Then, go to the editor page, which can be Gutenberg/ any other page builder you are currently building. Hence, you can give it a try with Gutenberg. Click on the “add new” option and provide a specific title name for your post.

Now, press ‘Ctrl + V’ in the content section. You will see the shortcode. Again, Gutenberg automatically used the shortcode blog for this. You can use the text block or anything that your computer provides. It depends on the page builder or any physical composer you are using. Next, you can publish the post here and go to the view post.

Then you will get a link here. Click on this link and view the PDF file. Now, I will talk about another sub-menu named iframe shortcode.’

Go to the “Generate Iframe Shortcode” option. It actually works the same way as the “Generate Link Shortcode”. Here, the key difference between the mentioned two shortcode settings page is choosing the iframe Width (For example-100%), and iframe Height (For example- 800).

Do the other settings as acquired and hit on the ‘Generate Shortcode.’ Now you will get the shortcode link. Copy the ‘shortcode’ and paste it into the post. Click on the “Update” option and then reload your existing page. Now you’ll see both the shortcodes and iFrame there. Everything is Done!! Congrats!!

One thing to keep in mind, watch the above tutorial video at least two times to understand the vital points. Then read the blog posts and follow the step-by-step guideline. That’s it. Enjoy
PDF viewer for WordPress with Gutenberg or any other page builder. Good Luck!



Submit a Comment

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.

Related Posts

Popular Post