mccormicky

WordPress+Simplepie+Lightspeed, awesome. In my last post I showed you how to make a featured content gallery with the_post_thumbnail. And in this post I talked about how to use Simplepie to show a WordPress feed on your Webstore.

I’m not going to lie, it requires extra work to use WordPress to enhance your Webstore. But it’s worth it. Because, lets face it, Webstores out of the box need a bit of pizazz.

In my last post I linked to a demo of a featured content gallery in a WordPress site. Snore, everybody has them on their WordPress sites, big deal, right? Well the only reason I built it was to learn how to build the exact same thing for a Webstore custom page using RSS feeds. And thanks to my friend David Auerbach over at dijitalfix.com I know how to code it into custom_page.tpl.php and have it show only on the landing page.

So enough chitter chatter, here’s the plain custom_page.tpl.php

<div style="padding: 15px 25px; line-height: 1.5em;"><?php echo $this->content;  ?></div>
<?php if(isset($this->pnlSlider)): ?>
        <br style="clear:both"/>
        <?php  $this->pnlSlider->Render(); ?>
        <br style="clear:both"/>
<?php endif; ?>

Here’s my code:

<?php if($_GET['cpage'] && $_GET['cpage']=='intro'):?> 

<div id="product-specials">
    <div id="slider">
        <div id="sliderContent">
      <?php foreach ($feed->get_items(0, 12) as $item): ?>
<div class="sliderImage"><?php print $item->get_description(); ?>
<span class="right"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?> </a></span></div>
<?php endforeach; ?>
<div class="clear sliderImage"></div>
 </div><!--slidercontent-->
    </div><!--slider-->
      </div>   <!--product specials-->
        <?php endif; ?>
    <?php echo $this->content;  ?>   

       <?php if(isset($this->pnlSlider)): ?>

<?php  $this->pnlSlider->Name = '';  ?>

<?php  $this->pnlSlider->Render(); ?>  

<?php endif; ?>
  

This line makes sure the gallery only shows on the “Welcome to my Store” custom page:

<?php if($_GET['cpage'] && $_GET['cpage']=='intro'):?> 

If you have re named the Page Key from intro to something else Please make sure to make the changes,OK?

I’ve coded it to show 12 feed items in the gallery. For more or less items, modify this line:

<?php foreach ($feed->get_items(0, 12) as $item): ?>  

A commenter said that they changed this line:

<?php print $item->get_description(); ?>

To:

<?php print $item->get_content(); ?>

and was happier with the results. Try both out.

This line

<?php  $this->pnlSlider->Name = '';  ?>

takes off the title of the Webstore product slider.
If you want it put back in just comment it out or cut it.

Ok, so before you run off and start modifying your custom page templates…
I hope it goes without saying you have to have WordPress installed on your server.
You also have to have Simplepie installed on your server.
Download Simplepie
Just make a folder called inc in your directory root and upload simplepie.inc to it.
Then make another folder called cache. That’s it, Simplepie is now installed.

Insert this code at the top of your index.tpl.php:

<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/store/inc/simplepie.inc';
//full link to your wordpress, either just the site:
$feed = new SimplePie('http://www.mysite.com/wordpress/feed/');
$feed2 = new SimplePie('http://www.mysite.com/wordpress/category/feed/');
function image_from_description($data) {
preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
}?>

I’ve included 2 kinds of feed links there. One links to posts and one links to categories. If you have a Specific category add it in after /category and before /feed/.

There must not be blank space before the < ?php or you'll get that error message "Cannot modify header information,etc" and your store will go down. So make sure there is no blank space, ok? Also if you want to link to a specific category feed and you have a category base name make sure to include that name before the ending /feed/ like this: http://www.mysite.com/wordpress/my-category-base-name/feed/. I'm also assuming you have permalinks turned on. If you don't you should turn them on.

If you want to show your whole blog in the featured content gallery slider doo dad--all the posts, no matter what category they are from, just use the link to the feed. Here are the kinds of rss feeds available. (Not sure about using the RSS .92 feed link)

Without Permalinks!

