WordPress.org

Ready to get started?Download WordPress

Forums

Adding description to social media icons (2 posts)

  1. tanvi
    Member
    Posted 1 year ago #

    Hi All,

    I'm trying to edit the header.php file of my template so I can add a description to the social icons on hover - similar to an HTML image title="sample text".

    However, the PHP is boggling me! Any help would be much appreciated. Code below.

    <div class="eight columns mt0 outer-social-wrapper">
    				<div class="social-wrapper">
    					<?php
    						$gdl_social_wrapper_text = get_option(THEME_SHORT_NAME.'_social_wrapper_text');
    						if( !empty($gdl_social_wrapper_text) ){
    
    							echo '<div class="social-wrapper-text">' . $gdl_social_wrapper_text . '</div>';
    
    						}
    					?>
    					<div class="social-icon-wrapper">
    						<?php
    							global $gdl_icon_type;
    							$gdl_social_icon = array(
    								'linkedin' => array('name'=>THEME_SHORT_NAME.'_linkedin', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social/linkedin.png'),
    												'twitter' => array('name'=>THEME_SHORT_NAME.'_twitter', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social/twitter.png'),
    								'facebook' => array('name'=>THEME_SHORT_NAME.'_facebook', 'desc' => "sampletext", 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social/facebook.png'),
    							'youtube' => array('name'=>THEME_SHORT_NAME.'_youtube', 'url'=> GOODLAYERS_PATH.'/images/icon/' . $gdl_icon_type . '/social/youtube.png')
    								);
    
    							foreach( $gdl_social_icon as $social_name => $social_icon ){
    
    								$social_link = get_option($social_icon['name']);
    								if( !empty($social_link) ){
    
    									echo '<div class="social-icon"><a href="' . $social_link . '">' ;
    									echo '<img src="' . $social_icon['url'] . '" alt="' . $social_name . '"/>';
    									echo '</a></div>';
    
    								}
    
    							}
    						?>
    					</div>
    				</div>
    
    			</div>

    Thanks!
    Tanvi

  2. noahjonah
    Member
    Posted 1 year ago #

    I'm looking forward to a post with a solution that differs from mine.(PHP based)

    How about Jquery-Hover?
    I've used it for this sort of thing before.

Topic Closed

This topic has been closed to new replies.

About this Topic