An apology and an explanation

This post is aimed at the lovely people who are using one or more of our WordPress plugins.

Read more…

Getshopped – Add more details to sales CSV

I have previously showed I added shipping columns to the sales logs page in a getshopped (Wp-Ecommerce) installation. This was fine but now we need that data to show up in the csv download.

Here’s how to do it-

Read more…

GetShopped – Add order without shipping column to sales view

The sales view in the wp-ecommerce (GetShopped) is great but it will show you the total price of an order rather than the price without shipping, the shipping, and the total.

To introduce this functionality you do have to hack the plugin files, but there is not another way as I can not see any hooks I could make use of. If I have missed one, please do let me know!

Read more…

New version of WordPress Gallery

Version 0.6 of WordPress Gallery is now available!

It’s always nice to see my plugin on the front page of WordPress plugins. Even if it is only in the recently updated section!

Two massive new features have been introduced in the latest version-

Read more…

Tags | drag and drop, galley, order, pager, slider, thumbnails, wordpress

Is WordPress good enough for my site?

Quite often I have people asking whether or not WordPress can handle their large site. They have very genuine concerns that WordPress can not handle things like scaling and caching and large visitor loads.

Whether you are performing due diligence or just wondering what WordPress can do, the below should be quite useful to you.

Its always best to lead by example right! So here we go!

A whole bunch of sites with massive user bases use WordPress. Here are a few-

http://tutsplus.com/ – A HUUUGE site with thousands of articles, media and users. Alexa rank 591

http://freelanceswitch.com/ – I use this site a lot! Both the site and the jobs board are powered by WordPress. Alexa rank 5,813

http://mac.appstorm.net/ – Another site with a huge following. Alexa rank 5,856

http://wiki.envato.com/ – The wiki for the ginormous envato market place. Alexa rank 4,101

http://workawesome.com/ – A blog but a large blog nonetheless. Alexa rank 31, 945

http://blog.themeforest.net/ – The blog for themeforest, possibly the largest template site on the net. A huge following. Alexa rank 287

With large sites caching is very important. Querying the database as few times as possible and only doing so when cached content is not available is crutial for a large site. Serving users static html rather than server intensive php powered by goodness knows how many DB queries saves a tonne in terms of server resources and site responsiveness. WordPress already has numerous plugins for this. The best two are WP Super Cache and W3 Total Cache.

http://codex.wordpress.org/High_Traffic_Tips_For_WordPress is a really good read straight from the WordPress mouth about the capabilities of WordPress. For me, the overriding message from that page is that it is more about the hardware behind the site than the software serving the site.

37 signals (the makers of Basecamp and other very successful web apps) wrote this very honest and wise piece.

http://gettingreal.37signals.com/ch04_Scale_Later.php

Basecamp is probably the most successful online project management tool out there and they openly admit that precious time is lost worrying about problems that may never occur. And when they do occur it is optimal to fix them and tweak the set up as they happen.

As they say -

In the beginning, make building a solid core product your priority instead of obsessing over scalability and server farms. Create a great app and then worry about what to do once it’s wildly successful. Otherwise you may waste energy, time, and money fixating on something that never even happens.

Another brilliantly honest article from the same guys-

http://37signals.com/svn/archives2/dont_scale_99999_uptime_is_for_walmart.php

Edublogs is one of the most successful education based blogging platforms and they use WordPress MU (multi-user). Here is an in depth (and quite geeky) article on the set up of that system.

http://wpmu.org/scaling-wordpress-wpmu-buddypress-like-edublogs/

Matt Mullenweg, the founder of WordPress made an interesting response to somebody moving their site to drupal from WordPress after getting to 200,000 hits per day. He offers some sound advice-

http://webdevnews.net/2008/12/mullenweg-scale-wordpress-to-20000000-views-per-day-for-100-pmonth/

“Barry” is the “Chief Systems Wrangler” at automattic (the people behind wordpress, askimet, vaultpress and IntenseDebate) and he wrote this article about hyperDB -

http://barry.wordpress.com/2011/07/20/hyperdb-lag-detection/

