FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Display Images in the Theme

Now it’s time to display the logo that your users have added with the Customizer. I’ll show you how to display the logo in the theme and how you can add some extra options for positioning.

Related Links

4.2 Display Images in the Theme

Hello, and welcome back Tuts+ course on writing customizer-ready WordPress themes. In this course part of the course we're going to move on to adding the logo upload into our theme, and we'll also let users define where exactly they want the logo to appear in the theme. So, let's go back to our theme. What we need to do now is add a new function which will attach to a hook in the theme. The first thing we'll need to do is create that hook in the theme. So I already added some commented out text here under which I'll put function. My function will need to attach to a hook. So I'll next. I'll copy the name of my function into the add_action function, and my action will be called tutsplus_header_logo. But at the moment, there's one problem, this header_logo action doesn't actually exist in my file, or in my theme template files. So I need to create it. What I want to do is replace this hgroup here with a new version of the hgroup, which incorporates a position for the logo. So I'll copy this hgroup into my function first. So I'll paste that here and tidy up my code. And that function will output the text in the header in exactly the same way as it does at the moment. The next step is to replace that code in my header with this action hook. So I'll delete that h group and use the do action function to add an action in that spot. Not forgetting to add the PHP text. So, I'll save that, and that won't actually make any difference right now, but it will shortly, because I've added this function. By adding this to my customizer file it means I can create variables in my customizer file and give those values based on what's input via the theme customizer. So let's do that. The first thing to do is add my image inside a link to the homepage, which is similar to what's in the title. I'll add it inside this H1 element because that will let me float it next to the site title. So first, here's another link and then inside that, instead of the blog info function, I'll add the image. And for the source of our image I'll use the get_theme_mod function again to fetch the value of that setting that I've already created. Make sure I close my image tag, check my code is correct and I'll also add and alt description to the image. So I'll copy the ID of the setting that I created for the logo which is plus logo upload. And then I'll paste it in down here. Make sure I add an echo in here, otherwise it won't display anything and then if I go to my theme, the logo is displayed. Now, at the moment, it doesn't look very tidy, but we'll add some styling shortly, which people will have the option to control. And which will make that image either float to the left or right of the title, or replace it altogether. So now I need to open my stylesheet and add some styling. I've created a section here which is within the layout section of my stylesheet, where I'll put all the styling for the logo position. But first I need to go back into my customizer file and add the settings and controls for that logo position. So I'll add some more content within the function that we've all ready been working at. First I need to add the setting for the logo position. Which I do using the app setting function. Firstly it needs a unique ID, which will be tutsplus_logo_position. And then I'll add the control using the add control function. And this will be a new type of control, which will be radio buttons. So we'll have to use some different parameters to make that work. So the first parameter is a unique ID, which is tutsplus_logo_ position. Making sure I type that in correctly. And then it'll need an array of arguments. The first item is the label. The next argument is the section which this control appears in, which is tutsplus_image_upload. And then I add the settings as I've done in the previous controls which I'll copy from this setting I've already created up here. Now I need to add a type, which is radio. And then because it's a radio button I'll need some choices. And that's an array. So firstly, I create an ID for each of the values in my array, and then the text which will appear on screen. So my first ID is logo-top which will be saved as the value of this setting if the user selects this option. And then I can use that later on when I'm adding my styling, and what will appear on the screen is above site title. And then I'll repeat this for the other options. So we'll copy that and then edit each one of them so that it's correct. Making sure to avoid any typos. My third one is logo right, which will be floated to the right of the side title and the next one will be no title because in this case the logo will replace the title all together. And then I'll add a final and fifth option which will be logo alone, because in this case the logo will replace both the site title and the site description. So the only thing showing up on the left of my header will be the logo. So I'll save that file and then go back to the customizer and you'll see that that logo position control appears. At the moment these don't actually do anything. So what I I'll need to do is add some classes to my star sheet to make the logo appear in the correct place. But first, I need to edit the function, so that there's a class added to this age group which is equivalent to the value of the setting that I've created. And I'll do that by echoing out the value of the gif, the mod function. So my parameter for is the ID of the setting that I've already created. So the ID of the radio button that the user selects will then be output as a class within that age group. And then I can use that in my stylesheet to style the elements within that age group. So let's go into the stylesheet and start doing that. Just correct my typo first. So here I'll add styling for the logo and also for the site title and description depending on which option is selected. So let's start with the logo on the top, i.e above the site title and description, so I use the logo top class and then I need to style the text in the h1 element that's inside that. But in order to do that, I need to put the text itself into a span. So I need to go back into my Customizer file and edit that function. So here's my h1, and here's the text within that h1 which is output by the bloginfo function here inside the link. So I'll add a span outside that link and that span will have a class of text. And I can then use that span to style the text within the h1 element. I'll save that, and then I'll go back to my stylesheet and add that styling. So if I display that span as a block it will appear below the image. I'll refresh my screen and you can see that, that's moved the text underneath the image. Because I've selected that above side title option. So now let's see how it appears when I select to the left of the side title. You can see it wraps around the image and doesn't look as it should. So let's set some styling for that. So now I'm using the logo-left class and I'm styling the image within that. A lot of float, so I need to add a margin to the right and below my image to give it some breathing room. If I save that and then go back to my customizer, we'll see how that looks. If I click on the left side title, you can see that my image is floated to the left of my site title now. Now let's look at the right of the site title. Again, nothing happening, so I need to add some styling for that. So I use the logo-right class now, and again I'm styling the image. This time I need to add a right float and a margin to the left and below the image. So I'll save that and go back to my customizer. If I select the right of the site title again, there's my image floated on the right. And now let's work on replacing the site title. At the moment, nothing's happening here, so I need to add some styling in my style sheets again. Now I'm using the no-title class. So now I want to style that text span again because I want to make sure that doesn't display. So I'll use display: none. If I test that, my title's disappeared. And now, I'm finally replacing the side title and the description. So let's go back into the style sheet. And now I need to use the local alone class and installing the text and the side description. And again I'm using display none because I don't want these to show up. I'll go back to selecting replace the site title and description and all you can see now is my logo. So that's the styling all set up. I'm gonna select the left for now because that works nicely with my logo. I'll save and publish that, go back to my site and see how it looks and that looks fine. So now we have a logo upload and we also have the option to decide what position it will be in the site header. In the next part of the course we'll move on to creating a color scheme in the customizer using the in built color pickers, see you next time and thanks for watching.

Back to the top