Uploading Images to Theme Directory via Theme Customizer

[Brad West]

I'd like to use the Theme Customizer to move an image into my themes /images directory and rename it to bg.jpg. I've seen this done on the Parallax theme, but I can't replicate it in my local development environment.

The code I've used does save an image in the Theme Customizer, but saves it in the uploads folder and doesn't change the name.

add_action( 'customize_register', 'home_background_customizer' );
function home_background_customizer( $wp_customize ) {

  $wp_customize->add_section(
    'home_background_image', array(
      'title' => 'Homepage Background Image',
      'description' => 'Add an image to the homepage.',
      'priority' => 30,
    )
  );

  $wp_customize->add_setting(
    'img-upload', array(
      'default' => 'bg.jpg',
    )
  );

  $wp_customize->add_control(
    new WP_Customize_Image_Control(
      $wp_customize,
      'img-upload', array(
        'label' => 'Upload Image',
        'section' => 'home_background_image',
        'settings' => 'img-upload'
      )
    )
  );

}

Here's the code from the Parallax Pro theme for uploading three images to be used as section backgrounds on the homepage:

class Child_Parallax_Image_Control extends WP_Customize_Image_Control {

  public function __construct( $manager, $id, $args ) {
    $this->statuses = array( '' => __( 'No Image', 'parallax' ) );

    parent::__construct( $manager, $id, $args );

    $this->add_tab( 'upload-new', __( 'Upload New', 'parallax' ), array( $this, 'tab_upload_new' ) );
    $this->add_tab( 'uploaded',   __( 'Uploaded', 'parallax' ),   array( $this, 'tab_uploaded' ) );

    if ( $this->setting->default )
      $this->add_tab( 'default',  __( 'Default', 'parallax' ),  array( $this, 'tab_default_background' ) );

    add_action( 'customize_controls_init', array( $this, 'prepare_control' ), 5 );
  }

  public function tab_default_background() {
    $this->print_tab_image( $this->setting->default );
  }

}

global $wp_customize;

$images = apply_filters( 'parallax_images', array( '1', '3', '5' ) );

$wp_customize->add_section( 'parallax-settings', array(
  'title'    => __( 'Background Images', 'parallax' ),
  'priority' => 35,
) );

foreach( $images as $image ){

  $wp_customize->add_setting( $image .'-image', array(
    'default'  => sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $image ),
    'type'     => 'option',
  ) );

  $wp_customize->add_control( new Child_Parallax_Image_Control( $wp_customize, $image .'-image', array(
    'label'    => sprintf( __( 'Featured Section %s Image:', 'parallax' ), $image ),
    'section'  => 'parallax-settings',
    'settings' => $image .'-image',
    'priority' => $image+1,
  ) ) );

}

Any ideas on getting the image into the /images directory and renaming it bg.jpg?

[Susan]

As you posted this a while ago, I hope you were able to get your issue resolved. If it is resolved, please mark this thread as “resolved”, so it can be closed.

If you are still having issues, report back here, and I will try to escalate.

[Brad West]

Hi Susan,
I am still working on this. It's been pushed to the back burner since it's proving difficult. I've been digging through some tutorials on the Customizer trying to better understand how it works. But so far, no luck.

[Author]

Posts