On today’s episode, we’re going to start a month-long conversation about some of the areas on our WordPress websites that we may forget about when we’re designing and developing, and today’s no exception. We’re gonna talk about: Is your site ready to be printed? Right here on Your Website Engineer podcast episode No. 370.

Hello, and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. I’m excited to be with you here at the start of 2018. We’ve got a full, brand-new year already. All the goals are ready to be achieved and whatnot, and our – we can get ready to dive into learning more WordPress here in 2018.

I haven’t quite set all of my New Year’s resolutions or goals yet. I know that it’s already January 2nd as I’m recording this, and I just got really behind with taking time off for the holidays and just having kids around all the time. It was just really difficult for me to really focus, and that’s kind of my – one of my goals for the beginning of this week, or beginning this first week of 2018. Just kind of go through and try to set up some goals and expectations and outline some shows and just try to figure out what the themes are gonna be for the next couple of months.

It’s going to be a busy year. I’ve got WordCamps coming up. I’m going to some. I’m going to be leading WordCamp Dayton in May of this year. And, of course, there’s all kinds of other things that could be happening in the WordPress space, so I’m really excited about 2018, and there’s gonna be a lot of fun things going on.

There are no announcements this week. It is the beginning of the new year. There hasn’t been a lot, even on some of the news sites. There hasn’t been much – a whole lot of activity, and so we’re just gonna go ahead and skip the news section.

We’re gonna go over to the Is There a Plugin for That? section. And there’s lots and lots and lots of plugins on the WordPress repository, and we’re gonna talk about one, and it’s called Days of Week Widget. And this is an interesting one. It’s got – it’s a brand-new plugin that’s out there. It doesn’t have a lot of active installs, but it’s got a really neat idea, and I don’t know if this could be useful in any way, shape, or form to anyone that’s listening.

The plugin basically allows you to – it’s a lightweight plugin, but it allows you to show different content based on the day of the week. And you can use it as a widget or a short code in your post or pages. So maybe you have a bowling league that happens on Tuesday nights and you wanna give an announcement on Monday night about the Tuesday night thing. Or, you know, there’s a lot of different examples and a lot of different things that you could use this for, and I thought it was just an interesting a plugin. It’s called Day of Week Widget, and you can find it in the WordPress repository or, as always, it’s in the show notes for Episode No. 370.

Today, we’re gonna talk about: Is your website ready to be printed? And this is a – kind of a weird topic and something I definitely did not think of. I was trying to do some brainstorming and researching – like, what should I talk about this month, and how can we dive in and make sure that we’ve covered all aspects of a WordPress website? And this one just kind of caught my eye. It was an article posted on WPQ from a few months ago, and it was just talking about how to make sure your site is printer ready.

And I have to preface this whole conversation with: I hate printers. The printers never seem to work for me, and it seems like whenever I’m in a hurry to print something, that’s when the printer always fails to work, or it’s out of ink, or there’s just some reason that it doesn’t work.

And thinking about why are people printing websites or pages from websites in 2018 – and that’s a really good question. It’s not that everybody consumes – you know, you have to consume a website on a phone, or a computer, or tablet. That’s the initial place that you have to look at the information. But sometimes, you might – the people that are reading your website, depending on your content, might need that information later, and they may want to archive it.

Maybe they are – you have a lot of recipes on your website and somebody wants to print out a recipe and keep that in a recipe book and be able to create that menu or that meal sometime in the future. Or maybe you have a very heavily based website that has a lot of research or knowledge-based information, and maybe somebody needs that information for a research project, so they need to even print it out and get ready for a research paper. Or even just if people are PDFing, like, saving the content as a PDF so they can research it and they can get to it later. That’s another thing.

And if you haven’t taken the time to make sure that your website is printer friendly, then it’s going to waste a lot of ink if somebody actually has to print it, it’s not going to be formatted very correctly, and it’s got all kinds of junk that’s on the site that isn’t really useful anymore. And so it’s worth spending a few minutes here at the top of the year just going through and checking to see – is your website printer ready?

There are a few different ways to do this. Mainly, we can add some code or we can add a plugin, so that’s really how we can do a lot of things within WordPress. Today let’s go ahead and dive in – first, about adding a little bit of code, and then we’ll talk about a couple of plugins that will do this as well.

Alright. Let’s look at the first method. The first method is a fairly easy one, even though it’s a little bit of code. What you wanna do is you wanna add all of your styles for your printer – you want to add that into your child themes style, that CSS file. That’s kind of the easiest way to do it. So you’ve already created a child theme for your website or you have a plugin that’s installed on your website that gives you the ability to add custom CSS without overriding your parent theme.

