Add Custom Option to Upload Logo in WordPress

Add Custom Option to Upload Logo in WordPress

First make sure that WordPress Knows about your logo option:

function register_my_logo() {
 register_setting( 'logo_options_group', 'logo_options_group'); }
add_action( 'admin_init', 'register_my_logo' );

Then create your options page for your logo options like so:

function add_logo_page_to_settings() {
 add_theme_page('Theme Logo',
'Customize Logo->',
'logo_edit_page'); }
add_action('admin_menu', 'add_logo_page_to_settings');

Ok…. Let’s add an outline for that page:

function logo_edit_page() {  ?>
 <div class="section panel">
      <h1>Custom Logo Options</h1>
      <form method="post" enctype="multipart/form-data" action="options.php">
<?php settings_fields('logo_options_group'); // this will come later
do_settings_sections('logo_options_group'); // and this too...
        ?> <p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /></p></form>
<?php  }

Now we are cooking… you should be able to see the page starting to take shape; Next set up all the fields and settings:

function add_logo_options_to_page(){
  'Customize the site logo:',
  'logo_options_group' );
$args=array(); // pass arguments to add_settings_array to use in fields
add_settings_field( 'logo_url', "Logo Url", 'logo_upload_url' , 'logo_options_group', 'custom_logo', $args );
// here you can add more settings fields like width, height etc... just make sure that the "logo_options_group" and "custom_logo" stay..
// more info at:

Very good!! Now we need an upload form… complete with custom jQuery:

function logo_upload_url($args){
$options=get_option('logo_options_group') ;
<label for="upload_image">
<input id="url" type="text" size="36" value="<?php echo $options['url']; ?>" name="logo_options_group[url]" />
<input id="upload_logo_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image for the banner.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#upload_logo_button').click(function() {
 formfield = jQuery('#url').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;});
window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 tb_remove(); }});
echo "<br>This is your current logo: <br><img src='". $options['url'] ."' style='padding:20px;' />";
echo "<br>To use it in a theme copy this: <blockquote>". htmlspecialchars("<?php do_shortcode('[sitelogo]'); ?>") ."</blockquote><br> To use it in a post or page copy this code:<blockquote>[sitelogo]</blockquote>";  }}

You should be able to see the upload field but it won’t work because you have some jQuery dependencies to handle…like so:

function custom_logo_fields(){
// you can add stuff here if you like...
function my_admin_scripts() {
function my_admin_styles() {
if (isset($_GET['page']) && $_GET['page'] == 'edit_logo') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');

That should work just right now… except it clearly states there is some shortcode that goes with it so… here you go:

function get_site_logo(){
echo "<img src='". $option['url'] ."' />";
} else {echo "Sorry, No logo selected";}}
add_shortcode('sitelogo', 'get_site_logo');

Hope this works for somebody!

1,131 total views, 0 views today

Loading Facebook Comments ...

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code * Time limit is exhausted. Please reload the CAPTCHA.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.