Build Your Own Business Website header image

Add Social Media Icons to Posts in Thesis – Part 3 – Create a Meta Box for Pages

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.

The Verve Meta Box Plugin is no longer available. As a replacement we are suggesting the Types Plugin.

This is Part 3 of the Add Twitter, Facebook Like and Google +1 Icons to a Post in Thesis series. In this session, we discuss how to create a meta box that will allow us to choose to display Twitter, Facebook Like and Google +1 Buttons on regular pages. We do this by using the Verve Meta Boxes plugin.

Video Transcript

Now the thing is now that it’s showing up on our home page and our posts page, we also it to show up on some of our regular pages. And right now, it’s not showing up on any of those regular pages. So we need some conditional language to do that and here’s where it gets fun because what we’re going to do is we’re going to create a little meta box that will sit in the sidebar, that will let you decide whether or not you’re going to display that information on any given page.

And so the way we’re going to do that, we’re going start off by installing Verve meta boxes which is the plugin I often use when I’m showing how to use meta boxes like this. We go to our installed plugins. I don’t think it’s on here. We’ll just make sure it’s not on here.

Okay so let’s add a new plugin. We install Verve meta boxes. We install it. Once it’s installed we’ll activate it and once it’s activated, we’re going to go and create our first box. Okay and you’ll find the Verve meta boxes dialogue under the tools menu so you expand the tools menu, come down to Verve meta boxes and we’re going to create a new meta box. And we’re going to call it display social sharing buttons and this is only going to apply to pages. It’s not going to apply to anything else because we’re going to automatically do this on all posts so it doesn’t matter.

And then we’re going to add a field and it’s going to be a check box field. And the field name will be show sharing buttons. And the field that we’ll be… check this box if you want social sharing buttons to display. At the moment, it’s going to be at the top of the page. Okay, we’re going to add that field.

And now the one thing we need to do to this check box is we need to add some values. So we’re going to come here and click this and the value that we’re going to add is check to display social sharing buttons on this page. Okay and hit return. That adds that little note to it and then we’ll go ahead and say update box. I was looking around for a save button here.

Okay so what we’ve just done is we’ve created a meta box that’s added to our pages. So if we now go to our pages, let’s say we’ll go to all pages and we go to… let’s look at her success coaching page. If we edit her success coaching page, you can see here’s the meta box that we created. It’s called display social sharing buttons and check to display social sharing buttons on this page. And we can leave that right there or we could just pull it over here and drop it in. I’m going to drop it in right there.

Okay so check to display social sharing buttons on this page. I’ve just checked that box. If I hit update, it is now added that value to a custom field called show sharing buttons. This custom field is also referred to as custom post meta and in order for you to see that, we’re going to turn on the custom field section here, under screen options. And now if we scroll down here to the bottom, here on her… we’ve got a lot of custom fields. But in this custom field, for example, we have… where on earth is this thing? Most of these things have been created by some plugin. I’ve never noticed before. But here it is, show sharing buttons and the value is check to display social sharing buttons on this page. So that’s our custom field and that’s the value of that custom field.

So now what we need to do now that we’ve added the ability to add this custom post meta with a check box, now we need to add the ability to determine whether or not it’s been checked from our code. So if we come back over to our code here, now we’ve got if is single and if is home, add this stuff. Now what we’re going to do is say else if and it’s going to be is_page… actually, let’s just make sure this is easily readable. Else if is page so not if it’s single, not if it’s home but if it’s page then what we’re going to do is we’re going to add that conditional. So if that box is checked essentially is what we’re going to ask. And the way we ask whether or not that box has been checked is by using the function get post meta.

So we’re going to start off by defining a value using get post meta. And so we’re going to create a variable called show buttons and we’re going to say the value of the show buttons is the value of this get post meta function. So get_post meta and then if we use our automatic…actually, this isn’t exactly the one… I picked the wrong one too quickly. But in any case, get post meta and the first thing it needs to know is it what the post id is.

And so…we need to close out that with a semi colon. In order to get the post id, we have to grab the global variable post. So let’s say global and then variable post, global post; and then post id here is instead post id. Okay so this little designator, what it’s doing is it taking the id value out of the global variable post. That’s what’s happening here so it’s getting the post id. And then the key is the value that we want to use which, in this case, was that show sharing buttons. If we come back over here, show sharing buttons, this is the custom post meta that we are retrieving. And if we come down here and look at this again, right there. Show sharing buttons so go ahead and copy that because that’s the post meta we are retrieving. And we are going to put that in the place of key, show sharing buttons.

And then the one thing we want to do is we want to tell it that we want it to return it to us as a string and that requires a 3rd value which in this case is just true. True says get this post meta and return the value of this post meta to this variable as a string and a string is just the… well, if it was returned as a string, it would be returning this, check to display social sharing buttons on this page. That would be the returned value if there was a value for it. That’s what we want.

So okay, we’ve gotten the post meta. We put its value in the show buttons. Now we want to check to see if show buttons has a value. So we say if and then just grab show buttons. There’s a number of ways you can ask this question in php. What’s happening is if it gets the post meta and there is no show sharing buttons value then it returns false. If it gets the post meta and there is some value in show sharing buttons then it move it into here. So what we can do is we can check to make sure that the value of show buttons is exactly equal to what we want it to be or we can just check to see… this is the lazy man’s way, check to see if it has some value. And in this case, if you check that button, it automatically gets that sentence as its value. We’re going to start off by doing this, just asking if there is some value there then show it.

So we’d come back over here to this top part and again, grab that, those functions and paste it right here. And so now, if it’s a page, it’s going to get this post meta. Store that post meta as a subvalue as show buttons and if that show buttons has a value then it’s going to do the same thing on the page than it does to the post. That’s how this thing is going to work. Save and then upload and then come back over to here. Let’s go to a page, About Marty. It shouldn’t show up here because we didn’t check that box in the page About Marty. We did check that box in the page the Success Coaching. So there it is, it shows up here in the Success Coaching box but it doesn’t show up in Success Stories because again, we didn’t check that box. It’s only showing up in the page where we check the box.

0 Comments… add one
0 comments… add one

Leave a Comment