Add custom social media icon

Hi Katerina,

There isn’t currently a feature in Chosen for this, but they can be added by editing a function in the theme. If you’re comfortable working with PHP, I can outline the steps for adding a custom icon here.

That would be great! Thanks so much, Ben ??

Sure thing!

The first step is to copy the ct_chosen_social_icons_output function from Chosen into a Chosen child theme. The function is on line 285 of the functions.php file. If you don’t have a child theme setup yet, you can click here to download one.

The ct_chosen_social_icons_output function can be copied & pasted into the functions.php file in the Chosen child theme.

In the function you’ll see a foreach loop. You can skip the logic and hardcode in the icon right after the foreach loop ends. The general markup can look like this:

<li>
	<a class="name-of-site" target="_blank" href="https://example.com">
	      <img src="https://example.com/png" />
	</a>
</li>

This way you don’t need to add the social icon as an option in the Customizer – it will always show after the other icons.

The last step will be to update the link URL, and add the src URL for the image icon.

Hi Ben-

I followed the steps outlined above for the same issue (trying to add Bloglovin’ link) but I’m sure I’m missing something along the way.

I installed the child theme, copied

ct_chosen_social_icons_output

from function.php in the original theme, pasted into the child theme’s function.php, added the markup listed above, updated the links, and saved the file. Haven’t seen a change in the page at this point.

Link to the website: https://vintageontap.com

Also, when activating the child theme it didn’t carry over any customizations made through the Customizer in the parent theme… and when I added the code again it gave me a blank screen on the site.

As is, not 100% I even plugged things in correctly!

