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.1 Admin Plugins

In this lesson, you'll learn about some of the options for admin plugins. I'll also show you how to set your plugin up to work with the Customizer.

Related Links

4.1 Admin Plugins

Hello and welcome back to this Tuts+ course and WordPress plugin development. In this part of the course, I'm gonna show you some examples of the ways that you can use plugins to customize the admin screens within WordPress. And there are two ways to do that, you can customize individual admin screens directly and you can also add more options to the WordPress customizer. So let's start by taking a look at another plugin from this three more practical projects course from Tuts+. And this plugin, specifically is to customize the admin screens, so my plugin folder only has one file within it which which is tutsplus customize admin, and that does a number of things. So firstly, I've got editing dashboard widgets, so I'm removing some dashboard widgets using the remove metabox function here. And I'm gonna hook that to the action hook W-P dashboard setup. And I'll show you the action hooks and the filter hooks that relate to the admin screen in a moment. I can then add new content to the dashboard if I want to, so here I've added a widget, and I do that using add_meta_box function. And the add_meta_box function not only relates to the dashboard screen. That is, the opening screen you get when you open up your admin, but it also relates to the screen for editing posts and pages. So you can use add_meta_box to add your own custom meta boxes to all the post and page editing screens. And that's what's also been done in this plug-in to the post editing screen. So here you can see there's a function called add Metal Box and it's adding a metal box called Tut's plus post-editing meta, and that is added to the screen for editing a post. And we can see here that the 1, 2, 3 4th parameter is the post type that this meta box relates to. And that could be an array so you could use it on more than one post type if you want. And for that meta box, we use the Add meta box function where we give our meta box a unique name. And we also define where it's going to be and what post type it relates to, but also is a callback function, this third parameter here. And that callback function here is what populates that meta box. And we did the same thing here on the dashboard. So you can see here, there's quite a lot of HTML that's included within that callback function. So here, when I look at my dashboard, you can see that most of the dashboard widgets have gone, and here, I've got this welcome widget. And if I go to the post editing screen, and I edit in an individual post, you'll see my metabox over here on the right hand side. Now bear in mind that on this site I've got the classic editor plugin installed. Because I've built that plugin to customise the admin before gutenberg was added to WordPress core. And so I've installed the classic editor so you can see that metabox. If you wanted to add something similar Post Gutenberg you'd have to add a blog. And if you want to learn more about doing that, check out this learning guide from Tuts+. So that's how you customize the admin using a plugin, you can also write a plugin that will customize the admin via the customizer. So, what you're actually customizing via customizer is the front end, but it customizes that section of the admin that is called the customizer. And this is a really useful tool to use because over time I believe that the customizer will take a bigger and bigger role in terms of WordPress website administration. In fact, it might be that in the long term, the customizer is where you do everything, because that fits much better with Gutenberg, both the look and feel and also the principles. And for that particular course, I created a theme that modified the customizer, so let's activate that on our site. And then if you take a look at the customizer, you'll see that we added some contact details, images, including a logo and positioning of that, and a color scheme. So people can customize the main color, secondary color, links, and links on hover in this site. So you could very easily add that via a plugin, and that's something I have done for clients in the past. So for example, if they'd been working with a third party theme and they've wanted to be able to customize it themselves, I've created a plugin to target the styles added by the theme. Now, if you are adding a plugin for something like the Cutters game, you obviously need to bear in mind the fact that color scheme is display and so really its better in a theme. Butr adding something like contact details and images is something you could do in a plugin, and there's other things that you could add to the customizer too by using a plugin. So let's take a look at the code for the customizer within that theme. Here in the them I've added an include file in my Includes folder, and that's called customizer.php. So here I've got a number of functions which work with the customizer. So firstly, I'm adding the customizer controls, and to do this you use a class and you're extending the WP customize control class. And here I've created a class called Tutsplus_Customize_Textarea_Control, so here I'm customizing the text area. And then adding a specific section setting and control for that text area. And you don't need a section for every single item that you're adding in the customize, you could add one section and then add a number of controls inside it, and each control relates to a setting. So here you can see I've got the one section, which is contact details, and then I've got three lots of settings, address, phone number and email. So I'm adding a setting and a control for each of those. So the setting adds the date to the database and the control creates control in the customizer, so you can see here It's working with the class. So if I go down, there's another section here for uploading images. And I'm adding a setting and a control for the image itself, uploading it and then a setting and a control for positioning that element. So what I'm doing here, I'm using a radio button type of control, and then giving people choices of where the logo can appear. And then that taps into the CSS in the theme dependent on what people have selected. And then finally, I have a color scheme section, so there's a section here called Tutsplus colors that you can see. And I've added some defaults for those as well, so you can see how this is all done in this include file within my theme, so you could add this to a plugin quite easily. I'm echoing out all of the data relating to the address that's been added in the customizer, and I'm hooking that to the Tutsplus_in_header action hook which is in my theme. I'm then displaying the logo, and again hooking that tutsplus_header_logo and I'm using the styling that was provided. By this radio button up here, where people are selecting where it should appear to start it. And then we have a function that's quite different but that's just an option for the four colors in this color scheme for the database. That have been set via the customizer using those functions above, and then add these styles in the head of each page on the site. So this is hooking to the WP head hook to add it to the head. Adding styles to the head of your pages in your site isn't best practice for CSS. But with the customizer, this is often the only way to do it, and if you're using a standalone include file like this or you're using a plugin to modify the customizer, this is the only way you have to do it. But because you're having to use PHP variables, color_scheme1 here for example, the only way to do it Is by doing this within a PHP file. You can't add this to your CSS files, because CSS files can't read those PHP variables. So that's how you add more elements to the customizer and modify the theme using the customizer, which again, you could do via a plugin. In the next part of the course, I'll show you how you can use a plugin to create content types. So that's post types, custom post types, and custom taxonomy, see you next time and thanks for watching.

Back to the top