Stop Printing Ugly WordPress Pages With This Easy Fix

Stop Printing Ugly WordPress Pages With This Easy Fix

As a WordPress designer, you fret and worry about how your pages and your posts look – on the screen. That’s what it’s all about, right? You look at that new travel-story website you just finished, and it looks great in all the current web browsers. It’s fabulous. The client loves you.

A week later, you’re sitting at your computer when the client calls and says, “Hey, our customers are trying to print stuff off that new website you made for us, and everything is a mess – you have to fix that – now!!!” The client continues her rant – throwing in a few expletives about WordPress – while you (in a total panic) click over to the client’s site, and don’t see anything wrong. The site looks great.

Then you (for the first time ever) choose your browser’s print command, your printer starts whirring and clacking, and by the time you slide over to your printer it’s already printed out three sheets of paper when it should have just been one sheet. You open another page, and this one prints eight sheets of paper. What?!?

Page prints too many pages.
This web page should have printed in just one page, but it turned into three pages with lots of extraneous junk.

Your client is right (aren’t they always?). The carefully arranged menu doesn’t even look like a menu, a photo is encroaching onto some of the text, the links have ugly underlines, page elements are out of order – there’s stuff that shouldn’t even be there – it’s the ugliest WordPress page you’ve ever seen.

Your head spins as you try to figure out what’s wrong and what to do, as the enraged client continues yelling into the phone – her voice getting higher and louder. “My customers don’t want all that junk on the print-out. They just want to read the story!” Suddenly, her voice morphs into a loud buzzing sound, and you realize it’s your alarm clock. You slowly open your eyes, blink a few times, and turn off the alarm. The phone call was just a nightmare – everything is OK – it’s time to start your day.

But now you’re worried, so as soon as you get to the office, you head over to the WPMU DEV blog. Surely someone there can help with this printing problem before it happens in real life – and yes, sure enough – you’ve stumbled onto this article about ugly WordPress print-outs and what to do about them.

Do People Actually Print Web Pages?

Web pages are ethereal. They live on a web server. We go to a URL, look at the page, and when we close the page, it’s gone. There’s no hard copy. It’s all just a bunch of computer code that disappears from the screen as soon as the page is closed. That’s the way it is for most web pages, including the vast majority of WordPress pages. That’s the intended end use for most web pages. The screen.

But sometimes, more often than you might think, people want to print a web page. Maybe it’s a long story, and they want to read it later, while relaxing on the couch. Or it might be a step-by-step instruction sheet they want to have sitting on their desk while looking at something else on the screen. Or they just want a tangible copy of a page for whatever reason. Even though many of us do 90 percent of our reading on a screen, lots of people still prefer toner (or ink) on paper.

Why WordPress Can’t Print

Don’t worry. There’s nothing wrong with WordPress. Most web pages, no matter how they were created, look bad when printed. And, typically, the more advanced the page-building process, the worse the print-outs look. In the early days, when most pages were just simple HTML, print-outs were bad, but not necessarily horrible. But when CSS came along, and designers got the ability to position page elements in new and exciting ways on the screen, the quality of print-outs got even worse, because printers can’t always understand CSS code. Printers don’t think in terms like float, and they don’t necessarily know what 15px means.

Although print software tries hard, in many cases it just gives up, and tells the printer to just print everything without regard to positioning or style. This is where things get ugly.

To make matters even worse, there are lots of things on web pages that readers don’t want or need to see: When reading a page on paper, who needs a menu at the top of the page? Who needs a menu at the side of the page? Who needs underlined links? And lots of that other stuff in the sidebar and/or the footer – who needs it?

Not only is much of that content useless on a printed page, it’s a huge waste of paper, ink, or toner. It’s bad for the environment, and just doesn’t make sense anyway to have all that junk print out.

Fix It With WordPress Print Styles

Even if you’re not much of a coder, I’m going to assume that you have some familiarity with the concept of Cascading Style Sheets (CSS). You know that designers control the look and the positioning of their content by assigning CSS rules to all the elements on their pages. And you know that there are rules (styles) that specify the size of the type, the color of the type, the position of a sidebar, etc.

These rules are written in a file called a stylesheet, and web browsers read and interpret these rules in order to display the page on the screen. Many websites, including WordPress sites, use more than one stylesheet to control a single page. And it’s not uncommon for stylesheets to include thousands of lines of code. The result, when everything is working correctly, is a great-looking page.

Everybody Knows That

