In almost all WordPress themes there is functionality to upload and edit (cropping logo / header image). Some themes may have not this. WordPress latest versions provide a customizer function for custom logo and custom header upload. We can use this feature in enabling its features. This tutorial is about how to add custom header image and custom logo uploading feature in your WordPress theme. This tutorial is also one of the series of theme development tutorials. So lets start with header image .

How to add Custom logo uploading with Theme Customizer

custom header and logo

If you are a WordPress theme developer then you need to add custom logo feature in your theme or your theme has not provided this feature then you can add it. Add following piece of code in your

function.php

file of your WordPress theme which is located on theme directory.

 

  function tipsmoon_custom_theme_logo() {
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-width' => true ));}
add_action( 'after_setup_theme', 'tipsmoon_custom_theme_logo' );

 

Save your function.php file and login to your WordPress dashboard. Go to

Appearance ->Customize ->site Identity

You will notice that this code will add following logo uploading menu here as given in image below:

 

custom logo

How to Display Header Logo in WordPress Header File

Following code will show the custom logo in the header . This code will be writing in header.php file:-

<?php if ( has_custom_logo()){
the_custom_logo();
} else { ?>
<p id="logo" class="h1" itemscope itemtype="http://schema.org/Organization"><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></p> <?php } ?>

This code will provide the toggle functionality between logo and site name. It means if logo is selected then only logo will be displayed and site name will hide. Otherwise, if logo is not selection Blog or site name will be displayed in WordPress site.

How to add Custom Header image feature with Theme Customizer

This is another important feature that every WordPress theme developer /creator should provide in its theme. To do it simply by using WordPress built-in customizer, we have to add following code in function.php file:

function tipsmoon_custom_header_image() {
$custom_header_args = array(
	'flex-width'    => true,
	'width'         => 1030,
	'flex-height'    => true,
	'height'        => 200,);
add_theme_support( 'custom-header', $custom_header_args );
}
add_action( 'after_setup_theme', 'tipsmoon_custom_header_image' );

This code will add Header Image tab in your WordPress dashboard. Go to
Appearance ->Customize ->site Identity ->Custom Image

Now you can upload custom header image for your WordPress header. In above code we give the header a width of 1030px and 200px height. We made flex-width and flex-height true. It means that our image is flexible and we can crop header image to any height and width we desire. To read more about WordPress header image please consult linked given below:

https://codex.wordpress.org/Custom_Headers

The above code will add some as shown in figure below:
custom header

How to display header image in your WordPress theme

We have added custom header image feature in the WordPress theme. Now it is time to display in your theme header. For the purpose you have to edit header .php file of your theme and put following piece of code somewhere between the <header ></header> tag.

<div style="background:url(<?php header_image(); ?>) repeat-x; padding:0; margin:0 auto; height:<?php echo get_custom_header()->height; ?>; width:<?php echo get_custom_header()->width; ?>></div>

After saving header.php file now you will see your selected custom header image in your WordPress theme. If you have any confusion about this code you can ask me in your comments.

Leave a Reply

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