# Print-Friendly Styles

> Hides navigation, sidebars, comments and the admin bar when a page is printed, and prints link addresses after external links.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: css, print, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/print-friendly-styles/

## Code

```css
@media print {
    #wpadminbar,
    .site-header nav,
    .main-navigation,
    .widget-area,
    .sidebar,
    .comments-area,
    .site-footer nav,
    .wp-block-navigation {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .entry-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}
```

## Notes

Adjust the selectors to match the class names used by your theme.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Print-Friendly Styles" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/