Web Design and Build

Ordnance Survey maps in WordPress Last updated:16 June 2014

We’ve just finished another site which embeds OS Openspace maps into WordPress pages: Dartefacts. This uses a custom post type to record the grid reference of an object, which is then displayed on a home page map showing all the items, custom taxonomy pages and search results. This works really well with several hundred items (so far) displaying on the home page, and is fully responsive as well.

OS map showing multiple points and a pop up balloon linking to a page

We’re really pleased with this site (and so is the client!). This builds on our earlier site Rombalds Riding which displays gpx routes as well as points.

Getting the lowest level category (or custom taxonomy) for a WordPress post Last updated:6 June 2014

Working on a client project which applies a hierarchical custom taxonomy to a custom post type I needed to find the lowest level set for the post. Assuming that there is only one hierarchy applied to the post the following does the trick, for categories (running on the single post page):

$categories = get_categories();
$parents = array();
if($categories){
	foreach ($categories as $category){
		$ids[] = $category->term_id;//read the category ids into an array
		if ($category->parent) $parents[] = $category->parent;//read the parent ids into an array
	}
}		
$low_categories =  array_diff ($ids,$parents);//get the ids which are not parents
$lowest_category = array_shift($low_categories);//read the first id (just in case there's more than one)

If you’re working with a custom taxonomy called, say, ‘classification’ then this becomes:

$post_classifications = get_the_terms($get_the_ID,'classification');
if($post_classifications){
	foreach ($post_classifications as $post_classification){
		$ids[] = $post_classification->term_id;
		if ($post_classification->parent) $parents[] = $post_classification->parent;
	}
}		
$low_class =  array_diff ($ids,$parents);
$classification = array_shift($low_class);

Hope this helps someone else…

Multiple images on WP e-Commerce product pages Last updated:21 April 2014

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:

Original fix, WP3.5, WPEC 3.8.7.6

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 (last tested against WP 3.5):

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",$id));
   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. However, 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.

Updated 21 April 2014, tested against WP 3.9, WPSC 3.8.13.4

Somewhere along the line, in conjunction with core WP galleries, WPEC has changed the way additional images are handled, and the fix above no longer works. Now try making this replacement in wpsc-single_product.php. Change this:

<?php
if ( function_exists( 'gold_shpcrt_display_gallery' ) )
   echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
?>

with this:

<?php
	sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
?>

and add this to your functions.php:

function sb_get_images_for_product($id){
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   
   $atts = get_post_meta($id,'_wpsc_product_gallery');
   
   $attachments = $atts[0];
   
   foreach ($attachments as $attachment){
      if ($attachment<> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment,'post-thumbnail');
		 $full_image_attributes = wp_get_attachment_image_src($attachment,'full');
		 ?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $full_image_attributes[0]; ?>" 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 }		
   }
}

Exporting to csv – ’ replacing ‘ Last updated:2 March 2014

Came across an interesting and frustrating issue last week. A client was exporting selected data from a WordPress database (actually using this plugin), and the user was seeing odd characters in the csv output. The most obvious was the replacement of single apostrophes: ‘ with this: ’.

Clearly an encoding problem but I couldn’t immediately see why. Pages displaying the data were fine, web pages and the database were all set to use utf-8. I finally solved the problem by forcing the encoding of the csv file via:

$text = mb_convert_encoding($text,'windows-1252');

Hope this helps someone else…

Opencart SSL issues with reverse proxy Last updated:28 February 2014

I got involved sorting out an interesting problem this week. A user (not one of my clients) had implemented SSL on his server, but his Opencart secure pages (Login, My Account etc) were displaying without any css being applied. This manifested in part because the href attribute on the secure page was displayed as http:// not https://.

Now, this value is controlled within Opencart by checking the value of $_SERVER['HTTPS'], set by the server. If this value is set, then Opencart sets the href as https://. If it isn’t it doesn’t.

All well and good, but in this case (123-reg) the server is set up with SSL Reversed Proxy & Load Balanced SSL Proxy, and this results in the server setting $_SERVER['HTTP_X_FORWARDED_SSL'] instead of $_SERVER['HTTPS'] – which is why the problem manifests.

The fix is relatively straightforward in that the checks need to be repointed at the new $_SERVER index. This can be fixed by changing /catalog/controller/common/header.php, catalog/model/tool/image.php for basic stores, more files dependent on the payment gateways. However, it’s simpler I think to make a modification to /system/library/request.php. This is straightforward since Opencart creates its own server variable (accessed through $this->request->server, so this can be changed independently of $_SERVER. Here’s a vQmod example:

<modification>
	<id>Reverse Proxy Handler</id>
	<version>for OC 1.5.6</version>
	<vqmver>2.2.1</vqmver>
	<author>Simon Battersby www.simonbattersby.com</author>
	<file name="/system/library/request.php">
		<operation>
			<search position="replace" ><![CDATA[$this->server = $_SERVER;]]></search>
			<add><![CDATA[
				if(isset($_SERVER['HTTP_X_FORWARDED_SSL']) && !isset($_SERVER['HTTPS'])){
					$https = array('HTTPS'=>$_SERVER['HTTP_X_FORWARDED_SSL']);
				} else {
					$https = array();
				}
				$this->server = array_merge($_SERVER,$https);
			]]></add>
		</operation>
	</file>
</modification>

All this is doing is checking if $_SERVER['HTTP_X_FORWARDED_SSL'] is set instead of $_SERVER['HTTPS'], and if it is set, adding the value ‘HTTPS’ to Opencart’s local server setting. If you use this, let me know if it works throughout, as I don’t have access to a reverse proxy SSL server.