Tag: PunchCard

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:

   <script type="text/javascript" 
   	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/jquery-1.1.1.pack.js">
   	</script>
   
   <script type="text/javascript" 
   	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/punchcard-1.2.pack.js">
   	</script>
   
   <script type="text/javascript">
   PunchCard.icons = "/aercolino/punchcard/icons/";
   PunchCard.styles = "<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/";
   </script>

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:

   <?php 
   ob_start();
   the_title();
   $title = ob_get_contents();
   ob_clean();
   the_permalink();
   $permalink = ob_get_contents();
   ob_end_clean();
   ?>
   
   <div style="text-align:center;" class="pc_MINI"><div class="punchcard">
   	<object>
   	<param name="punchcard" value='{
   		title: "<?php echo $title; ?>"
   		, url: "<?php echo $permalink; ?>"
   		, id : "<?php $pieces = explode( "?", $permalink ); echo $pieces[1]; ?>"
   	}'/>
   	</object>
   </div></div>

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.