How to add new social icons to Zelle footer

Adding new icons or replacing old icons in Zelle theme isn't really hard. It takes only one line of code to do this job. Before we start this tutorial, please make sure that you're using a child theme. So here we go.

First you need copy the footer.php file from your parent theme (zelle-pro or zelle-lite) folder to your child theme. Now, open the footer.php file of your child theme and look for the following code around line 170:

   $zerif_socials = array(
			array(
				'link' => (!empty($zerif_socials_facebook) ? $zerif_socials_facebook : ''),
				'label' => esc_html__('Facebook link','zerif'),
				'icon-class' => 'fa-facebook'
			),
			array(
				'link' => (!empty($zerif_socials_twitter) ? $zerif_socials_twitter : ''),
				'label' => esc_html__('Twitter link','zerif'),
				'icon-class' => 'fa-twitter'
			),
			array(
				'link' => (!empty($zerif_socials_linkedin) ? $zerif_socials_linkedin : ''),
				'label' => esc_html__('Linkedin link','zerif'),
				'icon-class' => 'fa-linkedin'
			),
			array(
				'link' => (!empty($zerif_socials_behance) ? $zerif_socials_behance : ''),
				'label' => esc_html__('Behance link','zerif'),
				'icon-class' => 'fa-behance'
			),
			array(
				'link' => (!empty($zerif_socials_dribbble) ? $zerif_socials_dribbble : ''),
				'label' => esc_html__('Dribbble link','zerif'),
				'icon-class' => 'fa-dribbble'
			),
			array(
				'link' => (!empty($zerif_socials_googleplus) ? $zerif_socials_googleplus : ''),
				'label' => esc_html__('Google Plus link','zerif'),
				'icon-class' => 'fa-google'
			),
			array(
				'link' => (!empty($zerif_socials_pinterest) ? $zerif_socials_pinterest : ''),
				'label' => esc_html__('Pinterest link','zerif'),
				'icon-class' => 'fa-pinterest'
			),
			array(
				'link' => (!empty($zerif_socials_tumblr) ? $zerif_socials_tumblr : ''),
				'label' => esc_html__('Tumblr link','zerif'),
				'icon-class' => 'fa-tumblr'
			),
			array(
				'link' => (!empty($zerif_socials_reddit) ? $zerif_socials_reddit : ''),
				'label' => esc_html__('Reddit link','zerif'),
				'icon-class' => 'fa-reddit'
			),
			array(
				'link' => (!empty($zerif_socials_youtube) ? $zerif_socials_youtube : ''),
				'label' => esc_html__('Youtube link','zerif'),
				'icon-class' => 'fa-youtube'
			),
			array(
				'link' => (!empty($zerif_socials_instagram) ? $zerif_socials_instagram : ''),
				'label' => esc_html__('Instagram link','zerif'),
				'icon-class' => 'fa-instagram'
			)
);

Found it? Great!

You need to add a , after the one-before-the-last) because we are going to add another icon, so it should look like this:

array(
'link' => (!empty($zerif_socials_instagram) ? $zerif_socials_instagram : ''),
'label' => esc_html__('Instagram link','zerif'),
'icon-class' => 'fa-instagram'
),

Now add your custom link, in this example we will add a WordPress icon link, pay attention to the way the custom link is different from the default links:

array(
'link' => (!empty($zerif_socials_instagram) ? $zerif_socials_instagram : ''),
'label' => esc_html__('Instagram link','zerif'),
'icon-class' => 'fa-instagram'
),
array(
'link' => 'https://wordpress.org',
'label' => esc_html__('WordPress link','zerif'),
'icon-class' => 'fa-wordpress'
)

