Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to add a custom option panel to a new template following a tutorial found on NetTuts. I saved all the code for the option panel inside a file called optionpanel.php (LoL) and everything is working but now I would like to add an Upload/Image button so I'll be able to change images inside a slideshow straight from Wordpress Media Library instead of connecting via FTP each time.

So here is the problem, how to achieve this? This is what I've got up to now, I can see the Media Upload box and I can upload the image and the image is stored inside the media library but when I click on save in my option panel and try to echo the function it gives me nothing and after saving the form where there was the link to the image became empty once again!

I know that my English is ugly anyway please be polite and, if, you can, try to explain it to me like if you are talking to your 3 years old son!

I googled a lot (maybe too much!!!) and I've read:

http://www.sitepoint.com/wordpress-options-panel/

http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

http://www.theenglishguy.co.uk/2010/01/24/multiple-media-uploads-in-wordpress-functions-php/

http://stackoverflow.com/questions/2388697/wordpress-2-9-theme-options-admin-page-with-image-upload

http://www.wptavern.com/forum/themes-templates/1346-creating-upload-function-options-page.html#post13306

http://sicdigital.com/2010/07/create-custom-post-type-for-image-upload-wordpress3/

http://www.tanzilo.com/2009/01/15/wordpress-adding-a-custom-option-box-and-developing-file-upload-plugin/

http://wordpress.org/support/topic/file-upload-with-custom-post-type?replies=8

https://github.com/JeffreyWay/WordPress-Theme-Options-Page/blob/master/admin-menu.php

http://stuntsnippets.com/wordpress-custom-theme-options/

http://www.sitepoint.com/wordpress-options-panel/

And much more!!!!

So here is my code:

<?php

$themename = "Centenario Pascoliano";
$shortname = "cp";

$categories = get_categories('hide_empty=1&orderby=name');
$wp_cats = array();
foreach ($categories as $category_list ) {
       $wp_cats[$category_list->cat_ID] = $category_list->cat_name;
}
array_unshift($wp_cats, "Choose a category"); 

$options = array (

array( "name" => $themename." Opzioni",
    "type" => "title"),


array( "name" => "Generale",
    "type" => "section"),
array( "type" => "open"),

array( "name" => "Colour Scheme",
    "desc" => "Select the colour scheme for the theme",
    "id" => $shortname."_color_scheme",
    "type" => "select",
    "options" => array("blue", "red", "green"),
    "std" => "blue"),

array( "name" => "URL Locandina",
    "desc" => "Inserisci il link alla locandina",
    "id" => $shortname."_locandinah",
    "type" => "text",
    "std" => "/wp-content/themes/centenario/images/locandinacentenario.png"),

array( "name" => "Product Image Upload",  
    "desc" => "Upload product image",  
    "id" => $shortname."_upload_one",  
    "type" => "upload",  
    "std" => ""),       

array( "type" => "close"),
array( "name" => "Homepage",
    "type" => "section"),
array( "type" => "open"),

array( "name" => "Homepage header image",
    "desc" => "Enter the link to an image used for the homepage header.",
    "id" => $shortname."_header_img",
    "type" => "text",
    "std" => ""),

array( "name" => "Prima categoria da mostrare",
    "desc" => "Scegli la prima categoria da mostrare in HomePage",
    "id" => $shortname."_feat_cat",
    "type" => "select",
    "options" => $wp_cats,
    "std" => "Scegli la prima categoria"),

array( "name" => "Seconda categoria da mostrare",
    "desc" => "Scegli la seconda categoria da mostrare in HomePage",
    "id" => $shortname."_feat_cat2",
    "type" => "select",
    "options" => $wp_cats,
    "std" => "Scegli la seconda categoria"),

array( "type" => "close"),
array( "name" => "Footer",
    "type" => "section"),
array( "type" => "open"),

array( "name" => "Footer copyright text",
    "desc" => "Enter text used in the right side of the footer. It can be HTML",
    "id" => $shortname."_footer_text",
    "type" => "text",
    "std" => ""),

array( "name" => "Google Analytics Code",
    "desc" => "You can paste your Google Analytics or other tracking code in this box.             This will be automatically added to the footer.",
    "id" => $shortname."_ga_code",
    "type" => "textarea",
    "std" => ""),   

array( "name" => "Custom Favicon",
    "desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL     to a .ico image that you want to use as the image",
    "id" => $shortname."_favicon",
    "type" => "text",
    "std" => get_bloginfo('url') ."/favicon.ico"),  

array( "name" => "Feedburner URL",
    "desc" => "Feedburner is a Google service that takes care of your RSS feed. Paste     your Feedburner URL here to let readers see it in your website",
    "id" => $shortname."_feedburner",
    "type" => "text",
    "std" => get_bloginfo('rss2_url')),


array( "type" => "close")

);


