WordPress.org

Support

Support » Themes and Templates » linking social media icons in header and sidebar – 2012

linking social media icons in header and sidebar – 2012

  • 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

Viewing 15 replies - 1 through 15 (of 29 total)
  • 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/

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    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?

    WPyogi

    @wpyogi

    Forum Moderator

    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?

    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.

    WPyogi

    @wpyogi

    Forum Moderator

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

    WPyogi

    @wpyogi

    Forum Moderator

    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?

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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?)

    WPyogi

    @wpyogi

    Forum Moderator

    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.

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

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘linking social media icons in header and sidebar – 2012’ is closed to new replies.
Skip to toolbar