Website At 100: Featured Product

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
<strong style="line-height: inherit;">WP e-Commerce</strong> is an e-Commerce plugin provided by Instinct Entertainment, A plugin that provides a <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress</a>Shopping Cart or all Downloadable products like mp3, pdf and etc, now you can turn your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>site into an e-Commerce or Shopping site, WP e-Commerce provided lots of built in widgets that you can drag to show it in your site sidebar like Latest Products Widget, Shopping Cart Widget, Product Specials Widget, Donations Widget, WP-e-Commerce Live Search where you can search products like in Apple site search and it’s amazing isn’t it? And many more, and one thing they forgot is the Featured Products and this time I will share you how to add Featured Products in your e-Commerce site.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
In this tutorial we’re going to use shortcode.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Step 1:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Open <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">functions.php</code> in your theme directory or if you don’t have one please create<code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">functions.php</code> file.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Step 2:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Copy and paste the <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>snippet below and paste it into your<code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">functions.php</code>, this script read all featured products that you’re being stared/featured.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aab2478d5b2307583279" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aab2478d5b2307583279-1">
1</div>
<div data-line="crayon-52aab2478d5b2307583279-2">
2</div>
<div data-line="crayon-52aab2478d5b2307583279-3">
3</div>
<div data-line="crayon-52aab2478d5b2307583279-4">
4</div>
<div data-line="crayon-52aab2478d5b2307583279-5">
5</div>
<div data-line="crayon-52aab2478d5b2307583279-6">
6</div>
<div data-line="crayon-52aab2478d5b2307583279-7">
7</div>
<div data-line="crayon-52aab2478d5b2307583279-8">
8</div>
<div data-line="crayon-52aab2478d5b2307583279-9">
9</div>
<div data-line="crayon-52aab2478d5b2307583279-10">
10</div>
<div data-line="crayon-52aab2478d5b2307583279-11">
11</div>
<div data-line="crayon-52aab2478d5b2307583279-12">
12</div>
<div data-line="crayon-52aab2478d5b2307583279-13">
13</div>
<div data-line="crayon-52aab2478d5b2307583279-14">
14</div>
<div data-line="crayon-52aab2478d5b2307583279-15">
15</div>
<div data-line="crayon-52aab2478d5b2307583279-16">
16</div>
<div data-line="crayon-52aab2478d5b2307583279-17">
17</div>
<div data-line="crayon-52aab2478d5b2307583279-18">
18</div>
<div data-line="crayon-52aab2478d5b2307583279-19">
19</div>
<div data-line="crayon-52aab2478d5b2307583279-20">
20</div>
<div data-line="crayon-52aab2478d5b2307583279-21">
21</div>
<div data-line="crayon-52aab2478d5b2307583279-22">
22</div>
<div data-line="crayon-52aab2478d5b2307583279-23">
23</div>
<div data-line="crayon-52aab2478d5b2307583279-24">
24</div>
<div data-line="crayon-52aab2478d5b2307583279-25">
25</div>
<div data-line="crayon-52aab2478d5b2307583279-26">
26</div>
<div data-line="crayon-52aab2478d5b2307583279-27">
27</div>
<div data-line="crayon-52aab2478d5b2307583279-28">
28</div>
<div data-line="crayon-52aab2478d5b2307583279-29">
29</div>
<div data-line="crayon-52aab2478d5b2307583279-30">
30</div>
<div data-line="crayon-52aab2478d5b2307583279-31">
31</div>
<div data-line="crayon-52aab2478d5b2307583279-32">
32</div>
<div data-line="crayon-52aab2478d5b2307583279-33">
33</div>
<div data-line="crayon-52aab2478d5b2307583279-34">
34</div>
<div data-line="crayon-52aab2478d5b2307583279-35">
35</div>
<div data-line="crayon-52aab2478d5b2307583279-36">
36</div>
<div data-line="crayon-52aab2478d5b2307583279-37">
37</div>
<div data-line="crayon-52aab2478d5b2307583279-38">
38</div>
<div data-line="crayon-52aab2478d5b2307583279-39">
39</div>
<div data-line="crayon-52aab2478d5b2307583279-40">
40</div>
<div data-line="crayon-52aab2478d5b2307583279-41">
41</div>
<div data-line="crayon-52aab2478d5b2307583279-42">
42</div>
<div data-line="crayon-52aab2478d5b2307583279-43">
43</div>
<div data-line="crayon-52aab2478d5b2307583279-44">
44</div>
<div data-line="crayon-52aab2478d5b2307583279-45">
45</div>
<div data-line="crayon-52aab2478d5b2307583279-46">
46</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aab2478d5b2307583279-1">
<?php</div>
<div id="crayon-52aab2478d5b2307583279-2">
    add_shortcode( ‘featured_products’, ‘ryans_featured_products’ );</div>
