WordPress.org

Ready to get started?Download WordPress

Forums

linking social media icons in header and sidebar - 2012 (30 posts)

  1. dequecolour
    Member
    Posted 1 year ago #

    does anyone have a good resource they can point me to for the following --

    i'd like to place social media icons that i created myself in the header (and also experiment with putting them in the sidebar) in a 2012 child theme.

    all i know how to do is to add code that will make the social media icon images show up by linking to the image
    --- but i don't know how to make the image actually hyperlink to go to the correct social media site.

    furthermore, if the social media menu i create is a box, like what i have here on the sidebar -- (www.internalcompass.us/castle) how do i bust it up via code to make each icon go to the correct social media site? (as opposed to that entire image being a single unit that could only link to one place?)

    i feel like the code for these two tasks is probably not rocket science but right now it's greek to me.

    kelly

  2. wp-21
    Member
    Posted 1 year ago #

    Hi, you can create widgets and place the code of those widgets in your header and footer files of your child theme.

    http://wordpress.org/plugins/widgets-on-pages/

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, it's basic HTML and CSS - you have to use separate images if you want them to link to separate places.

    Then you can add something like:

    <div class="socialicons">
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    
    repeat the images for each one
    
    </div>

    Then you'll need to add CSS as needed:

    .socialicons {
       styles;
    }
    
    .socialicons img {
       float: left;
    }

    Specifics depends on the actual images and where you put them.

  4. dequecolour
    Member
    Posted 1 year ago #

    Thanks so much. If I'm placing code in a header.php file which is in a twenty twelve child theme, it looks like I need a bit more info for the HTML you provided. Do you happen to know how to open and close that code so it can be added in the header.php file of a child theme?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    What do you mean open and close? Do you have a copy of the twentytwelve header.php file in your child theme? Where are the images you want to use?

  6. dequecolour
    Member
    Posted 1 year ago #

    The code above doesn't work on its own, so what I mean is, does it need to be prefaced by or followed by other code.

    I just tried a test to upload one tiny tumblr icon. The address for the image is:

    https://gator3018.hostgator.com:2083/cpsess6514682726/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/black-tumblr-icon.jpg

    Using the code above, in header.php, in a child theme, I get an error on line 3 and the site doesn't load at all.

    To be clear, prior to this, I've just been using a graphic image for my header, loaded into wordpress under the dashboard through the header button under appearances. So, this is the first header.php file the child theme has seen.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Where did you add the code above to the new header.php file - please post it here using the code buttons.

  8. dequecolour
    Member
    Posted 1 year ago #

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You have to leave the existing code in the header.php file and ADD whatever you want to add to the header of the site.

    What's the link to your site?

  10. dequecolour
    Member
    Posted 1 year ago #

  11. dequecolour
    Member
    Posted 1 year ago #

    appreciate you clarifying that info. i initially edited the functions.php file and just thought all the files behaved the same way which i understand they do not.

    so i'm going to go pull the header.php info from the twentytwelve theme and add in the code above. that will be a start. thanks again

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Only that first section of code goes in the header.php file - and you need to put it in the correct place - I'd need to see your site to know what that is - and right now only the error code is showing.

    The CSS code I posted should go in the child style.css file.

  13. dequecolour
    Member
    Posted 1 year ago #

    hey sorry i shared that link without fixing the site. i keep making rookie move after rookie move today, it seems..

    internalcompass.us/castle -- you can see the site now.

    right, i understood about the CSS going in style.css, thank you. i don't know where the code goes within the files in either case, although i'm up for some trial and error if need be

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    So do you want them in the same approximate location as they are now as part of the image you're using? (Assuming you're going to remove them from there?)

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    But also, did you already modify the header.php in the parent theme? If so, you need to move that file to the child theme and restore the unmodified parent file. Keeping modified themes in the parent file is likely to cause you much grief when WP is updated and those files get wiped out.

  16. dequecolour
    Member
    Posted 1 year ago #

    Yes, and yes, I would edit the image so they don't show up there twice.

  17. dequecolour
    Member
    Posted 1 year ago #

    The line above was in response to the previous q's.

    With regards to modifying the header.php, I did not touch it in the parent theme, no.

    I do need to address that issue with another file, that I did touch to create the posts in two columns on the homepage, but I can't remember how I did that, so I'll have to wait until it comes back to me.

  18. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Can you post the header.php you are using? (from the parent if you don't have one in the child?)

  19. dequecolour
    Member
    Posted 1 year ago #

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
    
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    <nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    	</header><!-- #masthead -->
    
    	<div id="main" class="wrapper">
  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That IS a modified version...the header image is below the navigation in default...

    Anyway, you need to make a copy of this file and put it in the child theme and add this:

    <div class="socialicons">
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="URL TO THE IMAGE" alt="ALT TEXT FOR THE IMAGE" />
    </a>
    </div>

    between these two lines:

    <?php endif; ?>
    
    <nav id="site-navigation" class="main-navigation" role="navigation">

    You'll need to replace the ALL CAPS TEXT in each of those sections with the relevant URLS for each social icon image and the link to the page for each one.

  21. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Also add this to the child theme CSS:

    .socialicons {
       float: right;
       width: 200px;
    }
    
    .socialicons img {
       float: left;
    }

    We'll have to adjust this CSS after we see the other in place...

  22. dequecolour
    Member
    Posted 1 year ago #

    doing this now. can't thank you enough

  23. dequecolour
    Member
    Posted 1 year ago #

    any idea why it created a new header underneath the original header?

    internalcompass.us/castle

  24. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Possibly because the header.php code you posted wasn't actually the one on your site or the one you modified - since there seems to be some confusion about that. Can you post the header.php file you now have in the child theme - and again, you MUST use the code buttons when posting code here - that means click the code button - then paste the code and then click it again to get a closing code backtick.

  25. dequecolour
    Member
    Posted 1 year ago #

    <?php
    /**
     * The Header for our theme.
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
    
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
            <div class="socialicons">
    
    <a href="https://www.facebook.com/travelwithacastle">
    <img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/fb.jpg" alt="fb" />
    </a>
    
    <a href="URL FOR THE LINKED TO PAGE">
    <img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/instagram.jpg" alt="insta" />
    </a>
    
    <a href="http://pinterest.com/travlwithcastle/">
    <img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/pinterest.jpg" alt="pinterest" />
    </a>
    
    <a href="www.youtube.com">
    <img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/rss.jpg" alt="rss" />
    </a>
    
    <a href="https://twitter.com/travlwithcastle">
    <img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/twitter.jpg" alt="twiiter" />
    </a>
    
    <a href="www.youtube.com">
    <img src="https://gator3018.hostgator.com:2083/cpsess2599559173/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/you-tube.jpg" alt="you-tube" />
    </a>
    </div>
    <nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    	</header><!-- #masthead -->
    
    	<div id="main" class="wrapper">
  26. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't see a double header image, but your code for the new icons is not right and it's incomplete. The image links aren't valid links - try putting the url in a browser window...

    Have you uploaded those icon images using the media uploader? Once you do that, copy the URL for the image into the img src="..."

  27. dequecolour
    Member
    Posted 1 year ago #

    do you see the icons on the right and how they are underneath the main header image? i'd really like them up higher -- layered on top of the white space of my main header image. is that possible?

    i did not insert the main header image in a php file. i just uploaded through the appearances menu in the dashboard under header as a jpg.

    i did go in and add the icons to the media library as you suggested. i had them stored elsewhere online previously -- sounds like only i could view them and they weren't showing up for you.

    internalcompass.us/castle

  28. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yep, now we can adjust the CSS - try changing this:

    .socialicons {
       float: right;
       width: 200px;
    }

    to:

    @media screen and (min-width: 600px) {
    .socialicons {
        float: right;
        margin-top: -105px;
        position: relative;
        width: 200px;
    }
    }

    `

  29. dequecolour
    Member
    Posted 1 year ago #

    amazing.

  30. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That looks really good, BTW :).

Topic Closed

This topic has been closed to new replies.

About this Topic