f ( ! function_exists( 'ct_chosen_social_icons_output' ) ) {
function ct_chosen_social_icons_output() {

$social_sites = ct_chosen_social_array();

foreach ( $social_sites as $social_site => $profile )

<li>
<a class="Bloglovin" target="_blank" href="this is the url">
     <img src="this is my image url" />
</a>
</li>

 {

if ( strlen( get_theme_mod( $social_site ) ) > 0 ) {
$active_sites[ $social_site ] = $social_site;
}
}

There are a few changes that need to be made. I’m going to add the entire function below, so you can copy & paste it into your child theme.

You can see the bloglovin icon markup after the foreach loop, so all the other icons are still output. You’ll just need to update the link to point to your profile, and provide src URL to an image for the icon.

As for the settings, unfortunately WordPress does not copy the parent theme’s settings over to the child theme by default. However, the Customizer Export/Import plugin makes is pretty easy to copy them over.

Here’s the complete function:

function ct_chosen_social_icons_output() {

		$social_sites = ct_chosen_social_array();

		foreach ( $social_sites as $social_site => $profile ) {

			if ( strlen( get_theme_mod( $social_site ) ) > 0 ) {
				$active_sites[ $social_site ] = $social_site;
			}
		}

		if ( ! empty( $active_sites ) ) {

			echo "<ul class='social-media-icons'>";

			foreach ( $active_sites as $key => $active_site ) {

				if ( $active_site == 'email' ) {
					?>
					<li>
						<a class="email" target="_blank"
						   href="mailto:<?php echo antispambot( is_email( get_theme_mod( $key ) ) ); ?>">
							<i class="fa fa-envelope" title="<?php esc_attr_e( 'email', 'chosen' ); ?>"></i>
							<span class="screen-reader-text"><?php esc_attr_e('email', 'chosen'); ?></span>
						</a>
					</li>
				<?php } elseif ( $active_site == 'skype' ) { ?>
					<li>
						<a class="<?php echo esc_attr( $active_site ); ?>" target="_blank"
						   href="<?php echo esc_url( get_theme_mod( $key ), array( 'http', 'https', 'skype' ) ); ?>">
							<i class="fa fa-<?php echo esc_attr( $active_site ); ?>"
							   title="<?php echo esc_attr( $active_site ); ?>"></i>
							<span class="screen-reader-text"><?php echo esc_attr( $active_site );  ?></span>
						</a>
					</li>
				<?php } elseif ( $active_site == 'email-form' ) { ?>
					<li>
						<a class="<?php echo esc_attr( $active_site ); ?>" target="_blank"
						   href="<?php echo esc_url( get_theme_mod( $key ) ); ?>">
							<i class="fa fa-envelope-o"
							   title="<?php echo esc_attr( $active_site ); ?>"></i>
							<span class="screen-reader-text"><?php echo esc_attr( $active_site );  ?></span>
						</a>
					</li>
				<?php } else { ?>
					<li>
						<a class="<?php echo esc_attr( $active_site ); ?>" target="_blank"
						   href="<?php echo esc_url( get_theme_mod( $key ) ); ?>">
							<i class="fa fa-<?php echo esc_attr( $active_site ); ?>"
							   title="<?php echo esc_attr( $active_site ); ?>"></i>
							<span class="screen-reader-text"><?php echo esc_attr( $active_site );  ?></span>
						</a>
					</li>
					<?php
				}
			}
                        <li>
	                  <a class="bloglovin" target="_blank" href="https://example.com">
	                    <img src="https://example.com/png" />
	                  </a>
                        </li>
			echo "</ul>";
		}
	}

Hey Ben–

Have followed the steps outlined and still having some hiccups.

-Activated child theme
-Transfered over the customizer changes

When I go ahead and copy/paste the code and make the URL changes onto the functions.php file, it gives me a white screen after saving. Have tried multiple changes to the code (removing white lines, double checking things are closed off properly) but haven’t gotten it to work yet. Wondering if there’s another work around I’m not considering.

At this point I’ve reinstalled a fresh functions.php via FTP before attempting again.

I’m sorry the end of the code did not switch out of and back to PHP properly. Please try this updated function:

function ct_chosen_social_icons_output() {

	$social_sites = ct_chosen_social_array();

	foreach ( $social_sites as $social_site => $profile ) {

		if ( strlen( get_theme_mod( $social_site ) ) > 0 ) {
			$active_sites[ $social_site ] = $social_site;
		}
	}

	if ( ! empty( $active_sites ) ) {

		echo "<ul class='social-media-icons'>";

		foreach ( $active_sites as $key => $active_site ) {

			if ( $active_site == 'email' ) {
				?>
				<li>
					<a class="email" target="_blank"
					   href="mailto:<?php echo antispambot( is_email( get_theme_mod( $key ) ) ); ?>">
						<i class="fa fa-envelope" title="<?php esc_attr_e( 'email', 'chosen' ); ?>"></i>
						<span class="screen-reader-text"><?php esc_attr_e( 'email', 'chosen' ); ?></span>
					</a>
				</li>
			<?php } elseif ( $active_site == 'skype' ) { ?>
				<li>
					<a class="<?php echo esc_attr( $active_site ); ?>" target="_blank"
					   href="<?php echo esc_url( get_theme_mod( $key ), array( 'http', 'https', 'skype' ) ); ?>">
						<i class="fa fa-<?php echo esc_attr( $active_site ); ?>"
						   title="<?php echo esc_attr( $active_site ); ?>"></i>
						<span class="screen-reader-text"><?php echo esc_attr( $active_site ); ?></span>
					</a>
				</li>
			<?php } elseif ( $active_site == 'email-form' ) { ?>
				<li>
					<a class="<?php echo esc_attr( $active_site ); ?>" target="_blank"
					   href="<?php echo esc_url( get_theme_mod( $key ) ); ?>">
						<i class="fa fa-envelope-o"
						   title="<?php echo esc_attr( $active_site ); ?>"></i>
						<span class="screen-reader-text"><?php echo esc_attr( $active_site ); ?></span>
					</a>
				</li>
			<?php } else { ?>
				<li>
					<a class="<?php echo esc_attr( $active_site ); ?>" target="_blank"
					   href="<?php echo esc_url( get_theme_mod( $key ) ); ?>">
						<i class="fa fa-<?php echo esc_attr( $active_site ); ?>"
						   title="<?php echo esc_attr( $active_site ); ?>"></i>
						<span class="screen-reader-text"><?php echo esc_attr( $active_site ); ?></span>
					</a>
				</li>
				<?php
			}
		} ?>
		<li>
			<a class="bloglovin" target="_blank" href="https://example.com">
				<img src="https://example.com/png"/>
			</a>
		</li>
		<?php
		echo "</ul>";
	}
}

I checked for syntax errors with an editor this time, and corrected the issues.

Whenever you get a white screen after making a change, this is usually due to a PHP error. You can review your recent PHP errors via the PHP error log which you can access in your hosting account. This often points to the exact file and line of the error source.

PERFECT! Got it to work. Thanks so much for following up on this :D!

Yea no problem! Glad it’s working now ??