On this save button it will be downloaded as a PDF file but here if you scroll up here we can see that we also have this header but when we click on this download as PDF button the header.
Is not being displayed so we'll also hide some of the elements from the WordPress page so let's get .
Started all right here I have logged into my WordPress dashboard and uh if we click on visit site this is how our website looks right now and we have these posts over here.
Now we can add this download as PDF button to any of these posts so let's go ahead and add it to this first post so let's click on edit and going to add it to the end of the post so let's go to.
And now here we can add our HTML CSS and JavaScript code so first of all let's add the CSS I'll just create a style tag over here and in the style tag we will add the CSS.
So let's go to our source code and let's go to the CSS file and let's copy from here because this is all the CSS of the entire page that we have over here but we just want to add this.
Download as PDF button so let's copy the CSS of this button so I'll just copy from here and we also need to copy this media print because we need to hide some of the elements when we print print so.
Let's copy all of this from here and we'll make changes later so let's paste it over here and for now let's go ahead and delete all of this inside print we will add the CSS later and now let's go.
Ahead and add the HTML so let's go back to our source code and let's go to the HTML file and this is the download button so we have this button with the class of download BTN so let's copy this.
Posts Related:
- 8600 Corel Draw Templates Free Download CDR Files Sheri Sk Office
- Eid Mubarak Free and editable** powerpoint presentation whatsapp status** free download
- How To EASILY Add Checkboxes To ANY Microsoft Excel Table
And let's paste it over here and then - ID Card Make
Lastly we need to add the JavaScript so let's create a script tag for that and uh let's go back to our source code and let's go to the main.js file and.Let's copy this and let's paste it over here right now let's go ahead and update this and let's see whether the button is being displayed correctly so let's go back to our post let's go to this test.
Post and if you scroll down and here we have this button but the button is on the extreme left side so let's see what's the problem let's right click over here and go to.
Inspect and here we can see for all the these paragraphs we have some limited width so here we can see for the paragraph We have some Max width so let's see if we.
Add the paragraph tag around this button if it looks all right so I'll just remove the ending tag from here and paste it over here and now we can see when we add the.
Button inside the paragraph the button is in the correct place so let's go back and here in the HTML let's add it inside a paragraph So we need to add the button inside the paragraph for The Styling to.
Work correctly so let's update this and let's go back and let's reload this page and now we have this button and when you H this button we have this uh effect so let's also add a hover effect so here in.
The style let's go ahead and type download BTN colum hover and right now the background color is 333 so let's set the background color to 00 and uh let's update this let's go back and.
Reload and uh we also need to change the color of the text and now I think everything looks all right so now let's go ahead and click on this download as PDF button and.
Here we you can see we have the print
Preview and we don't have a lot of things displayed over here so for example here we have this comment section and this uh navigation section.But they are not displayed over here in the print preview I think that's because the theme has already hidden it now we need to hide this header this footer and this download as PDF button so let's go.
Ahead and do that let's go back over here to our post and here in media print we need to add the changes that we need so let's go ahead and take a look at the header so let's right click over here.
And go to inspect and let's take a look at the header and for the header we have this class of site header so let's copy this selector and let's paste it over here.
And we also need to select the footer so let's go back and let's scroll down and this is the footer so let's right click and go to inspect and let's scroll up and here is the footer and for the.
Footer we have this class of site footer so let's copy this class and let's paste it over here and here let's tab display of none and now let's go ahead and update this and let's go back to our.
Post and let's reload this page and let's scroll down and let's click on this download button and we don't have the header and we also don't have the footer we also need to remove this.
Download as PDF button so for that let's go ahead and uh for the download button we have this class of download BTN so let's add that over here just tap. download.
BTN and let's update this let's go back to our post and reload this page and let's click on download as PDF and now we can see everything looks all right we have the post content displayed over.
Here with the post heading and now you can go ahead and click on Save and this page will be saved as PDF file so let's click on Save and this is the PDF file that we just.
Saved so that's basically how you can add this download as PDF button to your WordPress websites all right so that's basically it for this video if you have any doubts you can ask in the comments.
Below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice.
