A few weeks ago, Harold commented on an earlier post asking how the apple product browser might be incorporated into a wordpress theme. Without wasting anymore time, here is a quick tutorial on how to make the product browser part of your wordpress theme.

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.