Designing for WordPress

4.1 WordPress Widgets

Welcome back to the course. In this lesson, we're starting to create some of the more advanced patterns for our design system and we'll kick things off with some of the most popular WordPress widgets. So, let's begin. In figma, I created another page, another frame and we're ready to start. Now if you remember from our project brief, the widgets that we need to create our recent comments, categories, recent posts, and search. So, let's start with recent comments. Every widget in WordPress, let me just start with this. Every widget has a title and it has content and the content is different from widget to widget, you can have maybe a list. You can have text, you can have a calendar, you can have a form. So it depends. But pretty much all the widgets have a title. So let's start with that. We'll go back to our typography and let's see we'll choose a let's say display medium. This is 51 pixels is pretty high. It's pretty big for a title. So we're gonna choose between display small and display extra small. This I believe is a bit too small. So I think this one will do the trick nicely. So display small is the one that we're gonna use. So grab that paste that in, let's say recent comments, and then in WordPress, if we take a look at our local installation here, and we'll scroll all the way down to the widgets. You'll see that recent comments looks like this. So we have the title. And then we basically have a list where every list item has a link to the comment author the word on. And then another link to the actual post where they commented. So that's what we'll do as well. Recent comments, then we'll duplicate this. We'll use the body text lotto regular 18. Let's get the colors, right? We're gonna use grey AD, for both of these and perhaps actually on the header, the headings, excuse me, we're gonna use a darker color we're gonna use grey 100. Also, let's add 32 pixels space between these two. And then we're gonna have something like this. I'm just gonna paste and some around data here and this will turn into a link. So I'm gonna use bold and this is well and also we're gonna change their color. We're gonna use orange 120. Cool. So now, let's group this up. Create a vertical auto layout. Zero here, 16 pixels between. Sorry, 0 here and 16 pixels between items. So now I can just duplicate this and just update it with new content. Okay, make sure you align this to the left. And let's replace the onward. This is gonna be a regular and it's going to have this color. All right, and that's the first widget recent comments. Next is categories. So let's duplicate this. Also change the title here. And if we look back in WordPress, you'll see that categories is just a list of links to the various categories. So we're gonna do that here as well and just change the layout accordingly, like that. Next is recent posts and recent posts is also a list of links. So let's update the content there. Make sure this is aligned to the left. And finally, we need a widget for, search. Now for this search widget, we're going to grab our search form that we created earlier. And actually, let's don't forget to change the text in the button here. So Copy that. Let's actually group it up. And let's paste it in. This actually should be horizontal 16 pixels in between. Okay, and we're good to go. That's how these four widgets will look like see how easy it is to create this once you have all the information written down and documented, super simple. Now for the project or for the written documentation, let's go to design system. Let's create another page here called Advanced patterns create another page called WordPress widgets. And in here we can put things like what widgets are documented in the system. You can say that each widget has a title with the properties of display small which is also documented. How much space there is between the title and the widget content. And then any link that's in the widget is bold and the color oops, is orange 120. And where you have lists, list items have a 16 pixel distance between them. All right, so we've designed and documented some of the most popular widgets in WordPress. Next we need to design and document a WordPress, post, right? This is a big one. So we're gonna cover that in the next lesson.