Build Your Own Business Website header image

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

Difficulty Level -

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.

Community Library Website – Case Study Part 1 – Site Organization
Community Library Website – Case Study Part 2 – Create Custom Post Types
Community Library Website – Case Study Part 3 – Custom Post Type Configuration
Community Library Website – Case Study Part 4 – Custom Taxonomy Decisions – Theory
Community Library Website – Case Study Part 5 – Custom Taxonomy Decisions – Practical Application
Community Library Website – Case Study Part 6 – Incorporating Existing Data Into the Project
Community Library Website – Case Study Part 7 – Creating Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 8 – Creating Non-Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 9 – Creating Custom Post Meta
Community Library Website Case Study – Part 10a – Restore the Database Using BackupBuddy
Community Library Website Case Study- Part 10 – Creating Custom Post Meta – Continued
Community Library Website – Part 11 – Importing Existing Data to the Website
Community Library Website – Part 12 – Prepare Existing Data for import by the CSV Importer plugin
Community Library Website – Part 13 – Import Existing Data Using the CSV Importer Plugin
Community Library Website – Case Study Part 14 – Date in Permalink Configuration
Community Library Website – Part 15 – Importing Images
Community Library Website – Part 16b – Final Data Import
Community Library Website – Part 17 – Add Thesis Post Meta to Custom Post Type
Community Library Website – Part 18 – Add WordPress 3.0 Menus
Community Library Website – Part 19 – Add Post Meta and Taxonomy Information to the Post Display
Community Library – Part 20 – Add topics and audience to book display
Community Library – Part 21 – Display the Rest of the Post Meta in the Post
Community Library Website – Part 22, Create the Permalink Structure
Community Library – Part 23 – Remove Custom Post Meta from Post Display
Community Library Website – Part 24, Add Taxonomy and Post Meta Data to the Teaser
Community Library Website – Part 25, Add Taxonomy Data to the Teaser
Community Library Website – Part 26, Adjust the Teaser Styling Using Design Options
Community Library Website – Part 27, Styling the Teaser Using CSS
Community Library Website – Part 28 – Fine Tune the Teaser Display
Community Library Website – Part 29, Designing a Custom Catalog Page
Community Library Website – Part 30, Using a Query String in a URL
Community Library Website – Part 31, Adding Custom WordPress Menus
Community Library Website – Part 32, Add Custom Menus to the Catalog Page
Community Library Website – Part 33, Add Another Custom Menu to the Catalog Page
Community Library Website – Part 34, Troubleshooting Custom Menus
Community Library Website – Part 35, Add Styling to WordPress Menus
Community Library Website – Part 36, Add HTML Markup to WordPress Menus
Community Library Website – Part 37, Add WordPress Menus to Archive Pages
Community Library Website – Part 38, Add and Style a List of Tags
Community Library Website – Part 39, Add a Search Box to the Sidebar
Community Library Website – Part 40, Add Links to the Sidebar
Community Library Website – Part 41, Add Taxonomy Drill Down Browsing
Community Library Website – Part 42, Custom Loop to Display Custom Post Types
Community Library Website – Part 43, Simple Custom Query
Community Library Website – Part 44, Custom Taxonomy Query
Community Library Website – Part 45, Add Thesis HTML Structure to Teasers
Community Library Website – Part 46, Display Posts from the Last 60 Days
Community Library Website – Part 47, Custom Loop If Have Posts
Community Library Case Study – Part 48, Increase the Number of Posts that Display on the Custom Catalog
Community Library Website – Part 49 – Naming Conflicts in Custom Taxonomies
Community Library Website – Part 50 – Find and Replace Semi-colons in the Database
Community Library Website – Part 51 – Modify Taxonomy Names Directly in the Database
Community Library Website – Part 52 – Sort Posts by Meta Value
Community Library Website – Part 53 – Show the Term Label Only when a Term Exists
Community Library Website – Part 54 – Sort Archive Posts by Meta Value
Community Library Website – Part 55 – Add Sort Order to Custom Taxonomy

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!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment