3.3 Registering Settings and Displaying Fields and Sections

Registering our sections and display fields in this version of the page is a bit more complicated. Because we are trying to make everything more efficient by introducing those two multidimensional arrays, we need to run some loops to repeatedly register sections and fields. So let's do that right now, and we're gonna start in the HOOKS section here. We're gonna add another action and this time we're gonna tap into admin_init. And we're gonna add our own function called ap_init_settings. Again, the rest of the arguments are not required. So now we're gonna go to our other functions section here. And we're gonna write a function that registers and adds settings, sections, and fields. All right, function ap_init_settings. So the same one that we set in our hook here. Now, in order to use these two multi-dimensional arrays, ap_ sections and ap_fields inside a function, we need to make them available. To do that, we're gonna use the keyword global $ap_fields and $ap_sections. That means we can now use these to reference those two-dimensional arrays. All right, so the first thing we have to do is, just like last time, register a general setting, and this will hold all of our options that are serialised. So we're gonna say register_setting, ap_options on both of these fields and ap_options_validation as a validation call back function for the setting, this is exactly the same as in the previous page. Now, what's different is how we are gonna add sections and fields. So, let's start with sections. We're gonna say add sections as defined in the $ap_sections array. We're gonna use a loop, more specifically a foreach loop. So we're gonna say foreach, the variable is $ap_sections, so this is where we look as, we'll call this $section_id and $section_value, right? So what we're saying is, take $ap_sections, take that array and go through each of its elements and grab the first or the key as $section_id and the value as $section_value. So, for example, on the first element of the array, the section_id will be section-theme settings and the section_value will be this array. I hope that make sense. And with this, we have to do the following, add_settings_section, so just like last time but this time, we're gonna use these variables. We're gonna use $section_id, we're gonna use $section_value of title, so for the title of this section, we're gonna use, yeah, the $section_value, which is this array, and we're gonna grab the title key. Then the callback function used to render this in HTML is going to be called ap_render_section and finally, the page will be called ap-theme-options, right? So that's gonna go through all of our sections or it's gonna go through all of the items in our array and it's gonna generate sections based on what we wrote there. It's a much simpler approach rather than writing or registering those three sections by hand. Let's do a quick refresh, see if we have any errors. Okay, that's good, so the only error we have is the fact that ap_render_section is not yet defined. But as we can see, Theme Settings, Styling Settings, Social Settings, all three of our sections are now being displayed. Great. Next, let's go ahead and define the fields. Add fields as defined in the $ap_fields array. It's very similar to what we did before. We'll do a foreach, the variable this time will be $ap_fields, and the key, we'll call it $field_id, and the value will be called $field_value. And inside, we're gonna say add_settings_field for the id or we'll use the $field _id. For the title we're gonna use $field_value, title. The call back function is gonna be ap_render_field. The page is gonna be ap-theme-options, next, we are going to pass in the section of the field. So we're going to say $field_value, section. And finally, we can pass in an argument to the render function or the call back function. In this case its going to be the $field_id, and you're going to see why in just a little bit. Okay, so now if we do a refresh. Yeah, you're going to see all our fields in their correct sections. So we have the logos here, Google Analytics, Search Bar, Color Scheme, Font Pair, Custom CSS. And the three social profile under social settings. Now of course we do not have the ap_render_section or render_field functions yet. So let's go ahead and write those next. Because those are render functions, I'm gonna write them right here. So function ap_ render_section we're gonna declare a global $ap_section, so we have access to that array. And what we're gonna do is we're gonna echo a paragraph, oops, and we're gonna grab the the description for each section. So, how are we going to do that? Well, $ap_sections looks like this. So, what we need is this value here. Now the ap_render_section function can receive some optional arguments. And those arguments among others contain the id of that section. So we're gonna do the following $ap_sections of $args of id and we're also gonna get the description here. And just bear with me, I will explain in just a little bit. Closing the paragraph there. And we're also gonna echo a separator. Okay, now let's see if it works, first. All right, it does tell us that illegal string offset on line 177, which is here. Hm. Okay, so let's see. Did I not write this correctly? $ap_sections, sorry, this is actually meant to go outside like this. So, refresh, okay. So, now we have the proper descriptions for our sections. So, this is how it works. We're using the args or the arguments we receive to get the id of the section that needs rendering, right? So this right here, for example, gets replaced by this, and this is the id. So then what we're doing is we're saying $ap_sections of that id, which gives us, This bit, and from this bit we're getting the description which were done displaying in a paragraph. I hope that makes sense. Next, let's go ahead and render fields. Now, the ap_render_field function receives this $id as a parameter, and this id is the same id that I passed in here. This is the optional argument that we can pass to the call back function. And we are doing this to gain access to certain areas of the multi-dimensional array. We are gonna start by declaring global $ap_fields to get access to that field. And then we are gonna say $options = get_option, ap_options. And then for each field, we're gonna see if there are no options set. We're gonna grab the default ones from the two arrays we just set. So we're gonna say $field_value, mind you this field value is just restricted to this block. So do not mistake it for the $field_value that we used, where did we use it, right here. This is an entirely different variable. So $field_value was gonna be equal to the following. isset we're gonna say $options of $id. So basically if we have seven option for the field with this id, then the field value will be equal two $options of $id, otherwise it's gonna be equal to ap_get_field_default, $id. All right, so let's see what's going on here. We're getting the options from our database. And we're checking, if we have $options set for the field that we wanna render. Then the $field_value variable will get the value that we have in the database. Otherwise, we'll get its default vault. And we have this ap_get_field_default function that we need to write over here under other functions. Let's add it at the very top actually. So function ap_get_field_default and we're passing in an $id. Let's add a comment here. And then we're gonna define the $ap_fields as global and we'll simply return $ap_fields. We'll start by getting the record with the correct $id and then we'll get the default value. Very, very simple function. Now let's do a refresh. Okay, good. We don't have any errors. Now, once we've got the field value, well, you can actually generate the HTML mark up based on the field type. So, what I'm gonna do now is just copy all of this code, walk you through it because there's a lot of code. It's very similar but it's a lot of code and I don't wanna waste your time, so I'm gonna copy it, walk you through it and see the end results. All right, so, we're starting with a switch. A switch in PHP world and other languages is basically a repeated if else, but in a more compact format. So switch, we're getting the type of the field that we need to render. And if the type is text, we do this, break, if the type is upload we do this, break. And so on, you get the point. So if it's text, we do an input type text name, ap_options, of $id for serialization, remember, I explained this in a previous lesson. Then value we're just setting it to the $field_value. And then we're adding a paragraph because of description. And we're getting the description for that particular field. Upload? Not yet, we'll do that in the next lesson. Textarea, very similar, we just need to change the actual HTML from an input type text to a textarea. Checkbox, this is slightly different, we have an input type check box and as an addition we're using the checked function here to either write or to either render or not be checked attribute. We're also adding a label for the checkbox. The radio button. This is a bit different because the radio button has children, right? So I need to generate them separately. We're doing a for loop from 0 to the size of how many children we have. And then for each one we're rendering an input type radio, same thing, a name, ap_options and we're giving it that $id, we're giving it separate ids on the HTML elements. And we're checking whether or not we should add a checked attribute. And then adding a label for each one. Finally, we have the select. And the select also has children so. And just like the radio buttons we need to go through each one, render them and that's it. So now if we do a refresh on our page, this is how it looks like. Our logo and alternate logo are uploads, so we didn't cover that just yet but the rest of our fields are here and they are working. So the analytics tracking ID let us copy this, for example, we're gonna paste that in. We're gonna display the search bar, we're gonna choose Dark here, we're gonna choose Futuristic. Let's say custom CSS. I'm just inputting some random values here, Twitter, Facebook, glink. All right, so now if we save changes, our settings will be saved to the database. WordPress will notify us that the settings have been successfully saved with this message here. And you're gonna see that all of our values are properly saved. If we delete one of them, Save Changes. Yeah, it's gone, so saving stuff, displaying stuff, works just fine. Well, that's it for this a rather lengthy lesson. Everything looks very good so far. All the fields re functional except the image uploads. Those are a bit of a special case so we we'll cover them in the next lesson.