How to Customize Content for Print and Other Formats

Chances are you will want to modify some content so it appears differently on your website than in your book (or PDF, eBook, or some other type of document.) While Print My Blog (PMB) already makes significant efforts to make your optimized-for-web content look good in other formats (eg replacing videos with a screenshot and a URL in PDFs), there may be other customizations needed. Here are a few examples:

• you want a different paragraph of text on your website (e.g., inviting visitors to read your book) than in your book (e.g., inviting readers to visit your blog)
• you want to show an animated GIF on your website, but just a regular image in the PDF
• you want to use present tense in your blog (“This week I rode the bus…”) but past tense in your book (“On February 22, 2022, I rode the bus…”)

PMB affords multiple approaches to this, which are:

1. Copy the entire post as a Print Material (most straightforward, but now you have duplicated content)
2. Use PMB’s Shortcodes to modify content (also straightforward but content can become cluttered with shortcodes)
3. Use custom CSS and CSS classes to modify content (most technical but most powerful)

Let’s dive into each…

Copy the Entire Post as a Print Material

This involves duplicating a post as a private Print Material (PMB’s post type for content that’s only to be used in PMB projects), then modifying the newly-created Print Material, while leaving the original post unchanged.

This is probably the best option when the changes needed are major, like entirely changing an entire post’s tense (from present tense to past tense) or something which will change most paragraphs of text in your post. This way the original post remains clean and readable, as does the new Print Material.

Using this approach you can easily also make one copy of a post for a printed book, another for a digital PDF, and yet another for an eBook.

How to Copy the Entire Post as a Print Material

If you have a Professional or Business license to PMB, you can do this in one click, either from the posts list page (by hovering over a post, then clicking “Copy to Print Material”), while editing a post (by selecting the post tab, “Status & visibility” then “Copy to Print Material”), or from PMB’s content editing page (by hovering over a post then click the circular arrow icon to replace the post with a Print Material). After you’ve copied a post, begin editing the new Print Material without modifying the original.

If you’re using the Hobbyist license, these buttons will not be available. You’ll just need to create a new Print Material from the Print Materials list table (under the “Print My Blog” menu item, or while editing a project’s content), and copy-and-paste the original post’s content into it. You can also use a Post Duplicator plugin and Post Type Switcher plugin to duplicate a post and switch it to be a Print Material.

When Copying an Entire Post Might Not Be Best

The main problem with copying an entire post is that you now have twice as much content to maintain: when you find a typo in one post, you need to make sure you also fix it in the copied Print Material; when you reorganize or rephrase a post, you’ve got to do it twice. Generally, any further work done will need to be done twice (and you’ll invariably sometimes forget which will cause other problems.)

So if you only want to modify a few lines of text, or remove a few blocks from the book, using shortcodes might be more appropriate.

Use PMB’s Shortcodes to Modify Content

PMB comes with a few shortcodes that make it easy to modify a few words or a few blocks of a post without duplicating the entire post. This is the best option for smaller changes because it’s quite simple and you won’t end up with multiple copies of the same post to maintain.

How to Use PMB Shortcodes

Changing a Few Words Inside a Block

Let’s say you want to change a few words in a paragraph for your book. For example, in the post you say

Earlier this week, I took the bus…

but in the book, you’d rather say

On February 22nd, 2022, I took the bus…

For that, you’re going to use the [pmb_web_only_text] and [/pmb_web_only_text] shortcodes to make the words “Earlier this week…” only appear on your website, like so:

[pmb_web_only_text]Earlier this week…[/pmb_web_only_text] I took the bus…

And to have “On February 22nd, 2022…” appear in the book (and any other PMB projects), use [pmb_print_only_text] and [/pmb_print_only_text], like so:

[pmb_web_only_text]Earlier this week[/pmb_web_only_text][pmb_print_only_text]On February 22nd, 2022,[/pmb_print_only_text] I took the bus…

Readers, of course, will never see the shortcodes on either your website or in the book; website visitors will just read “Earlier this week I took the bus…” and book readers will just read “On February 22nd, 2022, I took the bus…”

These PMB shortcodes ending in “_text” are appropriate to use for any amount of text inside a single block (e.g., a paragraph or a heading); but not across multiple blocks, as they will affect the layout. If you want to change one or more blocks using a shortcode, you’ll need to use the “_blocks” shortcodes, explained next.

Changing One or More Entire Blocks

Let’s say you have a blog post which ends in an invitation to leave a comment, like so:

Thanks for reading! Please leave a comment below!

But you want to remove that in the book. Rather than duplicating the entire post to make to remove that one paragraph block, use the [pmb_web_only_blocks] and [/pmb_web_only_blocks] shortcodes, like so:

[pmb_web_only_blocks]

Thanks for reading! Please leave a comment below!

[/pmb_web_only_blocks]

This means that the book (or any other PMB project) will omit that paragraph.

This shortcode can be used to omit multiple blocks, too, like so:

[pmb_web_only_blocks]

