FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Image Uploads

In this lesson, I’ll show you how to enable image uploads in the Customizer.

Related Links

4.1 Image Uploads

Hello and welcome back to this Tuts+ course on Writing Customizer-Ready WordPress Themes. In this part of the course, we'll move on to enabling a logo upload via the customizer. So far we've created a section for Contact Details which is displayed here in the header. And what we'll do now is create another section for images, and within that we'll enable the upload of a logo, which in the next part of the course we'll add here in the header. So let's get started. Here we are back in our customized file. And what we need to do is add some more settings and controls within this function here. So below the Contact details in header section, we want to add logo upload. So I'm gonna add some commented out text, so I know what I'm doing. Now, the first step is to create our section. And we do this in the same way as we did for our, Contact detail, section. So, the function has two parameters. The first is its ID. And the second is an array of values. And that array will just include the title. So that's my section. Now I need to add a setting for the logo. I'll give it a unique ID. And it doesn't need a default value this time, because it's an image upload. So now what I'll do is add the control for the upload. Now this time I'm not interacting with my text area control class, I'm using a different kind of control. And here, I'll be interacting with an existing WordPress class, called WP_Customize_Image_Control, which is part of the theme customizer API. Now this has three parameters. The first is the $wp_customize object. The second is a unique ID for our control. And the third, is an array. And that array includes the label. And then the section that this setting will be in. Which is tutsplus_image_upload, And then finally, the settings that this relates to. Which is tutsplus_logo_upload. So I've taken tutsplus_image_upload from up here my section, and tutsplus_logo-upload here as my setting and that's my control. So I'll check that my code is tidy and I have the right number of brackets. That all looks fine, I'll save that and then take a look at my customizer again. And here we have an Images section. If I click on that it gives me the opportunity to upload a logo. If I click on Select Image, it takes me to the standard image upload screen. So I can either choose an image from the Media Library or I can upload a file from my computer. I'm going to upload a cat icon, and if you've been watching my courses you'll probably know that I quite like cats. So there's my logo. Now, at the moment, it doesn't actually show up in our theme. And you'll realize by now from working on the contact details that that's because we need to add some code to hook it into our theme. Which we'll do in the next part of the course. See you next time and thanks for watching.

Back to the top