The latest release contains a suite of functions (my little contribution) to help you customise how pagination is displayed in your WPSC templates.

You can find an in-depth look at these functions and how to use them in the WP e-Commerce Documentation.

Below are some quick examples of what you can do…

Basic paging

Some fairly standard paging with linked page numbers, previous and next links, and arrow links to take to to the first and last pages. You can customise the text that is used for previous, next, first and last links.

<?php echo wpsc_first_products_link( '&laquo;', true ); ?>
<?php echo wpsc_previous_products_link( 'previous', true ); ?>
<?php echo wpsc_pagination(); ?>
<?php echo wpsc_next_products_link( 'next', true ); ?>
<?php echo wpsc_last_products_link( '&raquo;', true ); ?>

Limit the amount of pages

You can limit the amount of page links to show at one time. The above example shows what happens if there are 10 pages of products, but only showing 7 page links at a time. Notice also the text describing which page you’re on and that the previous and first links are greyed out when not applicable – you can also choose to hide them instead of showing inactive links.

Page <?php wpsc_showing_products_page(); ?>:
<?php echo wpsc_first_products_link( '&laquo;', true ); ?>
<?php echo wpsc_previous_products_link( 'previous', true ); ?>
<?php echo wpsc_pagination( 7 ); ?>
<?php echo wpsc_next_products_link( 'next', true ); ?>
<?php echo wpsc_last_products_link( '&raquo;', true ); ?>

Total number of products

There is a function to easily display the total number of products. You can detect if the category has multiple pages and if it doesn’t display something like this instead.

<?php if ( wpsc_has_pages() ) : ?>
   <!-- Insert pagination for multiple pages -->
<?php else : ?>
   Showing <?php echo wpsc_total_product_count(); ?> products
<?php endif; ?>

Number of products showing

You can display an indication as to which products are showing depending on which page you’re viewing.

Showing <?php echo wpsc_showing_products(); ?> of <?php echo wpsc_total_product_count(); ?> products:

What next?

The new WP e-Commerce default themes contain examples of pagination so hop into your templates and create some nice pagination…

This managed to get me part of the way there but the permalinks included “index.php” before the custom permalink setting.

Hunting around I found this blog post by Adam Christie in which he documents a rewrite.script for WordPress – and it works! I have provide the code below for your reference.

RULE_0_START:
# get the document root
map path into SCRATCH:DOCROOT from /
# initialize our variables
set SCRATCH:ORIG_URL = %{URL}
set SCRATCH:REQUEST_URI = %{URL}
 
# see if theres any queries in our URL
match URL into $ with ^(.*)\?(.*)$
if matched then
set SCRATCH:REQUEST_URI = $1
set SCRATCH:QUERY_STRING = $2
endif
RULE_0_END:
 
RULE_1_START:
# prepare to search for file, rewrite if its not found
set SCRATCH:REQUEST_FILENAME = %{SCRATCH:DOCROOT}
set SCRATCH:REQUEST_FILENAME . %{SCRATCH:REQUEST_URI}
 
# check to see if the file requested is an actual file or
# a directory with possibly an index.  don’t rewrite if so
look for file at %{SCRATCH:REQUEST_FILENAME}
if not exists then
look for dir at %{SCRATCH:REQUEST_FILENAME}
if not exists then
set URL = /index.php?q=%{SCRATCH:REQUEST_URI}
goto QSA_RULE_START
endif
endif
 
# if we made it here then its a file or dir and no rewrite
goto END
RULE_1_END:
 
QSA_RULE_START:
# append the query string if there was one originally
# the same as [QSA,L] for apache
match SCRATCH:ORIG_URL into % with \?(.*)$
if matched then
set URL = %{URL}&%{SCRATCH:QUERY_STRING}
endif
goto END
QSA_RULE_END:

But what if you want the link to redirect to a page instead of triggering this popup? You just need to make a small change to your checkout template. Here’s what you need to do…

In The Admin

In the admin, instead of specifying terms and conditions text we are going to enter a URL. Make sure your URL is a full path including ‘http://’ as this will make it easier to detect wether the content is a URL or plain text.

Changes in your WP e-Commerce Theme

Your WP e-Commerce theme files usually reside in the ‘wp-content/uploads/wpsc/themes/your-theme’ directory. To change the terms and conditions link to link to another page rather that popup you will need to edit the ’shopping_cart_page.php’ file.

In this file look for the terms and condition code. It will be near the bottom and should look a bit like this:

