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

ico-social-stumbleupon.pngName 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.

Never Miss a Tip from Brad Dalton

Get the latest web design tutorials, custom coding solutions & WordPress updates.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Cody says

    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.

    • says

      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.

Ask a Question