Creating a slideshow of Featured MarketPress Products

I wanted to create a slideshow of “Featured Products” on a site’s homepage.

This technique can be adapted to suit posts or whatever you want by adapting it’s query etc, however I’m going to limit myself to describing how to do it for products. :slight_smile:

First of all, you can see what we’re going to accomplish on the frontpage here:

If you attempt to do this, you’ll have to get the flexslider script from and include it in your header.php.

Step 1: Figure out how our users are going to select their “featured” products.

Using CustomPress I added a custom field. type: radio buttons. assign to post-type: product. Name: whatever you want. I called it “Feature on homepage”. I then added 2 options under that: Yes and No. When I clicked on save, I got the name of the field: ct__checkbox_00b3. (I originally set it to checkbox, then changed it to radio, that’s why it’s called “ct_checkbox_00b3″:wink:. Yours will be called something else… just make note of it, we’re going to need it later on.

Step 2: Create the query that we’ll need to filter these posts:

In my functions.php file I added the following:

add_image_size( 'slide', 580, 300, true );

function featured_slider(){
global $mp;
//The Query
$custom_query = new WP_Query( array(
'post_type' => 'product',
'post_status' => 'publish',
'meta_key' => 'ct__checkbox_00b3',
'meta_value' => 'Yes'
$slides_count = $custom_query->post_count;
if ($slides_count >= 1) {
<div class="home-slider">
<div class="flexslider">
<ul class="slides">
<?php foreach ($custom_query->posts as $post) {
basic_slider_product(true, $post->ID);
;} ?>
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.home-slider .flexslider').flexslider({
slideshowSpeed: 10000,
controlNav: false,
animation: 'slide'
<div class="region-divider"></div>

The “custom_query” part of this code is where we use the name of the field we created earlier. This is the part you’ll have to change if you want to change the way you select your products. For example you could have your top products there, your newest products, or even your blog posts!

The $slides_count = $custom_query->post_count; if ($slides_count >= 1) { part of the code ensures that the slideshow will not appear in our page unless the user has actually selected some products to be featured.

The contents of the <div class="home-slider"> are… well, your slideshow! :stuck_out_tongue:

Notice the function basic_slider_product in there? We’ll add that in a minute.

After we add all those things, we have to include the script necessary for the actual slideshow. You guessed it… that’s the <script> part of the above code.

Step 3: The actual markup of the individual product slides.

Paste the following in your functions.php file:

function basic_slider_product($echo = true, $product_id, $title = true, $content = 'full', $image = 'single', $meta = true) {
global $mp;
$post = get_post($product_id);

$content = '<li>';
$content .= '<div class="flex-caption">';
if ($title) {
$content .= '<a href="' . get_permalink($post->ID) . '"><h2 class="product_name">' . $post->post_title . '</h2></a>';
if ($content) {
$content .= '<div class="description">';
if ($content == 'excerpt') {
$content .= $mp->product_excerpt($post->post_excerpt, $post->post_content, $post->ID);
} else {
$content .= apply_filters('the_content', $post->post_content);
$content .= '</div>';
if ($meta) {
$content .= '<div class="slider_product_meta">';
$content .= mp_product_price(false, $post->ID);
$content .= mp_buy_button(false, 'single', $post->ID);
$content .= '</div>';
$content .= '</div>';
if ($image) {
$content .= basic_slider_product_image( false, $image, $post->ID );
$content .= '</li>';

if ($echo)
echo $content;
return $content;

function basic_slider_product_image( $echo = true, $context = 'list', $post_id = NULL, $size = NULL ) {
global $id;
$post_id = ( NULL === $post_id ) ? $id : $post_id;
$post_id = apply_filters('mp_product_image_id', $post_id);
$post = get_post($post_id);
$settings = get_option('mp_settings');
$post_thumbnail_id = get_post_thumbnail_id( $post_id );
$size = 'slide';
$temp = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
$link = get_permalink($post_id);
$title = __('View Larger Image &raquo;', 'basic');
$image = get_the_post_thumbnail($post_id, $size, array('itemprop' => 'image', 'class' => 'alignleft product_image_'.$context, 'title' => $title));
//add the link
if ($link)
$image = '<div class="image-wrapper"><a id="product_image-' . $post_id . '"' . $class . ' href="' . $link . '">' . $image . '</a></div>';

if ($echo)
echo $image;
return $image;

You’ll notice that these are 2 functions: One for the product and one for the image.

That’s just for convenience, you can write it however you like.

I think that’s all…

Oh wait! I forgot to tell you how to actually put it in your theme… :stuck_out_tongue:

Go to your template file (front-page.php, index.php or wherever you may want it) and add the following:

<?php featured_slider(); ?>

Well of course you have to theme it afterwards, but that’s easy. :slight_smile:

I hope I didn’t forget to tell you anything important…