Bandcamp Icon top bar?

(@mrmoodswing)

Thnx for your reply, so far so good, I could insert the link in the editor ‘social media icons’. The icon doesnt appear at the top, do I need to upload the icon anywhere and where do i add the code to that icon. Ive tried locating where the other icons are but no luck.

Theme Author

(@bensibley)

Yea so the other icons use Font Awesome, but I don’t think they have an icon for bandcamp yet. What you can do is add a conditional statement to check if the current icon is bandcamp (line 31), and include an image instead of an icon.

Thread Starter

(@mrmoodswing)

line 31 of what php?

Theme Author

(@bensibley)

social-icons.php

Thread Starter

(@mrmoodswing)

Hi Ben,

Apparently they dont have an icon for bandcamp but Im not sure where to switch the icon for a image.

Do I need to make one of these for bandcamp?

{
				echo '<i class="fa fa-' . $active_site . '" title="' . sprintf( __("%s icon", "tracks"), $active_site ) . '"></i>';
			} elseif( $active_site == 'email' ) {
				echo '<i class="fa fa-envelope" title="' . sprintf( __("email icon", "tracks"), $active_site ) . '"></i>';
			} else {
				echo '<i class="fa fa-' . $active_site . '-square" title="' . sprintf( __("%s icon", "tracks"), $active_site ) . '"></i>';
			}

Theme Author

(@bensibley)

Yea you can add one more elseif statement before the final else statement like this:

} elseif( $active_site == 'bandcamp' ) {
  echo '<img class="bandcamp" alt="bandcamp icon" src="" />';
}

That will output when the current icon in the array is for bandcamp, and output an image instead. I left the src empty – it can be set to wherever you want to host the image.

Thread Starter

(@mrmoodswing)

Hi Ben,

Ive added it to the array

// array of social media site names
function ct_tracks_social_site_list(){

    $social_sites = array('twitter', 'facebook', 'google-plus', 'flickr', 'pinterest', 'youtube', 'vimeo', 'tumblr', 'dribbble', 'rss', 'linkedin', 'instagram', 'reddit', 'soundcloud', 'spotify', 'vine','yahoo', 'behance', 'codepen', 'delicious', 'stumbleupon', 'deviantart', 'digg', 'git', 'hacker-news', 'steam', 'vk', 'weibo', 'tencent-weibo', 'email', 'bandcamp');
    return $social_sites;
}

and it bandcamp is in the list in the editor.

then Ive added the code u gave me on line 31, first before and after the } like so

// output icon <i>
			if( $active_site ==  "flickr" || $active_site ==  "dribbble" || $active_site ==  "instagram" || $active_site ==  "soundcloud" || $active_site ==  "spotify" || $active_site ==  "vine" || $active_site ==  "yahoo" || $active_site ==  "codepen" || $active_site ==  "delicious" || $active_site ==  "stumbleupon" || $active_site ==  "deviantart" || $active_site ==  "digg" || $active_site ==  "hacker-news" || $active_site == 'vk' || $active_site == 'weibo' || $active_site == 'tencent-weibo' || $active_site == 'bandcamp')
 {				} elseif( $active_site == 'bandcamp' ) {
  echo '<img class="bandcamp" alt="bandcamp icon" src="http://www.mutiaratec.com/wp-content/uploads/2015/07/bc-icon.png" />';
}
				echo '<i class="fa fa-' . $active_site . '" title="' . sprintf( __("%s icon", "tracks"), $active_site ) . '"></i>';
			} elseif( $active_site == 'email' ) {
				echo '<i class="fa fa-envelope" title="' . sprintf( __("email icon", "tracks"), $active_site ) . '"></i>';
			} else {
				echo '<i class="fa fa-' . $active_site . '-square" title="' . sprintf( __("%s icon", "tracks"), $active_site ) . '"></i>';
			}

then my website comes up without content, just the layout. do i put it in any other way?

Theme Author

(@bensibley)

Yea it just got out of place in your code. Try this instead:

// output icon <i>
			if( $active_site ==  "flickr" || $active_site ==  "dribbble" || $active_site ==  "instagram" || $active_site ==  "soundcloud" || $active_site ==  "spotify" || $active_site ==  "vine" || $active_site ==  "yahoo" || $active_site ==  "codepen" || $active_site ==  "delicious" || $active_site ==  "stumbleupon" || $active_site ==  "deviantart" || $active_site ==  "digg" || $active_site ==  "hacker-news" || $active_site == 'vk' || $active_site == 'weibo' || $active_site == 'tencent-weibo') {
				echo '<i class="fa fa-' . $active_site . '" title="' . sprintf( __("%s icon", "tracks"), $active_site ) . '"></i>';
			} elseif( $active_site == 'email' ) {
				echo '<i class="fa fa-envelope" title="' . sprintf( __("email icon", "tracks"), $active_site ) . '"></i>';
			} elseif( $active_site == 'bandcamp' ) {
				echo '<img class="bandcamp" alt="bandcamp icon" src="" />';
			} else {
				echo '<i class="fa fa-' . $active_site . '-square" title="' . sprintf( __("%s icon", "tracks"), $active_site ) . '"></i>';
			}

Thread Starter

(@mrmoodswing)

Yes it worked!

thnx Ben!

Theme Author

(@bensibley)

You’re welcome, glad it’s working now 🙂

Thread Starter

(@mrmoodswing)

8 years, 4 months ago

hi Ben, sorry to bother you again. after the latest update the code u previously gave me doesnt work anymore.

I have added bandcamp to the array but now the code at social-icons.php has changed into this.

if ( in_array( $active_site, $square_icons ) ) {
				$class = 'fa fa-' . $active_site . '-square';
			} else {
				$class = 'fa fa-' . $active_site;
			}

			if ( $active_site == 'email' ) {
				?>
<li>
					<a>">
						<i class="fa fa-envelope" title="<?php esc_attr( _e('email icon', 'tracks') ); ?>"></i>
					</a>
				</li>
			<?php } else { ?>
<li>
					<a>" target="_blank" href="<?php echo esc_url( get_theme_mod( $active_site ) ); ?>">
						<i class="<?php echo esc_attr( $class ); ?>" title="<?php esc_attr( $active_site ); ?>"></i>
					</a>
				</li>

Or is there maybe a code I could use at the add custom code?

I have tried to make a child-theme for this but it doesnt seem te work, keeps goin into blank page.

kind regards Ro

Theme Author

(@bensibley)

8 years, 4 months ago

Here’s an empty child theme you can download and use:

Tracks child theme

You’ll want to add a folder called “content” to it, and then add a copy of the “social-icons.php” file there.

To add bandcamp back in, you’ll want to copy the “if” statement for ’email’ including the HTML. Then, just change it to an “elseif” instead and switch out the icon for an img element like previously done.

Theme Author