Essentially what he is saying is that using hyperDB (found here http://wordpress.org/extend/plugins/hyperdb/) enables huge sites to effectively and sparingly use DB queries to further optimise a high traffic volume and user interaction site. Read more from “Barry” on scaling here http://barry.wordpress.com/category/scaling/

The only other thing I will add is that words like “blog”, “theme” and “plugin” are used a lot with WordPress. Do not be put off by them! WordPress started out life as a blogging platform and it has struggled to shift that association. In truth, WordPress is actually an extremely powerful Content Management System with a highly intuitive and extensive API. Plugins are essentially little (or large) packages that add extra functionality to a WordPress install. Themes define the look of your site. They contain all the client side code and it is in themes that a design of a site is held.

Tags | cache, plugin, Scaling, wordpress

WP E-commerce – Image previews to change on hover

</div><!--close single_product_page_container-->

<script> jQuery(".attachment-gold-thumbnails").each(function () { jQuery(this).css("cursor", "pointer"); var large_preview = jQuery(this).parent().attr("rev"); var even_larger_preview = jQuery(this).parent().attr("href"); var preview_title = jQuery(this).parent().attr("rel"); jQuery(this).hover( jQuery(this).mouseover(function() { jQuery(".product_image").attr("src", large_preview); jQuery(".product_image").parent().attr("href", even_larger_preview); jQuery(".product_image").parent().attr("rel", preview_title); }) ); }); </script>

WP E-commerce Category list order and more control…

So ive been trying to use wpsc functions to control my widget of category listings… not fun. i have very little control over the listings without editing the core files which is something i would rather not do.

There are a number of supposed solutions out there but with the recent change to use wordpress tables rather than wpsc custom tables, at lot of those fixes no longer work.

So my solution has been to just use the already existing WordPress function “wp_list_categories”.

Like this

<?php
 $args = array('taxonomy' => 'wpsc_product_category', 'orderby' => 'ID', 'order' => 'ASC', 'style' => 'none', 'child_of' => 15);
 wp_list_categories( $args );
 ?>

Just put that in your sidebar or wherever else you want to display categories. Forget the widget for category listings, it doesnt allow you enough control. Using the above code will allow you to have control over the following (from http://codex.wordpress.org/Template_Tags/wp_list_categories)

<?php $args = array(
 'show_option_all'    => ,
 'orderby'            => 'name',
 'order'              => 'ASC',
 'show_last_update'   => 0,
 'style'              => 'list',
 'show_count'         => 0,
 'hide_empty'         => 1,
 'use_desc_for_title' => 1,
 'child_of'           => 0,
 'feed'               => ,
 'feed_type'          => ,
 'feed_image'         => ,
 'exclude'            => ,
 'exclude_tree'       => ,
 'include'            => ,
 'hierarchical'       => true,
 'title_li'           => __( 'Categories' ),
 'show_option_none'   => __('No categories'),
 'number'             => NULL,
 'echo'               => 1,
 'depth'              => 0,
 'current_category'   => 0,
 'pad_counts'         => 0,
 'taxonomy'           => 'category',
 'walker'             => 'Walker_Category' ); ?>

I was using three category widgets but now am simply using this in my sidebar-

<h2>SHOP BY AGE</h2>    

 <?php
 $args = array('taxonomy' => 'wpsc_product_category', 'orderby' => 'ID', 'order' => 'ASC', 'style' => 'none', 'child_of' => 15);
 wp_list_categories( $args );
 ?>    

 <h2>SHOP BY ARTIST</h2>    

 <?php
 $args = array('taxonomy' => 'wpsc_product_category', 'orderby' => 'ID', 'order' => 'ASC', 'style' => 'none', 'child_of' => 8);
 wp_list_categories( $args );
 ?>    

 <h2>SHOP BY TYPE</h2>    

 <?php
 $args = array('taxonomy' => 'wpsc_product_category', 'orderby' => 'ID', 'order' => 'ASC', 'style' => 'none', 'child_of' => 11);
 wp_list_categories( $args );
 ?>

Much simpler and allows me absolute control over the order, appearance, depth and exclusions etc.

Its sad the this plugin doesnt have native support for this. maybe because its not needed when we can just use the WordPress functions?…

Add related products to wp e-commerce (getshopped) store

Here is a nice and simple way to enable related products on a single product page when using wp e-commerce. There’s only four steps!

Step one: Download the “Related Posts” plugin from http://www.microkid.net/wordpress/related-posts/ and install it.

Step two: Set up the plugin and familiarise yourself with the admin panel. Here is a great place to start.

Step three: Insert the following where you want your related products to display (for me this is in the imported wpsc-single_product.php file in my theme folder)-

MRP_show_related_posts()

Step four: Change line 450 in microkids-related-posts.php (now in your wp-content/plugins/microkids-related-posts folder)

FROM

$output .= "<li><a href="".get_permalink( $related_post->ID )."">".$related_post->post_title."</a></li>n";

TO

$output .= "<li><a href="".get_permalink( $related_post->ID ).""><img src="".wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),$related_post->ID,'single')."" ><br>".$related_post->post_title."</a></li>n";

And you’re done.

How to build an options page for your WordPress theme (In 5 easy steps!)

First things first. An options panel is a custom set of options that are user definable and that come as part of a theme. Typical uses would be allowing users to change the background color of the entire site or add their social network ids to some images without having to edit any php.

Theme options are now a must if you are thinking of selling premium WordPress themes but as well as that they’re also pretty darn cool!

We are going to build theme options that allow users to add their Youtube, Twitter, Facebook and MySpace urls to some images. This sort of functionality is sought after in a theme as it negates the need for extra plugins.

Step 1 – Set up your options

Open up functions.php (or create it if your theme doesn’t have one yet). We will be making all the magic happen with functions.php.

Copy the following code in to it

<?php

$themename = "Jealous  Designs";
$shortname = "JD";
$options = array (

array(    "name" => "Social Networks",
"type" => "section"),

array( "type" => "open"),

array(    "name" => "YouTube ID",
"desc" => "ie If your Youtube url is http://www.youtube.com/jealousdesigns, put jealousdesigns",
"id" => $shortname."_social_youtube",
"std" => "",
"type" => "text"),

array(    "name" => "Twitter ID",
"desc" => "ie @_a_n_d_y",
"id" => $shortname."_social_twitter",
"std" => "",
"type" => "text"),

array(    "name" => "Facebook ID",
"desc" => "What ever comes after facebook.com for your profile or page. Ie If your url is http://www.facebook.com/pages/Jealous-Designs/234553006051 you would enter pages/Jealous-Designs/234553006051",
"id" => $shortname."_social_facebook",
"std" => "",
"type" => "text"),

array(    "name" => "Myspace ID",
"desc" => "What ever appears after myspace.com for your profile.",
"id" => $shortname."_social_myspace",
"std" => "",
"type" => "text"),

array( "type" => "close")

);

What this has done is set up the options that we are going to offer the user but now before we have defined our theme name and shortname.

Next up we want to add these options to the WordPress backend as theme options.

Step 2 – Give your theme an options panel

Still in functions.php.

Copy the following code in to it

<?php

function mytheme_add_admin() {

global $themename, $shortname, $options;

if ( $_GET['page'] == basename(__FILE__) ) {

if ( 'save' == $_REQUEST['action'] ) {

foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

header("Location: themes.php?page=functions.php&saved=true");
die;

} else if( 'reset' == $_REQUEST['action'] ) {

foreach ($options as $value) {
delete_option( $value['id'] ); }

header("Location: themes.php?page=functions.php&reset=true");
die;

}
}

add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');

}

?>

In a nutshell this snippet adds functionality to enable us save the options and then adds the actual page through the add_theme_page function.

Step 3 – Add the options to your new panel!

So far we have set up the options we want to offer the user and given the options a page to be displayed on, now we need to get those options on to that page!

<?php

function mytheme_admin() {

global $themename, $shortname, $options;

if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>';

?>
<div class="wrap rm_wrap">
<h2><?php echo $themename; ?> Settings</h2>

<div class="rm_opts">
<form method="post">

The above code opens a function called mytheme_admin, declares the variables we set up at the top and checks to see if it needs to display a message. (This is done through a GET request.)

After that it opens up a div, displays a title, opens an inner div and begins the form that will ultimately save all of our options.

Next up we need to access and display the options we set up earlier. The below code does just that.

<?php foreach ($options as $value) {
switch ( $value['type'] ) {

case "open":
?>

<?php break;

case "close":
?>

</div>
</div>
<br />

<?php break;

case "title":
?>
<p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</p>

<?php break;

case 'text':
?>

<div>
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'])  ); } else { echo $value['std']; } ?>" />
<small><?php echo $value['desc']; ?></small><div></div>

</div>
<?php
break;

case "section":

$i++;

?>

<div>
<div><h3><img src="<?php bloginfo('template_directory')?>/functions/images/trans.gif" alt="""><?php echo $value['name']; ?></h3><span><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
</span><div></div></div>
<div>

<?php break;

}
}
?>

Essentially what this code does is loop through the options we set up at the top and display different html according to the type value in the array.

Finally we close the form and add a reset button to the bottom of the page.

<input type="hidden" name="action" value="save" />
</form>
<form method="post">
<p>
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<div style="font-size:9px; margin-bottom:10px;">Icons: <a href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div>
</div>

<?php
}

Save your functions.php.

Step 4 – Add some style

You can upload your functions.php now and check it out but you won’t like it! I warned you.

What it needs is a bit of css and a bit of jquery!

So. Here is the css. Open up a new css file. Dont add it to your existing style.css as we only want these styles applied to our options page, not our whole theme.

.rm_wrap{
width:740px;
}
.rm_section{
border:1px solid #ddd;
border-bottom:0;
background:#f9f9f9;
}
.rm_opts label{
font-size:12px;
font-weight:700;
width:200px;
display:block;
float:left;
}
.rm_input {
padding:30px 10px;
border-bottom:1px solid #ddd;
border-top:1px solid #fff;
}
.rm_opts small{
display:block;
float:right;
width:200px;
color:#999;
}
.rm_opts input[type="text"], .rm_opts select{
width:280px;
font-size:12px;
padding:4px;
color:#333;
line-height:1em;
background:#f3f3f3;
}
.rm_input input:focus, .rm_input textarea:focus{
background:#fff;
}
.rm_input textarea{
width:280px;
height:175px;
font-size:12px;
padding:4px;
color:#333;
line-height:1.5em;
background:#f3f3f3;
}
.rm_title h3 {
cursor:pointer;
font-size:1em;
text-transform: uppercase;
margin:0;
font-weight:bold;
color:#232323;
float:left;
width:80%;
padding:14px 4px;
}
.rm_title{
cursor:pointer;
border-bottom:1px solid #ddd;
background:#eee;
padding:0;
}
.rm_title h3 img.inactive{
margin:-8px 10px 0 2px;
width:32px;
height:32px;
background:url('images/pointer.png') no-repeat 0 0;
float:left;
-moz-border-radius:6px;
border:1px solid #ccc;
}
.rm_title h3 img.active{
margin:-8px 10px 0 2px;
width:32px;
height:32px;
background:url('images/pointer.png') no-repeat  0 -32px;
float:left;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border:1px solid #ccc;
}
.rm_title h3:hover img{
border:1px solid #999;
}
.rm_title span.submit{
display:block;
float:right;
margin:0;
padding:0;
width:15%;
padding:14px 0;
}
.clearfix{
clear:both;
}
.rm_table th, .rm_table td{
border:1px solid #bbb;
padding:10px;
text-align:center;
}
.rm_table th, .rm_table td.feature{
border-color:#888;
}

Save this as functions.css in the root of your themes directory (wp-content/theme_name/functions.css)

Next we need to add some jquery goodness to it. Open a new javascript file and copy this code in to it.

jQuery(document).ready(function(){
jQuery('.rm_options').slideUp();

jQuery('.rm_section h3').click(function(){
if(jQuery(this).parent().next('.rm_options').css('display')=='none')
{    jQuery(this).removeClass('inactive');
jQuery(this).addClass('active');
jQuery(this).children('img').removeClass('inactive');
jQuery(this).children('img').addClass('active');

}
else
{    jQuery(this).removeClass('active');
jQuery(this).addClass('inactive');
jQuery(this).children('img').removeClass('active');
jQuery(this).children('img').addClass('inactive');
}

jQuery(this).parent().next('.rm_options').slideToggle('slow');
});
});

Save this as theme_options.js in a js folder in your theme directory (wp-content/theme_name/js/theme_options.js)

Finally we need to initiate these styles on the page.

Open up functions.php again and add the following code.

function mytheme_add_init() {

$file_dir=get_bloginfo('template_directory');

wp_enqueue_style("functions", $file_dir."/functions.css", false, "1.0", "all");

wp_enqueue_script("theme_options", $file_dir."/js/theme_options.js", false, "1.0");
}

Quite simply this function adds the stylesheet and the jquery to the header of the theme options page. (Woo!)

Last but absolutely not least there are two image that we need to add to the page for the css to grab.

Download pointer.png and trans.png

Add them to your images folder of your theme (wp-content/theme_name/images/pointer.png)

Step 5 – Upload and enjoy!

Upload functions.php, functions.css, theme_options.js and the two images. Log in to your WordPress dashboard.

Voila!

Have fun!

Tags | css, jQuery, them options, theme, theme options, wordpress plugin