If you’ve ever shared a link on your Facebook account, you’ve noticed the nifty Title, Image and Description that get automatically loaded to provide an attractive link. Depending on how your particular theme is built, sometimes you’ll have to cycle through several images, before the actual appropriate post image shows up with your Facebook link.

Here is a bit of code you can add to the head section of the header.php file of your theme (Try adding it before the wp_head(); tag) to guarantee that your theme is optimized for Facebook link sharing. It will also make sure that the appropriate post image is the first one that Facebook looks for.

Code Last Updated June 3rd 2011

This update allows you to set the “Featured Image” as the the image that Facebook shows when your link is shared. Secondly, it allows you to set a default image, in case your post does not make use of a “featured image”. You can use a promo graphic, or your logo for this default, by saving it in your themes directory, in a /images/ directory with the file name as default_icon.jpg. Or you can alter the image directory in the code below

 
<!-- Begin FB Sharing for WP by Chad Von Lind. Get the latest code here: http://vonlind.com/?p=539  -->
<?php
	$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
	$thumb = wp_get_attachment_image_src($thumb[0], false);
	$thumb = $thumb[0];
	$default_img = get_bloginfo('stylesheet_directory').'/images/default_icon.jpg';
 
	?>
 
<?php if(is_single() || is_page()) { ?>
	<meta property="og:type" content="article" />
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:description" content="<?php
	while(have_posts()):the_post();
	$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
	echo apply_filters('the_excerpt_rss', $out_excerpt);
	endwhile; 	?>" />
	<meta property="og:url" content="<?php the_permalink(); ?>"/>
	<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  } else { ?>
	<meta property="og:type" content="article" />
   <meta property="og:title" content="<?php bloginfo('name'); ?>" />
	<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
    <meta property="og:image" content="<?php  if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  }  ?>
<!-- End FB Sharing for WP -->

Be Aware: Updating your code will not have immediate effects with Facebook, as Facebook will cache your shared link. It could take up to a few hours before the shared link would work properly. You can try to share one of your links that has not been shared before, to test that it is working proper.

Coming soon: At the moment, if you don’t have an image set as “featured”, it will just default to your chosen default image in your theme directory. I’ll be adding the ability for it to check for the first image used in the post if there is no featured image. So the order will be 1) Featured, if not 2) First Image in post, if not 3) Use default image in theme directory.

<?php
    $thumb = get_post_meta($post->ID,'_thumbnail_id',false);
    $thumb = wp_get_attachment_image_src($thumb[0], false);
    $thumb = $thumb[0];?>
 
   <img src="<?php  echo $thumb; ?>" alt="" />

Combine this with the Timthumb script for control over image size. IE:

 
<?php
   $thumb = get_post_meta($post->ID,'_thumbnail_id',false);
   $thumb = wp_get_attachment_image_src($thumb[0], false);
   $thumb = $thumb[0];
  if ( has_post_thumbnail() ) { ?>
    <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumb; ?>&amp;w=150&amp;h=150&amp;zc=1"
        alt="<?php the_title(); ?>" width="150" height="150" />
<?php } ?>

Not Recommended, But Available Option

This will output the URL to an image with the size predefined by ‘post-thumbnail’ in your functions file when registering the functionality for post images.

<?php
    $thumb = get_post_meta($post->ID,'_thumbnail_id',false);
    $thumb = wp_get_attachment_image_src($thumb[0], 'my-custom-size', false);
    $thumb = $thumb[0];
    echo $thumb; ?>

The above code is referencing ‘my-custom-size’, which we can see below as being 405×180. Typically it is not advised to use these predefined sizes as it will overload your uploads directory with additional sizes, and it puts strain on your server when uploading images. Better to use the above method with the Timthumb script to get an exact image size, while making use of image caching.

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
	add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails
	add_image_size( 'my-custom-size', 405, 180, true );
}

Here is a solution to prevent revisions from being created, as well as removing all revisions from your database.

Prevent Revision Creation

Open wp-config.php and add this to the very bottom of the file, before the php closing tag.

define('WP_POST_REVISIONS', false);

This completely turns off any revision creation. If you’d like to restrict revision creation to a set amount per post, you can change ‘false’ for the number of revisions you’d like stored.

Remove All Revisions From Database

Open up your database in phpmyadmin and run this SQL Query.

DELETE FROM wp_posts WHERE post_type = "revision";

And now you’ll have a more tidy database.

• Resizeable Background Image with jQuery
• 15 Wicked CSS Tricks
• Build a jQuery Interactive Map
• Better Way To Register the WP Sidebar

If you’re like most every other developer, the first thing you want to get rid of is the “says” that follows the authors name. Now we can do it, without having to set the CSS to display none.

01. In your theme directory, open up functions.php. If you don’t have this file, go ahead and create one.

02. Let’s create the function ‘mytheme_comment‘ and paste it into our functions.php file.

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
      <?php comment_text() ?>
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }
?>

