Hello everyone!

Many customer asked me about how to add more social icons (such as VK, Instagram,…) for helix framework. So, today I make this blog instruction with this question. Step by step, I will make example for VK social network and LT Inteco – Premium IT Company Joomla! template as example for this blog.

1/ Add more social field with PHP & HTML code for Helix III framework feature

Go to Admin > Extensions > Templates > Templates (File Manager for template), open LTHEME template.

1

Via template file list, click to folder ‘features’, and open file ‘social.php’. We just define new once social param, and make output style for them.

2

+ Via function renderFeature(), define new more social param

$vk = $this->helix3->getParam(‘vk’);

3

+ Then, add more HTML output for this social

if( $vk ) {
$html .= ‘<li><a target=”_blank” href=”‘. $vk .'”><i class=”fa fa-vk”></i></a></li>’;
}

4

* Remember that you must to define Font Awecome class for social because social load font awesome, not icon, in this case it’s “fa fa-vk”, you can see Font Awesome social class here.

2/ Define more social field for Template Settings on Helix III framework

Via Templates (File Manager for template), open file ‘templateDetails.xml’ and go to social defination code (search for keyword ‘social’, you will see it), define option for Template Settings

<field name=”vk” type=”text” label=”HELIX_SOCIAL_ICON_VK” description=”HELIX_SOCIAL_ICON_VK_DESC” class=”child social_icons social_icons_1″ />

5

HELIX_SOCIAL_ICON_VK and HELIX_SOCIAL_ICON_VK_DESC: you can define via language file, or make direct text, example: label=”VK Social Network” description=”This is social network URL and Icon for VK”.

So, now you can go to Template Settings, open tab ‘Basic’, find option ‘Social’, so you can see new social field that we just defined.

6

If you have any questions, please feel free to let me know.

Kelvin from L.THEME

5/5 - (7 votes)
Kelvin

Summer Sale Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now
Last call: Summer Sale! Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now