4.3 Styling the Query Results With Images

Hello, and welcome back to this task list course on WordPress Plugin Development. In this part of the course, we're going to continue with our plugin that outputs three posts from three different categories, at the bottom of each single post. So if I scroll down this post, you can see my latest posts output is here. But I want these to be laid out next to each other. So I need to add some styling to my plugin. And I do that by enqueuing the style sheet within my plug in. So let's look at the code. So, first I'm going to create my style sheet. So I'll go into WB content plugins. And then it's category post lists. I'm going to create a new folder called CSS. And then within that, I'm going to create a new file called style.css. I'll leave that empty for the moment, and we'll come back and add some css to it shortly. But first, let's enqueue a style sheet. Now my function to enqueue a style sheet, has to be hooked to the WP enqueue scripts hook. So my first parameter, is WP. Enqueue. Scripts. And my second parameter, is the name of my function. So first I need to register my style and then I'll enqueue it. On the first parameter is a unique ID for my style. And the second parameter, is the location of the file. So this tells me, this plugins URL function in itself has two parameters. First is css/style.css. So that's the path to my style sheet. And the second, tells WordPress that this is in relation to the current file. So this file is in the main folder of my plugin. And css is also a sub folder of that with style.css in there. And then I'll enqueue style. The only parameter is that unique ID, so I don't need a comma there. So that will enqueue my style sheet. So I can save that. We won't actually make any difference to anything just yet, because I need to add some styles to my style sheet. So I'm going to do that. So I've just added some commented out text here, so I know what's going on. And the first thing I'm going to do, let's take a look at the code. So I'm going to inspect this and see what I want. To highlight and what I want to target. So I've got my section, plus equals category posts. And then within that, I've got an article. So I want to write a SNS targeting that article. So firstly, I want the width to be 31%. The margin on the right. To be 2%. And float to be left. And for it. Not clear. So I'll save that, and then go back into my post, close down this inspect window, and see what we get. So here, we now have out latest post. So now is at the bottom of the main content, but it's laid out in a way that makes it more compact, and more engaging for readers. So that's how you create a plugin, to output some posts using WP query. And then to enqueue a style sheet, to add some styling to that plugin and to what it outputs. In the next part of the course, I'll recap on what you've learned as you've gone through the entire course. See you next time, and thanks for watching.