What is the correct process to make your jumbotron image dynamic (user changeable) via the WordPress customizer. Currently on my customers custom theme www.windupgram.co.uk I am using a static image, which I have to change when required.

I would like to give the client an option to change the image whenever they want.

Many thanks



You can add support for the built-in Custom Header feature:


Or use the Customize API to add your own control to the Customizer for selecting the image:


The Custom Header feature is basically just a shortcut for using the Customize API to add a control, but you have less control over what the field is named etc.


You can use Advanced custom field plugin, then call the field back to your static image. If you are new to ACF plugin, read their docs here https://www.advancedcustomfields.com/resources/

Most importantly look at the Location box. The location box allows you to create a set of rules which decide when and where to add these fields to the edit screen / post object. See more here https://www.advancedcustomfields.com/resources/creating-a-field-group/

For example, the image field is

<?php the_field('yourimage'); ?>

Your code should be like this:

<div class="jumbotron">
   <img src="<?php the_field('yourimage'); ?>" class="img-fluid" alt="Responsive image">

Then you don't need the static jumbotron image.

  • Thanks Noobie, I will give this a go. I will let you know how I get on. – Andy_G Oct 11 '18 at 19:10

Using the Customize API worked for me. I created at new folder called inc and in there created a new file called customize.php

In that file I added this code:

 function gramophone_customize_register($wp_customize){

    // Showcase Section
    $wp_customize->add_section('showcase', array(
        'title'          => __('Showcase', 'gramophone'),
        'description'    => sprintf( __('Options for showcase area', 'gramophone')
        'priority'       => 130,

    // Image Setting
      $wp_customize->add_setting('showcase_image', array(
        'default' => get_bloginfo('template_directory') . 'img/Gramophonebannernew2.jpg',
        'type'    => 'theme_mod'


     // Image Control
     $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'showcase_image', array(
         'label'    => __('Background Image', 'gramophone'),
         'section'  => 'showcase',
         'settings' => 'showcase_image',
         'priority' => 1,



Then in my functions.php I added this code

   require get_template_directory(). '/inc/customizer.php';

My in header.php I added the styles for the jumbotron


          margin: 0;

              background:url(<?php echo get_theme_mod('showcase_image', get_bloginfo('template_url').'/img/Gramophonebannernew2.jpg'); ?>) no-repeat center center;
              background-size: cover;
              height: 100vh;


And finally added a showcase class to my jumbotron

       <div class="jumbotron showcase">


Now when I go into the customizer I can change the image to what every I want. If not image is chosen then default one I placed in my customizer.php will be used.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.