Theme Version 3 – Add A New Top Bar Social

Hello guys, today I will be walking with you to add a new top bar social. We’re writing this guide because we can’t provide all the socials on the top bar as per request, so you can select the one you want and add it by yourself. Let’s go!

1. I recommended backup your website before do anything.

2. Call the file from the parent theme to the child theme to override the original file. Please add this function in the functions.php file of the child theme:

// Call the customize file in the child theme
require_once get_stylesheet_directory() . '/include/header-settings.php';

3. Add the WhatsApp field in the top bar social around line 257 file header-settings.php:

The default code:

					'top-bar-social-icon-type' => array(
	'title' => esc_html__('Icon Type', 'traveltour'),
	'type' => 'combobox',
	'options' => array(
		'font-awesome' => esc_html__('Font Awesome', 'traveltour'),
		'font-awesome5' => esc_html__('Font Awesome 5', 'traveltour'),
	)
),
'top-bar-social-tiktok' => array(
	'title' => esc_html__('Top Bar Social Tiktok Link', 'traveltour'),
	'type' => 'text',
	'condition' => array( 'enable-top-bar-social' => 'enable', 'top-bar-social-icon-type' => 'font-awesome5' )
),

Change the code to:

					'top-bar-social-icon-type' => array(
	'title' => esc_html__('Icon Type', 'traveltour'),
	'type' => 'combobox',
	'options' => array(
		'font-awesome' => esc_html__('Font Awesome', 'traveltour'),
		'font-awesome5' => esc_html__('Font Awesome 5', 'traveltour'),
	)
),
'top-bar-social-whatsapp' => array(
	'title' => esc_html__('Top Bar Social Whats App Link', 'traveltour'),
	'type' => 'text',
	'condition' => array( 'enable-top-bar-social' => 'enable', 'top-bar-social-icon-type' => 'font-awesome5' )
),
'top-bar-social-tiktok' => array(
	'title' => esc_html__('Top Bar Social Tiktok Link', 'traveltour'),
	'type' => 'text',
	'condition' => array( 'enable-top-bar-social' => 'enable', 'top-bar-social-icon-type' => 'font-awesome5' )
),

Copy the header-social.php file from the parent theme to the child theme like this: xxx-child/header/header-social.php file and add the WhatsApp icon on the front end:

The default code:

}else if( $icon_type == 'font-awesome5' ){
	$social_list = array(
		'tiktok' => array('title'=> 'Tiktok', 'icon'=>'fa5b fa5-tiktok'),

Change it to:

}else if( $icon_type == 'font-awesome5' ){
	$social_list = array(
		'whatsapp' => array('title'=> 'WhatsApp', 'icon'=>'fa5b fa5-whatsapp'),
		'tiktok' => array('title'=> 'Tiktok', 'icon'=>'fa5b fa5-tiktok'),

You can check your website back now.