{"id":1005,"date":"2012-01-26T21:03:48","date_gmt":"2012-01-27T02:03:48","guid":{"rendered":"https:\/\/data.justinwhall.com\/?p=1005"},"modified":"2012-07-13T13:53:39","modified_gmt":"2012-07-13T17:53:39","slug":"multiple-upload-inputs-in-a-wordpress-theme-options-page","status":"publish","type":"post","link":"https:\/\/data.justinwhall.com\/multiple-upload-inputs-in-a-wordpress-theme-options-page\/","title":{"rendered":"Multiple upload inputs in a WordPress theme options page?"},"content":{"rendered":"
Lots of info and tutorials on the net on the subject of WordPress “theme options” or \u00a0“admin” pages. Many of them are out dated and don’t subscribe to the current best practices as outlined by WordPress – in other words the settings API<\/a>. Nettuts<\/a> is always a great place to start. In my case, the\u00a0tutorial\u00a0the resinated the most with me was a fairly recent post by Aliso The Geek<\/a>. Her tutorial is clear, easy to follow, results in a\u00a0organized\u00a0tabbed theme options page and best of all, your new WordPress theme options page will be 100% contained within a tidy class file – easily\u00a0transferred\u00a0from theme to theme is so desired.<\/p>\n Not much, unless you’d like to include and upload field. The easiest way to implement this, with some possible pitfalls (more on this later), is to use WordPress’ built in Media Uploader and Thinkbox script.<\/p>\n Since we are adding a new “type” we’re going to need to add a new case to the switch statement.<\/p>\n [code] if ( $desc != ” ) break; Essentially the same as the ‘text’ case. Change type to “file”, add an input button with a class of “st_upload_button” (or whatever you so desire) that will later trigger the media uploader.<\/p>\n [code] Nothing new here…<\/p>\nSo what’s left to expound upon?<\/h2>\n
Step one: Back to your theme options class<\/h2>\n
\ncase ‘upload’:
\ndefault:
\n echo ‘<input id="’ . $id . ‘" class="upload-url’ . $field_class . ‘" type="text" name="mytheme_options[‘ . $id . ‘]" value="’ . esc_attr( $options[$id] ) . ‘" \/>’
\n ‘<input id="st_upload_button" class="st_upload_button" type="button" name="upload_button" value="Upload" \/>’;<\/p>\n
\n echo ‘
\n <span class="description">’ . $desc . ‘<\/span>’;<\/p>\n
\n[\/code]<\/p>\nStep Two: Add the upload field Array<\/h2>\n
\n\t\t$this->settings[‘st_upload’] = array(
\n\t\t\t‘title’ => __( ‘Example upload Input’ ),
\n\t\t\t‘desc’ => __( ‘This is a description for the upload input.’ ),
\n\t\t\t‘std’ => ‘My logo’,
\n\t\t\t‘type’ => ‘upload’,
\n\t\t\t‘section’ => ‘general’
\n\t\t);
\n[\/code]<\/p>\n