Build Your Own Business Website header image

WordPress Shortcode Seminar – Part 2 – Create a Twitter Shortcode

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

This is part 2 of the Shortcode Seminar.  In this session we take an HTML link to twitter and make it into a shortcode that can be entered into any post or page.  This is a different style of shortcode than we looked at in the first part of the seminar.  This is a relatively simple process that will give you the ability to create your own custom shortcodes for a variety of uses.  I also demonstrate how I troubleshoot my own errors when writing code.

Please note that this video is best watched in full screen.

Select the link below to watch a high definition version of this video

[S3VIDEO file=’public/liveanswers/LA1-19-11b-twitter-shortcode.mp4′ bgimage=’https://www.byobwebsite.com/wp-content/uploads/2011/02/LA1-19-11b-twitter-shortcode.jpg’ displaymode=’overlay’]

Code Used in This Video

/*********************************************************************************************
* This function defines our twitter short code
*********************************************************************************************/

function byob_twitter(){
$byob_twit = ‘

‘;
return $byob_twit;
}
add_shortcode(‘twit’,’byob_twitter’);

Video Transcript

Okay so… since we still have more time and we don’t have any more questions, I’m going to take this whole short code question another step further. And the next thing I’m going to do is I’m going to create a Twitter short code and this Twitter short code is going to be the kind of link that encourages or that posts the post to Twitter. And so I’m borrowing the code here from let’s see… from WP recipes. They’ve got this little piece of… well, I guess it’s HTML code. They’ve got this bit of WordPress code, it’s an HTML link really that I’m going to turn into a short code.

And so we’re going to start back to custom functions php. This is… yeah, that’s mine. It’s the one I’m working on. And so I guess first off, I’ll just get full copy… this function defines our… Twitter short code. And function byob Twitter… and again that… let’s see. Is that going to require content? You know, that doesn’t require content so I don’t need those… I don’t need this atts another content = no. I can leave that blank. And so I’m going to… opening and closing brackets and then I gotta go back and capture that code again. Okay, get full copy comes back over here and I want to say byob… oh I don’t want to assign. Byob_twitter… twit. Byob_twit = and then I’m going to paste that code. So let’s see if that works actually.

So we’ve got this… currently reading and then there’s the permalink so I’m going to stop it there actually and drop back down and again say, byob_twit = whoops… it’s dot equals. Dot equals and then quotes. Actually, not a quote. Actually, I’m going to rid of that php and I’m going to get rid of this and I want to drop it down again and say $byob_twit.= and then a single quote. Title click to send this page to Twitter, target = blank show on Twitter a and then that. Okay let’s see this suggests we have a problem here. AH ref =. What is the problem? I’m missing something. Oh yeah, I’m missing the semi-colon. Okay so this is concatenation symbols so byob_twit = this plus this plus this and then create a short code so add short code… and then opening and closing parenthesis and I think I’ll just say twit. And then opening and closing quotes again and byob twitter, the name of the function, and then a semi-colon at the end of that. Okay and then we are going to go ahead and save this.

So we’ve created this little bit of HTML, a little bit of php concatenate…oh we need the return statement, that’s right. So now we need the return and then the $byob_twit semi-colon. Okay so that’s going to return the contents of this to the location. We do that and let’s go ahead and save this and then we’ll come over here and we’ll upload it. And then we’re going to go to the site and I think what I’m going to do here at the very beginning of this is just to twit. So twit and update it. I’m going to refresh this and there it is. Share on Twitter. You can see the title – click to send this page to Twitter. And if I click that, it brings up my login for me to add it and so there you go. We’ve got a little short code that… so you don’t need a whole plugin. You can put a little short code in that will do this instead.

And I guess since we have 10 more minutes, we could substitute out the link for an image. So we could simply remove that, save it, and then I’ve got to come back to the site here. I’ve got to go and get a piece of… and image for this. So we will go to Media Library, add New, select file. I’m going to go to the place where I have my icons, my website’s graphics. Icons… I think that this Twitter ping is probably what I want so open that up. The file is empty. Okay, select a file again. Okay, Twitter ping. Oh let’s try a different uploader. Now choose a file and data, websites, graphics, icons, Twitter ping. Upload. Okay, there it is. So now we’ll edit it and we’ll copy it. And let’s come back over here for a second. So I think I need to say class = twit. Yeah I need to add a class to that and then here what we’re going to do is .twit a. And we’re going to say background image URL. Okay, there’s the URL. Close it, semi-colon, background image and then we’re going to say height:… I think that’s like 32 pixels. 32 px… width colon 32 px. Okay, so we have just defined a thing. We’ve defined the a. We’ve got a height and width of 32 pixels and it’s got a background image. So we’ll go ahead and save that and we’ll go ahead and save that. And we’ll upload them and let’s see how that works.

I’m all excited about it now.

Demo 3. I must have failed to… no, I didn’t fail to do all that. Okay so well… maybe I didn’t get it uploaded properly. Custom functions php file upload. Come back over to here, refresh. Well this is the one reason why I use Custom File Editor. Let’s see, do I have a twit down there? I do have a twit, okay. I’m on my custom functions php file. I have a twit down there, I definitely have a twit and I don’t have that extra code. So some of these that used to be working is no longer working. Maybe this is the problem. Maybe what I should have really done is done us a div. And then come back down here and the closing div. Yeah, let’s try that.

Okay, if we inspect that element… format text, div class twit. Class div, class twit. What did I do wrong? Oh it’s missing a semi-colon. You know, you just can’t screw this stuff up and have it work. Oh, it’s late at night now, that’s my problem. So then… oh, bring that back up. It’s that… come back over here and then first this.

Okay so it can find that just fine, no problem with the image itself. 48… oh it’s display block, that’s right. Forgot about that. If we come back over here to CSS, edit CSS, custom CSS. Come down here and say, display block. Block semi-colon. That’s interesting. I think I need to say clear both as well. Okay 12 48. 48, click to send this to Twitter. There it is.

And so now… you know, this obviously… it think folks generally use a Twitter button and this for this purpose but nevertheless, if we click on that now, it takes us over to Twitter. So that clearly does the job. That was 48 by 48, display block colon block semi-colon. And it needed to clear both of those others so clear colon both. Save that document and we upload it. This is the one here. Upload it, come back over here and I’m going to refresh it.

Okay, what did I do? I have class twit, what on earth did I do now? Actually, I screwed up the stuff somehow. I must have… in my fatigue, oh no. I didn’t even have it changed. Yeah, because I changed with custom functions php, not custom CSS. There we go. Off we go to Twitterland. Okay, so look at that. It’s 10 02. You got an interesting little conversation about how to use short codes in WordPress and I think I answered the questions that were on our list so thank you very much everybody for participating tonight.

0 Comments… add one
0 comments… add one

Leave a Comment