To make things easy, I’m going to be basing everything off the original file I put together. All the images and basic structure will be based of these files. If you want to learn more about how it all works, I highly recommend you read my original posting on the subject.

Now, let’s get started.

Step 1 - Download the files

Get the files. You can download them here. Make sure to extract the zip file.

Step 2 - Prep WordPress

In order for the rest of this to work, you’ll want to do a bit of house keeping first. You need to make sure wordpress stores all your images in one folder. To do that, go to “miscellaneous” under the settings potion in the wordpress admin menu.

Make sure the option for storing uploads by month- and year-based folders is not checked.

The reason you want wordpress to store images in one folder is simply because it makes things easier. We’re going to be calling an image using meta-data. If images are organized by wordpress, you might not call the correct image. Also, it’s a lot more work than it’s really worth.

Step 3 - Put everything in its place

In order for wordpress to access the original files (CSS, js & images), you need to put them in your theme’s folder. I find having a “style” folder to put all the common files used by the site, such as CSS , javascripts and site images, to be much easier in terms of organization. However you choose to organize your files, make sure to relink the CSS image links to work with you organization structure. This next part is based on my organization structure, but it can easily be modified to work with any.

Consolidate the css, js and scrollbar_images into a new folder called “style.”

Step 4 - header.php

Link the new CSS files in the header. To do this copy and past the following code into your “header.php” file.

<link href="<?php bloginfo('template_directory'); ?>/style/css/product_browser.css" rel="stylesheet" type="text/css" />

<!-- Main fleXcroll styles for modern browsers-->
<link href="<?php bloginfo('template_directory'); ?>/style/css/flexcroll.css" rel="stylesheet" type="text/css" />

<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/style/js/flexcrollscript.js"></script>

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="<?php bloginfo('template_directory'); ?>/style/css/iphone.css">
<!--<![endif]-->


Step 5 - index.php

“index.php” is responsible for creating the main page of your blog. It aggregates your post title, its content and any other linked information associated with it. I’m assuming you would want to put the product browser on the main page, but in reality, you can put the product browser anywhere in your template.

Open up your theme’s “index.php” The first thing you’ll need to do is set up your loop.

<?php query_posts('post_type=post&meta_key=post_image&posts_per_page=24');
if ( have_posts() ) : while ( have_posts() ) : the_post();?>

<! — loop content — >

<?php endwhile; endif;
wp_reset_query(); //Reset Query ?>

What this does is query 24 of your most recent posts that have a meta-key name “post_image”. I’ll talk about this soon.

Any code you want wordpress to have on each post should go between “…the_post();?>” and “

The final part of the code ends the query and resets it. This is incredibly important. If you forget about this you theme will probably stop working. Don’t forget it.

Step 6- Structure

Now we need to integrate the original product browser file within wordpress. First we’ll want to put everything that isn’t going to repeat, mainly the containing divs and the unordered list . Your new code should look like this:

<div id='product_browser_wrapper'>

<div id='productbrowser' class='flexcroll'>

<div id="absolute_container">

<ul class='fixedwidth'>

<?php query_posts('post_type=post&meta_key=post_image&posts_per_page=24');
if ( have_posts() ) : while ( have_posts() ) : the_post();?>

<!-- loop content -->

<?php endwhile; endif;
wp_reset_query(); //Reset Query ?>

 </ul>

 </div>

</div>

</div>


Step 7 - The repetitive

There’s no point in having a product browser with nothing in it, so we need to get wordpress to put stuff in it.

Replace “<! — loop content — >” with the following code:

<li class="product_image" id="airport_express" style="background: transparent url(<?php bloginfo('url'); ?>/wp-content/uploads/<?php $key="post_image"; echo get_post_meta($post->ID, $key, true); ?>.jpg) no-repeat bottom center;">

<div class="product_label">


<a href="<?php the_permalink(); ?>"><?php the_title();?></a>


</div>


</li>

This part is going to create a list item for each post. Each list item is going to have a background image (defined by the meta-key “post_image”). Within Each list item, a div containing the title of the post as well as the link to the post is created. Then everything is closed.

Your final code should look like this:

<div id='product_browser_wrapper'>


<div id='productbrowser' class='flexcroll'>


<div id="absolute_container">


<ul class='fixedwidth'>


