custom options page

custom options page

<?php

/*
* Start::Front Page Options
*/

add_action( 'admin_enqueue_scripts', 'consultant_include_myuploadscript' );
function consultant_include_myuploadscript() {
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}

}
/*add_option("home_1_title", ""); 
add_option("home_1_description", "");
add_option("home_1_image", "");
add_option("home_1_link", "");

add_option("home_2_title", "");
add_option("home_2_description", "");
add_option("home_2_image", "");
add_option("home_2_link", "");

add_option("home_3_title", ""); 
add_option("home_3_description", "");
add_option("home_3_image", "");
add_option("home_3_link", "");

add_option("home_4_title", ""); 
add_option("home_4_description", "");
add_option("home_4_image", "");
add_option("home_4_link", "");*/

add_action('admin_menu', 'add_frontpage_admin');

function add_frontpage_admin() {
if (function_exists('add_options_page')) {
add_options_page('FrontPage Options', 'FrontPage Options', 9, basename(__FILE__), 'custom_frontpage_admin');
}
}

function custom_frontpage_admin() {



?>

<div class="wrap">

<h2>Custom Countdown</h2>

<form action="options.php" method="post">

<?php wp_nonce_field('update-options') ?>

<table class="optiontable editform">
<tbody>

<tr>
<th scope="row">Home 1 Title:</th>
<td>
<label for="home_1_title">
<input id="home_1_title" type="text" name="home_1_title" value="<?php if (get_option('home_1_title')) echo get_option('home_1_title'); ?>" />

</label>
</td>
</tr>

<tr>
<th scope="row">Home 1 Description:</th>
<td>
<label for="home_1_description">
<textarea id="home_1_description" type="text" name="home_1_description"><?php if (get_option('home_1_description')) echo get_option('home_1_description'); ?></textarea>
</label>
</td>
</tr>

<tr>
<th scope="row">Home 1 Image:</th>
<td>
<label for="home_1_image">
<input id="home_1_image" type="text" name="home_1_image" value="<?php if (get_option('home_1_image')) echo get_option('home_1_image'); ?>" />

</label>
</td>
</tr>

<tr>
<th scope="row">Home 1 Link:</th>
<td>
<label for="home_1_link">
<input id="home_1_link" type="text" name="home_1_link" value="<?php if (get_option('home_1_link')) echo get_option('home_1_link'); ?>" />
</label>
</td>
</tr>

<tr>
<th scope="row">Home 2 Title:</th>
<td>
<label for="home_2_title">
<input id="home_2_title" type="text" name="home_2_title" value="<?php if (get_option('home_2_title')) echo get_option('home_2_title'); ?>" />

</label>
</td>
</tr>

<tr>
<th scope="row">Home 2 Image:</th>
<td>
<label for="home_2_image">
<input id="home_2_image" type="text" name="home_2_image" value="<?php if (get_option('home_2_image')) echo get_option('home_2_image'); ?>" />
</label>
</td>
</tr>

<tr>
<th scope="row">Home 2 Description:</th>
<td>
<label for="home_2_description">
<textarea id="home_2_description" type="text" name="home_2_description"><?php if (get_option('home_2_description')) echo get_option('home_2_description'); ?></textarea>

</label>
</td>
</tr>


<tr>
<th scope="row">Home 2 Description:</th>
<td>
<?php echo consultant_image_uploader_field( 'image_1', get_option( 'image_1') );?>
<?php echo consultant_logo_uploader_field( 'image_2', get_option('image_2') );?>
</td>
</tr>


<tr>
    <th scope="row">Home 2 Link:</th>
    <td>
        <label for="home_2_link">
            <input id="home_2_link" type="text" name="home_2_link" value="<?php if (get_option('home_2_link')) echo get_option('home_2_link'); ?>" />
        </label>
    </td>
</tr>


</tbody>
</table>

<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="home_1_description,home_1_title,home_1_image,home_1_link,home_2_title,home_2_description,home_2_image,image_1,image_2,home_2_link" />

<p class="submit">
<input type="submit" class="button-primary" name="Submit" value="<?php _e('Update Options') ?> &raquo;" />
</p>


</form>
<style>a.consultant_upload_image_button.button {margin: 10px auto;}</style>
<script type="text/javascript">
jQuery(function($){
/*
* Select/Upload image(s) event
*/
$('body').on('click', '.consultant_upload_image_button', function(e){
e.preventDefault();

var button = $(this),
custom_uploader = wp.media({
title: 'Insert image',
library : {
// uncomment the next line if you want to attach image to the current post
// uploadedTo : wp.media.view.settings.post.id, 
type : 'image'
},
button: {
text: 'Use this image' // button label text
},
multiple: false // for multiple image selection set to true
}).on('select', function() { // it also has "open" and "close" events 
var attachment = custom_uploader.state().get('selection').first().toJSON();
$(button).removeClass('button').html('<img class="true_pre_image" src="' + attachment.url + '" style="max-width:50%;display:block;" />').next().val(attachment.id).next().show();
/* if you sen multiple to true, here is some code for getting the image IDs
var attachments = frame.state().get('selection'),
attachment_ids = new Array(),
i = 0;
attachments.each(function(attachment) {
attachment_ids[i] = attachment['id'];
console.log( attachment );
i++;
});
*/
})
.open();
});

/*
* Remove image event
*/
$('body').on('click', '.misha_remove_image_button', function(){
$(this).hide().prev().val('').prev().addClass('button').html('Upload image');
return false;
});

});
</script>
</div>


<?php
}

/*
* End::Front Page Options
*/


function consultant_image_uploader_field( $name, $value = '') {

$image = ' button">Upload Banner';
$image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so)
$display = 'none'; // display state ot the "Remove image" button

if( $image_attributes = wp_get_attachment_image_src( $value, $image_size ) ) {
$image = '"><img src="' . $image_attributes[0] . '" style="max-width:50%;display:block;" />';
$display = 'inline-block';
}

return '<div>
<a href="#" class="consultant_upload_image_button' . $image . '</a>
<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
<a href="#" class="misha_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>
</div>';

}

function consultant_logo_uploader_field( $name, $value = '') {
$image = ' button">Upload Logo';
$image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so)
$display = 'none'; // display state ot the "Remove image" button

if( $image_attributes = wp_get_attachment_image_src( $value, $image_size ) ) {
$image = '"><img src="' . $image_attributes[0] . '" style="max-width:50%;display:block;" />';
$display = 'inline-block';
}

return '
<div>
<a href="#" class="consultant_upload_image_button' . $image . '</a>
<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
<a href="#" class="misha_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>
</div>';

}