From the course: Customizing a WordPress Theme from an Adobe XD Prototype

Importing individual logo assets

From the course: Customizing a WordPress Theme from an Adobe XD Prototype

Start my 1-month free trial

Importing individual logo assets

- [Instructor] Now it's time to add some imagery to our WordPress website so that we can begin to build the site and make it more dynamic. We're going to start off by adding a logo. So we're going to replace the BanksBoard text with our logo. I'm going to go back into the dashboard, and we'll actually be doing this through the customizer. So I'm going to go to Appearance, Customize, and we'll go to the Header section. And I'm going to go to the Logo & Site Identity area. And in here, you have the option to assign a site title or a tagline, which you can also do in the settings area of WordPress. We're going to go ahead and we're going to select a logo. And when we do that, it's going to open up the dialog box that allows us to either upload files or access anything from our Media Library. Currently, we don't have anything in our Media Library because we haven't uploaded any files, but we're going to go ahead and we're just going to use the Upload File tab. I'll click Select Files. You'll navigate to where your images are located, select the image that you want to insert, and click Open. It's going to go ahead and upload your image, and we'll select this. I'll click Select. And in this case, it's prompting me to crop the image. I definitely don't want to crop the image, so I'm going to click Skip Cropping. Alternatively, you could actually stretch out the crop dialog box and choose where to crop it, but I'm just going to choose Skip Cropping in this case. And as you can see, the logo has now replaced the text that was there previously. At this point, I don't need to show the tagline or the site title, so I'll just navigate those off. And if I want to increase the size of the logo, I can make that adjustment here. So I'm going to make my logo appear at about 160 pixels. If you scroll a little bit farther down, you'll also be able to assign a site icon. This is a favicon. And as it says here, the icons should be square and at least 512 by 512 pixels. I'll go ahead and I'll click Select site icon. I'm going to go to the Upload File tab, and I'll click Select Files once again. And then I'll navigate to where I have that particular file. I'm going to select the GIF version of my file and click Open. It's going to upload. I'll click Select. I don't need to do any cropping. And I'll click Skip Cropping again. And now you can see that the favicon is showing up for my website. So I'm happy with how these look. I'm going to click Publish. And if we go to the front end version of our website and refresh, both the favicon and the logo are going to show up. So this is an easy way that you can incorporate your branding material into your file. I'm going to close to get out of the customizer. And if we go to the Media section and go to Library, you can see that both of the images that we selected have been uploaded, and now they're stored in our WordPress library. If you click on either of these images, you'll be able to preview the image. And you can actually make some changes to the image here. You can provide alternate text, which is always a good idea for usability. You can give the image a title and a caption if necessary and even a description. WordPress also provides you with a link for where that file is located in case you'll ever need that. And if we click Edit Image, there are some basic edits that we can do within WordPress. You can do things like crop, rotate, reflect the image, both vertically and horizontally, and undo those various changes once you've made them. You also can scale your image if you want to create a new size. We're not going to make any changes here, so we'll click the close button. And in that way, you can manage your uploaded images. I would recommend optimizing and resizing your images prior to uploading them to get the best results with your site.

Contents