link

PrintCSS

Magazine the WordPress Plugin for PrintCSS

In the last few weeks, I am working on a WordPress Plugin, which allows you to generate PDFs from one or multiple posts/pages. Initially, it was designed to work only with my PrintCSS Cloud, which I introduced in the previous article, but now the plugin is opened to any rendering tool you want to use.

#Installation and Setup

All you need to do to install the plugin is download it from Gumroad. You can pay what you want starting from $0!

Once you installed the ZIP file via the WordPress ‘Upload Plugins’ function or placed the extracted folder in your ‘wp-content/plugins’ directory, you need to activate the plugin.

After the installation, you will need to provide an API key or locally installed rendering tool command on the settings page under ‘Settings’ > ‘Magazine’.

The Settings of the Magazine Plugin
The Settings of the Magazine Plugin

On the settings screen, you find the following options.

#Change the Demo Theme and Add Multiple Themes

All magazine themes are placed in the ‘wp-content/magazine_themes’ folder and can be directly edited there. If you prefer editing your theme directly in the WordPress UI, you can do so under ‘Appearance’ > ‘Magazine’.

The Magazine Theme Editor
The Magazine Theme Editor

A magazine theme for PDF generation is using the following files. All of them are optional. If you use the magazine theme editor, all files will be generated even if you do not provide any content for some of them.

Besides editing the theme, you can also duplicate, upload and download themes from this section in the WordPress backend.

#HTML

In the HTML section of the magazine theme editor, you can edit all HTML files.

You can leave any of these HTML files empty if you do not need them. For example, if you do not need a cover, do not put content into the prefix HTML.

#CSS

In the magazine theme editor’s CSS section, you can edit all CSS files of any theme.

You can also leave any of these CSS files empty if you do not need them. For example, if you do not need a Blogpost specific CSS, do not put content into the post CSS file.

#JavaScript

In the magazine theme editor’s JavaScript section, you can edit all JavaScript files of your theme. Be aware that some rendering tools only support HTML and CSS.

You can leave any of these JavaScript files empty if you do not need them. For example, if you do not need a Blogpost specific JavaScript, do not put content into the post JavaScript file.

#The Placeholders

The placeholders {{slug}}, {{title}}, {{feature_image}} and {{content}} are for the post/page slug, title, feature image and content. Additionally you can use the placeholders {{author}}, {{date}}, {{date_gmt}}, {{excerpt}}, {{status}}. If you need to show the date of the post/page in a different format you can use the placeholders {{year}}, {{month}}, {{day}}, {{hour}}, {{minute}}.

Please be aware that images need to be available via a public URL for the APIs to use them.

ACF is also supported. Just add {{ACF_YOUR_FIELD_NAME}}. Important: use the name, not the label!

#The Widget

If your WordPress theme support widgets, you can configure a simple PDF rendering widget for your frontend. The widget options are the title of your PDF rendering link and the magazine theme you want to render the PDF with. This way, you allow your users to generate PDFs anytime they want to.

The Magazine Render PDF Widget with Text and Theme Options.
The Magazine Render PDF Widget with Text and Theme Options.

#Shortcode

You can also use a shortcode to display a link to render the PDF in any location of your post or page.

The shortcode added to a post.
The shortcode added to a post.

The primary usage is just the tag and an attribute that defines the theme [magazine theme=”Demo”]. If you also want to change the text of the link, you can pass it with [magazine theme=”Demo” text=”Click here for PDF Version”].

#Backend and Bulk PDF Rendering

When you want to render a PDF from one or multiple pages/blog posts, just navigate to the ‘All Posts’ or ‘All Pages’ sites in the backend. Select the pages/posts you want to have in your PDF and click on the ‘Bulk Actions’ dropdown. Depending on your magazine themes, you will see one or multiple entries like ‘Render PDF with Demo Theme’, select the theme you like and click on apply. Currently, the rendering process is always synchronous, so you will need to wait for the API/local tool to answer.

Bulk Actions for the three different Magazine Themes on my system.
Bulk Actions for the three different Magazine Themes on my system.

The resulting PDF is stored in the Media Library. It is also offered to you for downloading in a notification on the page where you started the rendering process.

Result Notification
Result Notification

The plugin is currently in alpha status, and I am looking forward to your feedback and ideas on how to improve it.

Lastly, again the link for you to download the plugin: Magazine (gumroad.com).