<div id="crayon-52aab2478d5b2307583279-3">
    function ryans_featured_products( $atts )</div>
<div id="crayon-52aab2478d5b2307583279-4">
    {</div>
<div id="crayon-52aab2478d5b2307583279-5">
        global $post;</div>
<div id="crayon-52aab2478d5b2307583279-6">
        $sticky = get_option( ‘sticky_products’ );</div>
<div id="crayon-52aab2478d5b2307583279-7">
</div>
<div id="crayon-52aab2478d5b2307583279-8">
        extract(shortcode_atts( array(</div>
<div id="crayon-52aab2478d5b2307583279-9">
            ’post_type’ => ‘wpsc-product’,</div>
<div id="crayon-52aab2478d5b2307583279-10">
            ’posts_per_page’ => -1,</div>
<div id="crayon-52aab2478d5b2307583279-11">
            ’post__in’ => $sticky,</div>
<div id="crayon-52aab2478d5b2307583279-12">
            ’orderby’ => ‘date’,</div>
<div id="crayon-52aab2478d5b2307583279-13">
            ’order’ => ‘DESC’,</div>
<div id="crayon-52aab2478d5b2307583279-14">
            ’post_status’ => ‘publish’,</div>
<div id="crayon-52aab2478d5b2307583279-15">
        ), $atts ) );</div>
<div id="crayon-52aab2478d5b2307583279-16">
</div>
<div id="crayon-52aab2478d5b2307583279-17">
        $args = array(</div>
<div id="crayon-52aab2478d5b2307583279-18">
            ’post_type’       => $post_type,</div>
<div id="crayon-52aab2478d5b2307583279-19">
            ’posts_per_page’  => $posts_per_page,</div>
<div id="crayon-52aab2478d5b2307583279-20">
            ’post__in’        => $post__in,</div>
<div id="crayon-52aab2478d5b2307583279-21">
            ’orderby’         => $orderby,</div>
<div id="crayon-52aab2478d5b2307583279-22">
            ’order’       => $order,</div>
<div id="crayon-52aab2478d5b2307583279-23">
            ’post_status’     => $post_status</div>
<div id="crayon-52aab2478d5b2307583279-24">
        );</div>
<div id="crayon-52aab2478d5b2307583279-25">
        $pro_query = new WP_Query( $args );</div>
<div id="crayon-52aab2478d5b2307583279-26">
</div>
<div id="crayon-52aab2478d5b2307583279-27">
        ?></div>
<div id="crayon-52aab2478d5b2307583279-28">
        <ul class=”featured-list”></div>
<div id="crayon-52aab2478d5b2307583279-29">
            <?php</div>
<div id="crayon-52aab2478d5b2307583279-30">
                if ( $pro_query->have_posts() ) :</div>
<div id="crayon-52aab2478d5b2307583279-31">
                    while ( $pro_query->have_posts() ) : $pro_query->the_post(); ?></div>
<div id="crayon-52aab2478d5b2307583279-32">
                        <li></div>
<div id="crayon-52aab2478d5b2307583279-33">
                            <img class=”alignleft featured-image” alt=”<?php echo wpsc_the_product_title(); ?>” src=”<?php echo wpsc_the_product_thumbnail(get_option(‘product_image_width’), get_option(‘product_image_height’),”,’single’); ?>” /></div>
<div id="crayon-52aab2478d5b2307583279-34">
                            <a href=”<?phpthe_permalink() ?>” title=”<?phpprintf(__(‘Permanent Link to %s’,'rys’), get_the_title()) ?>” rel=”bookmark”><?phpthe_title(); ?></a></div>
<div id="crayon-52aab2478d5b2307583279-35">
                        </li><?php</div>
<div id="crayon-52aab2478d5b2307583279-36">
                    endwhile;</div>
<div id="crayon-52aab2478d5b2307583279-37">
                endif;</div>
<div id="crayon-52aab2478d5b2307583279-38">
</div>
<div id="crayon-52aab2478d5b2307583279-39">
                /* Restore original Post Data */</div>
<div id="crayon-52aab2478d5b2307583279-40">
                wp_reset_postdata();</div>
<div id="crayon-52aab2478d5b2307583279-41">
            ?></div>
<div id="crayon-52aab2478d5b2307583279-42">
        </ul></div>
<div id="crayon-52aab2478d5b2307583279-43">
        <?php</div>
<div id="crayon-52aab2478d5b2307583279-44">
    }</div>
<div id="crayon-52aab2478d5b2307583279-45">
</div>
<div id="crayon-52aab2478d5b2307583279-46">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Want to display product from a category?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Thanks to Nicole Brooke for lettings us know for this solution.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aab2478d5be723331503" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aab2478d5be723331503-1">
1</div>
<div data-line="crayon-52aab2478d5be723331503-2">
2</div>
<div data-line="crayon-52aab2478d5be723331503-3">
3</div>
<div data-line="crayon-52aab2478d5be723331503-4">
4</div>
<div data-line="crayon-52aab2478d5be723331503-5">
5</div>
<div data-line="crayon-52aab2478d5be723331503-6">
6</div>
<div data-line="crayon-52aab2478d5be723331503-7">
7</div>
<div data-line="crayon-52aab2478d5be723331503-8">
8</div>
<div data-line="crayon-52aab2478d5be723331503-9">
9</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aab2478d5be723331503-1">
<?php</div>
<div id="crayon-52aab2478d5be723331503-2">
$my_query = new WP_Query( array( ‘post_type’ => ‘wpsc-product’, ‘wpsc_product_category’=>’mycategory’ ) );</div>
<div id="crayon-52aab2478d5be723331503-3">
// “wpsc_product_category” is the custom taxonomy in WP Ecommerce plugin</div>
<div id="crayon-52aab2478d5be723331503-4">
?></div>
<div id="crayon-52aab2478d5be723331503-5">
</div>
<div id="crayon-52aab2478d5be723331503-6">
<?php while( $my_query->have_posts() ) : $my_query->the_post();?></div>
<div id="crayon-52aab2478d5be723331503-7">
    <a href=”<?php echo get_permalink( $product->ID ); ?>” title=”<?php echo get_the_title( $product->ID ); ?>”><h2><?php the_title();?></h2></div>
<div id="crayon-52aab2478d5be723331503-8">
    <img src=”<?php echo wpsc_the_product_thumbnail(get_option(‘product_image_width’),get_option(‘product_image_height’),”,’single’); ?>” alt=”<?php the_title();?>”/></a></div>
<div id="crayon-52aab2478d5be723331503-9">
<?php endwhile; ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Confused?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay let’s define the functions we’re using above.</div>
<ul style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; list-style: square outside; margin: 20px 0px 20px 40px; padding: 0px; text-align: justify;">
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">wpsc_the_product_title():</code> This will simply display the product title.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">wpsc_the_product_thumbnail():</code> This function display the product thumbnail with size parameters.</li>
</ul>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
How to use the shortcode?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
To use the shortcode into your post, page or even in widget area just pastes this one line of code.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aab2478d5c4042439109" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aab2478d5c4042439109-1">
1</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aab2478d5c4042439109-1">
[featured_products]</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
To add parameters, e.g. the <strong style="line-height: inherit;">numbers of post</strong> to display, update the code above to this.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aab2478d5c9909330025" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aab2478d5c9909330025-1">
1</div>
<div data-line="crayon-52aab2478d5c9909330025-2">
2</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aab2478d5c9909330025-1">
[featured_products posts_per_page=10]</div>
<div id="crayon-52aab2478d5c9909330025-2">
/* where 10 is the number of posts to return. */</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
See above for more shortcode parameters.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Troubleshooting</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
If the shortcode didn’t work, visit this page for troubleshooting tips Display Posts in the Sidebar on Specific Category Only – <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress</a>.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Don’t want to get your hands dirty?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Not a problem, here I provided Featured Products plugin from other developer WP e-Commerce Featured Product.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That’s it, its easy right?</div>
</div>

HOW TO GET AND DISPLAY FEATURED PRODUCTS WITH THUMBNAIL IN WP E-COMMERCE PLUGIN

WP e-Commerce is an e-Commerce plugin provided by Instinct Entertainment, A plugin that provides a WordPress Shopping Cart or all Downlo...