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

Thea Ilona
asked 10 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 10 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 10 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 9 years ago

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

dominic Staff
replied 9 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,