Yes, but did you know that you can create special rules that only apply when it’s time to print the page? These special rules are known as print styles, and designers can insert these print styles into a separate stylesheet or just add them to the main stylesheet of the page – resulting in great-looking print-outs that should make any client happy.

What I’m going to show you here won’t be complicated, so even if you’re not into coding, don’t panic. I’m not saying this is easy, but it’s not difficult either. As long as you follow these instructions carefully, you can create your own print styles, and learn a bit about CSS, all without ruining your website. As with most things, there is more than one way to do this, but the method I’ll show you is fairly basic, and involves simple edits to just two files in your WordPress theme. Here we go:

Initial Preparation

The Print Preview view.
If you would rather not print all those pages, an option is to choose the Print command in your browser to see how many pages will print and what they will look like.
Page looks good on screen.
The page looks good on screen, but not so good in print.

Open a page on your website, print the page, and see how it looks. If it looks great, then don’t worry. This probably means that the developer of your theme has already added some print styles, so you can quit reading right now. Nothing more for you to do. But if you don’t like the way the page looks, follow along and find out how to make the page look better.

Depending on your anxiety level, you might want have a current backup of your WordPress website. This is something you should always have anyway, so if you don’t have one, go get one.

Using an FTP program, as shown below, check your active theme folder on the web server to be sure there’s not already a file named print.css (or similar file name). If this file is present, the developer of your theme has already created a separate stylesheet file for print styles, but maybe it wasn’t enough to make the page look the way you wanted. In most cases, you won’t find a separate print stylesheet, so let’s continue.

View of theme directory.
As expected, in this view of the theme directory, there’s no print style sheet, but you can see the header.php file and the style.css file you’ll be working on.

Telling WordPress To Look for Print Styles

Creating print styles isn’t going to work unless we first let WordPress know about those print styles, which means we have to make a minor edit to our theme’s header.php file. With your FTP program, find and download the header.php file to your computer. Copy a backup of the file to a safe place in case something goes wrong and you need to get an un-altered version of this file.

Now you should have two copies of the header.php file on your computer – so open one of the header.php files in a text editor. This doesn’t mean a text program like Word – this means a real text editor that won’t add extraneous codes to your header.php file while you’re editing. Notepad++ is a popular text editor for Windows users, and I prefer TextWrangler on my Macintosh. Both are easy to find on the Internet, and are free of charge.

Head section of header.php file.
Near the top of the header.php file is where you’ll find the head section.

The part of the code you want to edit is usually found in the head section near the top of the header.php file, as shown in the graphic above. So locate that area of the file.

The code for the media styles
The code for the media styles.

Scroll down several lines, and find the media=”screen” code, as shown above.

After adding the code for the print stylesheet.
After adding the code for the print stylesheet.

The media=”screen” code refers to styles that apply to the screen view, so now you’re going to add a small bit of code that tells the web browser to look for the print styles when it’s time to print the page: Enter these few characters , print into the code, so the code looks like the example in the image above.

Save the header.php file, and upload it to replace the existing header.php file on the web server. Don’t change the name of the file.

If you’re paranoid as I am, you can refresh the web page you’re currently looking at, and see if it looks OK – and check a few more pages just to be sure before continuing.

Take an X-Ray of the Page

Now it’s time to identify the page elements you want to hide while printing the page. Likely candidates are the menu(s), sidebar content, footer, comments, and comment form. Fortunately, the structure of most WordPress themes makes these elements fairly easy to identify in the CSS code.

The best way I’ve found to identify these items and figure out where they are in the CSS code is by using the built-in file-analysis features of web browsers or by using browser plugins.

For example, if you’re using the Chrome web browser, control-click (Macintosh) or right-click (Windows) on one of the elements you want to hide during printing, and choose Inspect Element. If you’re using a different browser, you might have to use a browser add-on, such as my personal favorite, Firebug.

Whichever method you use, a window will open that lets you see your page in normal view, along with a detailed code view that lets you determine the CSS ID for the element in question.

The Firebug browser plugin shows us that the area we chose to inspect has the #sidebar ID.
The Firebug browser plugin shows us that the area we chose to inspect has the #sidebar ID.

As you can see in the graphic above, when we chose to have Firebug inspect the sidebar area (which we want to hide in a print-out), Firebug showed us that the ID for the sidebar is #sidebar. If we had inspected the footer area of the page, Firebug probably would have shown us the ID #footer. Go through your page, and make a list of the IDs for all the items you want to hide during printing. A typical list of IDs you would look for might be something like #header, #content, #comments, #sidebar, #footer, and #commentForm.