“RSS 2.0″ http://www.your_domain.com/?feed=rss2″
“RSS .92″ href=”http://www.your_domain.com/?feed=rss”
“Atom 0.3″ href=”http://www.your_domain.com/?feed=atom”

With Permalinks!

“RSS 2.0″ href=”http://domain.com/feed/”
“RSS .92″ href=”http://domain.com/feed/rss/”
“Atom 0.3″ href=”http://domain.com/feed/atom/”

Extra Stuff
Because the RSS feed grabs the link to the post if you don’t take a few extra steps your content gallery feed items will end up linking to back to the blog , not the products in the featured content gallery which, depending on how you want to use the gallery, might defeat your purposes.

Oh what to do? Use a plugin that redirects using Custom Fields!
I pasted this into function.php of my WordPress theme to redirect each post link to a specific product link using a custom field:

//set the options
$key = 'redirect';
$status = 301;

//Hook the link rewrite function into the page_link filter
//This part replaces the page URL, wherever it is outputted, with our custom URL
add_filter('page_link','custom_field_page_link',10,2);
function custom_field_page_link($link,$id) {
	//globalize vars
	global $key;

	$custom_page_url = get_post_meta($id, $key, true);
	if(!empty($custom_page_url)) $link = $custom_page_url;
	return $link;
}

//Hook the redirect function into the template_redirect action
//This part actually does the redirect, if necessary
add_action('template_redirect','custom_field_redirect');
function custom_field_redirect() {
	//globalize vars
	global $wp_query, $key, $status;

	$redirect = get_post_meta($wp_query->post->ID, $key, true);
	if(!empty($redirect) && is_singular()) {
		//And do the redirect.
		wp_redirect($redirect, $status);
	}
}

Thanks to Nathan Rice for this!

How to use it
Each time you want to create a post that is going to be featured in the content gallery make sure to add “redirect”, without quotes, into the custom field Name. The Value area is where you paste the product URL. This will make sure that when the title of the post of the RSS feed item in the gallery is clicked on it will lead customers to the product details page, not the WordPress post.

For information on gallery slider and the javascript files you will need to get it running, go here http://www.serie3.info/s3slider/

About a month ago we relaunched Chillyo.com with a new design – while I was working on it Nsha Club approached me about a new design for their site. I have to admit it I love designing Ecommerce websites. And I really love it when I am allowed to use my 2 favorite tools: WordPress and WordPress E-Commerce. Because I know how to use both tools pretty well by now, I am able to say to a client “I can do that, I can make that happen”.

I also designed a new site for an online Indian grocery using Lightspeed Webstore which went very well (and fast!) only 8 days from start day 1 to finish day which was today.
The client, India Stop Shop loved everything I did and if you’re in the same racket as me you’ll know that doesn’t happen all that often.

Now that WordPress lets you upload an image and crop it and set it as the post thumbnail you can do a lot of cool things with it.
All you have to do is add support for the function into your functions.php file and then use the set thumbnail option in the Post editor to have post thumbnails. I set it up today and then used the new function to build a featured content gallery. I went looking to find the code & I read a lot of tutorials but didn’t find any about using post thumbnails and the Loop to build content galleries, so I made my own.

View a Demo

This is the code to add that adds theme support for the new post thumbnail template tag -paste it into functions.php Template Name: Theme Functions

if (function_exists('add_theme_support')) {
	add_theme_support('post-thumbnails');
	set_post_thumbnail_size(500, 300, true);
}

500 px by 300px in set_post_thumbnail_size is not exactly a thumbnail sized image, but it’s what I needed for the content gallery. Because they look good if the images are that size.You can make it 150 by 150 or any other dimensions you want. You don’t have to set an image size in functions.php but if you do you can override these settings per template by adding this code to your Loop:

<?php the_post_thumbnail(array( 260,200 ), array( 'class' => 'center' )); ?>

That adds a thumbnail image to the post with class “center”. You can name the class anything you want: class=”floopdedoo” if that’s your thing.

You have to add the template tag to every file you want a post thumbnail to show.

