Build Your Own Business Website header image

Add Social Media Icons to Posts in Thesis – Part 2 – Add to Home Page

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is Part 2 of Add Twitter, Facebook Like and Google +1 Icons to a Post in Thesis series. In this session, we demonstrate how to add the social media buttons so that they will only show on the home page in Thesis. We begin by showing you where to get these Social media buttons and then how to add them in the customfunctions.php file.

In part 3 of this series, we show how to create a Meta Box that will allow these buttons to show on a regular page.

Video Transcript

Right, okay. So if is single, it doesn’t place it on the blog page. If is single, just places it on the single post. It doesn’t place it on a regular page, right? And it doesn’t place it on the blog page. So what we want to do in order to place it on the blog page is we have to add another conditional statement to this. And so if it’s single and then we add the or operator which is the double bar and then we say if is home… or not if is but just is home. Okay so if it’s a single or if it’s home, it’s going to show up.

Now remember, when WordPress asks if it’s home, what it’s referring to is if it’s the blog page, regardless of what page is actually what you would consider to be your home page. So if it’s single or if it’s home then display it. We’re going to save document here and we’re going to upload that. And then we’re going to come back over and look at it one more time. Now it should show up just fine on the home page. Okay, it does. And it’s going to show up on the second post as well, right? So let’s get rid of that. Let’s change this code out so it doesn’t show faces and get the code. And so it’s the same javascript. It’s just a different piece of HTML. And really, the difference was show faces equals false rather than show faces = true. So we can come over here to this and just type in false instead of true. Save, upload that and then let’s take a look at it again. There we go. So we no longer have that odd inconsistency in heights.

I want to put this back up here now. I’m concerned that it’s going to run into a problem with the… oh, let’s just see how it runs into the image here in a second. So now, we’re going to add the Google + button. Adding the Google + button is pretty much the same thing as adding every other button so we just have to search for Google + button… +1 button, pardon me… then come down here to the +1 button code. And I’m going to choose a medium size, it’s going to be in line. Let’s see, I think we’re going to keep this down to 300 pixels as well.

And once we’ve done that, what we have here is the code that we need. First, we have our javascript code. That’s where we place this render call where appropriate. In this case, it’s going to our scripts function. So we’ve got our Facebook script. Now, we’ll put our Google script and hit save. And then we’ll come back and grab our HTML as well and that’s this one little piece of HTML right here. Copy that, come back over here and place it right there. So now we have our + 1 medium. We have our Facebook and we have our Twitter altogether. Let’s save, upload, and refresh.

Yeah so let’s move that up here so we don’t get this little group. Actually you know, I guess as I look at it, that little grouping’s not bad. But I think we’d be better off… I don’t know actually. Maybe that’s okay just like that but let’s just try it up here under the heading too.

So we’ll change our hook here. We’ve got Thesis hook before post. Right now, we’re going to have after headline, Thesis hook after headline. And then upload this thing. Now, let’s see what it looks like in that location. Isn’t that interesting? It’s definitely wrapping that down around that and let’s go to see why that is the case because you can see it’s not doing that here. So why would this wrap that around? Inspect element, lots of little bits of code here to make this happen. Maybe it’s because there’s not quite enough room. Maybe that’s the deal so if we made this thing 200 and… let’s make it 200 pixels and see what happens. So instead of 300 pixels… that’s probably what the problem is. It’s probably just too big. Okay, let’s refresh it. Yeah, there we go.

So there was not quite enough room in order to make that work. I don’t know. You know, you just about think that was a better idea though, keeping that under. I think that probably looked better but I don’t know. Maybe that’s okay. Yeah, let’s just take this up to 400. Let’s take them both up to 450 which is what their native size is, which is going to drop this down automatically because I pretty much liked the way that looked before. There we go. I think that’s actually a nice little grouping of stuff there. So I think we’re just going to go ahead and stick with this just like that.

0 Comments… add one
0 comments… add one

Leave a Comment