2.3 Displaying the Fields

Displaying the fields is pretty straightforward, we just need to write the callback functions that we defined in the previous lesson. And do some minor tweaks to the ap_theme_options function that's responsible for rendering the entire page. Let's actually begin with that. So, I'm gonna go to the ap_theme_options. And in this function, I did tell you we were gonna come back to this. In here, I'm gonna say settings_fields, and I'm gonna pass in the name of the option, AP_options. An AP_options is this one here. Yeah, so it's basically the ID of our setting. We are basically saying with this function go ahead and render all the necessary code for the fields that belong to he AP_options setting. And then we have to create the sections. So, do_settings_sections and the page, we're gonna say, ap-theme-options. An ap-theme-options is this one defined right here when we created our theme page, and it's also present in the add_settings_section and add_settings_field functions. Already, you can see the connection here. The sections and fields are connected to a certain page. And by doing this we can actually create multiple theme options page with different sections and different fields. That's one thing you should keep in mind. All right so once we do this, let's do a quick refresh. You're gonna see that we have general settings so it's right here but we don't have a valid callback. This general_section_callback function. And we also don't have a valid call back in this test_field_1_callback function. So let's go ahead and write those two functions. First we're gonna write general_section_callback. This will be used for displaying the section HTML. We'll just say echo. This is a section description, like that. Save. And if we come back refresh. Yeah, you'll going to see that under general settings, we have a section description and we can use this method to add descriptions to our sections. Basically it's a very simple way to do that. Next, let's create our field. We're gonna create a function called a test field one callback which is exactly the name we used here and add_settings_field. In the inside were basically echo an input type text. Because that's the thing that we need right now. If we need a checkbox, we would render a checkbox or radio button or whatever we would need. So actually the first thing will do is do the following. We're going to define a variable called options and that's going to be equal to get option and we're going to pass in AP options. So what does this do? Well it's using the get option function to query the database and get the value of the ap options setting. Remember, this is our general setting. It's where all of our options will be stored. So, we're getting this into the options variable. And then, we just close the PHP tag here and I'm going to open it again here because I'm going to write some HTML, I'm going to say input, type text the name is going to be, and this important, AP options. So the name of our setting, and then in square brackets, AP test field one. So why exactly did I do that? Well, AP options is the name of the setting. AP test field one is the unique identifier or the ID of our field. So by doing this, we're basically saying that ap-test-field-1 should be serialized, and placed inside ap_options. In other words, ap-test-field-1 belongs in the ap_options setting. We're simply gonna add a value here, and we're gonna say PHP echo options and inside options we're gonna pass in ap-test-field-1. And then we're gonna close the PHP tag here. Okay so what is exactly does this do well. It will print the option found in the database for this field. If we saved a value in that fields it's gonna be saved to database and then we can retrieve it by using the get option function. So, get option because we're using a serialized value, get option will be an array. And we can access values or portions of that array by using certain keys like for example ap test field one. So let's actually give this a go and see if it works. So I'm gonna refresh. You're gonna see a field here. But one thing that I forgot to add is a submit button. So right here in my form I'm simply gonna use the submit button function that exist in WordPress and I'm gonna use it with the default parameters. This will print a save changes button that's gonna save whatever value I have in this field that's gonna take it to the database. So test field one, let's say hello. Save changes, and now if I refresh the page that hello value has been saved to the database and it has been brought back by this get option function. And it was set as a value for my input type text. Now, let's have a look in the database and I'm simply gonna hit browse again. We're gonna scroll all the way to the bottom and you'll see the option name AP options. Yeah this is the setting that we registered. And this is Its value. So, if for example I work to do, let say right here. Just bear with me with this. If I'm gonna say print_r options and I save, notice what the value of options is. It's in array, yeah. It's an associative array basically comprised of key value pairs. This is the key, and this is the value. And this is how all of the options are saved in database in this one setting. And that's happening, and I reiterate this, because we set the name to this value when we created our input. So I hope that made sense. When I first learned about these things, it took me a while to get my head around them. But, ultimately, they're pretty simple. Now, the fields are displayed. So there is just one last step. Sanitizing that input. And we're going to do that in the next lesson