It’s not retroactive, adding the tag tonight won’t automatically add post_thumbs to posts you added last week. I could explain it more but that is not the fun part.
For more examples on how to use this new tag, go to this site.

The fun part, building a featured content gallery:

<div id="gallery">
    <div id="slider">
      <div id="sliderContent">
   <?php
query_posts('cat=12');
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderImage"><?php the_post_thumbnail();?><span class="right"><h2 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br/><?php the_excerpt();?></span></div>
<?php endwhile; ?>
<div class="clear sliderImage"></div>	

	<?php else : ?>
		Sorry, but you are looking for something that isn't here.
	<?php endif; ?>
     </div>
   </div>
</div>

So if you’re familiar with WordPress you can see that that is a Loop up there. So you’ll probably say hey wait all my theme files already have a loop in them! So you’ll have to figure out for yourself where you can use this. There’s a lot of documentation on modifying the WordPress Loop and in order to keep this post short I’ll just send you to go look for it:

Yes, I know the markup is a ugly. Not be the best idea to wrap a heading tag with a span tag. You need to clean it up if you have to be 100% standards compliant. For my fast and dirty needs it worked but I’ll clean it up before we go to production. See where it says cat=12? That’s because I wanted to make a featured content gallery out of the posts in category 12.

Here’s code for a content gallery for a Loop with no category designated:

<div id="gallery">
    <div id="slider">
      <div id="sliderContent">
   <?php
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderImage"><?php the_post_thumbnail();?><span class="right"><h2 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2><br/><?php the_excerpt();?></span></div>
<?php endwhile; ?>
<div class="clear sliderImage"></div>	

	<?php else : ?>
		Sorry, but you are looking for something that isn't here.
	<?php endif; ?>
     </div>
   </div>
</div>

Next thing you want to do is download the gallery code from here:

http://www.serie3.info/s3slider/
You should look at the demos and view the page source. They explain how to implement the slider and stuff. If you have trouble with it there are many tips over there.
You get the CSS to style the content gallery from that site,too.

I put the javascript in the footer.php of my theme like this:

<script type="text/javascript" src="/wp-content/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="/wp-content/js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 5000

        });
    });
</script>

Download both templates: Post Thumbnail Featured Content Gallery (104)

Oh, this again?
Yes, this again. You know its important so just be patient with me. In fact, not much is more important when running an online shop than making sure the page where folks will be submitting their credit card numbers is secure.
The 1st thing to do is check if your host sells SSL Certificates. Bluehost and Hostmonster as well as many others not only sell you an SSL certificate they also install it for you. You may need to purchase a Dedicated IP Address as well. The costs are negligible considering having this security will translate into more sales. So cough up some $ for overhead, will you.

If you run an online shop and use WordPress you probably also use WP-E-Commerce. So after you have bought the SSL Certificate go to Products>>Settings>>Admin.
Find this: “The location of the shopping cart: ” In the text field next to this line of text will be a URL that starts with http. Add an “s” to the end of http. Click Update.

Install HTTPS FOR WORDPRESS plugin. Activate.

So here comes the tedious bit. Go to the check out page of your shop. Does the addressbar turn blue? Does the lock icon in the lower right hand of your desktop remain unbroken?
You are all set.
**Sorry, this info is completely Firefox-centric ( dear, dear Firefox…). Ahem. OK, In Safari nothing happens to the addressbar and there is no lock icon in the lower right hand of the location bar unless you have paid a lot of money for an extended validation certificate and then chances are you are not using it on a wp-e-commerce shop. If you use the lower cost certificate just be happy that you get to the secure page without Safari yelling at you that it is not using a valid certificate.

If there is no blue addressbar(Firefox) or Internet Explorer tells you the page contains secure and insecure items and then asks you if you want to show the insecure items,
we will have to view the source of our page. We’re looking for any URL that isn’t https. For me it was the stylesheet of the NextGen Gallery plugin, the stylesheet for the WP-Slimbox2 plugin and its .JS files and the Sociable stylesheet. You can copy the links and paste them into a text file to save for later.

