WordPress: Stopping the Sidebar from Printing

If there’s one thing that really winds me up on the net is that when printing web-pages you end up with a load of crap you didn’t want usually. For example with blogs you usually get a page or two with the content on the blog sidebar, which frankly I don’t need on a print out.

Well I’ve done something about it (well at least on my blog) – I’ve changed my theme so that on browsers that supports css and media types the sidebar shouldn’t print out. Here’s how you can add this to you’re WordPress blog

  1. Create a file print-style.css in the directory for you’re current theme with the following content
    .dontprint{ display: none; }
    div#menu{ display: none; }
  2. In wordpress, goto Presentation, Theme Editor and select the file Header
  3. Just bellow the line setting the css style sheet – should be something like this :
    <style type="text/css" media="screen">
    @import url( %lt;?php bloginfo('stylesheet_url'); ?> );
    <style>

    add the lines
    &lt;style type="text/css" media="print">
    @import url(&lt;?php bloginfo('template_directory'); ?>/style-print.css);
    </style>
  4. Hopefully this should be enough, but if the theme author hasn’t used the div’s in the sidebar file you may have to add this line <div id="menu"> to the top of the file and this line </div> to the bottom of the file

May 9, 2007   Posted in: Howtos, Rants, WordPress