real_karastel
asked 10 years ago

Hi!
How to add new social links and add new icons for left panel?
Thanks in advance!
 

1 Answers
DominicStaff
answered 10 years ago

To add more social media  (example: pinterest, instagram and tumblr ) to the theme DW Minion. Please do as the following:
Step1: Open the extras.php file in the folder path “\wp-content\themes\dw-minion\inc”.
Step2: Add the following code to the line 210 -> 214.

 $social_links['pinterest'] = dw_minion_get_theme_option( 'pinterest', '' );
 $social_links['instagram'] = dw_minion_get_theme_option( 'instagram', '' );
 $social_links['tumblr'] = dw_minion_get_theme_option( 'tumblr', '' );

See the screenshot:
 
– Next, add the following code to the line 241 -> 245.

<?php if($social_links['pinterest']!='') { ?><li class="social"><a href="<?php echo $social_links['pinterest']; ?>"><i class="icon-pinterest"></i></a></li><?php } ?>
<?php if($social_links['instagram']!='') { ?><li class="social"><a href="<?php echo $social_links['instagram']; ?>"><i class="icon-instagram"></i></a></li><?php } ?>
<?php if($social_links['tumblr']!='') { ?><li class="social"><a href="<?php echo $social_links['tumblr']; ?>"><i class="icon-tumblr"></i></a></li><?php } ?>

See the screenshot:
 
Notice: you can find the Media Icon here: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

Then change your icon that you want to display here: <i class=”icon-tumblr“>
Step3:  Please open the customizer.php file in the folder path “\wp-content\themes\dw-minion\inc” then add the following code to the line 202.

// Demo add more social media --pinterest, instagram and tumblr---
  $wp_customize->add_setting('dw_minion_theme_options[pinterest]', array(
    'default'        => '',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
  ));
  $wp_customize->add_control('pinterest', array(
    'label'      => __('Pinterest', 'dw-minion'),
    'section'    => 'dw_minion_social_links',
    'settings'   => 'dw_minion_theme_options[pinterest]',
  ));
 
 $wp_customize->add_setting('dw_minion_theme_options[instagram]', array(
    'default'        => '',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
  ));
  $wp_customize->add_control('instagram', array(
    'label'      => __('Instagram', 'dw-minion'),
    'section'    => 'dw_minion_social_links',
    'settings'   => 'dw_minion_theme_options[instagram]',
  ));
 
 $wp_customize->add_setting('dw_minion_theme_options[tumblr]', array(
    'default'        => '',
    'capability'     => 'edit_theme_options',
    'type'           => 'option',
  ));
  $wp_customize->add_control('tumblr', array(
    'label'      => __('Tumblr', 'dw-minion'),
    'section'    => 'dw_minion_social_links',
    'settings'   => 'dw_minion_theme_options[tumblr]',
  ));

See the screenshot: 

Step4: Log in to Dashboard > Theme > Customize > Social Links then add your link to the frame.
See the  Screenshot: 

– If you want to change the default icon of the social media with your icon. You can add icon to the Media, copy File URL.
See the screenshot: 

 
Next, add the following code to the style.css file.

.icon-pinterest {
background: url('File Url');
}
.icon-pinterest:before {
content: none;
}

.icon-instagram {
background: url('File Url');
}

.icon-instagram:before {
content: none;
}

Hope this helps !

Adrian Ugowski
replied 10 years ago

I did it on my site, but I can’t see Instagram icon.
blog.ugowski.pl

Dominic Staff
replied 10 years ago

If you want to change your icon for the instagram & pinterest You need to add your icon in the Media then copy File Url then change the URL here: background: url(‘File Url’);
If you still face there issue, you can add your icon to Media and send me your username & password your site, we will help you resolve it !
Notice: If you want to use the default icon of the instagram & pinterest , you can remove the following code in the style.css that you have added before.

Adrian Ugowski
replied 10 years ago

Thank you, I deleted the code from style.css and it works. 🙂

Powered by DW Question & Answer Pro