Posts Tagged ‘wordpress’

Multiple images on WP e-Commerce product pages Last updated:31 January 2012

Dismayed this morning to find that WP e-Commerce does not support multiple images on a product page unless you pay for the “gold cart” option. Since I’m basically stingy, I did it myself. Here’s how:

I replaced this code in wpsc-single_product.php:

   <?php if ( wpsc_the_product_thumbnail() ) : ?>
      <a rel="<?php echo wpsc_the_product_title(); ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
      </a>
      <?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )
         echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
      ?>
   <?php else: ?>

with this code:

   <?php if ( wpsc_the_product_thumbnail()) ://if the product has any images...
      if (has_post_thumbnail()):?>//...display the thumbnail if there is one...
         <a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?>
         </a>
      <?php endif;
      sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
else: ?>

I’ve used the standard WP function get_the_post_thumbnail() instead of the WP e-commerce function wpsc_the_product_thumbnail() simply to ensure a consistent display of thumbnails. So, I’m displaying the product thumbnail and then using a custom function sb_get_images_for_product() to retrieve any other images associated with the product. This function effectively replaces the gold_shpcrt_display_gallery() function for which you have to pay. I saved sb_get_images_for_product() in the functions.php (located in the theme folder). This function retrieves all images attached to the post and then displays any which are not the thumbnail – we’ve already displayed that. Here’s the code:

function sb_get_images_for_product($id){
   global $wpdb;
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC"));
   foreach ($attachments as $attachment){
      if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $attachment->guid; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
	<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
	</a>
   <?php }		
   }
}

Note that WP 3.3 changed the way images work and messed up the WP e-commerce product images on version 3.8.7.4, with the result that it's possible to have a product without a product thumbnail. This is fixed with WP e-commerce version 3.8.7.6. Howevere, I've added the if (has_post_thumbnail()) condition in the first code snippet above to trap this. Thanks to Brian for flagging this up.

WordPress wrapping shortcodes with p tags Last updated:15 June 2011

Been struggling over the last day or so to stop WordPress wrapping p tags around a shortcode. I’m using Arnan de Gans Events plugin on a WordPress site for a client. One of the pages just includes this shortcode:

[events_show]

This shows a list of events. I’ve configured the plugin so each event is in its own div. And it all works fine, except WordPress insists on wrapping the whole thing in a couple of p tags, making the code invalid, producing this:

<p><div class="event>.........</div></p>

Irritating. The WP shortcode API site says “wpautop recognizes shortcode syntax and will attempt not to wrap p or br tags around shortcodes that stand alone on a line by themselves”. Nooooo.

I finally solved this by adding the following to my functions.php file:

function simonbattersby_shortcode_format($content){
$content = preg_replace('/(<p>)\s*(<div)/','<div',$content);
$content =  preg_replace('/(<\/div>)\s*(<\/p>)/', '</div>', $content);
return $content;
}

add_filter('the_content','simonbattersby_shortcode_format',11);

Points to note – the filter needs to be set with priority 11 (or higher) because otherwise the shortcode won’t have produced its output, and it’ll have no effect. All the preg_replace lines are doing is looking for a <p> tag followed by <div>, with any number of whitespaces between them, and replacing with just a <div> tag. Brute force, inelegant, but it works, and I couldn’t find any other way….

Body classes on WordPress pages Last updated:11 November 2010

I spent hours this weekend trying to apply a different body class to a WordPress page. Specifically, I wanted to apply a different class to WordPress pages as opposed to WordPress posts. Why? Because I wanted to be allow comments to be left on a number of pages which were previously outside WordPress, but I wanted the menu, in line with the rest of my site, to display the submenu for either web pages or photo pages, depending on the actual page displayed. My css controls this by using the body class.

Once I’d worked it out it was straightforward, inevitably. First off, I used the “Custom Fields” functionality to define a custom field called bodyclass, then set this to “web” or “photo” as my css requires. Easy so far.

I then amended header.php using WordPress conditional comments to use the bodyclass value for pages, and to use “blog” as standard for posts. The following statement did the trick here:

<body class="
<?php if (is_page()) echo get_post_meta($post->ID, 'bodyclass', true); 
else echo "blog";?>
">

Integrating WordPress into your website Last updated:29 October 2010

In the last couple of weeks I have incorporated WordPress blogs into two sites, applying the existing site style to the WordPress pages.  You’re looking at one of these right now…

I didn’t particularly want to replace all my existing pages with WordPress pages, I just wanted to use the WordPress functionality to power the blog element. Pretty common requirement I’d have thought. I found this article a useful starting point.

So, if you have an existing site with its own css file and you follow this tutorial exactly then you will end up with two similar css files, your original one and one just for WordPress files called style.css. So then you have to make changes in two places…I didn’t want this so additionally amended header.php to point at my “main” css file. The downside of this is that you can’t update your css file through the WordPress admin module, but that wasn’t at all an issue for me.

It’s pretty much guaranteed that this will break the display of at least some of the wordpress pages, as chances are you won’t have entries in your css file corresponding to the html markup that WordPress generates. The same things will happen of course, if you replace the contents of style.css with your own css.

For example, my main site uses #header and #footer as id names, just as WordPress does, so no changes required here, but I used #maintext instead of #content for the main page content. So you can either amend the html so the WordPress files use #maintext, or add #content to your css.

In this case, you can identify #content just by viewing the various .php files – but some classes and ids are directly generated “on the fly” and don’t appear.  I found the easiest way to do this was to view the actual pages using Firebug, and make additions to my css file accordingly.

This isn’t quite as painful as it sounds as WordPress is pretty consistent about the markup.

I’d guess it took a couple of hours in total to do, including actually amending the contents of sidebar.php. Worth it as all my styling sits in one file.

Stop WordPress adding <br/> tags Last updated:29 October 2010

Been swearing at WordPress this afternoon…

I’ve been trying to transfer an html form, which I had working perfectly on a static html page, onto a WordPress page. WordPress insisted on adding multiple <br/> tags where I didn’t want them. Mutter.

Eventually, after much searching, I identified a parameter within wp-includes/formatting.php, which allows you to disable this irritating feature. If you open formatting.php and find the function wpautop you’ll see this:

function wpautop($pee, $br = 1)

Change this to:

function wpautop($pee, $br = 0)

Save the file and publish it back to your server and that’s it. Works fine in WP2.8.

Note: WP 2.8.3 overwrites formatting.php so this change needs redoing.

Update 24 October 2010

Fed up with repeatedly doing this I’ve developed a WordPress plugin to address the issue. Give it a try and let me know if it works for you.