Adding Custom Social Media Subscribe & Connect Icons to The Canvas Theme

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:

1. theme-functions.php
2. 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.