Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.3 hours
Maintainable wp 1
  • Overview
  • Transcript

3.2 Display Text in the Theme

In this lesson, I’ll show you how to display the text that users added with the Customizer.

Related Links

3.2 Display Text in the Theme

Hello, and welcome back to this Tuts+ course on, Writing Customizer-Ready WordPress Themes. So far, we've created a section in the Customizer for Contact Details. And we've populated that with some settings and controls, to let users input contact details themselves. But right now nothing's showing up in our site, and we want it to be added to the header. So in this part of the course, that's what we'll do. We'll create a function in our customizer file, that displays the values that are input here. And then we'll hook that, to a hook that's already in the theme, in the header. So let's take a look at how we'll do that. Here's the theme's header file, and if I scroll down, you'll see there is an action here called tutsplus_in_header. So what we're gonna do, is create some HTML that will be hooked to that particular action. Now going back into our customizer file, we need to create a new function which will be hooked to that action hook. So we're not working inside this function that we've been working in so far, the tutsplus_customize_register function. So I'll scroll down below that, I've already added some commented out text here, to remind myself of what I'm doing. So now I'm gonna create a new function. So that's the name of my function, which at the moment is empty, and I'll use the add_action function to hook that to my action hook. So that's my function. Now, I need to populate it. Firstly, I'm gonna open an address element which will contain all of my code. And I'll close that. So within that, I need to output the address, the phone number, and the email address. And I'll output the email address within a link. And the function I'm gonna be using to fetch the value that's been inputted into those fields that I've created, is get_theme_mod, but first let me just create a paragraph. And then within my paragraph I'm gonna use the get_theme_mod function to output the address. The syntax highlighting is telling me that something isn't quite right here, and I can see that I haven't closed off that echo properly. So here's the get_theme_mod function. Now that has two parameters. The first is the unique ID of the setting that I want to get the address from. That's this here, tutsplus_address_setting. The second parameter is the default value, and I'm gonna make this the same as the default that I added for the setting when I set it up. So, that's your address. And then I'll close my p tag. And that's my paragraph with the address. I'll then repeat this for the telephone number and the email address. And again, my syntax highlighting has shown me where I went wrong. So, now I've got the phone number. And then here I want tutsplus_telephone_setting. And the default which is, your telephone number. And then finally, I'll do the same for the email address. So that will be echoing out each of the address, the phone number, and email address. And let me just change that comment there. But I want to enclose my email address inside a link. So what I'm gonna do is create a variable for that. I could echo that out twice, both with the address for my link and as the text that's output. And then I'll close my link. So that means I've only had to use that get_theme_mod function once here. So I'll save that. And then back in the customizer you can see that this is now being output in my theme, and that's a link to the email address. So if I was to click on that, my default email client would open up and I'd send an email to whatever address was included here. So if I type in a new address, It will update here. And the same goes for the phone number and the email address. So there's my Contact Details added. In the next part of this course, we'll give users the option to upload a logo via the Theme Customizer, and that logo will then appear over here on the left of the header. See you next time, and thanks for watching.

Back to the top