Looking at this code, you can see exactly what you want to do to style your comments accordingly. After you’re happy with how you want it, the next step is to create the callback from our ‘wp_list_comments’ in the comments.php file.

03. Open up comments.php in your theme directory, and search for wp_list_comments. Control + F should make short work of that.

The default theme has this exact call:

<?php wp_list_comments(); ?>

So we’ll just use the function name that we created in step 2 (mytheme_comment), and call it as a variable:

<?php wp_list_comments('callback=mytheme_comment'); ?>

And now, we’ll see the styling reflected in our comments!

Separate Comments From Trackbacks

And for another good tip, you should separate your comments from your trackbacks. It’s just good manners.

In your comments.php file you can create two lists, and call the loop twice. Only for each loop, you can specify which type of comment/trackback is called. Example:

	<h3 class="comment_title">Comments</h3>
		<ol class="commentlist">
            <?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
		</ol>
 
	<h3 class="trackback_title">Trackbacks</h3>
		<ol id="pings" class="trackback">
			<?php wp_list_comments('type=pings'); ?>
		</ol>

For some complete code, and even some jQuery for a toggle hide switch on the trackbacks, be sure to read the article by Curtis Henson.

Ever since I’ve become friends with jQuery, I’ve found that using # inside an anchor href has become occasionally overly jealous and sometimes outright psychotic. After these past incidences, which usually fall in line with using fun stuff like localScroll and scrollTo, I’ve decided to tell # to # sand, and strictly go with javascript:; inside my href.

As # works as an anchor reference point, for the top of your page, you can imagine it may get in the way of content sliders and other plugins and scripts that make use of a #’d href.

Using TimThumb will require the use of WP Custom Fields.

01. Setting Up The Script

Lets grab the TimThumb.php source code, and save it to our theme directory.

To keep things organized, lets save it in a scripts directory in our theme.

yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php

Now create a new directory inside of scripts, and name it “cache”

yourdomain.com/wp-content/themes/your-theme/scripts/cache/

Make sure that both directories /scripts/ and /cache/ are set to 755 so they’re writable by the server.

02. Adding The Call To Our Theme Template

Depending on whether you use home.php or index.php, open the appropriate template file up, and lets find The Loop. Look for the calll to the post title, and lets insert the call somewhere below the title, or meta information.

I’m presenting you with 3 options for the call. You can pick which one might suit you best.

Option 01 – Show Image Only

        <?php // This will show only the image. Alter the width and height (in both places) to your needs. ?>
 
<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb">
		<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
	</div>
<?php } ?>

Option 02 – Show image, and link image to post

        <?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
 
        <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb">
		<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
	</div>
<?php } ?>

Option 03 – Show image and link image to URL of your choice. Requires additional custom field of “imglink”. Could be used for outgoing links, or linking a thumb to a full version of the image. This option would work best inside of your single.php template.

<?php 	// This will show the image and link it to anything you place into another custom field of "imglink".
		// Alter the width and height (in both places) to your needs.
  ?>
 
<?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
	<div class="postthumb">
		<a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>"  /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?>
	</div>
<?php } ?>

03. Making Use of Custom Fields

1. In your post go ahead and upload your image.
2. In the “LINK URL” input, highlight and copy the entire address of the image you just uploaded.
3. Close the image manager, and open the Custom Fields box down below.
4. For the key enter thumb.
5. For the value, paste in full address of the image we just copied. ie: http://your-domain.com/wp-content/uploads/2008/02/my-image.jpg
6. *For Option 03 – if you want to link the thumb to a url, you’ll need to add a new custom field with a key of “imglink” and paste in the URL as the value. See example below.

Need Help?

Please visit the Timthumb Support Forums.

If so, here are a couple alternatives.

01. XRAY Bookmarklet

My first choice, is to make use of XRAY. It is just a javascript that allows you to click any block element on a page, and it gives you a list of details for that element.

Try it. Just click the XRAY button, then click anywhere on this page. It’ll highlight the block, and give you details like the element id, width, height, position, margin, padding and more.

XRAY

For best use, right click the XRAY button, Select “Bookmark this link” and save it to your link toolbar. Or just drag the button to your toolbar. That way it’ll always be a handy button up top, for any page you’re viewing.

02. MeasureIt Addon

The MeasureIt Firefox Addon is handy as it allows you to click and drag to manually measure a block element.

03. Web Developer Toolbar

If you aren’t using this Firefox Addon, then you really need to be. On the WebDev toolbar, click Information » Display Element Information.

Much like XRAY, this allows you to click an element and get a list of info for it. Keyboard shortcut is Control + Shift + F.

Anyone else have any suggestions for measuring page elements?

Parlez-vous français? Voici une traduction Google.

Magento Wiki offers the help of adding Lightbox2 to your Magento install, for those not interested in the Shadowbox Modal.

Step 01

Download Shadowbox. Go with the second download option. Just the files necessary to run shadowbox.