The final outcome should be this:

  $zerif_socials = array(
			array(
				'link' => (!empty($zerif_socials_facebook) ? $zerif_socials_facebook : ''),
				'label' => esc_html__('Facebook link','zerif'),
				'icon-class' => 'fa-facebook'
			),
			array(
				'link' => (!empty($zerif_socials_twitter) ? $zerif_socials_twitter : ''),
				'label' => esc_html__('Twitter link','zerif'),
				'icon-class' => 'fa-twitter'
			),
			array(
				'link' => (!empty($zerif_socials_linkedin) ? $zerif_socials_linkedin : ''),
				'label' => esc_html__('Linkedin link','zerif'),
				'icon-class' => 'fa-linkedin'
			),
			array(
				'link' => (!empty($zerif_socials_behance) ? $zerif_socials_behance : ''),
				'label' => esc_html__('Behance link','zerif'),
				'icon-class' => 'fa-behance'
			),
			array(
				'link' => (!empty($zerif_socials_dribbble) ? $zerif_socials_dribbble : ''),
				'label' => esc_html__('Dribbble link','zerif'),
				'icon-class' => 'fa-dribbble'
			),
			array(
				'link' => (!empty($zerif_socials_googleplus) ? $zerif_socials_googleplus : ''),
				'label' => esc_html__('Google Plus link','zerif'),
				'icon-class' => 'fa-google'
			),
			array(
				'link' => (!empty($zerif_socials_pinterest) ? $zerif_socials_pinterest : ''),
				'label' => esc_html__('Pinterest link','zerif'),
				'icon-class' => 'fa-pinterest'
			),
			array(
				'link' => (!empty($zerif_socials_tumblr) ? $zerif_socials_tumblr : ''),
				'label' => esc_html__('Tumblr link','zerif'),
				'icon-class' => 'fa-tumblr'
			),
			array(
				'link' => (!empty($zerif_socials_reddit) ? $zerif_socials_reddit : ''),
				'label' => esc_html__('Reddit link','zerif'),
				'icon-class' => 'fa-reddit'
			),
			array(
				'link' => (!empty($zerif_socials_youtube) ? $zerif_socials_youtube : ''),
				'label' => esc_html__('Youtube link','zerif'),
				'icon-class' => 'fa-youtube'
			),
			array(
				'link' => (!empty($zerif_socials_instagram) ? $zerif_socials_instagram : ''),
				'label' => esc_html__('Instagram link','zerif'),
				'icon-class' => 'fa-instagram'
			),
			array(
				'link' => 'http://wordpress.org',
				'label' => esc_html__('WordPress link','zerif'),
				'icon-class' => 'fa-wordpress'
			)
		);

For Zelle Lite the process is a little different. Search for this code around line 162:

/* instagram */
if( !empty($zerif_socials_instagram) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_instagram).'"><span class="sr-only">' . __( 'Go toInstagram', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
endif;

Blow this code add the following:

/* WordPress */
echo '<li><a'.$attribut_new_tab.' href="https://wordpress.org"><span class="sr-only">' . __( 'Go to WordPress', 'zerif-lite' ) . '</span> <i class="fa fa-wordpress"></i></a></li>';

So your code should look like this (We added the WordPress link)

/* facebook */
if( !empty($zerif_socials_facebook) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_facebook).'"><span class="sr-only">' . __( 'Go toFacebook', 'zerif-lite' ) . '</span> <i class="fa fa-facebook"></i></a></li>';
endif;
/* twitter */
if( !empty($zerif_socials_twitter) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_twitter).'"><span class="sr-only">' . __( 'Go to Twitter', 'zerif-lite' ) . '</span> <i class="fa fa-twitter"></i></a></li>';
endif;
/* linkedin */
if( !empty($zerif_socials_linkedin) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_linkedin).'"><span class="sr-only">' . __( 'Go toLinkedin', 'zerif-lite' ) . '</span> <i class="fa fa-linkedin"></i></a></li>';
endif;
/* behance */
if( !empty($zerif_socials_behance) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_behance).'"><span class="sr-only">' . __( 'Go to Behance', 'zerif-lite' ) . '</span> <i class="fa fa-behance"></i></a></li>';
endif;
/* dribbble */
if( !empty($zerif_socials_dribbble) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_dribbble).'"><span class="sr-only">' . __( 'Go toDribble', 'zerif-lite' ) . '</span> <i class="fa fa-dribbble"></i></a></li>';
endif;
/* instagram */
if( !empty($zerif_socials_instagram) ):
echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_instagram).'"><span class="sr-only">' . __( 'Go toInstagram', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
endif;
/* WordPress*/
echo '<li><a'.$attribut_new_tab.' href="https://wordpress.org"><span class="sr-only">' . __( 'Go to Instagram', 'zerif-lite' ) . '</span> <i class="fa fa-wordpress"></i></a></li>';
echo '</ul>';
endif;

That's all it takes, you could add as many more icons as you like. You can pick from over hundred different icons from Font Awesome's official docs. Note some of the new icons might not work if the font awesome version you are checking out is higher than the one we release with the theme. In that case please contact us.

Don't forget to save your changes.

For the Spanish version of this documenation you can check out this article: ¿Cómo añadir iconos de redes sociales en el pie de página?