We’ve discussed what widgets are and how to manage them in WordPress 3.9 so the next thing we’re going to talk about is how to use them. We’re going to start by adding contact information using a text widget.
Add a Text Widget
Let’s come back over here to widgets. We’ll use this text widget and I’m going to say “Contact Me” in the title. I’ll put in my name and email address and then phone number and website name, www.byobwebsite.com. And my address. So there’s some contact information. Hit save and now we’ll look at the page and here’s my “Contact Me” widget.
Automatically Add Paragraphs
Note how this text all runs together. That can easily be fixed. You can automatically add paragraphs with a click of that button. Hit save and now each of these lines of text drop into individual paragraph tags.
Add Any HTML
You can add any kind of HTML you want to this widget. For example, you could add the HTML tag bold tag or the italics tag. Do that and hit save and the widget displays HTML so that is a nice little feature of the text widget. There are all kinds of things you can do with this text widget. We have instructional videos if you want to learn more about using HTML in the Genesis theme or HTML in the Thesis 2 theme.
Add a Visual Editor to Widgets
Before we work any more with the text widget we’re going to install another plugin because I find that using a visual editor in a text widget is way more useful than just using a straight text widget like this.
Add the Black Studio TinyMCE Plugin
We’re going to come back over to plugins, add new and we’ll search for Black Studio. We’re going to install the Black Studio TinyMCE widget and activate it. Come back over to our Appearance and Widgets menu and now we have a new widget called Visual Editor.
If you’ve watched my videos in the past, this used to be called Black Studio TinyMCE widget, now it’s called the Visual Editor. You can drag that into a sidebar and it gives you all the power of the visual editor inside of a text widget. This can be very useful.
Add Media to a Widget
For example, you can now you can easily add media. Let’s upload a file of one of our pictures. There’s my barking chihuahua jpg. I’m going to choose to insert it at 238×178, I don’t want to link to anything and I’m going to center align it, insert it into the post. We’ll hit save and then come back over and look at my page. There’s our heading, our barking chihuahua and there’s the picture of little Willie, the barking chihuahua.
Add Link to a Page in the Image
As you can see it’s very easy for you to insert an image. But let’s say you wanted that to link off to a page. I’m going to create a new page for that entitled “Willie the Barking Chihuahua”. If you’ve been around awhile you know that I do some demonstrations on a sample website called “The Barking Chihuahua Cafe” which was inspired by William and his chihuahua buddies.
Anyway, now that we have an appropriate page to link to, we’ll come back over to Appearance and Widgets. Go to our visual editor and we can edit this image and link to an attachment page.
Add a Link to a Custom URL in the Image
You can also link to a custom URL. I have to go find my barking chihuahua. Let’s go to dashboard, pages and “Willie the Barking Chihuahua”. I’ll grab its URL, paste it, update the widget and save that update. There’s “Willie the Barking Chihuahua” and now it links off to the page. So this is a very useful tool and it can be used for all different kinds of things.
Ways to Use the Text Widget with the Visual Editor
You can create your own call to action using this. You can easily add any kind of media, any kind of text and you can style the text with headings and paragraphs. You can left align, right align, center. Anything you can do inside the regular text editor you can do here inside of this Black Studio TinyMCE editor. That means there are all kinds of content that you can add to your site using this widget without having to actually write the HTML.