How do you add more social media icons to the footer?

Thea Ilona
asked 11 years ago

Hello!

I’m using the DW Page – Modern theme and would like to add an Instagram button. It would be awesome if you could guide me step by step 🙂

2 Answers

DominicStaff
answered 11 years ago

To add the Instagram button in the DW Page, you can open the customizer.php file in the folder path “wp-content\themes\dw-page-modern\inc” find the line 353 to 365. Replace the following code:

 $social_links['facebook'] = dw_page_get_theme_option( 'facebook', '#' );
  $social_links['twitter'] = dw_page_get_theme_option( 'twitter', '#' );
  $social_links['google_plus'] = dw_page_get_theme_option( 'google_plus', '#' );
  $social_links['youtube'] = dw_page_get_theme_option( 'youtube', '#' );
  $social_links['linkedin'] = dw_page_get_theme_option( 'linkedin', '#' );
  ?>
  <?php if(count($social_links) > 0 ) { ?><ul class="list-inline social-inline">
    <?php if($social_links['facebook']!='') { ?><li class="social facebook"><a href="<?php echo $social_links['facebook']; ?>"><i class="fa fa-facebook"></i></a></li><?php } ?>
    <?php if($social_links['twitter']!='') { ?><li class="social twitter"><a href="<?php echo $social_links['twitter']; ?>"><i class="fa fa-twitter"></i></a></li><?php } ?>
    <?php if($social_links['google_plus']!='') { ?><li class="social google_plus"><a href="<?php echo $social_links['google_plus']; ?>"><i class="fa fa-google-plus"></i></a></li><?php } ?>
    <?php if($social_links['youtube']!='') { ?><li class="social youtube"><a href="<?php echo $social_links['youtube']; ?>"><i class="fa fa-youtube"></i></a></li><?php } ?>
    <?php if($social_links['linkedin']!='') { ?><li class="social linkedin"><a href="<?php echo $social_links['linkedin']; ?>"><i class="fa fa-linkedin"></i></a></li><?php } ?>
  </ul><?php } ?>

With new code:

 $social_links['facebook'] = dw_page_get_theme_option( 'facebook', '#' );
  $social_links['twitter'] = dw_page_get_theme_option( 'twitter', '#' );
  $social_links['google_plus'] = dw_page_get_theme_option( 'google_plus', '#' );
  $social_links['youtube'] = dw_page_get_theme_option( 'youtube', '#' );
  $social_links['linkedin'] = dw_page_get_theme_option( 'linkedin', '#' );
  $social_links['instagram'] = dw_page_get_theme_option( 'instagram', '#' );
  
  ?>
  <?php if(count($social_links) > 0 ) { ?><ul class="list-inline social-inline">
    <?php if($social_links['facebook']!='') { ?><li class="social facebook"><a href="<?php echo $social_links['facebook']; ?>"><i class="fa fa-facebook"></i></a></li><?php } ?>
    <?php if($social_links['twitter']!='') { ?><li class="social twitter"><a href="<?php echo $social_links['twitter']; ?>"><i class="fa fa-twitter"></i></a></li><?php } ?>
    <?php if($social_links['google_plus']!='') { ?><li class="social google_plus"><a href="<?php echo $social_links['google_plus']; ?>"><i class="fa fa-google-plus"></i></a></li><?php } ?>
    <?php if($social_links['youtube']!='') { ?><li class="social youtube"><a href="<?php echo $social_links['youtube']; ?>"><i class="fa fa-youtube"></i></a></li><?php } ?>
    <?php if($social_links['linkedin']!='') { ?><li class="social linkedin"><a href="<?php echo $social_links['linkedin']; ?>"><i class="fa fa-linkedin"></i></a></li><?php } ?>
     <?php if($social_links['instagram']!='') { ?><li class="social instagram"><a href="<?php echo $social_links['instagram']; ?>"><i class="fa fa-instagram"></i></a></li><?php } ?>
  </ul><?php } ?>

Note: To change the background for the instagram icon, you can add the following code to the style.css file:
.social-inline .instagram a:hover { background: #…; }
Hope this helps !

Jenni Skinner
replied 11 years ago

I added this and an instagram icon showed up at the bottom of my page, but its not an option in the Social Links area so I can’t add an actual link to it 🙁

amylong7
answered 10 years ago

I second Jenni’s question. Where in the code can we add in the actual link?

dominic Staff
replied 10 years ago

You can add the following code under line 242 in the customizer.php file:

// Add instagram icon in customize > Social links.
    $wp_customize->add_setting('dw_page_theme_options[instagram]', array(
        'default'        => '#',
        'capability'     => 'edit_theme_options',
        'type'           => 'option',
    ));

    $wp_customize->add_control('instagram', array(
        'label'      => __('Instagram', 'dw-page'),
        'section'    => 'dw_page_social_links',
        'settings'   => 'dw_page_theme_options[instagram]',
    )); // End Instagram

Regards,