So what I did next was turn off the stylesheet for the Sociable plugin (you can do this on its Options page) and wrote my own style and put it in my main theme stylesheet. One less URL to worry about. Then I went to Plugins>>Editor and I brought up NextGen to edit. I commented out everything to do with loading the stylesheet for the Gallery Plugin like this :

function load_styles() {

		// check first the theme folder for a nggallery.css
		//if ( nggGallery::get_theme_css_file() )
			//wp_enqueue_style('NextGEN', nggGallery::get_theme_css_file() , false, '1.0.0', 'screen');
		//else if ($this->options['activateCSS'])
			//wp_enqueue_style('NextGEN', NGGALLERY_URLPATH.'css/'.$this->options['CSSfile'], false, '1.0.0', 'screen'); 

Then I pasted the link into my header.php file like this ( a good place is right after the link to your theme stylesheet) :

<link rel='stylesheet' id='NextGEN-css'  href='/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />

And now there was one more less URL to worry about.

Next I opened WP-Slimbox2 in the Plugin Editor. I found this:

echo '<script type='text/javascript' src='/blog/wp-content/plugins/wp-slimbox2/javascript/slimbox2.js?ver=2.02'></script>';
		if($options->get_option('resizeEasing') != 'swing') wp_enqueue_script('jquery_easing');
		//wp_enqueue_script('slimbox2_autoload');

Where it says echo I deleted the link. Then it just read:

echo ''></script>';
		if($options->get_option('resizeEasing') != 'swing') wp_enqueue_script('jquery_easing');
		//wp_enqueue_script('slimbox2_autoload');

I pasted the link to the script into my header.php before the < / head> tag.

<script type='text/javascript' src='/blog/wp-content/plugins/wp-slimbox2/javascript/slimbox2.js?ver=2.02'></script>

**Seems like WP-Slimbox2 doesn’t do anything if used with the wp-e-commerce plugin. Its a javascript conflict, I guess.

So that was the hard part. Then I went back to the check out page and refreshed the page. The addressbar stayed blue and the lock icon did not break.
Out of 13 active plugins, 3 had calls to scripts or stylesheets in header.php that were not made https. That’s pretty lucky. You may have many more plugins to edit before your page will remain secure. Hopefully even though this is tedious it will be worth it to be able to have a secure page.

Admin SSL/HTTPS for WP
I used to recommend the Admin SSL plugin for WP. Because it used to turn all links to https and if you clicked away from the secure page it used to redirect back to regular http.
Well, it doesn’t seem to working that well anymore and it can cause a bit of a headache if you de activate it then re activate it depending on your host environment/settings. I’m talking about those endless redirection loops errors that rendered your website inoperable. They were fun. So on one side we have kind of a heavy duty plugin that can render your site useless but that doesn’t do what we need it to do. And on the other side we have a plugin that doesn’t quite do everything we need it to do (transform all links to https)
but will not adversely effect your website. *HTTPS for WORDPRESS didn’t used to be able to redirect back to regular http if you clicked away from the secure page. Now it does.

*This is still true, unfortunately. The plugin cannot redirect links out of SSL. My 1st writings were based on results from only one site – a mistake to make assumptions based on only one site.

After testing on 2 other websites I’ve concluded that the 1st site is the exception, not the rule.

A workaround is to make sure that at least the home link (which is usually added in a theme above the page menu function) or any other links for navigation, like in the sidebar, if you’re not using the wp page menu function, use full paths for links: i.e.: http://www.domain.com/ instead of /page. So that if someone chooses not to check out or send the form and clicks another link to leave the page that link will be http. That’s a definite way to get out of SSL. My further tests showed me I don’t have to make all links use https. Just CSS JS and images need to use https for the browser to show the secure page is ok.

This seems to be ok with at least Firefox,will test in IE. I had tested in IE but not with full path linkage in my menus.

But it still doesn’t cause any problems if you deactivate it. So it gets my current vote.

Note:
If you ever upgrade any of the plugins you edited you’ll have to do this all over again. So save copies of the files you edited so you can find where to edit more easily.
Of course you could say that neither plugin really “works” because you have to do stuff like this to get them to secure a page. But that’s life.