How to create a custom logo option in WordPress

The logo is an important branding object for any business and company. Today, it’s nearly impossible to start a business without a perfect logo. A logo is a symbol that can describe the objective or main goal of a company using one word or shape.

If you want to create a website or blog, it is really important to create an appropriate logo. It makes your branding process easier and stand you out from the crowd. If people like your business or voice they must get connected to you anyway. And a perfect logo can make it easier for them to remember you.
WordPress Theme CustomizerNowadays, every WordPress theme has a logo option that makes it easier to upload a logo. However, if you want to build a new theme from scratch or design your own website, you can easily create a custom logo option using WordPress theme customizer hook in options.php or functions.php.

The new theme customizer is included from WordPress 3.4 that is allowed you to add a logo without any hassle. All you need to add some pair of codes in your functions.php to make the settings for the logo.

Here’s we are going to give a procedure to create a simple logo uploader using functions.php.

First of all, we have to create a separate section, settings, and control using customize_register hook in functions.php.

The following piece of code can do this task:

function themename_theme_customizer( $wp_customize ) {
// Fun code will go here
}
add_action( 'customize_register', 'themename_theme_customizer' );

Make sure to change the “themename” as your own theme name. Now, create a new section for logo uploader. After add this, you only see the title and description.

$wp_customize->add_section( 'themename_logo_section' , array(
    'title'       => __( 'Logo', 'themename' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
) );

 

Now, It is time to register new settings. The following script can doing this easily.

$wp_customize->add_setting( 'themename_logo' );

At the last point, we are going to tell the theme customizer to upload a logo and save it. This is a kind of image control function that use the above settings and section:

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
   'label'    => __( 'Logo', 'themename' ),
   'section'  => 'themename_logo_section',
   'settings' => 'themename_logo',
) ) );

And yeah, we are done the back-end process for Logo uploader. The full code is given below:

/*Function for Logo Uploader*/
function themename_theme_customizer( $wp_customize ) {
    $wp_customize->add_section( 'themename_logo_section' , array(
    'title'       => __( 'Logo', 'themename' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
) );

$wp_customize->add_setting( 'themename_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
    'label'    => __( 'Logo', 'themename' ),
    'section'  => 'themename_logo_section',
    'settings' => 'themename_logo',
) ) );
}
add_action( 'customize_register', 'themename_theme_customizer' );

You can create any other option’s using the same method in WordPress customizer. Now, we can show up the logo in our theme header or front-end using the following script in header.php

<?php if ( get_theme_mod( 'themename_logo' ) ) : ?>
    <div class='site-logo'>
        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themename_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; ?>

Note that, you can simply change the height and width of logo using ‘site-logo’ selector. And if you want to change the site title’s font color, weight and other things you can easily use ‘site-title’ selector in style.css file.

Many people’s wants to separate the customizer settings from functions.php. In this case, you can doing it easily by following the simple method below:

Create a separate directory in your theme’s root directory. Let’s call it ‘inc’. Now, create a new php file named customize.php and grab the code for logo uploader to add here. Now, just include the customizer.php in fuctions.php using the following script:

// Add Customizer functionality.
require get_template_directory() . '/inc/customizer.php';

But before adding this template make sure to use the correct file path for error free result. And that’s pretty simple. You can also create custom logo uploader using options.php too. We’ll talk about that another day.

Leave a Reply

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