And so, what you wanna do is you want to start out and you create a media query, and it’s called “@media,” and then you put “print,” and that’s the class of print – P-R-I-N-T – and then open the parentheses and close the parentheses, or the brackets, I guess. And then you put all of your print styles in there.

And the main thing is what you wanna do is you want to – you don’t necessarily have to define style unless you’re font is really hard to read or something along those lines, but the main thing you wanna put in this area is stuff that you want to hide. So you’re mainly looking for things that you want to get rid of that you can just kind of do a “display none.” That’s kind of the – that’s the CSS you can use to just kind of wipe out the information and not have it displayed anymore.

You want to make sure that there are no – you really don’t need breadcrumbs on your page, you really don’t need menus, you don’t need really sidebars or footers. All that kind of stuff – because a lot of people like to turn off comments, even links or videos or even images. Sometimes those aren’t necessary. If you have a featured image, that may not be necessary, or maybe you could do a little styling to make that a little bit smaller or wrap text around that or whatnot. Like I said, you wanna get rid of comments because, most likely, if somebody’s saving it for research or a recipe they probably don’t need hundreds of pages of comments about the recipe, so you can just go ahead and display none of those.

You wanna make sure that the text sizes are okay, so you can do a print preview. If you go to your website and you do a print, you go to the file menu and print, then you can see how big and what your website’s actually gonna look like. If I do this for yourwebsiteengineer.com on a normal blog post page, I’m seeing – it depends if I’m in Safari or Chrome – I’m seeing two different things, but basically I’m seeing – at the very top, I get the Your Website Engineer logo. I’m getting the social icons, which is not useful whatsoever.

I’m getting menu items, which isn’t useful because a menu item in a printed form – like, it doesn’t say “About.” It says – it prints out the ink and it says, “yourwebsitengineer.com/about.” So you wanna get rid of all those menu items. The search field in the sidebar is very, very useless in a print preview or a printed document from a website. Then, also, the sidebar or the pop-up, that kind of stuff – nobody needs to – nobody’s gonna take my piece of paper and say, “Oh, that’s a really great ‘downloading your free e-book’ type of a thing.” The links for related posts – mainly, anything that’s in the widget area can be discarded. It’s not really needed.

I’m also seeing that my Smart Podcast Player is doing some really wonky things, and it doesn’t look good at all. And so, that’s something that I would definitely want to hide and make sure that I get rid of. And again, this broadcast is, like, oh, let’s talk about things that we have really overlooked. And then, I’m, like, oh, I’ve really overlooked it myself. And so these are some things that I’m gonna be working on this week as well. And so those are some things that I’m thinking about.

I also see that I have some text at the bottom that’s always like a thank-you text, and it’s just, like, thank you for sponsors or checking out my resources page, and using my affiliated links, and stuff like that. That’s not necessary if somebody’s printing out an article or looking to save that later. That’s not necessary. The footer with my links to my bio and everything, that’s not necessary. The disclosure form – like, all this stuff is really not necessary.

A normal blog post page is looking like it is – it’s three pages. It would take three pieces of paper to print the whole thing out, even though the text would probably fit on a full page, maybe a page and a half. And so it’s just kind of a pain that you can’t easily – especially, I would think that, in this day and age, you could select different texts that you’d want to actually appear. But when you’re printing a web page, you can’t do that. You get whatever the designer or the developer has controlled in this environment. So that’s something I’m gonna look at this weekend, see how can I make this printed – just the visuals – make it a lot neater, a lot cleaner.

So how I would go about doing this is I would go ahead and I would look at the print preview, and then I would see the elements that I’m looking to get rid of. Maybe I’ll jot those down, like the sidebar; I’m looking to get rid of the Smart Podcast Player, and a few of these other things. I’ll look at them and, okay, I’ll make some notes and I’ll jot them down.

And then, what I would do is I would I would go into probably Chrome. If you right-click on the Items in Chrome, and then you right-click on it, and you say “inspect element,” and then it gives you the ability to write some CSS, or you kind of see some CSS information that’s going on there, and then you can just kind of pick those classes or those IDs and say “display none,” and then see if it actually gets rid of it from the visuals on your website. And if it does, then you know that you’ve targeted the right element. And then you can add that CSS right to your child theme.

