Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:15Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 Widgets and Shortcodes

In this lesson, let's create a plugin that adds content to the screen via a widget or shortcode.

Related Links

4.4 Widgets and Shortcodes

Hello, and welcome back to this Tutsplus course on WordPress plugin development. In this part of the course, we're going to look at widgets and short codes. Now widgets are a really useful tool, because they allow the user the ability to add your widget into any widget area in their theme. And shortcodes are also used for users, because they allow users to add some code via a shortcode anywhere they want in a page or a post. So here in my site, that's got the 2017 default theme activated, I've got a number of widget areas. So there's my blog sidebar, the footer 1 and the footer 2, and depending on your theme, you'll have different widget areas. Some themes have loads of them, particularly big framework themes. And some themes only have a sidebar, or maybe a sidebar and a footer. But you will find that most themes do have at least one widget area. So WordPress comes with loads of widgets already installed. So you've got things like calendar and archive and categories and all sorts of other things. But you can create a plugin to add another widget, that you can then use in your site or other people can use in their site, to add that widget to a widget area. And a shortcode is also something that's accessible via the user. So let's take a look at this sample page, and you would add a shortcode by typing the name of the shortcode, Inside square brackets. And that would output the shortcode code into that point on the page when it's output. Now some short codes also have parameters, which makes them more flexible, and I'll show you how to add those as well. Let's take a look at some of the code. First, here's the widget plugin. So that's got some CSS which will be enqueued in the plugin, and it's got a file for the plugin code. So here you've got the enqueueing the stylesheet, and then we've got our widget. And to code a widget, you need to use a class. So you create your own class, which extends the core WP widget class. So here I've got Tutsplus Cta widget. So within my widget, I've got a number of functions. The first one is a constructor function, which constructs the widget and creates it so that there will be a widget in the widget screen. And that includes a class name for it, and also a description which you'll see on the widget screen, in the admin screens. We then need to have a function that outputs the form for the widget. So that's the form in the admin screen, either in the customizer or in the widget screen, where a user would input stuff to our widget. So here we've got a title, we've got a link, and we've got some text. This is a call to action, so we want to give it a title, which is optional. We want to give it some text, which will go in the call to action box, and we also need a link, because a call to action box is nothing without a link. The third function and don't forget we're all still within our class, is an update function. And that will update the database with the new instance of anything that a user inputs to our widget. So that's looking at title, text and link, and it's updating the instance of each to the new instance. We then have a function to display the widget in the site, so without this, it won't be output anywhere in the site. And that defines our variables, for the title, the text and the link, and in this case, I've defined variables for the title, the text and the link. You don't need to do it like that, but I prefer to because it means when I come to code the actual HTML, it's much easier. So I've defined those variables for those three items that people were able to enter in the widget. I've then output the code, so I echo arguments before the widget, which is standard because there are always before widget arguments. And then I have a div with the class Cta, and within that, I'm checking if the title has been filled, because that's an optional field. And if it has, I'm echoing out what goes before it, the title itself and what goes after it. And then I'm following that with a link that contains the text from that text field. I've enclosed my div and echo out the after widget arguments, and then close the function and then the class. And then I need a function to register the widget, so that has created the widget, but unless I register it, it won't actually work. So we then use the register widget function here. So I'm simply registering my widget called tutsplus_Cta_Widget and I'm hooking that to the widget init hook, which is the standard way that you register a widget. So that's how you create a widget plugin. Now let's take a look at a shortcode plugin. So the first one is a straightforward plugin with content. So again, I'm enqueueing a style sheet, and then I've got my shortcode. So I'm calling it tutsplus_cta_tags. It's got attributes and it's got no content to start with. The ob_start ensures that the output of this shortcode, appears in the right place in the content. If you don't use that, it'll output it at the beginning of whatever element that you're in. So that might be at the top of your content, it's not random, but it feels pretty random when you see it happen. So you use that ob_start, and then you've got div class with the Cta. And that echoes out the content, which is this second parameter here, for the shortcode. Close the div, and then return ob_get_clean, is the mirror of this ob_start and ensures that it's returned correctly. So return ob_get_clean, will return this object, this cta. So we then use the add a shortcode function. So that's different from anything else we've looked at. We're not using add action, or add filter. We're using add shortcode, cta tutsplus_cta_tags. So the two parameters here, the first one is what somebody would type in into their admin screen to add the shortcode to their post. And then the second one is the name of my function. So if I copy this and I go into my site, and I replace here name of shortcode with cta, that will output the text from my call to action shortcode. Now let's take a look at a shortcode with a little bit more complexity. So here we have a shortcode with more parameters. So again, we've got enqueuing the style sheet, we've got tutsplus_cta_atts, that's the name of the function. It's got attributes, and the content is null to start with. So we then define some default attributes, some text and a link, which is nothing at the moment. The user would need to add the link. But I could add that in my code if I wanted to. We've got ob_start and ob_get_clean here like we did last time, and again, we've got a div with a class of cta. And in this case, it's slightly different. So instead of simply outputting, the content that's defined by the plugin, the user can define the attributes. So again, I do cta in my shortcode. And if I just typed in cta, it would output it with these as the attributes, join our mailing list, and the link would go nowhere. But if I change that, To [cta link = "http//mysite.com"], that would output it with this default text, join our mailing list, wrapped around a link to mysite.com. And I could also change the text. Text = "hello", so that allows the user to define some attributes of the shortcode. And you'll probably have used shortcode plugins that you've downloaded from the plug in directory, to do this. So that's how you create a plugin, either to create a widget, or to create a shortcode. In the next part of the course, we're going to look at a practical project that puts together some of the skills that you've learned on this course. See you next time, and thanks for watching.

Back to the top