On today’s episode we are going to talk about the WordPress Customizer. Have you used it lately? If not, there’s going to be some things you may learn and you may be excited about it, right here on Your Website Engineer Podcast Episode No. 386.

Hello, and welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler and today we’re going to be talking about the Customizer and all the things that it can do and even some cool things that you may not know or may not have known that the Customizer can do but we’ll talk about that in just a few minutes. I’ve got a whole bunch of announcements and links all linked up in the Show Notes for Episode No. 386 and then there’s a plugin that I want to share and THEN we’ll dive into the Customizer. The first announcement is the big one, the biggest news that’s coming out here in the WordPress space. In just a little over a month, WordPress is going to turn 15 years old. It’s the 15th anniversary of the first WordPress release on May 27, 2018. So, it’s a big party time. There’s a link in the Show Notes, of course, but it just talks about different ways that you can join in on the fun for a WordPress 15th anniversary party.

Get together with your local meetup, request special swag, and all kinds of things that’s talking about how we’re going to celebrate this 15th year of WordPress and that first version of WordPress. There’s special swag, like I said, and you can find out everything in the Show Notes for Episode No. 386. I know that for a fact that I will be in Montreal when this happens, when it’s the 15th anniversary, so I’ll get to spend some time – I’ll be on a team meetup and so I’m spending some time with the local community in Montreal and spending some time with the folks that are on my team. So, I’m really excited about that and to hang out and meet and just spend some time in celebrating and just thinking back of what WordPress is and how it’s changed our lives. Just think about what we can do today with a website that wasn’t possible 15 years ago. I know that I wasn’t even creating websites 15 years ago and my life has just changed, obviously, for the better with the invention of WordPress and just the technology and how fast it’s moving forward.

So, that’s the first announcement. The next announcement is all about WordCamp Dayton. I haven’t talked to you about this lately but we want to talk about WordCamp Dayton. It’s coming up. It’s May 18th and 19th and it’s in Dayton, Ohio, obviously, and I’m the lead organizer there and just wanted to know if you are a listener within a four-hour driving radius of Dayton, Ohio, I highly encourage just spending some time and just driving over for the weekend and just learning about WordPress and all the things, Gutenberg and all of the things that we may be talking about and learning about as a WordPress community. It’s a great event. It’s $40.00 to attend for both days and there’s a link in the Show Notes for how you can sign up for that. The next announcement is that iThemes Security Pro 5.0 is now available. This now has a security grade report card. So, it’s got basically what the new feature is in 5.0.

You can see in the iThemes Security Panel there is an overall grade, so it says what your grade is for your software and your security settings and then it will let you automatically fix some of those issues by clicking a button. It’s a really nice update to the plugin and if you are an iThemes Security Pro user I definitely recommend checking that out and upgrading to Version 5.0. I’m not sure if they’re rolling anything out to the iThemes Security Standard Version that’s in the WordPress repository. I haven’t heard on that but I definitely wanted to point this out to make sure that you have updated to that latest version. The next item here on my list is a podcast that I’m listening to and it is one called, One on One with a Hacker. This is a podcast that was released in 2014, so it’s a little bit old. It’s about four years old and it is by the ShopTalk Show. I’ve got a link in the Show Notes so you can go right to it but it’s a fascinating interview from Chris Coyier who is the founder of CSS-Tricks or css-tricks.com and it is really nice to hear how somebody was able to forge his identity, log into a media temple or get that password reset. So, it just gives you a little bit of a thought process behind the scenes of what a hacker does and the mindset in the things that we should be concerned about when we are setting up these online accounts, especially ones that are hosting our entire website or have important security credentials locked in.

So, if you’re interested in this in any way I DEFINITELY recommend this. If you’re not interested in listening you can actually read the whole transcript and it’s by a guy who is just out to try to get the CSS Trick site because it was the second most popular site at the time when he did this on Media Temple’s Hosting. So, that’s why he was targeted and it just goes through all the process of how the guy actually was able to get into the site. He didn’t do anything but it’s a really neat podcast, so go ahead and check that out. Lastly, in the news section, I wanted to just talk about Gutenberg. We did a Gutenberg meetup just a couple of weeks ago and I was wondering if there was any interest for doing a live Gutenberg Webinar in a couple of weeks, or so, and just finding out the interest level. Just gauging the interest there. If you head on over to the Show Notes for Episode No. 386, there is a small poll there that you can take if you are interested in learning more about Gutenberg in a live webinar fashion. You can ask questions and I would go over some information and just highlight and show what it’s going to do.

