PunchCard 1.3 Released Today


(the greeny thing below this line is a punchcard)

How to add a PunchCard to each WordPress post

What you find in the PunchCard Manual is valid in general for any html page and blog system, but if you need a 5 minutes guide for adding a properly formatted PunchCard to each WordPress post, here it is.

  1. download PunchCard 1.2, and extract it to a local folder
  2. locate the file jquery-1.1.1.pack.js and upload it to the remote folder / wp-content / jquery /
  3. upload all the other files to the remote folder / wp-content / jquery / punchcard /
  4. edit the remote file / wp-content / themes / default / header.php,
    locate the </head> tag, add the following code right before it, and then close and save the file:
  5. edit the remote file / wp-content / themes / default / index.php,
    locate the <p class="postmetadata"> tag, add the following code right before it, and then close and save the file:

That’s all.

  • you can repeat step 5. for the file / wp-content / themes / default / single.php
  • if you are not using the default theme, remember to appropriately change the path to the theme folder in the previous steps

Following this fast guide you’ll get a PunchCard at the bottom of each post, like mine. Each PunchCard will reference your post (title and URL).

Feel free to play with the PunchCard stylesheet and setup for customizing your punchcards.

PunchCard 1.2 Released Today

  • Simplified the inclusion of the PunchCard code in a page
  • The configuration of a widget is now by means of a metaboject, and is compliant with XHTML 1.0 Strict
  • Updated the code to use version 1.1.1 of the jQuery library (bundled)
  • The example.html file shows how to put on the same page as many widgets as you like. Each of them can have it’s own style
  • Simplified the stylesheets. Add new styles for colors and shapes of the widgets to the punchcard.css stylesheet (compare with example.html)

(the greeny thing below this line is a punchcard)

PunchCard 1.1 Released Today – updated


  • implemented a different format for widgets configurations: now it’s xhtml compliant


PunchCard 1.0 Released Today – updated

see the PunchCard category for updates


  • A jQuery widget for displaying in a small area a lot of social bookmarking sites, like, digg, technorati… (there are 45 now)
  • Punchcard metaphore
    1. Every button is a tiny mark in a punchcard
    2. When the mouse hovers the punchcard a tooltip pops up
    3. The tooltip shows icon and name of the site
    4. If the user punches the mark, the site opens in a new window, and
    5. The punchcard gets a new hole which stays put


  • You can add as many punchcards as you like to the same page, each one for submitting a different content: the holes belong to that content
  • Easy to add
    1. Use a div element with a ‘punchcard’ class
    2. Set its ‘title’ and ‘id’ attributes to the title and URL of your contentFor example, this is the html code used to display the above punchcard

  • Easy to install
    1. HEAD: reference all the needed scripts and stylesheets
    2. BODY: set the path of the icons folder (relative to your domain)


  • Easy to customize
    Change everything from colors to links, directly in the code and stylesheet files.


  • download all in a zip

© 2017 Notes Log

Theme by Anders NorenUp ↑