function mytheme_add_admin() {

global $themename, $shortname, $options;

if ( $_GET['page'] == basename(__FILE__) ) {

if ( 'save' == $_REQUEST['action'] ) {

    foreach ($options as $value) {
    update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach ($options as $value) {  

if( $value['type'] == 'upload' )

{

    $upload = wp_handle_upload( $_FILES[ $value['id'] ] );

    if( isset( $upload['url'] ) )

    {

        update_option( $value['id'], $upload['url'] );

    }

}

        elseif( isset( $_REQUEST[ $value['id'] ] ) )

    {

        update_option( $value['id'], $_REQUEST[ $value['id'] ]  );

    }

    }

header("Location: admin.php?page=optionpanel.php&saved=true");
die;

} 
    else if( 'reset' == $_REQUEST['action'] ) {

foreach ($options as $value) {
    delete_option( $value['id'] ); }

header("Location: admin.php?page=optionpanel.php&reset=true");
die;

}
}

add_menu_page($themename, $themename, 'administrator', basename(__FILE__),     'mytheme_admin');
}

function mytheme_add_init() {

$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0",     "all");
wp_enqueue_script("rm_script", $file_dir."/functions/rm_script.js", false, "1.0");

}
function mytheme_admin() {

global $themename, $shortname, $options;
$i=0;

if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p>        <strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p>    <strong>'.$themename.' settings reset.</strong></p></div>';

?>
<div class="wrap rm_wrap">
<h2><?php echo $themename; ?> Settings</h2>

<div class="rm_opts">
<form method="post" enctype="multipart/form-data" >  
<?php foreach ($options as $value) {
switch ( $value['type'] ) {

case "open":
?>

<?php break;

case "close":
?>

</div>
</div>
<br />


<?php break;

case "title":
?>
<p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</p>


<?php break;

case 'text':
?>

<div class="rm_input rm_text">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
    <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?    php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo     stripslashes(get_settings( $value['id'])  ); } else { echo $value['std']; } ?>" />
 <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>

 </div>
<?php
break;

case 'textarea':
?>

<div class="rm_input rm_textarea">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
    <textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>"     cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo     stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
 <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>

 </div>

<?php
break;

case 'select':
?>

<div class="rm_input rm_select">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>

<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
        <option <?php if (get_settings( $value['id'] ) == $option) { echo     'selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?>
</select>

    <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
</div>
<?php
break;

case "checkbox":
?>

<div class="rm_input rm_checkbox">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>

<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked =     "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'];     ?>" value="true" <?php echo $checked; ?> />


    <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
 </div>
<?php break; 
case "section":

$i++;

?>

<div class="rm_section">
<div class="rm_title"><h3><img src="<?php bloginfo('template_directory')?    >/functions/images/trans.png" class="inactive" alt="""><?php echo $value['name']; ?></h3>        <span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes"     />
</span><div class="clearfix"></div></div>
<div class="rm_options">


<?php break;
case "upload";?>
<div class="rm_input rm_upload">
        <tr valign="top">
<th scope="row">Upload Image</th>
<td><label for="upload_image">
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image for the banner.
</label></td>
</tr>
<div class="clearfix"></div> 
</div>

<?php break;
}
}
?>

<input type="hidden" name="action" value="save" />
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<div style="font-size:9px; margin-bottom:10px;">Icons: <a     href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div>
 </div> 


<?php
}
    ?>
    <?php
    function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_bloginfo('template_url') .     '/functions/maisdesignscript.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'optionpanel.php') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');}
add_action('admin_init', 'mytheme_add_init');
add_action('admin_menu', 'mytheme_add_admin');
?>
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You can either use the Wordrpess Settings API or you can use an options framework. My team built a pretty awesome options framework that's easy to drop into your theme. It's called the UpThemes Framework. You can grab a copy of it at github. https://github.com/chriswallace/UpThemes-Framework

To install simply drop the admin and theme-options folder into your theme directory. Edit the theme-options files to add more options as you were attempting in your code. Lastly add this to your functions.php file.

require_once('admin/admin.php');

You will then have all the option values at your finger tips by using the following in your templates.

global $up_options;
echo $up_options->option_id;

We are still in the process of documenting out all of the option types (typography management, color picket, etc). You can see some of the features here.

share|improve this answer
    
Very Good Framework but default option doesn't have Image Uploading functionalities.... Any other solution to my problem? –  Downloadtaky Sep 14 '11 at 12:01
    
It does have image uploading. Just use the image option type –  Brian Fegter Sep 14 '11 at 12:31
    
Found, I only had to read a lil bit :-) As you know Italians do it better but they DON'T read :-) Now I'll try to use it! –  Downloadtaky Sep 14 '11 at 13:12
    
Send me an email through my website if you have more granular questions. –  Brian Fegter Sep 14 '11 at 13:17
    
is there a way to set default images like using "std" => get_bloginfo('template_directory')."/images/slide/busto-pascoli-centenario-pasco‌​liano.jpg", ? –  Downloadtaky Sep 14 '11 at 13:42
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.