Creating the New Print Styles

Now it’s time to alter the CSS file. Just as you did with the header.php file, download the style.css file to your computer, make a backup of the file, and open another version of the file so you can add the new print styles.

View of the print styles.
At this point, the new print styles should look something like this. Be sure to insert this at the bottom of the style sheet.

Scroll to the bottom of the file, enter a couple of returns, and then write a comment to denote the beginning of your new code section. Your comment should look something like this: /*////// PrintStylesAddedx102414 ///////////*/ .

The number of slash marks isn’t important – that’s just so we can easily find this new section if we want to alter the file again later. The important part of this is the /* at the opening of the comment, and the */ at the close of the comment. This comment will only be visible when you’re working in the style.css file, and helps you remember later what you added and when you added it – the web browser will ignore it.

Directly under the comment, start adding your new CSS code, starting with #media print } . This refers to the change you made in the header.php file so the browser knows to use these new print styles for printing.

Next, you might want to be sure you have a white background and black type for printing, and no big margins – so the next line of code would be body { background:white; color:black; margin:0 ) .

Now, here’s the fun part where you get to hide all the parts you don’t want to see on the printed page: Refer to your list of items, and choose to either show them or hide them by writing rules like these: #header { display:none } #content { display:block } #comments { display:none } #sidebar { display:none } #footer { display: none } #comment form { display:none }

As you might guess, display:none means that entire element will be hidden at print time, and display:block means OK to print.

When you’re finished, save the style.css file, and upload it to the web server, replacing the existing file.

At this point, you should test your work. Refresh the web page you’re currently looking at, and see if it looks OK, then check another page. Everything should look just as it looked before, because the changes you’ve made to the two files should only affect things at print time.

Assuming everything is OK, try printing a page, and see if your new print styles are working as expected. If things have gone OK, your print-out should only include the things you wanted to see at print time. The annoying and unnecessary sections of the page should be absent.

All the new print styles are here now.
All the new print styles are here now, denoting which areas of the page to show and to hide, and also some treatments for the text and page background.

If everything is OK so far, you might decide to tweak a few more things to get the print-out looking even better. To do this, add a few more lines of code just below the code you just added.

For example, you might add a body tag with new rules to improve the look of the text. You might want to change the font size from pixels to points, since printers are more likely to understand points than pixels. Another good thing might be to change the font family to a serif font, such as Times or Georgia, since these fonts will probably be easier to read than the original sans-serif fonts when reading on paper. And you might want to change the color of the type to black. Take a look at the graphic above to see an example.

Some designers, especially those who are more into CSS, get really creative, and add code to substitute higher-resolution image files for the print-out, change positioning of elements, etc. But for most of us, basic changes as I’ve just shown you are enough to do the job.

The print preview shows that only one page will print.
After uploading the stylesheet with the new print styles, the print preview shows that only one page will print, which is just what you want.

Save the style.css file, upload it to the web server, and see how everything looks. Then run a print test. If you’ve done everything right, you should see major improvements in the look (and usefulness) of your print-outs. All the useless stuff, such as the menu, the sidebar, the footer, comments, etc. should be gone.

Keep in mind that you don’t have to waste tons of paper, ink, or toner while testing and tweaking your print styles. Just check the print preview screen, as shown above, until you have everything the way you want – and then print to paper.

All that shows on the page now is the headline, the photo, and the main text of the page – and that’s exactly what the client wanted. With just a little bit of study and a little work, you now have everything under control.

If you don't mind not having backups, you can edit the files in the WordPress Editor window.
If you don’t mind not having backups, you can edit the files in the WordPress Editor window.

If you don’t like the idea of downloading files from the web server, keeping backup files, etc., you can always try editing these two files from inside the dashboard of your WordPress site.

Go to Dashboard > Appearance > Editor, identify the correct files, and start editing. Caution: This method may look and seem easier, but I don’t like to work this way because I know how easy it is to make a mistake that could result in crashing my WordPress site – and having backup files on my computer makes me feel a lot safer when playing with code.

What Have You Learned?

Now you’ve seen how to keep the screen version of your website looking exactly as you intended while adding some simple code to get great-looking print-outs that everyone will find useful.

Use the method that seems best for you, and be careful. Follow these instructions, and printing ugly WordPress pages should be a thing of the past – with no more nightmares – because the client’s site will now print like a dream.

What does your website look like when it’s printed out? Have you thought about using print styles? Let us know in the comments below.