Canvas is the most ambitious theme Woo have created so far and is by far the most popular. It offers a huge range of both theme and site options and is highly customizable. Different folks use different social media platforms to connect for different reasons.
In this post i’ll show you how easy it is to add custom social media buttons replacing one of the default buttons you don’t need to use.
I connect well on Stumbleupon and don’t use Flickr very much so i changed the Flickr code to Stumbleupon.
Here’s how i did it.
Login to FTP or cPanel and go to your parent themes includes folder. Here’s the path for beginners public_html/wp-content/themes/canvas/includes
You’ll find 2 files which need to be edited:
- theme-functions.php
- theme-options.php
Beginners Tip: Download a copy of both these files to your local pc before you begin to edit the code. This way you can replace the files if need to fix an error in WordPress.
theme-functions.php file
On line 368, you’ll find the code for Flickr. Simply change any references from Flickr to Stumbleupon or any social media platform you like.
Here’s the before and after shots of the code which is changed.
Before Editing
<!--?php } if ( $woo_options['woo_connect_flickr'] != "" ) { ?-->
<a class="flickr" href="<?php echo $woo_options['woo_connect_flickr']; ?>"><img title="<?php _e('See photos on Flickr', 'woothemes'); ?>" src="<?php echo get_template_directory_uri(); ?>/images/ico-social-flickr.png" alt="" /></a>After Editing
<!--?php } if ( $woo_options['woo_connect_stumbleupon'] != "" ) { ?-->
<a class="stumbleupon" href="<?php echo $woo_options['woo_connect_stumbleupon']; ?>"><img title="<?php _e('Connect on Stumbleupon', 'woothemes'); ?>" src="<?php echo get_template_directory_uri(); ?>/images/ico-social-stumbleupon.png" alt="" /></a>theme-options.php
Next step is to edit the Canvas themes theme-options.php file located in the includes folder on line 1424. Here’s the path for beginners public_html/wp-content/themes/canvas/includes
Here’s the before and after shots of the code which is changed.
Before Editing
$options[] = array( "name" => __( 'Flickr URL', 'woothemes' ),
"desc" => __( 'Enter your <a href="http://www.flickr.com/">Flickr</a> URL e.g. ', 'woothemes' ),
"id" => $shortname."_connect_flickr",
"std" => '',
"type" => "text");After Editing
$options[] = array( "name" => __( 'Stumbleupon URL', 'woothemes' ),
"desc" => __( 'Enter your <a href="http://www.stumbleupon.com/">Stumbleupon</a> URL e.g. http://www.stumbleupon.com/stumbler/wordpresssites', 'woothemes' ),
"id" => $shortname."_connect_stumbleupon",
"std" => '',
"type" => "text");You can edit any of the social media code you don’t want to use and replace it with a custom social media choice. You can also keep all the existing social media and add more if you wish.
Upload Custom Social Icon
The final step is to upload a 32 x 32 pixel social icon to your themes images folder. Here’s the path to the images folder where you’ll also find all the default social icons stored. public_html/wp-content/themes/canvas/images
Name the icon ico-social-stumbleupon.png or whatever social icon you add.
Tip: Download and save the 2 files you have edited so next time you update your parent theme, Canvas, your custom coding won’t be overwritten and lost.
You could also add the edited files to your custom child theme if you know what to do.
Adding your own choice of social media connect buttons to the Canvas theme is easy.
Brad Dalton
@wpsitesdotnet
Latest posts by Brad Dalton (see all)
- Create A Custom Meta Box For A Custom Field - May 18, 2013
- Beginners Guide To Adding Custom Fields In WordPress - May 18, 2013
- 3 Ways To Add Text Before Content On Your Home Page - May 17, 2013
Hey Brad.
Looks like Woo themes has updated the Canvas theme and this method doesn’t work anymore. I’ve been trying to figure it out, but I keep getting stumped.
Hi Cody. It might be because the custom coding had been overwritten by the update or they may have changed the way this part of the theme is coded. I’ve now moved to Genesis and couldn’t be happier. If you have a backup of the files, you could fix it that way.