Shadowbox has been recently upgraded and restructured. This tutorial used the previous Shadowbox version structure. I’ve compiled Shadowbox how it used to be and created the proper directory structure as well. Please use this download link for your Shadowbox files.

Shadowbox for Magento.

As you are using this tutorial to add Shadowbox to a site that obviously is for commercial purposes, you’ll need to buy the Shadowbox Commercial License for $20.

Assuming that magento is installed in your root directory (yourdomain.com) -

From the root open the /js directory

yourdomain.com/js

Inside of the /js directory create a new directory named “sb” which is short for shadowbox

yourdomain.com/js/sb

Inside of /sb lets upload the 3 shadowbox directories /build, /images, and /src. So now on the server we should have:

yourdomain.com/js/sb/build
yourdomain.com/js/sb/images
yourdomain.com/js/sb/src

Step 02

Lets open your template directory and drop in the CSS file that comes with Shadowbox.

This tutorial will make use of the default template. So if you are not using the default template, you’ll need to exchange the default template name for your own template directory name.

The default template can be found here:

yourdomain.com/skin/frontend/default/default/

So now, you should have the CSS file named shadowbox.css in this directory:

yourdomain.com/skin/frontend/default/default/css/shadowbox.css

The Shadowbox CSS file can be found in /build/css/ of the shadowbox zip file that you downloaded.

Step 03

Lets open your template directory and drop in the images used by Shadowbox. Open your default template, open the images directory, and create a new directory named “sb”. Drop in the images that are found in the images directory of the Shadowbox download. So now you should have

yourdomain.com/skin/frontend/default/default/images/sb/loading.gif
yourdomain.com/skin/frontend/default/default/images/sb/loading-light.gif
yourdomain.com/skin/frontend/default/default/images/sb/overlay-85.png

Step 04

Now we need to modify the Shadowbox Javascript. Open up the javascript found at:

yourdomain.com/js/sb/src/js/shadowbox.js

Around line 81, lets replace

loadingImage:       'images/loading.gif',

with

loadingImage:  SKIN_URL + 'images/sb/loading.gif',

And around line 131 lets replace

overlayBgImage:    'images/sb/overlay-85.png',

with

overlayBgImage:    SKIN_URL + 'images/sb/overlay-85.png',

Step 05

Now lets modify the Magento template files and set them to use Shadowbox. Open up yourdomain.com/app/design/frontend/default/default/layout/page.xml

Around line 42, look for

<action method="addJs"><script>mage/cookies.js</script></action>

And insert this right after

<action method="addJs"><script>sb/src/js/lib/yui-utilities.js</script></action>
<action method="addJs"><script>sb/src/js/adapter/shadowbox-prototype.js</script></action>
<action method="addJs"><script>sb/src/js/shadowbox.js</script></action>

Scroll down around line 49 and look for

css/menu.css

After that, insert this:

css/shadowbox.css

Save and close.

Now lets open up yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml

In version 1.0 (1.1.1 below)
Around line 51 find this code:

<?php foreach ($this->getGalleryImages() as $_image): ?>
		 <li>
		   <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
		</li>
	  <?php endforeach; ?>

And replace it with this:

<?php foreach ($this->getGalleryImages() as $_image): ?>
		 <li>
		   <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
		</li>
	  <?php endforeach; ?>

version 1.1.1

Around line 51, replace this:

51
52
53

    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
    <?php endforeach; ?>

with this:

51
52
53

    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
    <?php endforeach; ?>

This just adds the rel=”shadowbox[rotation]” call to the anchor tag, to let shadowbox know that we are summoning its powers. Save and close.

Now lets open the file yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml

Lets replace

<script type="text/javascript">
	var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
	var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
</script>

With this

<script type="text/javascript">
	var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
	var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
	var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';
</script>
<!-- Added Shadowbox -->
<script type="text/javascript">
window.onload = function(){ Shadowbox.init(); };
</script>
<!-- end Added Shadowbox -->

Save and close.

Enjoy The Fruits

And now shadowbox should be fully functional for your product images. If you run into any problems, feel free to post questions or comments here.

And don’t forget to tip the man for his Shadowbox work!

Here is how I added syntax highlighting to a specific file type that is not listed by default in Dreamweaver.

First, I noted what language the template file is made up of. Even though the file extension is .phtml, I know that the actual language is php.

Second, I opened the document type config file in the Dreamweaver installation folder. This should be found in this general area.

C:\Program Files\Adobe\Dreamweaver CS3\Configuration\DocumentTypes\MMDocumentTypes.xml

I opened the file with Notepad, and hit Control + F, and entered winfileextension=”php as my search query. This jumped me down to where the list of file types that use a specific syntax highlighting. My list appeared as winfileextension=”php,php3,php4,php5″.

All I did was add a comma and phtml to the end of that list:

winfileextension=”php,php3,php4,php5,phtml”

Then I saved the file and restarted Dreamweaver. Now any file with the .phtml file extension receives the same syntax highlighting as a php document.

Before and After