The Tasty Recipes print pages are unique in that they load content from the header and footer of your website. This allows you to track the page views on your print pages with Google Analytics, track people with a Facebook Pixel, show ads, and run any other important scripts that are found in the head and footer sections of your website.
This also means that some unwanted scripts may show up on your print page. This can include popup HTML, menus that are created with JavaScript, or any other visual items that load in the head or footer sections.
These items are easy to hide with some simple CSS. In a nutshell, you will target the content that is loading and tell it to display: none
. Watch the video below or read the following text to learn how to hide items on your print page.
Identify the content to hide
- Navigate to one of your print pages that is loading the extra non-recipe content.
- Right-click on the area that you want to hide and select Inspect.
- A window will appear (likely at the bottom of your browser window) that shows the Inspector tool. The area that you right-clicked on will be shown in the HTML and highlighted in blue.
- Hovering over the other HTML elements will highlight them on the page. Find the one that selects all of the content you are wanting to hide. Note: if there are multiple content areas, these will all need to be selected separately. Select the one that hides the most of the unwanted content, and use that.
- Look for a unique class name or ID to identify the content by. This will vary depending on the plugin / theme that is creating the content. It must be a
class
orid
– just a regular HTML element will not work. - Create your CSS!
Create the CSS
The body of the print page has a class of .tasty-recipes-print-view
. By targeting this class, we can make sure that we're only hiding things on the print page.
Use the class or ID that you found in step 5 above to create your CSS rule. Here's what it will look like:
.tasty-recipes-print-view .your-special-class {
display: none;
}
You will replace .your-special-class
with the class name you identified. Be sure that your class name starts with a .
in front of it. If you identified an ID to use, it will need to start with a #
, so for example #your-special-class
.
Place this CSS in your tasty-recipes.css stylesheet or in the WordPress Custom CSS area. To learn more about doing this, click here. Save the changes.
Clear your cache and view the print page again. The content you targeted to hide should no longer show up. If only part of it is hidden, you may need to use a different class or create an additional rule by following the steps above to hide that other content.
If you want to allow the element to show on the print page, but not in the print dialog (i.e. it doesn't actually get printed), wrap your CSS rule in a print media query:
@media print {
.tasty-recipes-print-view .your-special-class {
display: none;
}
}