How to export a WordPress post entry to PDF using the HTML2PDF plugin

Back home

This technique uses the @media print property to hide and show elements conditionally for printing.

pdf export screren

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.

html2pdfapp website screenshot

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 website, you can install the plugin and use the settings to add some basic parameters.

html2pdf plugin settings

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.

hide element from @media print property in Bricks builder
@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.

single template for a cpt in bricks builder

And the printed version now looks like this:

pdf export sample of.a post from WordPress

Have a project you'd like to discuss?

Book a discovery zoom call with Gerson.

Book Zoom Call