And so that’s the way that I would tackle this. Again, it’s a little bit complicated and a little confusing, but that’s one – the first way that you can do it. So you can find the styles that you want, and then you can add it to your – the style of that CSS file with the print class.

Another way that you could do is completely put all of the print style stuff in its own file, and then you can use a little bit of code to enqueue that file and bring that file into your template itself, and that way you can keep all of the print stuff in a separate file. It’s called “print.css.” You essentially do the exactly same thing. You would do – get all the CSS that you need and instead of putting it in your child theme, you’re gonna go ahead and put it in a file that’s completely separate and it’s just made for printer styling. So that’s something that I wanted to talk about and just share, that that is an opportunity as well.

So those are the two code-based ways. You can either put them in your child theme, or you can put them in a separate file and then call that separate file – and then have those styles loaded to your WordPress site.

The other option is to add a plugin. I’ve got a couple recommendations here. These are basically plugins that you can add to your website, and it will allow you to not dink around with all the settings and what CSS to show, and what not to show, and how to do this and that and the other thing.

And so the first one is called Print, PDF, Email by PrintFriendly. And this is a plugin that adds a print button to any post or page that you like. When a visitor clicks on the button, it has the option to print the content in a lightbox where they can customize the options to choose whether to print the page or save it as a PDF. They can also remove text images or get rid of texts that they don’t want to appear, which is pretty nice, and then they can save it as a PDF. Or they can send it to their printer.

So you can choose between different styles of buttons with this one, you can decide which features your visitors have access to, and you can also include a copyright notice on the printed or saved files, if you like.

This is a free version. There’s a free version of it, but there’s also an ad – so there’s ads in the free version, but there is also a Pro Premium level that looks like it is $4 per month or $40 per year for ad-free experience. So, that is Print, PDF, Email by PrintFriendly. And that link is in the show notes, along with the next two as well.

The other one that I wanna share with you is called Print Post and Page, and it is enabled to print post by default, and then if you want to add it to pages, you have to insert a short code into the desired page because, essentially, you wouldn’t want people to print the contact form page or some of your other pages, so you wouldn’t want those on there.

It is easy to customize, it is easy to use, and it – even though the plugin is called Print Post and Page, you still have to use a short code on a page itself, so that’s a little bit of a disadvantage. But it works really well as well. And, again, it strips out and gets you only the information that you really need to see on a post when you’re trying to print it.

And then, the last option is Jetpack. If you already have Jetpack on, then it’s worth mentioning that you can just go ahead and enable the printed link. And this is in the sharing module, and it will allow your visitors to print or post or – it will allow them to print any post or page, and it doesn’t come with any bells or whistles. I mean, it’s basically you go to the sharing options, and right now – like, on yourwebsiteengineer.com, I have sharing at Facebook, and it’s basically all the social profiles, so Facebook, Titter, Instagram, LinkedIn, all those good things.

And this is a sharing module that you pull the printer down into the bar, and there’s no options whatsoever, and it is a decent alternative that – if you don’t wanna install another plugin. It’s not gonna give you all the features, obviously, since there’s no features there. There’s – so, whatever you see is what you get.

So maybe that’s a first place to start. You could use the print button within Jetpack, and then you can see what else needs to be removed, and then you can kind of tag-team it and do some of the styling within your theme itself, or within a custom plugin, or – and then you could use the rest with Jetpack. Or you could just use Jetpack and call it good enough and say maybe not a lot of people will be printing out my website.

So that is already included with Jetpack, so if you’re already using Jetpack, there’s no need for an extra plugin. It’s already included and it is completely free. I mean, all three of these plugins I mentioned are free.

So this is the first of the things that we’re gonna talk about in the month of January, just the different areas and different ideas that we just probably overlook. And I’m very guilty of this. I don’t think, in all my years of working with websites – so, back to 2009 – I don’t think I’ve ever really focused on or even thought about a print.css, and so this kind of is one of those thing, like, maybe this is something that I need to focus on.

Just spend a little bit of time. I don’t think you need to spend days and days and days working on this. I would say if you spend one hour just trying to make it just a little bit better to print, that would go – that would just make your website that much better. So I recommend this week, taking just a little bit of time. Spend one hour implementing either one of these plugins, or spend a little bit of time removing things from your print.css file, just kind of hiding some things and making your site formatted and look a little bit nicer to print, and that will go a long, long way. That’s what I wanted to share with you this week.

Next week, I’ve got more information and more things that we may overlook on our websites and how to fix them. So, until then, stay tuned and take care, and we’ll talk again soon. Bye-bye.