Streaming live at 10am (PST)

Print Page Button

This is pretty a straightforward tip but might come in useful for someone.

If you want to add a “Print Page” button to your website:

1.Create a button or link as normal and set it’s id to “print”


2.Add this piece of script to the footer:

$("#print").click(function() { window.print(); });

3.Publish the site and that’s it!

Finally, if you want to make your content print friendly, you can add custom css to the footer using:

@media print{
  .sidebar, .footer, .nav-bar { 
    display: none;

In the above example, the classes specified will not be displayed.

Sin a bhfuil!


Hello @Diarmuid_Sexton,

Thanks for the tip!

I was wondering if there was anyway to print specific sections of a page? This code prints everything like navbar and footer. I would like to print specific sections only.


Ya, you can set display: none; for the parts you don’t want to print and show the parts you do want to print.

I’ve also found this plugin which works quite well. Might not do exactly what you’re looking for but worth noting - even for this thread.

1 Like

Thanks @Diarmuid_Sexton,

Had a look at the print friendly plugin, very easy to use, I like it!

Glad to hear that…

@Diarmuid_Sexton, I got the print button to work, but can’t seem to get the CSS to work. I added it to the custom code section on the page like so to hide the nav bar, but it’s not reading the code, and instead shows the raw code at the bottom of the page :

@media print{
.navigation-flex {
display: none;

Here is the page I am working on:

I also attached a screenshot of the code in my editor.


You need to put this in style brackets - i.e.

@media print{
     .navigation-flex {
     display: none;
1 Like

I missed this thread - great tip and instructions - thanks @Diarmuid_Sexton

Thanks @Diarmuid_Sexton. That worked perfectly!

I got it working perfectly with a button. Thank you! I’ve hidden a few elements so it looks cleaner. Is there a way to ‘trigger it’ when the user tries to print using the normal print page method?

Sorry, never saw this - yes, it should trigger when the user prints as normal. the button just calls the regular print function of the browser.

Is there anyway to make this work with a

to print the content of a DIV?

Yes, set every other div on the page to display: none and set the div you want to print to display

I managed to make a front cover for our documents. Hidden unless you click ‘print page’ also pulls through cms title etc

Screenshot 2021-12-24 at 10.47.43