Build Your Own Business Website header image

Community Library Website Case Study – Part 38, Add and Style a List of Tags

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.

This is the thirty eighth in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we begin working on the sidebar in our new catalog page.  We are going to add a search function, some links, a tag cloud and a drill down search function to the sidebar.  In this session we begin by installing the Widgets Reloaded plugin because this gives us a lot of power over the styling, especially of the tag cloud. Then we add the tag cloud and style it with CSS.

Video Transcript

So the next thing that we’re going to do then is… now that we’ve cleaned out the multimedia box, now we’re going to start adding stuff to our sidebar. And if we look back at the list of stuff we’re going to add to the sidebar, we’re going to add a search function and then we’re going to add some links and then we’re going to add a tag cloud. And then also, I’ve got this drill down search function that I want to add as well.

So the way… now what we have to do then is we have to install some plugins and the first plugin we’re going to install is Widgets Reloaded. And let’s go back over to Dashboard and Plugins, add new. And the thing about Widgets Reloaded is it lets us… it gives us a lot of power over the styling of… especially the tag cloud. So I know that you wanted to just put it in a long list so that’s what we’re going to do here. Widgets Reloaded, we’re going to install it now. We’ll activate the plugin and then we’ll go over to our widgets panel which is Appearance… yeah, it’s all the way down here. Appearance and Widgets and working in sidebar1 and we’ll add that tag cloud first. Now you can see that it’s not a standard tag cloud because it’s got this comment: an advanced widgets that gives you total control over the output of your tags.

And so, the first thing is the title and we’re going to call this topics, right? Topics… because what we’re going to do is… the tag that we’re picking is the topic tag. That’s the nice thing is it lets you pick your taxonomy. And then we’re going to put the view link, we’re going to make the format flat as opposed to a list. Just going to be in a… yeah, it’s not going to be list. Well, it’ll look like a list though. We are going to order it ascending by name and here’s where we set things. The…actually you know what? I think that’s right. I think what we actually have to do here is we have to do a list in order for it to be a list, not flat. And you could make them so they are all the same size. Let’s make that… let’s give us up to 100 in that list. And there are other things up here that we can change if we want to but we are going to just say save to this. And then let’s go back over, open link in new tab… let’s come over and take a look at it.

Okay so in this case, what happens is we now have this big long list with a lot of space in between. We might want to decrease some of that space and in this case, the more examples of the… the more books there are with Christian Life for example, the bigger the font is. And so, obviously, there’s limited amount of stuff here about Dementia. There’s one book with that topic in it.

And so, it could be interesting to have these all different sizes like this. However, you can also… Appearance and Widgets… you can also… let’s see what happens when this is flat. I think with it flat, what happens is… yeah, it goes into the normal tag cloud look. So that’s right, we have to keep it as a list like this. And we could include or exclude you know, tags if we wanted to or we could make the tags the same size. So we could make the tags say… everything could be 14 pixels, largest… smallest is 14 pixels as our thing. We’re going to hide the empty ones, we’re not going to show counts and we can just say save. And then come back over and refresh it and now they’re all you know, the same size… all in a list here.

And I think we probably should get them a little closer to each other here. So we’re going to come back over to Firefox and we’ll refresh this view on Firefox and here’s our long list and let’s inspect that element. So it’s wp tag cloud LI and it’s got a bottom margin of 6.92 em. We could get rid of the bottom margin altogether or we could make the bottom margin smaller say, like 5 pixels… or even smaller. How about 3 pixels? Yeah I mean, I think that’s reasonably readable.

So then what we do is come over to layouts or custom CSS and let’s just create a new section here called widgets. It’s going to be widgets and then this is .custom LI widget UL LI .custom LI .widget UL LI. And we’ll say margin bottom colon 3 px.

Okay and we may discover that this affects other things too much so we may want to in fact… because this is LI widget, we might want to UL… we might want to add class wp tag cloud to this so we’ll do that. So now, it’s UL dot and then paste that in and now, this will only apply to this and it won’t apply to other LI widgets you know, where we’ve got those things which I think, is probably better practice in this case. Just make it specific to this… to the tag cloud kind of widget.

Okay and so then we just copy it and come over to custom CSS, paste it, save it, upload it and test it. Yeah, works just fine.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one