<?php query_posts('post_type=post&meta_key=post_image&posts_per_page=24');
if ( have_posts() ) : while ( have_posts() ) : the_post();?>


<li class="product_image" id="airport_express" style="background: transparent url(<?php bloginfo('url'); ?>/wp-content/uploads/<?php $key="post_image"; echo get_post_meta($post->ID, $key, true); ?>.jpg) no-repeat bottom center;">


<div class="product_label">


<a href="<?php the_permalink(); ?>"><?php the_title();?></a>


</div>


</li>


<?php endwhile; endif;
wp_reset_query(); //Reset Query ?>

</ul>


</div>


</div>


</div>

Step 8 - Making posts

You’re essentially home free at this point. All you need to do is add a meta-tag called “post-image.” In the meta-tag, you need to define the name of the image you want to use.  I decided to you make all my post images jpegs, so I don’t need to to define it as part of the name every time. If you decide not to have your backgrounds as jpegs, you’ll need to remove “.jpg” from the loop

Again, you can see the final product here & download it here.

Legal Mumbo Jumbo

I take no credit for the images used in this example as they were created and are copyrighted by Apple, Inc. I also do not take credit for the scripts that helped make the product browser possible. The script developed by hesid.com is free for personal use (there is a commercial license fee). This download is delivered as is. I will however, be happy to answer any questions you may have.

Be sure to check out Bernie’s Flickr photostream to see more of his cardboard creations. Some of them are really out there, but still really amazing. They’re definitely worth looking at.

The other day I came across these beautiful posters by Juan Carlos Pagan. Everything in them is outstanding. The colors, the illustration and most importantly — the typography. Take a look.

I don’t know about you, but the my least favorite part is having to adjust and readjust lamps depending on the situation. They never seem to work well. All the various hinges just break the ascetics. Not a problem here. That’s because the entire lamp is a giant screw. It’s just brilliant. Take a look

If you want to learn more about the 2010 Olympics, you should definitely head over to their site. You’ll find a lot of great stuff there as well as find out how you can get involved with the Olympics. If that doesn’t really interest you, don’t worry. You’ll also find some awesome downloads.

German Illustrator Adrian Pavic does a beautiful job creating these prints. I love how he manages to capture the essence of each of these masks within a simple flat image. The prints are absolutely stunning.

Make Them Measurable

Know where you started. It’s always hard to stay on track when you don’t know how far you’ve really gone. Keep track of success and failure rates. If something stopped you from achieving your goal, figure out why. Did you just get lazy or was it something that was out of your control?

Quantify

Don’t just say you want more clients; say how many more you want. This will help you know how much further till you reach you goal. If you’re planning on doing something multiple times, say how many times you want to repeat it. Don’t be general. State when you want to achieve your goal by.

Be Accountable

This goes without saying. If you’re not honest about achieving your goals, you won’t get very far. I find that being accountable to someone is always a great motivator to keep going.

Don’t Stretch Too Far

Remember you only have a limited time to achieve your goals, if you’re over ambitious, you’ll get worn out or just loose focus. You’ll stretch yourself too thin and risk not achieving any of your goals. Life always throws unexpected events into our lives, so make sure there is room in your schedule for those times.

Break Them Down

If you’re goal is to build an entire brand identity including website and all, you might be at it for months or even years before you get it just right. That’s not very encouraging if you ask me, but if you begin to break things down into more achievable bite-sized tasks, things get a bit more motivating. Breaking things down might give you a long list of things to do, but when each of those things only takes a few minutes, it becomes more encourage and really hard to stop working. Trust me, it’s fun crossing things off of your to-do list.

Keep It On Your Mind

A lot of people make goals, but they forget about them or they get distracted by other things. Write your goals down and put the list on your desk. Put it somewhere you can always see it. Put it on your phone, on your calendar, on your computer wallpaper, whatever you have to do to stay focused.

Be Motivated

Make a plan to treat yourself when you achieve your goal. Maybe a nice dinner, vacation, a new computer or phone, whatever it is you feel will really motivate you. Just make sure you follow through with it. Nobody likes being cheated, so why do it to yourself?

It isn’t hard to achieve goals when you set them properly. This list of things isn’t just for New Year’s resolutions. You can apply it to anything, so go at it. Make that list of things you want to accomplish and start crossing them off.

My favorite part about this label, is the seamless union of a traditional Jewish type and the modern design used on the label.