If you’ve never installed Gutenberg and you’ve never had that opportunity to play with it, I recommend at least being interested in signing up or let me know. I’ll go through the process. Once I find if there is enough interest and then we’ll set up an actual webinar where you can sign up and you can get an email when it’s almost time for the webinar and replay and all that good stuff. But I just wanted to see if there is any interest in that. If there’s some interest in seeing what the new Gutenberg can do, how cool it is, and how it’s going to revolutionize the technology of WordPress. So, if that’s something that’s interesting to you, take the poll or you can send me an email to dustin@yourengineerwebsite.com or you can find me on Twitter and mention it there or leave a comment in the Show Notes for Episode No. 386. Any of those ways, let me know and as long as I have a handful of people that are interested in learning about Gutenberg and how it’s going to work and what it looks like and feels like, I will definitely put together a webinar for that.

That’s all the things that I’ve got in the news this week. Up next is a plugin called User Switching and this is one that I actually had to use this week and it was because I needed to quickly be able to swap between user accounts in WordPress with just a click of a button. When I’m troubleshooting at WooCommerce ticket, sometimes issues deal with different role levels, so an admin may see something that’s different than a vendor admin or a shop manager or whatever the case may be. Yesterday I was trying to do this with two different browsers and incognito windows and just trying to figure out what it looks like for one version or one person and what it looks like for the other person. It would have been a lot easier had I used User Switching, which is what I ended up doing in the long run, but this is a plugin that’s got 90,000 active installs. I wouldn’t say this is one that you want to have on your live site unless you’re debugging but this is one that you want to install it and you can instantly log in and log out of the different roles. So, you just go to the user section and then you’d hover over whichever account that you needed to see.

This is really great if you’re trying to figure out why some people are seeing certain error messages or if there is a user role on your website that’s seeing something completely different or some weird CSS, like whatever the case may be. This is a neat plugin that you can use to go in and make all those changes and just see what it looks like from that user’s point of view. So, that is the User Switching Plugin and it can be found in the WordPress Repository by searching for User Switching. All right, let’s go ahead and dive into the Customizer. It’s getting to be one of my favorite parts of WordPress and I know that it will probably change once Gutenberg appears. I know that Gutenberg is really cool and it’s got a lot of neat features that are built right in and just will make the experience so much nicer to build out and create those pages that you really want to create. But right now, the WordPress Customizer is the first step.

The Customizer has been around for a really long time and it gives you a lot of access and a lot of ability to change things. My favorite part about the Customizer is you can go in and you can make changes automatically and you can see the visuals update automatically. That’s probably one of the biggest downfalls when it comes to WordPress. You know if you go to widgets area under appearance – you go to widgets and then you customize them and you’re like, what does this look like? Then you’d have to save and then you’d have to open up another tab or go to your website and then refresh and see what it looks like. It’s just this disjointed approach and disjointed feel. Well, with the Customizer, everything updates live. It is a live updatable thing. So, it’s really nice that you can go in and you can do some testing or check some things out all with the Customizer without changing your website at all. So, let’s go ahead and dive into the Customizer. There’s a couple ways that you can get into it.

