If you are looking for a solution that allows you to print a post and at the same time do things like hide your header or footer, and add elements to output only on the print version of your post, read on.
I’m currently developing a website for a client that lists medical experts using a custom post type. My client wanted a ‘download CV’ button displayed on each profile for people to be able to download the expert profile content to a PDF and print it out. After trying several options I came across the HTML2PDF app offering a HTML to PDF conversion API service.
They offer a WordPress plugin, and its easy to install and setup. The plugin is only new, but I found the developer extremely responsive and he was willing to add the ability to pass @media parameters to the shortcode in a recent update. Below is how it works.
Create an account and install the plugin
After creating an account on the https://html2pdf.app website, you can install the plugin and use the settings to add some basic parameters.
They have a generous free plan you can use for testing offers you 100 credits per month and up to 1MB per file! This is probably more than enough for most needs.
Add the shortcode to the post or page
The shortcode you use must include the following parameter to use with @media print.
[html2pdf text="Generate & Download CV" media="print"]
Hide elements using the @media print parameter
In order to hide elements from the PDF output such as the header and footer or hero section, you’ll need to apply the following CSS to those elements like this.
@media print {
%root% {
display: none;
}
}I’m using Bricks builder, so %root% targets the selector automatically.
Output elements only in print version
In order to output elements or divs only on the print export, you’ll need to add this code to the element – this will hide the element on the normal screen version, but display it on the print version.
%root% {
display : none;
}
@media print {
%root% {
display : block;
}
}
Comparing the screen with the print version
The original screen design looks like this.
And the printed version now looks like this:
