peel-away1You’ve probably seen the cool peel away effect in the upper right corner on some websites and wondered how the heck they did that. It certainly caught your attention.

The peel away effect is a great way to get your visitors attention and direct them to some special content or product. It’s fairly easy to implement. You can also place it just about anywhere, not just in upper corner.

The directions will show implementing the peel away in an Artisteer created theme but you can put it into just about any theme or website design.

Download the zip file containing the peel away script and the starter images.

Peel Away Files

Step 1 – Edit peel.js

First we need to configure the peel.js file. For WordPress users, I would suggest that you upload the peel folder to you current theme folder (wp-content/themes/your_current_theme/).

Open this file in your text editor and change lines 1,2,3,8,9 to reflect the URL’s of your site. I’ve used my site as an example…

jaaspeel.ad_url = escape('');
jaaspeel.small_path = '';
jaaspeel.small_image = escape('');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = '';
jaaspeel.big_image = escape('');

Step 2 – Edit the images

There are two images you need to create called small.jpg and large.jpg. There are some sample images included so that you don’t have to do anything right away.

  • small.jpg – The small background image your visitors see before content behind gets revealed. The size is 100 x 100 pixels.
  • large.jpg – The image visitors will see when the corner peels away. The size is 500 x 500 pixels.

Step 3 – Upload files

Now all you need to do is upload the entire peel folder to your website. Remember to put it in the location you specified when you edited the peel.js file.

Step 4 – Add Javascript to header.php

Now open header.php in your text editor and add the following line between the wp_head and the closing head tag…

<script src="<?php bloginfo('template_url'); ?>/peel/peel.js" type="text/javascript"></script>

It should look like this…

<?php wp_head(); ?>
<script src="<?php bloginfo('template_url'); ?>/peel/peel.js" type="text/javascript"></script>

Actually, you can place the peel.js script just about anywhere. The placement in the example above will put the peel away in the upper right corner of the browser. On my site I put it in the beginning of the Sheet-body DIV so that it peels away from the header image.

That’s it!

NOTE: If the images don’t appear and you’re sure that the script was edited properly and everything is uploaded to the proper locations…Then it may be an issue with your webhost. Some webhosts implement “modsec” security rules to protect your site from hackers. Your webhost needs to white list the peel.js script to allow it to run on your site. Hostgator responded in under 10 minutes of submitting a support ticket and had the script working.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.


I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranky, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

  • Jim says:

    Can the peel be used with the custom header changer script as well? I tried it and couldn’t get it to work.

Awesome Themes

Genesis Framework for WordPress

Favorite Random Quotes

“If I had only known, I would have been a locksmith.”

by Albert Einstein