If you’re looking at the WordPress Dashboard you can go to Appearance and then Customize but if you’re looking at the front page of your website, you know, maybe you’re at your website’s home page or on a product page, you can just click on the Customize button and that will take you directly there. Now, note if you are in the WordPress, or let’s say if you’re in the Dashboard and you use the Customize button, you are going to land on your homepage. That’s exactly when you’ll start to see a preview of your homepage. If you’re on another page on your website and you click the Customize button in the black admin bar across the top, you will be launched into the Customizer on that specific page. So, it depends on what you’re trying to do. Like, if you don’t have widgets on the homepage then it’s going to be really hard to set up widgets in the Customizer if you can’t see those. So, that’s one way. You can also navigate inside the Customizer. So, if you land on your homepage and you’re really working on your resources page or you’re really working on some sort of a blog archive, then you can go ahead and use the navigation and it will help you navigate INSIDE the Customizer. So, let’s go ahead and look at some of the options that are built into the Customizer by default and then there will be a lot of other options that are built-in, depending on what type of theme that you’re using. The first thing that you may see is a button for the active theme and there will be a change button there. If you want to switch to a different theme. This is really great. I use this a LOT when troubleshooting WooCommerce sites because I don’t want to change somebody’s live site to a different theme.

But if I’m fairly confident it’s a theme issue, I’ll go into the Customize area and I will do add a product to my card and then go to the checkout page and then I can do a visual look. Basically, you’ll do a preview. Everything that you do in the Customizer is previewed until you hit the Publish button at the top. So, I can go in and I can change to 2017. I can look at it and if everything works okay and looks okay then I know it’s a theme-related issue. So, this is a good thing that you can do. They’ve just added in the last release that you can now schedule all your updates and all your changes. So, for example, if you are working on maybe a new theme design you can go in here and you can change to your other theme. You can work on it a while and you can say I want to publish all these changes in two weeks. Then you can go and the next time you can continue to work on them and it just makes that interface and it just works a lot better that way and that’s that. So, the active theme is the first thing that you will see.

The next thing that you will see along these lists and I guess before we do this, let’s jump all the way to the bottom. In the bottom underneath all the settings there are three little icons and one is for your desktop view, one is for your tablet view, and one is for your mobile view. So, you can click on any one of these and your website will be automatically resized to the right size. So, if you click on the mobile icon it’s going to shrink everything and you can see exactly what things look like on a shrunken interface. So, if you want to see more of a tablet, you can go ahead and do that as well and it’s all instant. As soon as you click on it, it automatically works. Now, down the left-hand side you’re going to see some other things. You’re going to see site identity and colors and menus and widgets and homepage settings and things like that. Then on the right-hand side where you’re previewing your website you may see some little blue circles with a little pencil in it.

If you see one of those, you can click on those and that will take you right to the specific settings inside the Customizer. So, it will open up the panel, it will open up all the places where all the settings are and you can click on that and you can just make your changes or you can navigate with the menus that are on the left. So, the first thing is site identity and this is where the site title, your tagline, whether the site title and tagline are displayed on your website, and then this is where you put your site icon as well. This is that fav icon… that little icon that appears up in the browser tab. That’s where you customize all that stuff and you can change this. Like I said, you update this right here and it’s going to reflect instantly on your website. The next tab is colors and this will depend on your theme. My theme here that I’m looking at, which is Your Website Engineer’s theme, only has one color. It says header text color and that’s the only color that’s built in. Now, that is not a big deal to me because I haven’t programmed that because I just hand-coded what color I needed it to be, but if you wanted to change colors and themes and stuff like that, that will be all in the colors tab. The next area is the header image area and this is if your theme allows a big header image across the top of your site, this is where you would put it and it would show what’s currently set and it will show some of your previously uploaded images so that you can take a look at what that was. So, in case you change it and then it will show you some of the previous ones that are there. You can also randomize headers so you can load up a handful of them and then every time someone comes to your site it shows a different image.

The next one is probably one of the most helpful ones inside the Customizer and that is the menus. You can go ahead and you can set a footer menu or a header menu or a main menu… whatever your theme calls for and then as you change and add things or move things around it automatically updates right there in your visual view. So, it’s really simple to drag and drop and move your About Page or your Contact Page or rearrange things or add new forms. You can see exactly where the breakpoints are, so on yourwebsiteengineer.com I have five menu items across the top and then I can see that, oh, if I click on the tablet view, what does that look like? Oh, it expands or shrinks into one of those hamburger menus so I can see what that looks like but it also gives you the ability to, like, okay, this is on a tablet view or a desktop view, all of these will show in one line but if I add one more menu item then, uh-oh, it’s going to break into two lines and I don’t like the way that looks. So, you can see all of that as you’re doing it right there inside the Customizer so I really like that.

