FREELessons: 13Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Adding the Administration Menu

I will start by giving you a quick tour of my WordPress installation here. Now I'm gonna assume you know how to use WordPress and how to install a WordPress. This course is not about that. There are a bunch of resources on how to do those things, so if you don't know, go ahead and install your WordPress first and then come back to this lesson. But if you do, then many of you have a set up similar to mine here. I'm working locally. I'm using a Mac, using MAMP PRO to create, or to run Apache on my SQL servers, and I have a local work installation that always has the latest version, it is called WPIN latest. And inside my Themes folder, I have a folder called Theme Options and this is where I will be working. Now you can use an existing theme, if you have one. You just need to add a couple of things to your functions.php file, or if you want to start fresh, use a blank theme. You just need a style css, an index php, and a functions php. Those are three of the files that you need to create a WordPress theme. So I have those. I don't really have a need for an actual front end. Pretty much everything that I'm about to show you happens in the back end. So this set up works for me just fine. Now, inside my functions PHP, I have a. That loads theme-options-simple.php, which is in the ap-theme-options directory. And I'm using a separate directory just to have better control over custom files. I know that everything related to my theme-options page is in this folder. In here, I have a blank PHP page. So I'm going to start with PHP and the first we have to do is add an administration menu because we need a way to access our theme options page. If we take a look at my dashboard here and In WordPress. You can see that all of these menus here on the left have sub menus. And I want to add the link to my page under appearance, because it makes more sense, right. I could add it on the top level here. So I would have it Maybe after settings. But honestly, as I was saying, these are just top level links that branch down to other links and I think since I have a single link I'll put it under one of these Top menu and up here looks like a very good place to do that. The easiest way to create a sub menu under appearance is to use the add theme page function. Now if we take a look at the word press codex, add theme page accepts a page title A menu title, and a menu title would be displayed under appearance. Capability, basically what kind of users are allowed to access this page. Menu slug, which is a unique identifier. And a callback function. That's used to actually render that page. So coming back to my PHP, I'm gonna say function ap, for my name Adi Purdila, update_menu. And inside, I'm gonna say add_theme_page and I have this great plugin for Visual Studio code that automatically gives me WordPress snippets. It's very, very handy. So the page title will actually be Theme Options. I'm gonna keep it simple. The menu title is going to be the same, Theme Options. Okay capability will be manage options. So I'm basically saying that whoever has the ability to manage options, has access to this page. The menu_slug, we'll just name this ap-theme-options and then the callback function, I'm gonna name it exactly the same way, just with underscores instead of dashes, so ap_theme_options. Right, now by itself, this function will do nothing. Let me actually write some comments here. It's always a good idea to document your code. As I was saying, this function does absolutely nothing by itself. It needs to be hooked on to an existing WordPress function. In our case, that hook is called Admin Menu. So we're gonna use the admin menu hook to load our function, add_action we're gonna use admin_menu, and the function to add, is gonna be ap_update_menu. These are optional parameters. So, what happens now is that whenever the admin menu function is executed, our update menu function is always also executed. So now if we go back to the front end here, and we refresh, notice we only have three links in appearance, refresh and now we have a fourth, Theme Options. And if I click it, we'll get a warning saying that we don't have a valid call back, because the AP theme options function is not dDefined. So let's go ahead and do that. We'll say function ap theme options. And inside, we're gonna start with this. I'll run a check. If the current user doesn't have the ability to manage options, then we're gonna exit the function. This is just a security measure to prevent unauthorized access. So we're gonna say if not current user can manage options, then we're gonna say wpdi and we are gonna throw in our message. However, if the user does have the proper capabilities, we can start displaying the page. The first thing we'll start with is a class of wrap and of course, we need to close the PHP tag here in order for this to work, and we're gonna open it again here. This allows us to write HTML code inside PHP without using echos basically. And here, I'll just say H1 theme options, and then we'll do a form. Action is going to be options.php, this is very important and also the method to post. And let's just open some PHP tags here, we're gonna use these a bit later. But for now, if we do a quick refresh, you're gonna see that we have a blank page. Now to populate this page, we need to create sections, settings, and fields, and we'll do that in the next lesson.

Back to the top