In this tutorial we are going to add Advanced Custom Fields to PDF using DK PDF. We’ll add Text, Image and Google Maps ACF fields to the PDF.

For this tutorial I’ve created a child theme based on Twenty Seventeen and I uploaded it to GitHub.

Steps

  • 1. Add dkpdf-index.php template to your Theme (or Child theme)
  • 2. Display ACF fields in the PDF

1. Add dkpdf-index.php template to your Theme

Create a new folder dkpdf in the root of your Theme (or Child theme).
Inside dkpdf folder create a new php file and save it as dkpdf-index.php.
Copy template code from here: dkpdf-index.php and paste it inside of your dkpdf-index.php.

2. Display ACF fields in the PDF

Advanced Custom Fields Post Group

After creating and displaying ACF fields in single.php template, this is how our post looks like.

Single post with ACF custom fields

At this point, if you click PDF Button nothing is going to be printed in the PDF because by default dkpdf-index.php template only outputs the_content. In order to display ACF fields in the PDF you have to copy ACF code from single.php and paste it to dkpdf-index.php.

Open single.php and copy the code responsible of displaying the fields:

Open dkpdf-index.php and paste it in this block of code:

If you click PDF Button now, you’ll see Text and Image but not Google Maps, this is because we need an image version of the map. Google Maps implements a function staticmap that returns a map based on its Latitude and Longitude, replace map code with this one:

Now if you click PDF button you’ll see all ACF fields printed in the PDF:

PDF with ACF Text, Image and Google Maps fields.

That’s all, I hope that you’ve enjoyed the tutorial 🙂

Published by emili