This is one of the areas that as long as the menu area is defined in your theme, which it is because it’s being displayed, you can click on that little pencil icon and it will navigate you right to the menu area that has been outlined. So, that is the menu section. After that we’ve got the widgets and, like I said, the widgets are the ones that are also pretty fun to use in the Customizer because you get to change and you get to select which ones they are. Again, this is depending on what page you are previewing. It will show those footer areas, or those widget areas, specifically for that page. So, I’m looking at my homepage in the Customizer and there’s only a footer widget, so I see all three of the widgets that I’ve got set up for the footer. Now, if I was on a product page that had the sidebar I would see all of those and I could customize those as well. So, those are pretty slick. I mean, it seems like everything works really, really quick and it’s real rapid.

When you click Add a Widget another panel pops open, slides your website over, and then it shows you all the widgets that are available and you can search for widgets by just typing in the search box and it’s just really, really slick. It’s WAY better than using the old-school one in the WordPress Dashboard. A couple more settings here that you have inside the Customizer. Again, these are the default settings in the Customizer but the next one is the homepage settings. So, this is when you set a static homepage and where your blogposts are going to go. So, those are the two areas there, so if you want to make your homepage be your latest post you can do that there or if you want your latest homepage to be a static page of some sort and then your post page be on your blog page, or whatever, you can set that in the homepage settings as well. Lastly, we’ve got the additional CSS area and I am SO thankful that WordPress has added this as part of… I think it’s WordPress 4.8 or 4.9 or something along those lines. They added this feature built right in because we get a lot of customers coming for WooCommerce support that just need a little CSS hints or how to rearrange things in CSS. It was always like, okay, you need some CSS and you have to go and you have to install this plugin, this plugin, or this plugin and then paste this code in. Well, with the additional CSS it’s there for everybody’s website that’s got the latest version of WordPress. So, you can say, hey, just add this to the specific area in the Customizer and it’s just going to work. The Customizer, or the additional CSS area in the Customizer, is just like all the other things and it is a live preview.

So, as you’re typing the code it’s going to automatically update. You’re going to see those changes right away. If you are hand-typing it instead of copying and pasting it from somewhere it’s got what’s called a linter built in and it will let you know if there is an issue with the CSS. Maybe you forgot to close a bracket, maybe you forgot a semicolon, maybe you’re using font dash boldness instead of font-weight, you know, maybe you’re not using the right CSS property. Whatever the case may be, it’s going to let you know exactly what’s wrong with the code, so it’s not going to break your website. There’s also an area where you can see the full history, so you can go in and you can see Customizations that you’ve done previously and you can see all of that right there. The Customizer is so great. There’s a lot of things that other plugins are starting to use it for. WooCommerce will use it so when you log in you can set up WooCommerce display options, so if you want to say, oh,

I only want four columns or products or I want one column of product, whatever that looks like you have those settings in the Customizer as well. It feels snappy. It works really well. It is a largely-written JavaScript, so it just updates automatically. Then once you’re happy with all the changes and all the customizations you’ve done, then you hit the blue Customizer or the blue Publish button at the top and everything will change and everything will just be updated. It’s a fancy – I don’t know – it feels like the future, but it’s been something that’s in WordPress for quite some time, so that’s what I wanted to really share with you. If you haven’t used the Customizer at all, I highly recommend checking it out. Just go to that Customize tab at the top or into appearance and customize and just see what it can do.

See what kind of changes or modifications you can make to your website. Also, I want to remind you that at the end of this show if you ARE interested in a Gutenberg Webinar head on over to the Show Notes. You can go to it at yourwebsiteengineer.com/386 and from there you can sign up for the little poll. Let me know if you’re interested and then we’ll work out a time and figure out the specific details. I didn’t want to set up all of the details and then nobody wants to learn about Gutenberg. So, let’s do that first and then we’ll set a time and we’ll make sure that we get something on the books and then I’ll record a video and then everybody will learn the awesomeness of Gutenberg and how excited I am. I’ll showcase some of those features in the upcoming webinar. So, that’s what I wanted to share with you this week. Take care and we’ll talk again soon. Bye-bye.