I have custom post which prints some content in tabbed table, where only selected tab is visible.

Now, if print is selected, I would like to print contents of all the tabs. The problem is, that some content of these tabs is stored in post_meta, therefore I need to come up with different way of displaying the content for print and for usual displaying.

Is there a way to have single-custom.php for displaying custom post and (say) single-custom-print.php for printing it?

I have searched several print plugins and none of them do what I want them to do. If interested, here is example of the site in developement. Theme used: WP Travel

I have custom post which prints some content in tabbed table, where only selected tab is visible.

Now, if print is selected, I would like to print contents of all the tabs. The problem is, that some content of these tabs is stored in post_meta, therefore I need to come up with different way of displaying the content for print and for usual displaying.

Is there a way to have single-custom.php for displaying custom post and (say) single-custom-print.php for printing it?

I have searched several print plugins and none of them do what I want them to do. If interested, here is example of the site in developement. Theme used: WP Travel

• templates
• pdf

• Use css @media print. Open all tabs in print styles. – DenFunk Commented Jul 27, 2019 at 4:28

1 Answer 1

You can add a custom CSS via the customizer (or via code). Chrome can also show you what your site will look like in print mode (see links at the bottom).

Something like the following would generate a nice page for printing:

@media print{

#custom-header{
   background:#fff;
}

#custom-header > img,
a.scrollup, a.scrollup:visited,
.wp-travel-related-posts,
#footer-widgets{
    display:none !important;
}

.resp-tabs-list {
    display:none;
}

h2.resp-accordion{
    display:block;
}

.tab-list-content{
    display:block !important;
}

#colophon{
    background:white;
    color:#333;
}

#colophon a{
    color:#333;
    text-decoration:underline;
}

a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}

}

Additional Reading:

• https://css-tricks/snippets/css/print-url-after-links/
• https://www.wpbeginner/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
• https://developers.google/web/tools/chrome-devtools/css/print-preview