We only have three widgets on the site at the moment. We have this bio widget, the listen to the audio widget and the look at the video widget. Those are going to be fairly straightforward to create. We’re going to build all of those using a plug-in called Black Studio TinyMCE widget, which most of you have heard me speak about in the past.
Create Widgets Using Black Studio TinyMCE
We’re going to plugins and add new. Search for black studio and we’re going to use the Black Studio TinyMCE widget. Now we’re going to install it and activate it. Then come over to appearance and widgets.
We’ve got that one widget area in the sidebar. So we’re going to start off with this visual editor widget. The first one will have Annie Greig as the title. Then we’re going to add media from my media library. Here we’ve got a picture of her. Let’s see attachment and for settings alignment none, a link to none and use medium size for the time being. Insert that into the post.
Then below that, we are going to add the rest of this text, Cognitive Behavioral Therapist and then the rest of this. The text is not going to end up being on one line obviously because the area is not that wide. I’m guessing that this is the English way of spelling behavioral and that the spell checker is using the American way and is showing there is an error.
Let’s go over to the text view for a second. Yeah, there’s too much extra code. Let’s just change all that. So come back over here, grab all this text and let’s stick it in notepad. Now just rearrange the text, copy it and come back to the text editor to paste it.
Let’s make this text an h3. Let’s make that an h3 also and then let’s leave this as a paragraph tag. Center the image and the rest of this. We’ll save it and see what it looks like over here. Let’s view the code.
What would happen if I made an h4 instead of an h3? H4… well what would happen if I make it an h2? Okay and this is set up as a side, as I believe div class sidebar. Let’s see, actually it doesn’t have any structured markup associated with it so what we’re going to do is leave that as an h3 and come back to style it later.
The next one is going to be the one that says listen to free guided hypnosis. Add media and I want the audio to show up here. So I’ve uploaded this audio to my media library and we’re going to insert it into the post. Hit save. Let’s see what that looks like…audio: hello my name is Annie Greig. It works.
The third one is going to be the video in visual editor and the title for the visual editor is this. This one is going to be a YouTube video of guided hypnosis. Let’s go get the video link. Okay, I copied the video URL. Let’s come over here and paste it.
Now what I want to do is use the html5 version of this which is right there and so we can come over here and paste that. Let’s save that. I would have expected it to resolve as a video right there, let’s see what happens. That is resolving as a video but not the way we want it to.
Make the Video Responsive
Come back over here to embed. We’ll have to keep this in mind when we’re picking our Skin because we want this video to be responsive. That’s the whole point of it. The video looking like this is not the way you would really want it to be. That’s what it looks like if we reload it.
It might work okay like this regardless of the Skin, but we may want to look for a Skin that automatically has video capabilities. Either that we look for a responsive video widget for it. I wonder if there’s such a thing? Let’s search WordPress for responsive video widget. Here’s a YouTube Widget Responsive.
Marcie asks, what’s wrong with that widget? What’s wrong with it is that that you can see it’s not in the same shape as the video. It’s narrow and tall but the video is actually wide and short. Ordinarily what you want is for the viewer be able to see the full image of the video in this context. The way we have it configured right now, it’s not that way.
Use YouTube Widget Responsive
Let’s install that plug-in and see if that works for us. Plugins, add new. This might be the easiest way to do this. Install now and we’ll see how it works. Okay fair enough. Let’s come over to back over to our appearance and widgets and look for that YouTube Widget Responsive. There it is. So this will be our title and the video is this one. Let’s see how that works.
So that’s what the video will look like. Let’s play it. So if we want to allow full screen, enable subtitles, auto-hide color, show controls bar, default style, maximum and allow full screen. There we go, that allows us to go full screen with it.
That was the right way to handle that rather than with the visual editor. We got a responsive widget. I wonder if we have slowed our site down any with this? We’ve got fit vids which is what we would have expected to see. Let’s see the page source and see how much extra HTML or CSS has been added.
Unfortunately it’s not well behaved. Oh no, pardon me this page also has the video. Let’s go to Clinic locations. Well, it also has a video so it’s going to have that which means it doesn’t matter.
We now have the bulk of the content transported. We’ve created our menu that we’re going to style next time. We have our widgets that we’re going to style next time. There’s a little bit of content that is not moved over yet but it’s probably best done after we’ve picked the Skin that we’re going to use. Then we will start modifying the templates. I think we’re probably pretty good for the moment.