297
298
299
300
301
302
303

<?php if(get_option('terms_and_conditions') != '') : ?>
<tr>
   <td colspan='2'>
      <input type='checkbox' value='yes' name='agree' /> <?php echo TXT_WPSC_TERMS1;?><a class='thickbox' target='_blank' href='<?php echo get_option('siteurl')."?termsandconds=true&amp;width=360&amp;height=400'"; ?>' class='termsandconds'><?php echo TXT_WPSC_TERMS2;?></a>
   </td>
</tr>
<?php endif; ?>

What we will do is change this code so if the contents of your terms and condition is a link (beginning http://) it will write a link to that page rather than a popup. The new code with the if statement should look like this:

297
298
299
300
301
302
303
304
305
306
307
308

<?php if ( get_option('terms_and_conditions') != '' ) : ?>
<tr class="terms">
   <td colspan='2'>
      <input type='checkbox' value='yes' name='agree' /> <?php echo TXT_WPSC_TERMS1;?>
      <?php if ( substr(get_option('terms_and_conditions' ), 0, 7) == 'http://' ) { ?>
         <a target='_blank' href='<?php echo get_option('terms_and_conditions'); ?>' class='termsandconds'><?php echo TXT_WPSC_TERMS2;?></a>
      <?php } else { ?>
         <a class='thickbox' target='_blank' href='<?php echo get_option('siteurl')."?termsandconds=true&amp;width=360&amp;height=400'"; ?>' class='termsandconds'><?php echo TXT_WPSC_TERMS2;?></a>
      <?php } ?>
   </td>
</tr>
<?php endif; ?>

And that’s all there is to it.

This update fixed a pretty major bug which prevented the list showing the correct branch of subpages when the start depth was greater than 1 (secondary level pages).

Now this is fixed you’ll be able to display a list of only tertiary level pages – Useful if you have a site with a horizontal navigation with drop down menus for secondary level navigation, and want to show and subpages of the secondary level as a list in your sidebar.

What’s more the plugin now includes a widget so you can easily add a list of subpages into your sidebar.

Widget Examples

The following configuration will display a list of secondary and tertiary level pages (depths 1 to 2) for the currently selected primary navigation item. The list of pages will show for all pages that are subpages (or sub-subpages) of that primary page.

The widget below will only display the tertiary level (depth 2) of navigation for subpages of the currently selected secondary level page.

I have been using Adobe products for many years. From my early days in design I was using Photoshop and Illustrator, and also using Macromedia’s web design products like Flash, Dreamweaver and Fireworks which were then acquired by Adobe in 2005.

In recent years I have found the the quality of the Adobe products, particularly their web development applications, Flash, Dreamweaver and Fireworks, has been slowly getting worse.

I can’t put my finger on exactly when things started to go downhill but I have a feeling it was around them time they introduced a JavaScript API into their products. The benefit of the API is that it allows users to create add-ons for Adobe applications that can automate common tasks or create new edit panels etc, enhancing the application’s functionality and streamlining workflow. A nice idea.

Now, the JavaScript API may not be to blame at all, but how many times do so see a little ‘x’ in your web browser indicating that there is a JavaScript error on the page? And how many times has your browser hung or crashed due to a timeout error caused by a JavaScript? I can’t help thinking that the JavaScript API may be the reason the my Adobe applications seem to be less stable and crash more often than they used to. I might be wrong, this is just how it feels as a long-time user of the products.

So, back to the dialog box…

Does this mean that Adobe have now finally recognised that the stability and quality of their products needs to be addressed?

Is spying on our attempts to use their software (with permission, obviously) an indication how desperate they are to act on their users’ feedback to improve the robustness of their faltering web suite? If this is what it takes to gather enough useful data for them to be able to get things back on track then count me in.

Of course it could be that they only want to study user behaviour so they can improve the UI of their products but I seriously hope that one of Adobe’s main objects is to use the data to gather more accurate details about crashes and errors so they can focus on making their applications rock solid and stable.

In the meantime, I know there are now many other high quality affordable or open source web development applications available that I could turn to, but I don’t want to. I like using Dreamweaver. I like using Flash. I like using Fireworks.

I really hope that any data Adobe manages to collect through this program helps them resolve the issues with their products. If they are able to figure out why Fireworks crashes on me incessantly throughout the day I will be much happier (and much more productive).

Further Reading

• Adobe Product Improvement Program
• An open letter to software developers RE Adobe Fireworks
• Extending Fireworks (using the JavaScript API)
• Extending Dreamweaver (using the JavaScript API)
• Extending Flash (using the JavaScript API)

In OS X, for some reason the following javascript was not positioning the FireFox browser window to the top left of the screen.

window.moveTo(0, 0);

Solution

Not sure what causes the problem but it seems to work find if you position the window 1 pixel lower.

window.moveTo(0, 1);

If you need to keep the original query, it is suggested you create you second loop by creating a new query object.

<?php $my_query = new WP_Query('category_name=special_cat&posts_per_page=10'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
   <!-- Do special_cat stuff... -->
<?php endwhile; ?>

This works fine, but if you use more template tags after this loop, they display the content from the last post in the $my_query loop. So, if you want to reference the original loop how should you go about it?

What’s going on?

In the above example the $my_query variable is an instance of the WP_Query object containing the results of the custom query.

The ‘while’ loop iterates through all the results of our query. Each time $my_query->have_posts() is called it checks wether the next post in the loop exists and if it does the loop continues to run.

For each post in the loop the $my_query->the_post() function is called. This populates the global $post variable with the post data which can then be accessed directly through the $post variable or using WordPress template tags like the_title() and the_content();

After the $my_query loop has finished the global $post variable remains populated with the last post from the $my_query loop so any template tags used will use this post’s data, not the data from the post before we started our custom loop.

So what should we do?

Because we created a new query $my_query, the previous query still exists in the main $wp_query variable, so all we have to do is repopulate the $post variable using $wp_query.

<?php $post = $wp_query->post; ?>

Could this be made more easy?

Not really, but maybe a WordPress template tag to do this should be added to WordPress core – maybe somthing like refresh_post(). This can then be documented in the Codex to provide an ‘official’ way of handling multiple loops.

What do you think?

…then I stumbled across the WP e-Commerce XML Sitemap plugin by Lee Willis.

The plugin worked well with WP e-Commerce 3.7.5 (the latest version) apart from a few minor issues. I got in touch with Lee and suggested a few tweaks/fixes – he has just released an updated version:

• Unpublished products are now not added to sitemap.
• Is now compatible with WordPress installations with custom table prefix.

You can download the latest version here…

WP e-Commerce 3.7.5 adds the following styles to the body tag:

• wpsc
• wpsc-home
• wpsc-single-product
• wpsc-single-product-id
• wpsc-category
• wpsc-category-id
• wpsc-group-id
• wpsc-shopping-cart
• wpsc-transaction-details
• wpsc-user-account

These extra classes will give you more flexibility when designing themes for WP e-Commerce.

Where are these classes included?

wpsc
Included in every WP e-Commerce page.

wpsc-home
Included on the main WP e-Commerce shop page.

wpsc-single-product & wpsc-single-product-id
Included on single product pages. The wpsc-single-product-id class allows you to set css rules for a single product based on the product id.

wpsc-category & wpsc-category-id
Included on category and individual product pages. The wpsc-category-id class allows you to set css rules for different categories. As these classes are also applied to single product pages, if a product appears in more than one category you could style a product page differently depending on which category you click through from.

wpsc-group-id
Included on category and single product pages. The group id is set based on the group in which the current category resides.

wpsc-shopping-cart
Including on the shop cart checkout page.

wpsc-transaction-details
Including on the transaction details page displayed after a successful purchase.

wpsc-user-account
Including on the WP e-Commerce user account pages.

Ideas how to use these classes in your WP e-Commerce theme…

1. Style a special product differently using wpsc-single-product-id.
2. Style products in a sale category to display differently using wpsc-category-id.
3. Create a group for brands with brands as sub-categories and differentiate this view from your standard product categories using wpsc-group-id.

Fortunately the application is now an open source project available on Google Code and it was only a short matter of time before someone came up with a fix – thank you Howard.

No idea why or how this happened.

Seemed to happen not long after upgrading to Snow Leopard. Had a search around and found other people had been experiencing blurry/pixelated icons too. Also, this thread on the Apple Support web site.

Anyway, I just dragged the Safari application into the dock again and that fixed it for me – weird…

Nikki’s Debut EP “Now or Never” is available to download…

Nikki gigs regularly in Oxford, London and the surrounding areas… She is currently working on her second EP which will be released later in 2009 (fingers crossed). The first one, ‘Now or Never’ is available NOW on iTunes and Amazon:

• Buy from iTunes
• Buy from Amazon.co.uk

For updates and forthcoming gigs, you can follow Nikki at nikkiloy.com, Facebook and Twitter.

PS: She’s also available for booking for your event and I can assure you she’s great! (I’m she she won’t mind me saying)

One thing I think should be changed to bring the product edit screen in-line with the WordPress post/page editing layouts is the separation of the Categories and Tags boxes.

How things are…

The WordPress post/page edit screen looks like this:

Currently, editing Categories and Tags in WP e-Commerce looks like this:

How I think things should be…

A few times I have run into problems with the current WP e-Commerce categories and tag box in that if I have long category names, they wrap very badly on smaller screens where there isn’t much space – the tags filed squashes everything over to the left.

I propose that the categories and tags box be separated into a similar layout to the way WordPress does things. This would add UI consistency throughout the admin and the boxes would be expandable allowing you to easily minimise the tags box if you only use it infrequently.

So you would end up with something like this:

It is essentially a mirror version of the panels in the main WordPress admin but with some of the extra functionality removed.

In WP e-Commerce it is possible to have multiple types of category grouping such as Categories and Brands. In this scenario I would suggest that the scrolling categories area in the Categories box (illustrated above) is duplicated so that there are two scrolling areas – one for categories and one for brands.

So, what do you think?

That’s just my opinion so please vote and leave your comments below and who knows, if enough of you like my idea then it might find it’s way into a future release of WP e-Commerce.

The ‘Trash’ functionality will work in the same way as your Mac or the Recycle bin on Windows – when you delete an item, it will be moved to the Trash from where it can be recovered or permanently deleted.

The functionality is currently being tested out with comments and hopefully if it works well will be roled out to other WordPress assets like post, pages and links.

So no more impulse deleting of something, then wishing you hadn’t… Phew!

One plugin I recommend that everyone should add to their WordPress installation is the Google XML Sitemaps plugin.

This plugin will automatically generate an XML sitemap of your posts and pages and ping supporting search engines to notify them that the sitemap has been updated.

But the best thing about this plugin for other plugin developers is it provides hooks so you can ‘borrow’ it’s functionality so that your plugin can add additional pages into the XML sitemap that is generated.

So if you’re a WordPress plugin developer, read on…

How to add pages to the XML sitemap

To illustrate how to implement the XML Sitemaps hook, I will base the example on the WP e-Commerce plugin (please note, I originally implemeted this with version 3.6.12 of the WP e-Commerce plugin so it may not work with more recent versions). We will create a function that will add all of this plugin’s product pages into the XML sitemap produced by Google XML Sitemaps.

The Google XML Sitemaps plugin provides the hook “sm_buildmap” which gets triggered whenever the plugin re-builds the sitemap file. We are going to create a function “wp_ecommerce_sm” which will get called by this hook.

So, here’s the function code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function wp_ecommerce_sm() {
   global $wpdb;
   if ( class_exists('GoogleSitemapGenerator') ) {
      $generatorObject = &GoogleSitemapGenerator::GetInstance();
      $sql = "SELECT DISTINCT * FROM `" . $wpdb->prefix . "product_list` WHERE `active` IN('1') ORDER BY `id` DESC";
      $product_list = $wpdb->get_results($sql, ARRAY_A);
      foreach ( $product_list as $product ) {
         $purchase_link = wpsc_product_url($product['id']);
         $purchase_link = str_replace('&', '&', $purchase_link);
         if ($generatorObject != null) $generatorObject->AddUrl($purchase_link, time(), "daily", 0.5);
      }
   }
}
add_action("sm_buildmap", "wp_ecommerce_sm");

The main points to note in this function are…

Check that the Google XML Sitemaps exists (is installed):

3

if ( class_exists('GoogleSitemapGenerator') ) {

Get an instance of the Google XML Sitemap plugin:

4

$generatorObject = &GoogleSitemapGenerator::GetInstance();

Loop through all our additional pages that we want to add to the sitemap, in this case the WP e-Commerce product pages:

5
6
7
8
9

$sql = "SELECT DISTINCT * FROM `" . $wpdb->prefix . "product_list` WHERE `active` IN('1') ORDER BY `id` DESC";
$product_list = $wpdb->get_results($sql, ARRAY_A);
foreach ( $product_list as $product ) {
   // Add pages to sitemap here
}

And within our loop, add our pages like this:

10

if ($generatorObject != null) $generatorObject->AddUrl($purchase_link, time(), "daily", 0.5);

And lastly we need to add the hook to call this function whenever the XML sitemap is rebuilt:

add_action("sm_buildmap", "wp_ecommerce_sm");

Is that all there is to it?

Well, not really. Your still have to trigger the sitemap to re-build to include your new pages. You can do this manually by going to your XML Sitemaps setting page and clicking the link to rebuild to force the sitemap to re-build. Ideally however you would try to get your plugin to do this automatically whenever you add/edit/delete one of your pages. I couldn’t find an obvious hook to easily do this so that is something I would like to see adding in a future version of the Google XML Sitemaps plugin.

Download

Download the above code packaged as a WordPress plugin using the link below:

I have seen a lot of advice from SEO consultants recommending the use of “nofollow” on links to prevent Google leaking your PageRank out to other web sites and therefore concentrating the passing of PageRank to other pages on your site.

For example, if your page had 10 PageRank points and 10 links to other pages, 5 of which were set to “nofollow”, the other 5 pages would each carry a PageRank of 2 points (ie share the full 10 points between the 5 links).

It would seem from what Matt says that this isn’t exactly how Google works. Sculpting the links on your page to concentrate link traffic to other pages does not equate to a concentrated amount of PageRank being passed to those pages.

In the example above, adding “nofollow” does prevent PageRank being passed through those links but the other 5 links will still only receive 1 PageRank point per link.

In general, Matt suggests whenever you’re linking around within your own site don’t use “nofollow”. Only use “nofollow” on links when you do not want a page to be indexed by Google, or for external links of which you may not have been able to verify the content (for example, a link added by a commenter on your blog).

If that makes no sense, Matt explains it much more clearly…

I followed the excellent tutorial at WPengineer.com which gives a great overview about how to create a widget using the new API. Initially, the widget I created by following the guide seemed to ‘crash’ WordPress when I installed it. After a little investigation I tracked this down to the following…

1
2
3
4

function widget_myuniquewidget_register() {
   register_sidebar_widget('My Unique Widget','widget_myuniquewidget');
}
<strong>add_action('init', widget_myuniquewidget_register);</strong>

You must initialise the register_sidebar_widget function by hooking into the ‘init’ action. Failure to do so means the function is called too early which will cause problems. For more information read WordPress Widgets API on the WordPress Codex.

So, this is how Twitter could be useful!

I have to say, I haven’t really got into Twitter yet. My one and only ‘Tweet’ is now over 1 month old which shows my embarrassing failure to get to grips with what Twitter is all about. Yes, I’m one of the 552,828 followers of Stephen Fry (at the time of writing), but up until now I’ve failed so see the usefulness of Twitter in a real-world environment – not just to know when Stephen in going to be “Back in time for tea”.

So, hit London with 48 hours of tube strikes and suddenly it all becomes clear. Follow BBCTravelalert on Twitter and get instant up-to-date feedback on the latest travel situation from London’s commuters – much more useful that the TFL service updates which are rarely accurate.

It’s a great e-commerce plugin for WordPress but there were a few visual things niggling me that I thought should be sorted out – mainly the way that the widget for showing categories was not styled the same way as the WordPress default widgets.

Fixing the issue was just a case of making a couple of tweaks to the HTML; changing some square brackets to normal brackets and removing some bold styling.

Nothing revolutionary there, but it should now look a whole lot better with your default WordPress theme without making any modifications…

The current version in development WP e-Commerce 3.7 is looking great, with an overhaul of the user interface to bring it into line with WordPress 2.7, a complete reorganisation of the code making it easier for us developers, and a new template engine which works along the same lines at the WordPress Loop so that theme authors can now get in on the act without having to delve too far into the plugin’s code.

Well, mainly because I have been really busy, but also because I’ve been spending much of my time getting lost in WordPress.

By getting lost I don’t mean disorientated and confused – in fact WordPress is a great little blogging/CMS system for the non-technical user with it’s intuitive user interface and now in version 2.7 the ability to cusomise the admin, hiding panels and options that you don’t use on a regular basis.

I’ve been absorbing myself in the code, examining plugins and themes, and getting to grips with hooks and filters. Under the bonnet, WordPress provides an extensive interface into which developers can create complex plugins and created rich, visual, interactive themes. And one thing is clear…

…a WordPress site does not necessarily have to look or behave like a blog.

Check out some of these themes and sites – they all run WordPress, honest (or at least they did the last time I looked):

• Reform & Revolution
• Seek & Destroy Clothing
• Modularity Theme
• On Demand Theme
• BuddyPress
• Typographica
• John Saddington
• Fotofolio Theme