Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:15Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Outputting Content

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, I'm going to show you how you can use a plugin to output content onto the pages of your website. And that might either be static content or it might be the result of a query fetching data from the database. So let's start by looking at static content. And here in this course on, 3 Practical Projects to Learn to Code WordPress Plugins, I've created a plugin that outputs a call to action button that's activated via a hook. So let's take a look at the code, here's my plugin code. So first I'm enqueing the styles which we've already looked at in this course, and then I'm adding this function called tutsplus_cta_below posts, and CTA stands for call to action. So first I'm checking that it's a singular ( 'post' ) and then if that's the case I'm outputting this div with a class of cta-in-post. And that has got some static content in it, For more post like this in your inbox every week, join in our mailing list. Now that's very basic, and if you wanted to amend that, or allow your users to amend it you could use something like a widget or a shortcut to do so, which we'll look at in the next part of this course. But then finally, its hooked to an action. So in my theme, I've got an action called tutsplus_after_content, which is after the content of every single page in the site, but it'll only run the code if we're in a singular post. So let's take a look at the styling that I've added to that. So you see here, I've registered and enqueued a style sheet. So in my CSS folder, I've got a style sheet, and that styles my cta-in-post box. The second thing we'll look at is how you can use a plug in to output the results of a query. So here in another course called, 3 More Practical Projects to Learn WordPress Plugin Development, there's a plugin to create a section menu and that will output a list of the pages in this section of the site. There's also a plugin to create a display of custom posts and that uses WP_Query. So I'll show you both of these so you can see that there are two different functions that you can use to output a query. So first, if we look at tutsplus-section-menus, this firstly checks if we're on a page, because this only operates on a page. It looks to see if this post has got parents, has it go ancestors, and it fetches the top level ancestor for this particular page. And the reason for that is because we want to display a list of all the pages underneath the top level ancestor of the page. So if we're in the top-level of the page, it'll display the pages below it but if we are one of those pages below it, it'll display all the pages at the same level. And then it runs this function called tuts_plus_section_menu. And you can see here this is hooked to tutsplus_sidebar, which is a hook that I've got in my theme in the sidebar. So I'm checking that we're in a page again, and that we're not on the Homepage because this function I don't want to run on the Homepage. We're setting a variable called ancestor, which is the results of the function above, tutsplus_check_top_level_page. So now we've got that ancestor variable we're setting the arguments for our get_pages function. And get_pages is one of the functions that you can use to query the database. So my arguments are that the page is a 'child_of' the ancestor, that it's got a 'depth' of- 1 so that means any depth, and this 'title_li 'option means that the top level one isn't displayed. So I'm now using the get_pages function and saving the results of that to a variable called List_pages. If that's populated, if List_pages, it will then output a section with a heading and I've used class "widget-title" because that fits with the styling in my theme, and then an unordered list with all the sub pages. And that uses WP list pages because that will create a list of all of those pages with a link to each of the pages. So that's how you use get_pages to query the database and output content onto your site via a plugin. Now let's take a look at WP_Query. So this tutsplus-category-posts-list plugin uses WP_Query. So firstly, that's got a style sheet that it's registered at the top, and then we've got this function called tutsplus_category_ post_listing. And that will list the latest post it up to four categories on the site and output them with their featured image. So the first thing I want to do is fetch some categories. So in fact, it's outputting 3, because I've got number of 3, and random as my order. So I'm fetching 3 categories, if that categories variable is populated I'm then outputting a section, and we'll come back to this do_not_duplicate in a moment. Within my section, I've got a heading that says, ' Latest Posts ' internationalized, and then for each of my categories, I'm setting up some query arguments. So I want my 'post_type' to be "post", the number of posts output to be 1, the category to be the category that I fetched using get categories, and the post not to be in do_not_duplicate, so if you remember that was up here. And do_not_duplicate is an array of values which will include the post IDs of all the posts that are output as this loops through you're using this foreach loop. So I'm then using WP_Query to run a query, and if the query has posts I'm running what looks a lot like a standard loop. So I'm outputting an article with an h3 in it, the_post_thumbnail if it's got one, and then an h4 with the_title inside a link to the post, and then the_excerpt. I don't want to output the full content cuz this is designed to go at the bottom of each post in my site and display the latest posts in each category. I'm then adding the ID for this post to that do_not_duplicate array, so that when I go back up here and check this in my foreach loop, I won't get the same post duplicated again if it happens to be in more than one category. And then finally and very importantly wp_reset_postdata resets the query back to the default query that WordPress is running. If you don't use that at the end of WP_Query you could end up in all sorts of mess with your queries. I'm closing the section and then my function is hooked to add_action hook called tutsplus_after_content, which is a hook that I've added to the child theme that I created in this course to output the content. So that's one way of using WP_Query to output data from the database via a plugin. There are lots of other ways that you can use WP_Query, it's a hugely flexible class and one that I use a lot. And if you search for it on the Tuts+ website you'll find that there are a lot of tutorials and courses helping you to use WP_Query. In the next part of the course, we're going to move on to widgets and short codes. And I'll give you an overview of how you create those via a plugin. See you next time, and thanks for watching.

Back to the top