Create Custom Theme Options To Add Header Image

Many times, client demands to have a control over the website look and hence the they want the header image to be managed with easy option. The best way to do that is to provide a theme option to manage the header image. Have a look at below screenshot for the sample.

Adding Image to Header From Custom Theme Options:

rtPanel is pre-equipped with all the basic functionality required. Creating a theme option to add images to header is very simple and it can be achieved with three easy steps as below:

1. Get code from rtp-custom-theme-options.php:

rtPanel child theme contains pre-defined theme option file as ‘rtp-custom-theme-options.php’ in lib folder of child theme. You can see the codes on Github here.  It has “Image Uploader” field by default so we don’t have to write extra codes in this page.

2. Create Function at functions.php:

All we need to do is to create a function in functions.php file and then add the code to display image from rtp-custom-theme-options.php file in that function. The function with code will look as below:

<?php function rtp_display_img(){
 global $rtp_custom_theme_options;<?php $custom_image_uploader = wp_get_attachment_image_src( @$rtp_custom_theme_options['custom_image_id'], 'thumbnail' ); ?>   <img src="<?php echo @$custom_image_uploader[0] ?>" alt="Custom Image"<?php echo ( isset( $custom_image_uploader[0] ) ?  'style="max-width: 240px; width: 100%;"' : 'style="max-width: 240px; width: 100%; display: none;"' ); ?> /> <?php } ?>

This is how it looks at the backend in the admin area of Custom Theme Options page. The code has default styling for the image which is displayed. You can also add CSS style to the image in the desired way you would like to display it.

3. Add Hook:

Once we have created the function we have to hook it. As we have to display this image  after header we will use ‘rtp_hook_after_header’. For example,

add_action('rtp_hook_after_header','rtp_display_img');

Note:  By default the image will be displayed above the menu as the menu in the site uses same hook with the priority 10. If you would like to display the image below the menu then you have to set the priority more than 10. For Example,

add_action('rtp_hook_after_header','rtp_display_img',12);

I hope above tutorial was helpful. You may ask your questions below as comments or on our support forums.

3 Comments

 Add your comment
  1. Fabulous Article on custom theme good work :)

  2. Could this be modified to work with BuddyPress Media? Imagine if BuddyPress members could set a featured image, video or music to be displayed on their profile main page. Now that would be an impressive feature

Leave a Comment

  • Facebook
  • GitHub
  • Twitter
  • LinkedIn
  • Google

Your email address will not be published.

*

People Who Like Thisx

Loading...