Custom logo for wordpress template

Many premium WordPress templates have settings page, which is a very handy tool for those who are not know languages markup or programming.
As a rule, on settings page you can change the logo, color scheme of the site, the location of the ad units or counters. And not need to change the code of the template.

But what if your theme does not have a settings page? In today’s lesson we will try to create and connect this page. Example will allow us to specify the selected image as a custom logo in header.
All described in the example code you can put in your theme’s functions.php, but personally I prefer the other way:

1 – create a catalog template file settings.php – this is file where we will write our code
2 – in the functions.php file add the line include_once (‘settings.php’);

Register of a settings page

function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
}
function add_settings_page() {
add_theme_page( __( 'Theme Settings' ), __( 'Theme Settings' ), 'edit_theme_options', 'settings', 'theme_settings_page');
}
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

We have created a initialization of a settings page, and we display a link to it from the main menu of the admin panel. The last two lines include the addition of actions of WordPress.

Processing of a form

function theme_settings_page() {
if ( ! isset( $_REQUEST['settings-updated'] ) )
$_REQUEST['settings-updated'] = false;
?>
<h2 id="title"><?php _e( 'Theme Settings' ) ?></h2>
<?php if ( false !== $_REQUEST['settings-updated'] ) : ?>
<div class="wrap">
<div id="message" class="updated">
<p><strong><?php _e( 'Options saved' ); ?></strong></p>
</div>
</div>
<?php 
endif; 
//here code of the form
}

Then we added a simple form handler. Now in the case of a successful update, we will see a message stating that the settings are saved. The form itself can be put in place (see a commentary in code).

Form

<form method="post" action="options.php">
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>
<input id="theme_settings[custom_logo]" type="url" placeholder="URL for logo" size="60" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" />
</form>

Only one field, it is enough for example.

Attention!
In the example there is no validation of the incoming data. If you copy-paste this code, is it dangerous for your site! In the real project need validate incoming data!

Display the logo on the blog header

$options = get_option( 'theme_settings' );
if($options['custom_logo']) {
?>
<div id="logo">
<a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>"><img src="<?php echo $options['custom_logo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
</div>
<?php
} else {
//default image
}

By using the get_option we get an array with the values of form. Because the field we have called custom_logo, a reference to the logo will be stored in $options[‘custom_logo’]. We show $options[‘custom_logo’] or default image.

That’s all. I hope, now you are convinced that the creation of settings page for WordPress template is simple. If something is not clear, or have additional questions – them as you can always leave in the comments.