How to Enable Custom Header Images Panel in WordPress




What exactly will this feature do?

It will create a tab in your admin panel which will allow you to change header images. You can register default images if you are a theme designer to give users more options. It also allows users to upload custom images for the header. Last but certainly not the least, this feature utilizes post thumbnails on single post pages. If your post thumbnail is big enough to fit the header size, then it will use your post thumbnail as the header instead of the default image. If your thumbnail is bigger, then it will crop it down for you.


How to Add this?

Simply add the following code in your functions.php file.

add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ): 
 function yourtheme_setup() { 
  add_theme_support( 'post-thumbnails' ); 
  define( 'HEADER_TEXTCOLOR', '' ); 
  define( 'HEADER_IMAGE', '%s/images/default.jpg' ); 
  define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
  define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 198 ) ); 
  set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); 
  define( 'NO_HEADER_TEXT', true ); 
  add_custom_image_header( '', 'yourtheme_admin_header_style' ); 
  register_default_headers( array (
   'berries' => array (
   'url' => '%s/images/floral-swirl-abstract-rainbow-header.jpg',
   'thumbnail_url' => '%s/images/floral-swirl-abstract-rainbow-header.jpg',
   'description' => __( 'Colorful Website Headers', 'yourtheme' )
   ),
   'cherryblossom' => array (
   'url' => '%s/images/colorful-circles-retro-abstract-header-7525.jpg',
   'thumbnail_url' => '%s/images/colorful-circles-retro-abstract-header-7525.jpg',
   'description' => __( 'Colorful Circles Retro Abstract Header', 'yourtheme' )
   )
  ));
 }
endif; 


  • add_theme_support( 'post-thumbnails' ); - Enable post thumbnails
  • define( 'HEADER_TEXTCOLOR', '' ); - Set header color 
  • define( 'HEADER_IMAGE', '%s/images/default.jpg' );  - Set Default Image
  • register_default_headers() - Add custom header images
Note: Add the images into your theme -> images folder

Usage


<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />



Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.