Thanks for reading! Please leave a comment below!

P.S.: I can’t wait to chat!

[/pmb_web_only_blocks]

You can also use the [pmb_print_only_blocks] and [/pmb_print_only_blocks] shortcodes to provide an alternative set of blocks to include in the book (or other PMB projects), like so:

[pmb_web_only_blocks]

Thanks for reading! Please leave a comment below!

[/pmb_web_only_blocks]

[pmb_print_only_blocks]

In the next chapter, we will take a look at the exciting world of nematodes…

[/pmb_print_only_blocks]

Again, your readers will never see the shortcodes (unless you mistype them, of course.) Website viewers will only see “Thanks for reading! Please leave a comment below!” and book readers will only see “In the next chapter, we will take a look at the exciting world of nematodes…”

When Copying an Entire Post Might Not Be Best

Using PMB’s shortcodes like this is a good way to modify a few words or blocks from your post without duplicating the entire post (and having double the maintenance work), but it does make your content a little harder to read and, if you find yourself consistently doing it to the same type of content, it might be more time-effective to instead use some custom CSS.

Use Custom CSS and CSS Classes to Modify Content

This is probably the most advanced way of modifying content, but it allows you to:

• hide content without cluttering it up with shortcodes or duplication
• always hide content from plugins and themes in certain formats
• customize if the content appears on the website, digital PDF, print-ready PDF, eBook, and other formats

Before embarking on this, it’s good to have at least a brief introduction to CSS.

How to Add CSS Classes onto Blocks

A CSS class is an identifier that we can later use in our custom CSS code to identify what content we want to hide. To add a CSS class onto a block:

1. click on the block
2. in the block setting panel on the right, scroll down to “Advanced” and expand it
3. in “Additional CSS class(es)”, add the CSS class you want to use.

This works for paragraph blocks, image blocks, and all other blocks. (If you’re using the Classic Editor, you’ll have to switch to the HTML editor and add the CSS class to the HTML yourself.)

There are a few CSS classes that PMB comes with that you may want to use. pmb-print-only makes the block only appear in print and other PMB formats, whereas pmb-screen-only makes the content only appear on the website.

How to Add Custom CSS to a Design

Besides using PMB’s built-in CSS classes, you can also write your own CSS to be applied to different PMB designs, instructing content to appear or disappear depending on which format and design is currently being used.

For example, to add custom CSS to your Digital PDF’s design,

1. while working on a project (either from the projects list table, or from any other step on the project)
2. click on its “Customize Digital PDF Design” step
3. scroll down to “Custom CSS”, and enter the CSS code
4. Save the design.

Here’s some sample CSS you could use:

.my-class{
    display:none;
}

Now add my-class to any blocks in your content, then they will be excluded from your digital PDF, but still appear in other formats (e.g., in the print-ready PDF or eBook).

Note: this custom CSS only applies to the currently-selected Digital PDF design. When you change Digital PDF designs (eg from “Classic Digital PDF” to “Buurma Whitepaper”) the new design will not automatically have the custom CSS. You’ll need to copy it over to the new design.

Using Custom CSS to Repetitive Hide Content from Other Plugins

You may be using blocks from other plugins (e.g., a gallery block by JetPack plugin) or other plugins might even automatically add content (e.g., a related posts plugin might add a “Related Posts” section to the bottom of each post.) You can use CSS to hide these.

Before you embark on doing this, however, it may be best to instead contact PMB support, and tell us about it. We may be able to fix it for everyone in the next release (less work for you, and benefit for all future users.)

To remove the other plugins’ content from projects using a particular design, you’ll first need to identify a CSS selector to select it (using your browser’s web inspector will help see if it has a id or class attribute you can use).

For example, let’s say you’re using a plugin to add a table of contents to longer posts, but you’d rather not add it to your book. Here’s how to identify a CSS selector to target the table of contents and then add some custom CSS to remove it from the book’s design.

1. While viewing a post (or while viewing a project’s Print Page)
2. right click on the plugin’s element you want to remove (e.g., an in-post table of contents)
3. select “Inspect”. Your browser’s developer tools will open to reveal the HTML corresponding to that element (in practice, you might need to do this a second time as it sometimes doesn’t work)
4. look at the HTML element and look for any id or class attributes and their values (in this case we see id is ez-toc-container, and the class has ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey)
5. in another tab, go to your project’s “Customize Digital PDF design” (or whichever format and design you’re using), and add the custom CSS

To target based on the ID (ez-toc-container), use the hash symbol # then the ID (e.g., #ez-toc-container).

To target based on the class (ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey) use a period . then one of the classes (e.g., .counter-hierarchy or ez-toc-grey).

E.g., this custom CSS will remove the plugin’s table of contents from any design added to it:

#ez-toc-container{
   display:none;
}

Need Help?

Hopefully the instructions give you a good idea of how to choose which formats show which content. If you still need help, please ask away! Just use the plugins’ help page to get in touch. (And if you’re a business license holder whose gives site access, we’re happy to do it for you.)