Previously we setup the admin for our elasticFonts plugin and saw it appear in the admin. In this post we will add some functionality to the admin by allowing it to initialize, save values in the database, and retrieve values that are stored in the database. Thanks again to the developers at devlounge for some great ideas on this portion of our plugin.

The first thing we will do is create a function in our admin that will serve to initialize our plugin when it is first installed. A common name for such functions is init() so that is what we will call our function. There will be 3 steps we need to take to set this up. First we will create a class variable to store a name in to reference our options in the database. Next we will create our init function. Finally we will add an action that calls the function when the plugin is installed.

The first part is quite simple and will look something like this.

1

var $elasticFontsAdminOptionsData = "elasticFontsAdminOptions";

Of Note

The next step is to create the init() function within the class. In this function we will initialize our 3 font sizes (these correspond with the 3 text boxes we made in the last post) and then use the WordPress function update_option to store the data in the database. More information on this function can be found at the Update Option page in the wordpress codex. Basically this function takes 2 arguments, the name of the option and the value. We will be passing this an array of values so that we can retrieve them with 1 call to the database instead of 3. The code for our plugin will look something like this.

1
2
3
4
5
6
7
8

function init() 
{
		$elasticFontsInitialValues = array('minSize' => '70em',
							'midSize' => '80em', 
							'maxSize' => '90em');
 
		update_option($this->elasticFontsAdminOptionsData, $elasticFontsInitialValues); 
}

Of Note

The last step is to actually call the action. To do this we will add another add_action call outside our class. The call will look something like this.

1

add_action('activate_elasticFonts/elasticFonts.php',  array(&$elasticFonts, 'init'));

Of Note

The next thing we will do is add some code to our function that prints the admin to handle when the form is posted. We will also add some code to show the current values from the database in the form fields. These tasks are easily accomplished using the update_option function we used previously and a similar function get_option which retrieves the options stored in the database. Our updated printElasticFontsAdmin() function will look like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

 function printElasticFontsAdmin()
 {       	
        if (isset($_POST['submit']))        	
        {
        	if (isset($_POST['minSize'])) 
        	{
			$elasticFontsAdminOptions['minSize'] = $_POST['minSize'];
		}	
		if (isset($_POST['midSize'])) 
                {
			$elasticFontsAdminOptions['midSize'] = $_POST['midSize'];
		}	
		if (isset($_POST['maxSize'])) 
		{
			$elasticFontsAdminOptions['maxSize'] = $_POST['maxSize'];			
		}
                update_option($this->elasticFontsAdminOptionsData, $elasticFontsAdminOptions);       		
 
                echo '<div class="updated"><p><strong>Settings Updated</strong></p></div>';
        }
 
                $elasticFontsAdminOptions = get_option($this->elasticFontsAdminOptionsData); 
 
        	$adminPage = '<div class="wrap">
					<form method="post" action="' . $_SERVER["REQUEST_URI"] . '">
					<h2>' . __("Elastic Fonts Options") . '</h2>
					<h3>' . __("Fonts Data") . '</h3>
					<h4>' . __("Minimum Size") . '</h4>
					<input type="text" id="minSize" name="minSize" value="' . $elasticFontsAdminOptions['minSize'] . '" />
					<h4>' . __("Medium Size") . '</h4>
					<input type="text" id="midSize" name="midSize" value="' . $elasticFontsAdminOptions['midSize'] . '" />
					<h4>' . __("Maximum Size") . '</h4>
					<input type="text" id="maxSize" name="maxSize" value="' . $elasticFontsAdminOptions['maxSize'] . '" />
					<div class="submit">
					<input type="submit" name="' . __("submit") . '" value="update" />
					</div>
					</form>
					</div>';        	
 
		echo $adminPage;
}

Of Note

At this point we should have a fully functioning form if we upload our updated plugin. If we activate our plugin (or deactivate/activate if it is currently active) and go to our admin page we will see our initial values in the text boxes. If we update the values and submit they should update in the database as well. In the next post we will add our javascript and a button to make this happen on the frontend.

development, plugin, tutorial, Wordpress, wp