Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've added general styling to our widgets, you'll notice that the widget area is kind of bland, because all of the widgets are styled the same ways. Here you see we have lists, and lists of recent posts, and menus and everything. And, they are all styled exactly the same way. This is not very useful for the visitor, because apart from the title of each widget you don't actually know what you're looking at. So in my design, I wanted to add some extra visual elements to select widgets so that it's easy to identify them as what they are. In particular, I want to add icons to recent comments, so that you see it's a comment, recent posts, so that you see it's a post, and also archives.
And I always wanted to change the display of the custom menu, so that you clearly see that it's a menu, because right now the menus are just lists, just like the archives list and everything else. And it's not clear that these are menus and not just lists. Although all of these widgets are already in the monster widget, I'm going to go and add a new set of widgets to my sidebar, so I don't have to scroll up and down so much. So I'll go to the back end and go to widgets. And here I'll add in just the widgets I want to change the style of. So I'll add archives, and custom menu.
And recent comments. And recent posts. And then I'll pull them up above the monster widget. So the custom menu, I have to give a title. And I'll set it to testing menu. And then reason posts and reason comments should both have five in them so I have a series to display. So I'll put reason comments. And reason posts. And, then I'll put archives directly underneath. So now I have the elements I need to style. And the next step is to figuring out how to target them because, right now we have styling that applies to every single widget, and I need to identify just the recent post widget and then add the recent post icon to that, and then I have to find just the recent comment widget and add the recent comment icon to that.
To see how you can target a specific widget, let's take a look at the marker. If you remember back from when we defined the widgets, I mentioned that each widget is wrapped in an aside that has two classes. The first class is widget, so that applies to every single widget. And the second class identifies the particular widget. So, here you see the recent entries widget, has a class widget recent entries. And if we go down you'll see recent comments has widget recent comments. Archive has widget archive. And nav menu has widget nav menu and so on and so on.
So by targeting these classes, we can easily identify one specific widget and, then apply styles to just that one widget and that's exactly what we're going to do. But first, I need to find the icons that I want to use. So I went to Font Awesome. And here I found three icons. This one I'm going to use for the reason posts. It has the Unicode F036. I'm going to use this comments icon for the comments. And it has the Unicode F075. And finally, I'm going to use the archive icon for the archives.
And it has the Unicode F187. So if you remember back to when we added the icon fonts to our main menu here, what I need to do is, use CSS to inject a new icon before the content. Now if I do that right now, what will happen is the icon will appear. Out here on the left-hand side. And that will look weird so, in my styles I also need to shift these specific list items in, and because the list items might span more than one line, I also have to make sure that my icon stays at the top.
So, if you go and look at the code snippets, this is what I've done. I've created one rule that targets widget-reason entries, LI before. Widget reason comments LI before and widget archive li before. So these are the three widgets that will have icons. And I've made one rule set that defines all the common elements. So here at this place each before item as a block, floating to the left, with some padding, and it's shifted to the left. And it uses the font family, font awesome, and has the font size of 14 pixels.
So this only applies to the icon itself, then I go and target the list items. So here I say, widget, reason, entries, LI's that would be the actual item with the real text, and the recent comments LI and I shift each of these to the right. I had to do it separately with the widget archive because the appearance of this particular widget is a little bit different. Once the items are shifted to the right, we have space for these icons. And now we need to define the icons. Here we have the definition for each icon: widget, reason, entries; LI before is F036; within recent comments LI before is F075; and archive is F187.
So now I can simply comment out this set of rules. Go to style.css and find my Widgets area. Here I'm going to scroll down until I get to WidgetLiLi, and then I'll paste my new style set, and now when I go and reload the page,. You'll see, I get those icons applied. So here I have my recent post icons applied. The comments icon applied. And the archives icon applied. The next thing I want to do, is change the styling of my main menu. And here I want each of the menu items to span across the entire width of the widget, so it's easier to click on.
And I also want to add a little line in between them, so they appear like menus. In my code snippets I have the block of code for that. You see it here, but what I'm doing is taking each of the anchors or the links within the Nav menu, and making them into block elements so they span across the whole widget, and I'm just giving it some padding and a border on the bottom. And finally I'm taking away the padding for each list item so we don't have extra space between them. So now I can copy this out, and paste it in and reload the page again.
And now you'll see, the menu actually looks like a menu, and is easy to click on if you're using a touch device. The final thing I want to do, is I want to re-style the RSS widget. Now you'll see here I have an RSS widget that outputs content. And for each of the posts that are output, we have the title, the date, then the excerpt, and then finally, the name of the person who posted this item. Now what I'm going to do is formalize the styling of each of these elements so the date always appears below the title. Because right now you see the date only appears below if the title is very long.
So I want to make this look more like a list of posts. So I'm going to go and inspect the element here and look at a date specifically. And here I see that the date is wrapped in a spam class that's called RSS date. So now I can target that, and I can also target the site at the same time to make sure that the author is displayed below, and I can apply a simple style here. That just break the date and the site apart and display them smaller, and under on line. So, I copy that out, paste it in, go to reload my page a final time.
And now you see in my RSS widget, we have the title. The date, the excerpt, and then the author. So now I have custom styling and visual separation of the main and most popular widgets inside WordPress. And you can take this same technique and apply a custom styling to any other widget you want. And as you can see, it's really simple to do so. So here again, the only limit is your imagination.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.