linking social media icons in header and sidebar – 2012

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

https://www.ads-software.com/plugins/widgets-on-pages/

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?

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.

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

<?php

<img src=”https://gator3018.hostgator.com:2083/cpsess6514682726/viewer/home2%2ffuchsia%2fpublic_html%2fcastle-icons/black-tumblr-icon.jpg&#8221; alt=”tumblr” />

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?

https://internalcompass.us/castle

thanks so much

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

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

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

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.