Archive for November, 2009
You’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.
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('http://budstechshed.com/free-wordpress-install/');
jaaspeel.small_path = 'http://budstechshed.com/wp-content/themes/cardboard_bts/peel/small.swf';
jaaspeel.small_image = escape('http://budstechshed.com/wp-content/themes/cardboard_bts/peel/small-bts.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://budstechshed.com/wp-content/themes/cardboard_bts/peel/large.swf';
jaaspeel.big_image = escape('http://budstechshed.com/wp-content/themes/cardboard_bts/peel/large-bts.jpg');
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>
</head>
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!
If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.
Disclaimer
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.
There are a lot of reasons visitors to your site may get the feared “404 Error” page. They made a mistake and typed in the URL wrong. Or the page was renamed or deleted. Whatever the case they end with a page that just says “Error 404 -Not Found”. Check out the default “Kubrick” themes 404 page (default 404). That surely doesn’t help your visitor. They may think there’s something wrong with your site and just move on and leave for good.
Instead of just giving your visitor a confusing page with a cryptic message, offer them a solution. I’ll bet most site owners error pages are the default, ugly uninformative error page.
Below are few inspirational 404 pages…
Let’s make an awesome 404 error page
We could use a plugin to redirect our visitor but I would prefer that they know the URL is wrong so they can update their bookmark or link.
Fortunately Wordpress keeps track of everything we’ll need to make a killer 404 page and keep our visitor from getting lost and leaving. The $wp_query->query_vars['name'] variable holds the information we need to make our new 404 page.
If a visitor hits our 404 page we’re going to give them some choices to help them find their way. Here’s what we’ll provide them…
- We’ll show them some posts to choose from that may be related to what they’re looking for.
- We’ll give them a search box to do a site search.
- We’ll give them suggestions to check the URL for spelling.
- We’ll direct them to our sitemap (you have one don’t you?).
- And finally, we’ll direct them back to our home page.
Here’s the code we’re going to be putting in our 404.php file.
Put the following code just above the get_header(); line…
<?php get_header();?>
Like this…
<?php
function bts_strip_attachments($where) {
$where .= ' AND post_type != "attachment"';
return $where;
}
add_filter('posts_where','bts_strip_attachments');
?>
<?php get_header();?>
This function cleans up the query_posts results so that we can get the rest of the info we need for our visitors.
Now put the following code in place of your existing 404 error message…
<h2>Sorry but I can't find the page you're looking for...</h2>
<p>Let me help you find what you came here for:</p>
<?php
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
$posts = query_posts('post_type=post&name='.$s);
$s = str_replace("-"," ",$s);
if (count($posts) == 0) {
$posts = query_posts('post_type=post&s='.$s);
}
if (count($posts) > 0) {
echo "<ol><li>";
echo "<p>Were you looking for <strong>one of the following</strong> posts or pages?</p>";
echo "<ul>";
foreach ($posts as $post) {
echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
}
echo "</ul>";
echo "<p>If not, don't worry, I've got a few more tips for you to find it:</p></li>";
} else {
echo "<p><strong>Don't worry though!</strong> I've got a few tips for you to find it:</p>";
echo "<ol>";
}
?>
<li><p>
<label for="s"><strong>Search</strong> for it:</label>
<form style="display:inline;" action="<?php bloginfo('siteurl');?>">
<input type="text" value="<?php echo esc_attr($s); ?>" id="s" name="s"/> <input type="submit" value="Search"/>
</form></p>
</li>
<li><p>
<strong>If you typed in a URL...</strong> make sure the spelling, cApitALiZaTiOn, and punctuation are correct. Then try reloading the page.</p>
</li>
<li><p>
<strong>Look</strong> for it in the <a href="<?php bloginfo('siteurl');?>/sitemap/">sitemap</a>.
</p>
</li>
<li><p>
<strong>Start over again</strong> at my <a href="<?php bloginfo('siteurl');?>">homepage</a> (and please contact me to say what went wrong, so I can fix it).</p>
</li>
</ol>
For Artisteer Generated Themes
If you’re modifying an Artisteer generated theme you’ll want to place the above code into your 404.php file in the location I’ve indicated below…
<div class="art-BlockContent-body">
// Replace the code in this div with the new code above
<h2 class="center"><?php _e('Error 404 - Not Found', 'kubrick'); ?></h2>
</div>
You might also want to change the text in your block header. Find this bit of code…
<?php _e('Not Found', 'kubrick'); ?>
And replace “Not Found” with some other descriptive text. Remember to keep it within the single quotes.
Now that you’re all done you should have a 404 page that looks something like this…
Now get to work and make a great looking and informative 404 error page for your site.
If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.
Disclaimer
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.
