How To Add Print Button In WordPress Posts

Adding a Print Button in WordPress posts might be a good idea or a bad idea depending on what type of website you are running.

If you want your visitors to read your content only by visiting your website then adding a print button might be a bad idea. But if you blog about tutorials or how-to guides then providing a print button for your visitors might be a very good idea.

Visitors to a tutorial site or how-to site would love to print a post and follow it instead of carrying their computer, phone or tablet everywhere with them. So adding a Print Button in WordPress posts can be a good practice.

I will provide the Print Button Code in this post. All you have to do is insert this code inside the Single.php (Single Post) file of your current WordPress theme.

There are two parts in this post:

  1. First is a simple ‘Print This ArticleLink.
  2. And second part is Print Button.

So lets see how to add a “print this article” Link and Print Button in WordPress posts –

[sws_toggle1 title=”Print This Article Code – Click Here  “] <a href=”javascript:window.print()”>Print this Article</a> [/sws_toggle1]

I have tested this code on Twenty Eleven theme in WordPress. And it should work in your theme as well. Refer to the image below and follow these steps –

print this article link in wordpress post

  • 1) Open Administrators Dashboard > Appearance > Editor > Single.php
  • Add the given Print Code wherever you want it to appear.
  • I have added it just above the comments_template.
  • 2) Update File.
  • 3) Visit any post on your Blog, You can see ‘Print this Article’ Link at the end of the post.
  • The link appears after the content and before the comments.

But this just adds a Link instead of a Button. To add a button we will modify the code and add a image somewhere between there.

[sws_toggle1 title=”Print Button Code – Click Here”]

<a href=”javascript:window.print()”>

<img src=”http://cdn1.iconfinder.com/data/icons/berlin/32×32/print.png” />

</a>

[/sws_toggle1]

In Print Button Code, i have added a Print Icon Image. You can replace that image with any image icon you want. Just Google the image you want to use and replace the image link with your desired image link. Or else you can use the code as it is !

Follow the same steps to add the new code which will help you to add a Print Button to your wordpress theme. After adding the print button, it would look like this:

print button in wordpress post

[sws_divider_line]

Adjusting Position of Print Button in WordPress Post

The Print Button might or might not appear in correct position because it depends on your theme. So if you don’t like the current position of the Print Button in WordPress posts then you can go ahead and add inline style to it.

The print button appears to the extreme left side in Twenty Eleven theme. So i will add margin-left style to it and push it rightwards. I will add about 150px left margin, so it will be moved to right side by 150 pixels. Check the code given below.

[sws_toggle1 title=”Print Button with Positioning – Click Here”]

<span style=”margin-left:150px;”>

<a href=”javascript:window.print()”>

<img src=”http://cdn1.iconfinder.com/data/icons/berlin/32×32/print.png” />

</a>

</span>

[/sws_toggle1]

If you replace the Print Button code with the new Print Button with Positioning Code then you will get the following result –

position of print button in wordpress posts

And thus you can adjust the position of Print Button in WordPress posts by changing the value of margin-left attribute. If you have any questions feel free to comment below. Thanks for reading. And subscribe to blog feed if you like this post !

2 thoughts on “How To Add Print Button In WordPress Posts”

  1. Hello Omkar, which is the social bookmark plugin for wordpress you are using? And do you really recommend disqus? Heard that it slows down the loading process.3

    Thanks for the tips!

    1. Hi Bava, I am not using any social bookmark plugin. All the social buttons n stuff on this site is small snippet of html code.

      And yeah i recommend disqus. It doesn’t really slow down, or i must say its impact on page load is negligible.

      Use disqus, its really good and has new feature for monetizing as well. I’ll write more about it soon. 🙂

Leave a Reply