How To Implementing a Simple Print Stylesheet on WordPress Theme

  • 0 comments
  • No Comments
    Posted 07 Sep 2011 in WordPress Tricks

    There are a time for some our reader needed to print our content. So Implementing a Print Stylesheet on WordPress Theme is the best idea. We will show you how to do it. So you blog reader will be happy with your content and of course your blogs.

    You need to open your header.php and modified some parameter on it, let’s move on. After header.php already opened. Find this line

    < link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    

    And modified that code by added print code like this one

    < link rel="stylesheet" type="text/css" media="screen,print" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    

    The Next step is added style for print version, now open style.css and go to the last line. Then added this code

    @media print {
    	body {
    		background: #fff none !important;
    		color: #000;
    	}
    	#wrap {
    		clear: both !important;
    		display: block !important;
    		float: none !important;
    		position: relative !important;
    	}
    	#header {
    		border-bottom: 2pt solid #000;
    		padding-bottom: 18pt;
    	}
    	#colophon {
    		border-top: 2pt solid #000;
    	}
    	#site-title,
    	#site-description {
    		float: none;
    		line-height: 1.4em;
    		margin: 0;
    		padding: 0;
    	}
    	#site-title {
    		font-size: 13pt;
    	}
    	.entry-content {
    		font-size: 14pt;
    		line-height: 1.6em;
    	}
    	.entry-title {
    		font-size: 21pt;
    	}
    	#access,
    	#branding img,
    	#respond,
    	.comment-edit-link,
    	.edit-link,
    	.navigation,
    	.page-link,
    	.widget-area {
    		display: none !important;
    	}
    	#container,
    	#header,
    	#footer {
    		margin: 0;
    		width: 100%;
    	}
    	#content,
    	.one-column #content {
    		margin: 24pt 0 0;
    		width: 100%;
    	}
    	.wp-caption p {
    		font-size: 11pt;
    	}
    	#site-info,
    	#site-generator {
    		float: none;
    		width: auto;
    	}
    	#colophon {
    		width: auto;
    	}
    	img#wpstats {
    		display: none;
    	}
    	#site-generator a {
    		margin: 0;
    		padding: 0;
    	}
    	#entry-author-info {
    		border: 1px solid #e7e7e7;
    	}
    	#main {
    		display: inline;
    	}
    	.home .sticky {
    		border: none;
    	}
    }
    

    Please notes, the code above only example, and maybe need modification to make it work on your theme. Because some WordPress Theme using different class and id. Use you imagination to make more better print style on your WordPress Theme. We hope simply tutorial How To Implementing Print Stylesheet on WordPress Theme useful on you.


    Add Your Comment

    Enter your comment*:

    * Required fields