Awhile ago I made a call out to the authors of Premium WordPress themes to start adding print stylesheets to all of their themes.   Some already do, but I believe in order to truly be premium quality, things like a print stylesheet and an author page should all be included.

While building a print stylesheet for a new blog I am setting up, I realized that I hadn’t written a post here explaining how to create a print stylesheet yet, so consider this to be that post.

What is a Print Stylesheet?

A print stylesheet is an alternate stylesheet that should only be used when someone attempts to print a page off of your blog.

How Does a Print Stylesheet Work?

A print stylesheet is a separate stylesheet that will override any designated style.css code when someone attempts to print a page off of your website.  If a print stylesheet is created correctly, people printing a webpage will not also print the unnecessary elements, such as the header, footer, and sidebars.

How do I Make a Print Stylesheet?

First thing you need to do create your print.css file. This can be done by taking a blank Notepad (or similar) file and naming it print.css.  You can also make a copy of your blog’s style.css file and rename it, then remove the code within the copy.

What Code Do I Put Into My Print Stylesheet?

Depending on your blogs theme, this step will either be pretty easy or incredibly difficult.  Basically, we don’t want things like your header or sidebars to appear in your print stylesheet, so you’ll want to setup your print stylesheet to remove these elements:

#header, #nav, #sidebar, #footer .noprint {display: none;}

Depending on your exact theme and how the div id’s are setup, what you put here will vary.  In other words, use the above as a guide, but customize it to match your theme.  You can also use this method to censor out images and other unwanted elements of your post pages (if applicable).  Also, if you have your contact information in your footer, you may want to leave the footer on your prints.

Next, you will want to expand your content section so that it looks decent when printed, instead of the content margins your standard style.css uses.  It will probably look something like the following:

#content {width: 100%; margin: 0; float: none;}

Now, to ensure that alternate colors are not picked up when printed, you’ll want to do something like the following to make sure it prints using black ink:

a:link, a:visited {color: #000000}

Because most people use white paper, this should make your printouts better looking.

How To Tell Your Theme to Use the Print Stylesheet

Once you’ve built and uploaded your print stylesheet, the next step is of course to tell your theme to use it when someone prints something!  This is probably the easiest step of all.  You’ll want to simply paste the following code into your themes header file (usually just below the standard style.css code):

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

So, there you go!  Hopefully if you’ve followed these steps, and uploaded your new print.css file to your WordPress blog’s theme, anything printed from your website will look much better.

Related Printing Posts:

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

Sometimes we get so caught up in covering the complex WordPress hacks and offering tips, that we forget to cover many of the things that are often taken for granted.

Today I decided to write a quick post and cover how to reset your password within the WordPress dashboard (for WordPress 2.0+):

  1. Go to the Users tab.
  2. Click on the Your Profile link.
  3. Scroll down to the bottom of the page and enter your desired password in the New Password field.
  4. Click the Update Profile button.

That’s it!  If you are using an older version of WordPress, you’ll want to consult the WordPress Codex.

If you can’t get into your dashboard, you can also reset your password from PHPMyAdmin (only recommended for comfortable advanced users):

  1. Select the WordPress database of the blog you want to reset the password on.
  2. Click on wp_users.
  3. Click the “browse” icon (or “structure”).
  4. Click browse in the user_login field.
  5. Locate the ID number associated with your login and commit it to memory.
  6. Click browse in the user_pass field and find your login.
  7. Click edit.
  8. Delete the numbers and letters next to the ID number.
  9. Enter your desired password (case sensitive).
  10. Select MD5 in the drop-down menu.
  11. Click Go.
  12. Verify your new password works!

If you are not the administrator, you can always contact the administrator to reset your password as well.  Good luck!

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

The problem(s): With some upgrades of the WordPress 2.5 branch, the Popularity Contest WordPress plugin is not working properly. Also, people trying to activate the Popularity Contest plugin on a brand new WordPress install are getting a fatal error or a “doesn’t exist” message when attempting to activate the plugin.

The solution(s): I actually ran into this problem on a fresh install of WordPress. After several attempts, I was unable to figure out the problem myself. Thankfully, a quick Google search showed a post over at WPGuy which gave details on fixing both problems!

Here is what you need to know if you have this problem:

Fix problems with the upgrade to WordPress 2.5

Open your Popularity Contest plugin (edit it) and search for this code:

require('../../wp-blog-header.php');

And replace it with this:

require('../wp-blog-header.php');

Fix problems with a new install of WordPress 2.5

In addition to doing the above, you need to search for the following code:

if (isset($_GET['activate']) && $_GET['activate'] == ‘true’) {

And replace it with this:

if (isset($_GET['action']) && $_GET['action'] == ‘activate’) {

I went through both of these steps on my fresh WordPress install and it fixed the problem perfectly!

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

In the past we’ve talked about how to add a print button to your WordPress theme. Today I wanted to give you the javascript code you need to create an Email This button on your WordPress blog.

Before getting to the code, I wanted to first say that this code is designed to allow readers to click on the button and have it open up their default email software and create a subject and link that point to the post the reader is currently visiting. This code is not designed to allow readers to contact the blog author.

If you are wanting your readers to be able to contact you, I recommend you use one of the many great contact form WordPress plugins available. You should never embed your email address into some HTML code because it will be picked up by spam bots. Contact forms prevent spammers from finding your email address. The other thing you can do is offer “EmailAddress AT EmailCompany DOT com” (which your email address information filled in) to avoid spammers.

Okay, so back to the Email button code. Here is the javascript you will need:

<script type="text/javascript">
<!-- Begin
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<a class="contact" HREF=\"mailto:\?subject\=Take a look at this page I found, ‘ + document.title + ‘?body=You can see this page at: ‘ + window.location + ‘\” onMouSEOver=”window.status=\’Send your friends e-mail about this page\’; return true” TITLE=”Send your friends e-mail about this page”>Email to a Friend<\/a>’);
}
else { document.write(’<a class=”contact” HREF=\”mailto:\?body\=Take a look at this page I found titled ‘ + document.title + ‘. You can see this page at: ‘ + window.location + ‘\” onMouSEOver=”window.status=\’Send your friends e-mail about this page\’; return true” TITLE=”Send your friends e-mail about this page” rel=”nofollow”>Email This!<\/a>’);
}
// End –>
</script>

This will create an email where the reader can enter in someone’s email address and send them a link to your post/page.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

Recently Richard over at WP Project did a great redesign on his site.   With that redesign came a great “Featured Articles” section that features the five most recent posts in the “Featured” category on his blog.

In this post, Richard explains the steps required to feature a designated number of posts in a category of your choice.  Here is the result:

Click over to get the code you need to setup something similar on your WordPress blog.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |

If you’ve ever had any interest in purchasing a news premium WordPress theme, you’re probably familiar with the works of Adii, who is the guy behind the Premium News themes.   Not only am I a fan of much of his work, but I also am a fan of his blog, where he is truly an open book and isn’t afraid to share this secrets to success with his readers.

One of Adii’s post recent posts is a great tutorial write up explaining how to create a YouTube video tabber in WordPress.  For those unfamiliar with a tabber, it basically allows you to create tabs for things.  In this case, you can use tabs to display multiple YouTube videos, such as this example from his original Premium News theme:

Click over to check out the steps needed to achieve something like this in WordPress.

Digg This! | Stumble it! | Add to Del.icio.us | | Print This! |