3.1 Creating Section and Field Definitions
In the previous page, we defined our sections and fields in the initialization function. This approach is fine for just a few fields, but when we’re dealing with multiple fields and sections, we need to find a better, more elegant and efficient solution. Let’s begin.
1.Introduction3 lessons, 10:54
2.Coding a Simple Page From Scratch4 lessons, 33:07
3.Creating a More Complex Page5 lessons, 58:33
4.Conclusion1 lesson, 01:08
3.1 Creating Section and Field Definitions
In this chapter, we're gonna create a more sophisticated theme options page, with multiple filed types, with more options for validation. We're gonna implement an image upload or so. There's gonna be quite a bit of work but we are gonna structure it, in an easy to understand way. Now, the very first thing we have to do is think about creating the sections and fields. We're gonna use the same setting that we used previously which is AP options. But in terms of sections, we're gonna have three of them. And in terms of fields where there gonna be a lot. And the way we did things in the previous lesson. Just using that function to manually register the section and fields. It was okay for a limited number of dates. But when you're dealing with, let's say 20 fields, right. That's not a good way to do that. It's not very efficient. So we need to find a better way, and that comes in a form of two multi dimensional arrays. And by using these along with some loops in PHP, we can create a far more efficient and elegant solution for registering these fields. So, I changed things up a little bit in functions PHP. I now include theme options.php file which is this. It's just a copy of what he had before. And what I'm gonna do is simply, select pretty much everything and delete it. So now we have nothing [LAUGH] right? We don't have an AP theme options page anymore. Now, in this lesson let's create the section and field definitions. First thing we're gonna do because this file will get quite large is create a table of contents. And the table of contents looks like this. We're gonna do our definitions, we're gonna implement the hooks, we're gonna write our render functions, our sanitize functions, custom scripts. And we have a section at the end for other functions. So now let's start with our definitions. Let's begin with Section Information. Now what exactly is the structure of a section? Well, it has a title and it can have a description. But instead of manually defining these sections, let's put them in a multi dimensional array. So we're gonna define a variable called ap_sections. That's gonna be equal to an array. And inside that we're gonna use the key value pair methods, so we're gonna have a key and then the value is gonna be another array. That's why this is called the multi dimensional array. Because we basically have an array inside of an array. And accessing a key from the main array, will actually give us instead of a string or a number, it's gonna give us another array. So, we're going to say the first key will be section-theme settings. That's going to be an array that has two other key value pairs. The first is gonna be for title and actually have a snippet here. So we're gonna say title. We'll call this theme settings. And then we're gonna have a description. That's gonna say General theme settings. And we don't need the comma there anymore. Right, so that is our first array item. And this is what's responsible or what will be responsible for creating the section with the ID of section theme settings. Now let's go ahead and add two more sections. We have a section for styling settings with these values and one for social settings with these values. Now let's go ahead and create field information. We're gonna define an array that's called ap fields. That's gonna be equal to the following. Just like the section array this is gonna be multi dimensional. We're gonna start with the first field, that's gonna be it a logo. And a logo will have multiple properties, right? You can have a title in our case, we'll just call it Default logo it can have a type, in my case it's upload. Now these types you can name them whatever you want, but we're gonna use them later on to decide what type of HTML we're gonna render on the page. Next, what else can it have? A section, right. We need the section to which this field belongs to. In our case, it's gonna be section theme settings. So, the first one here, we're getting this ID. What else? Let's do a default field, and this will give us a default value. Right now, we don't have anything. We need a description for it. We can name it desc, description, whatever you want. Finally, we're gonna do a sanitize property and this will have information of how this field will be sanitized. Again, we're going to use this later on to decide what type of validation or sanitization to apply to this particular field. And with this one field complete this time to add the other fields. So let me just go ahead and do that right now. So I just pasted in a bunch of field that I had already prepared just so I can save sometime, and now I'm gonna walk you through them. So we have logo alternate, that's also an upload type basically it's logo that you can use on. A different type of background, like a dark one. Then we have Google Analytics which is text. Notice we have a different keyword for sanitize. This will be used later on to apply different sanitization techniques or different validation techniques to the field. Then we have the search bar which is a check box It has an additional property as a label. And I just wanna make a quick note here with the risk of repeating myself. How you define these race is entirely up to you. You don't need to name this label or section or title. You can name them however you want and you can have as many properties or as many values in that array as you want. It's what you do with them afterwards that's important, right? So for example, label will be used to render a label HTML element. Next, we have a color scheme which is a radio button with two children in the form of one array, light and dark. Now we have a select font here with multiple children. Customs CSS which is text area. And then finally, we have social Twitter, Facebook, and Google plus as text values. So these are all the definitions that we need. Now we're gonna write some PHP loops, some functions and we're gonna register these sections and these fields. We'll do that in the next lesson, see you there.