How Can I Add a Google+ Icon/Link to the Social Icons section?

[thomstark 2]

I'd like to add a Google+ profile icon/link to the social icons section, and make it have the same hover effect as the others. Easy way to do this? Thanks for any help!

[thomstark 2]

http://www.aussieworldtravel.com/

[Rob 547]

Thom, Presuming you mean the social icons at the top of your site, you need to add a hook for the Google+ icon in functions.php. http://www.pagelines.com/docs/base-child-theme See the section here on using hooks. There may be some need to tweak the spacing of each icon. If however, you refer to the social icons at the bottom of a post, that too will require some change to a template. Let us know which.

[thomstark 2]

The social icons at the top which link to social profiles, as I stated, not the social share buttons. Sorry for the unclarity. I just want to add a G+ icon to the list of already built in icons (RSS, FB, Twitter, LinkedIn). If I use a hook, would I have to basically redo all the icons, or could I just do a hook for the one G+ icon to set it next to the ones already there? Thanks!

[thomstark 2]

(I didn't know if accepting your answer would close the question so I rejected it. I probably did that incorrectly. Meant no disrespect!)

[Kate 3]

That's okay Thom... : ) The code Robert linked you too will actually do what you want: adding an additional icon... not replacing the current ones. It's located in the functions.php file of your base theme. (Please make sure Base is activated.) Here's the code:

// add_action('hook_name','function name');
	add_action('pagelines_branding_icons_end', 'add_icons_to_branding');
	
	// function name
	function add_icons_to_branding(){
	
	// what the function does??“in this case adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css
	// and is the image from the CSS is placed in the images folder
	?>
	

Do you currently have the Google Icon? Because you'll also have to assign it via CSS.

[thomstark 2]

OK. I watched the video. I don't understand why the example hook (the stumbpleupon icon) is not showing up in my header. It's already there in the functions.php and in the css. How do I get it to show up? Also, it's pointing to a png file which is apparently mapped. Would I have to add the G+ icon to this sprite-socialicons.png or what?

[thomstark 2]

Thanks, Kate. Still can't get the Stumble Upon icon to appear just as a test case.

[thomstark 2]

And yes, Base is activated.

[Kate 3]

Yes... it's not actually in that code for some reason. I think it was confusing people before. I can't remember the whole thing from off the top of my head, but it would look something like this:

// add_action('hook_name','function name');
	
	add_action('pagelines_branding_icons_end', 'add_icons_to_branding');
	
	// function name
	function add_icons_to_branding(){
	?>
	
	<?php
	// what the function does??“in this case adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css
	// and is the image from the CSS is placed in the images folder
	?>
	[/code]

	
	Basically you would replace that anchor tag with the link to your Google plus page, as well as adding a unique class to it.  So, more like this:
	

[code]// add_action('hook_name','function name'); add_action('pagelines_branding_icons_end', 'add_icons_to_branding'); // function name function add_icons_to_branding(){ ?> <?php // what the function does??“in this case adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css // and is the image from the CSS is placed in the images folder ?>

For the icon: you could modify that sprite image and then re-upload it. Or, you could just upload a new image and assign that via CSS (using that "googleplus" class we created above). Either way would work fine.

[thomstark 2]

OK. I got the StumbleUpon icon to load. I'll try to add a G+ one now.

[thomstark 2]

Thanks for your great help, by the way. I'll be back soon, hopefully with good news.

[Kate 3]

Happy to help Keep us posted...

[thomstark 2]

OK. I added the googleplus icon to the already existing sprite png. It worked! Thanks so much. My last question: is there a way that I can change the order of the icons now? So that google+ is next to facebook, rather than linked in? (see www.aussieworldtravel.com ) My suspicion is that to do this I would have to remove the icons from the header nav settings page and add them manually in the functions page and css. Or is there another (better) way to do it? Thanks again!

[thomstark 2]

Yeah, I just went ahead and did them all with hooks so I could control their order. Thanks again for your help. Very satisfied!

[Rob 547]

Should I close this discussion since you're a happy customer? (Which makes us very happy too!)

[thomstark 2]

Yes indeed. Thanks again.

[Rob 547]

Glad we could help.