Moving Kubrick gradient into other wordpress themes

Home » Wordpress Tips and Tricks » Moving Kubrick gradient into other wordpress themes – part2

Moving Kubrick gradient into other wordpress themes – part2

29 October 2010
published in Wordpress Tips and Tricks by admin

This is part two of a long recipe called Moving Kubrick gradient into other wordpress themes

In the first part, we adjusted the Kubrick gradient script and make it ready to move into another theme. In this part we will create a simple admin page in the Appereance Menu, make a input form for the two colors we need and use these colors to create the custom gradient.

Step 1.
We need to build a new page in admin area. For this we create a function that contains the menu-building code (my_function_menu in this case), register this function using the “admin_menu” action hook and create the HTML output for the page (the kubrick_gradient function).

In the kubrick_gradient function we call another function that will save the values for upper and lower color. As you can see in the code below , we are using a simple form with 2 fields for upper and lower color. We also use the update_option command in order to retrieve the already saved values .

Copy paste the code below in your function.php

add_action('admin_menu', 'my_function_menu'); function my_function_menu() { add_theme_page( 'Kubrick options', 'Kubrick options', 'manage_options', 'functions.php', kubrick_gradient); }


function kubrick_gradient(){

kubrick_gradient_save();

$options_gradient=get_option('kubrick_gradient');
print '<div class="wrap">

<h2> Edit Gradient Settings</h2>

<form style="display:inline;" method="post"  action="'.esc_attr($_SERVER['REQUEST_URI']).'">
Upper color:<br />

<input type="text" name="gradient_upper" id="font_size" value="'.$options_gradient['upper'].'" size="8"  /><br />
Lower color:

<input type="text" name="gradient_lower" id="font_size" value="'.$options_gradient['lower'].'" size="8"  /><br />
<input type="hidden" name="action" value="save" />

<input type="submit" value="Save Changes">
</form>';

}

Now, Let’s build the function that will actually save our input. For this we are using the update_option command. The instruction will serialize the array given as input so you don’t need to do that (read this post for clarifications).

Also you may want to sanitize the variables (update option should do that but double check) that will be saved into database. Copy this code in functions.php

function kubrick_gradient_save() { if ( isset( $_GET['page'] ) && $_GET['page'] == basename(__FILE__) ) { if ( isset( $_REQUEST['action'] ) && 'save' == $_REQUEST['action'] ) {


			$upper=$_REQUEST['gradient_upper']; // you should saniteze this variable and check if is a code color

			$lower=$_REQUEST['gradient_lower']; // you should saniteze this variable and check if is a code color

			$gradient_options['upper']=$upper;

			$gradient_options['lower']=$lower;

			update_option('kubrick_gradient',$gradient_options);

		}

		}

}

This is all you need to add in functions.php. The code will create a simple admin page where you can save the upper and lower colors for the gradient.

Now, the last thing we need to do is to make the gradient script use the saved values instead of $_GET variables.

To do this open the gradient script and make sure you include the wp_load.php file from wordpress root. Without this we will not be able to use the get_option command (and retrieve the stored values.)

Add this code to the top of gradient script

require('../../../wp-load.php'); $options_gradient=get_option('kubrick_gradient');

After that, replace the $_GET[$var] with $options_gradient[$var] and you are good to go. The script will use as input the values saved via the admin interface.

You can extend the admin pages by adding an ajax color picker or adding extra options but that’s up to you and not the subject of this article.

Download the source files