On today’s episode, we’re going to look at different extensions we can add to our Chrome browser to make WordPress easier to use right here on Your Website Engineer Podcast episode number 247. Welcome back to another episode of Your Website Engineer Podcast. My name is Dustin. I’m excited to be here with you just like I am every single week and today we’ve got some really cool things we’re going to talk about. But first let’s dig in, let’s get through the announcements, and the, “Is there a plugin for that?” section, then we’ll talk about all these cool WordPress Chrome extensions that we can add to our browsers. So the first thing, the main thing that I want to tell you about, is the WordPress Webinar that’s happening on September 4th at 12:00 p.m. That is going to be a 12:00 p.m. Eastern daylight time, and it’s a little shift from my normal 10:00 a.m. slot, but that time just works a little bit better for me when my daughter is napping and it’s quiet in the house and you don’t hear footsteps running in the living room right above my office. So that’s why we’re going to be changing it to 12:00 p.m. noon, and we’ll be talking about how to learn html and CSS basics. Have you ever wanted to know how to change the color of your text inside of a widget or inside your post or page? Have you ever wanted to try to make the font just a little bigger or a little smaller or just make some small tweak adjustments?

This isn’t going to be in depth in the way of, “We’re going to build a WordPress theme.” No, that’s not what it’s going to cover. It’s going to be how we can use CSS and html to just really format things exactly the way we want them to appear on our website, and it’s anything in the content area, the widget area, the footer, the places where you have control over your content. So we’re going to talk about that, and you can register over at yourwebsiteengineer.com/webinar, and that again will be on September 4th at 12:00 p.m. Eastern. The other thing that I want to share is I know in the last recording I had my fingers crossed as I was recording on Tuesday. I knew that on Tuesday afternoon WordPress 4.3 was supposed to ship and I was just hoping that it would come out so that I wouldn’t have to re-record an episode early on Wednesday morning to make it all true and right. But it did indeed come out last week, about a week ago. It was on Tuesday afternoon it shipped, and I updated all of my sites to that. I’m really excited with some of the new features and, again, if you want to know all the information about what’s new, be sure to check out episode number 246, where we talked about all the different features in WordPress 4.3. So I’m digging it, I’m loving it, I’m really excited, and it’s exciting to see what the conversations are for what should be included in WordPress 4.4.

It’s hard to believe that they’re talking about that already. It was like they shipped it and then they started talking immediately about what’s in 4.4. I know that the developers and the leads are very ecstatic that the release cycle is over, but they’re also looking forward to, “Okay, what kind of updates can we do in the next couple of months to be able to ship another update by December?” So that is when we’re going to be looking for WordPress 4.4. If you’re interested in learning more, head on over to the WordPress.org site and you can find out more about what’s happening and some of the bugs that are being fixed and all that kind of stuff. The, “Is there a plugin for that?” section is a pretty simple plugin this week. It’s called Author Image and it is a plugin that will allow you to automatically display an author’s image for the blog post. This is perfect if you’re running a website that has multiple different authors and you want to just give a quick visual so when somebody’s logging in they can see the author’s profile right there and there. So that’s the plugin for that section, Author Image, and you can find it in the WordPress repository and it’s also in the show notes for episode number 247. So today I want to talk about a few cool WordPress Chrome extensions, and I know that this may not fit the entire audience. You may not be using Chrome, but I think that it’s a good discussion to have because some of these tools do work on Firefox, and I’ll try to do my best to try to figure out in the show notes for this episode which ones do and don’t work in Firefox. I’ve only compiled this list in Chrome.

Chrome is the main browser that I use when I’m developing websites and I’m browsing websites. I primarily do most of my work in Safari actually. All of my daytime work is done in Safari, and I like the clean interface of Safari. I don’t need a lot of browser extensions for what I’m doing at WordPress.com for my support role, but when it comes to actually building websites, debugging, stuff like that, I always use Chrome. I love the Chrome developer tool which just makes it so much easier to try to figure out, “Okay, what kind of CSS needs to be adjusted? What kind of JavaScript errors are happening?” I just really like Chrome so much better, so I run Chrome for that and then I use Chrome for pretty much everything that I do when it comes to developing. So I run Chrome and I’ve got a lot of these installed on my own browser and they’re just some of the ways that we can talk about how we can make WordPress easier. Some of these things are really going to I think blow your mind on what you can do with the browser extensions. It’s amazing to think about just a few years ago, we didn’t have extensions for browsers. We could only do what the browser said we were allowed to do. And now you have these cool things where you can customize a website to make it look exactly like you want it to every time that you visit the website. It’s specifically to your computer or, I guess, with Chrome now, all your Chrome extensions sync via all computers, so as long as you’re signed into Chrome then all of these extensions will sync from computer to computer which is also pretty darned amazing.

So the first thing that I want to talk about is called WordPress Style Editor, and this is a great extension for making tweaks to your style, that CSS file, while viewing your public facing site. It is great for making small little changes and the changes are applied immediately at the click of a button as long as you’re logged into your WordPress account, your WordPress site. As long as you’re logged in, and you can go ahead and what you do is you basically install this extension and then you activate the Chrome developer window. I was talking about that a little bit earlier. There’s different keyboard commands, or you can go up to the toolbar across the top and you can look for the developer window, and it basically pulls up an area where you can actually see the CSS code for what your website is doing and all the html and stuff like that. So basically what you want to do is you can go in there and you can start editing things. You can make the size maybe just a little bit bigger and maybe make the size just a little smaller, maybe the color red, or maybe you want to underline this text or whatever it is, you make these changes and then you go up to the bar and you click this button and it automatically adds this to the bottom of the style.css file. Now granted, this isn’t the most robust way to make CSS changes and things like that. I’m not saying that in any way, shape, or form, but this is a really great way to make small little tweaks if you want to make sure that they’re done very very quickly. So this would be something if somebody says, maybe it’s a client that comes to you and says, “Hey, I have this one small little specific thing.” Like if you wanted to get it done within seconds you could do it this way. Again, if I’m me, I’m actually not going to use the browser extension. I’m going to actually go into my development site, I’m going to fix it and do it the right way and upload it, but this will work.

Okay, the next one that I want to talk about is called Colorzilla, and this one is a way to automatically get the color from a particular page on a website. Have you ever been to a website and you’re like, “Oh, I really like that color. I wonder what that color is?” And it’s really difficult to try to go in, try to figure out if it’s a link or something, you could kind of look in the browser tools and you could figure out what it is, but if you want it very very quickly, Colorzilla is going to be the tool for you. When you install this extension, it’s going to add an eyedropper to your browser tool or your extension bar, and you click on that browser bar or you click on the eyedropper and you put it over any color that you want and then you click on it and it’s going to show you the six digit hexadecimal code, and from there you can go ahead and use that whether it be in your style or your Photoshop or whatever that is, you can do that right then and there. I know that I tried to get away from doing this for a while and I would just say, “Oh, well I’ll just open up Photoshop every time that I need to do it and click on the eyedropper tool.” Well by the time you load Photoshop, it’s like 10 seconds have gone by and you’ve wasted that amount of time. So this tool really really works for that. Another one that I really like, and this isn’t really necessarily going to make your WordPress experience better, but it is the Evernote Web Clipper, and if you’re someone like me, I do all of my show prep in Evernote, so when I’m running across websites on things that I think would be a good topic, I use the Evernote Web Clipper, I click the button and then save the entire article to my folder that’s called “Podcast Episodes” inside of Evernote.

And then when it comes time to get ready for a show, then I can go through all the show ideas that I have and I can kind of go through there and like, “Oh, I’m going to talk about this one or this one or not that one.” Going 247 weeks in a row, it takes a lot of energy sometimes to just figure out what I want to talk about. That’s the hardest part for me, so this tool makes it really easy as I’m browsing the news, as I’m looking on Twitter and I’m clicking on links, like if I find something that I’m really interested and I want to share on an upcoming show, I use the Evernote Web Clipper and it is really powerful. I really like it a lot. Another tool that I don’t necessarily use but I think would be very good for people who are in the WordPress design space and you’re building websites for clients and charging on an hourly basis. It is called Simple Time Track, and this is an extension that will help you track the time that you spend on items on your to do list. So basically you click on the icon in Chrome once it’s been installed and start adding your tasks. So say you want to update, maybe you want to update the wpconfig file and maybe you’re going to update the style guide and then you’re going to work on another page. Basically you add those all up, those are going to be your to do items, and then you click the play button and it starts the timer and counts up continuing until you press the pause button.

This will help you track your work throughout the course of the day, and then it makes it so much easier to try to figure out at the end of the day or the end of the week or whenever how much time you actually spent on different tasks, and then that will help you give better estimates the next time around if you know it’s going to take – if it took you 40 hours one week to build an entire website, then that’s a good indication that it may take you 40 hours or even more the next week. So that’s called Simple Time Track. Okay, there’s one plugin in the performance type category that’s called App Telemetry. And that one again, there’s a link in the show notes for episode number 247, but it’s basically, it does a speed test of your website right within the browser, so you don’t have to go at a, the different tools that are out there for speed testing your site, basically once your site is loaded you can click on this little icon in your browser extension window and it’ll show you exactly the speed that it took to load and it’ll give you some suggestions on how you can improve your site’s speed with the categories, the different categories that are listed within this plugin. This is really cool if you’re trying to get a site to load much much quicker. So if you want to check this one out, that’s the one that I would recommend for that. It does it all in the background and you just have to click the button and it generates this little report. It’s in a little hover window and you could take screenshots of them if you wanted to to see if you’re getting better or worse or what not. 

So that’s one in the performance category. Here’s a few that are kind of tagged as WordPress development extensions. These ones are pretty cool and this one is one that I use all the time. It’s called App Specter, and it basically doesn’t show up as a button, you don’t even know that it’s there until you go to a WordPress site. And if you go to a WordPress site there’s going to be, in the admin bar or the tool bar if you will in Chrome, there’s going to be a little WordPress icon. It’s letting you know that, “Hey, this is a WordPress site.” You don’t even have to try to figure out, “Is it WordPress? Is it not?” This plugin will do that specifically for you. So that is really really cool. It also does other frameworks. It tells you some of the different stuff, is it running JavaScript? What type of libraries that it’s using, and you can configure which ones appear and what not. But I really like this one because it makes it really simple if somebody asks, “Hey, can you help me with this website,” if I go to it I see it’s WordPress and then yes, I can probably help because I know WordPress much better than any other platforms out there. Another one in the WordPress developments base is called the WordPress.org Plugins SVN link. And that one is a mouthful but this isn’t your typical extension. You’re not going to see a lot of functionality with this plugin. Basically what this one does is when you go to a WordPress plugin in the repository, so if you go to WordPress.org/plugins slash whatever the plugin name is, it’s going to show an extra button underneath the download button that’s going to give you the ability to look at the code on SVN.

SVN is the version control system that WordPress.org uses to track all changes to the plugins, so what you can do is you click on that button and it’s going to open up the code so you can look at it before you actually have to download it. It helps you if you want to make sure the plugin is secure, if it’s using good code, and what not, but you don’t want to have to download the plugin and then open it up in your text editor or what not to look at the code, then what you can do is you can use this plugin or this extension, the WordPress.org Plugins SVN Link, and you can look under the hood with that without having to download the code. Pretty pretty cool. Another one is called WP Sniffer, and if you are on a site that’s powered by WordPress, the WP sniffer will detect the theme. You basically just click the button after you install it and you instantly see the theme’s name. So this could be a good thing or a bad thing depending on what the name is, and I think basically all it’s doing is just going in and actually looking at the code for the active theme and it’s pulling in that information. So I don’t think it matters if you’re using a theme that’s on the WordPress.org repository, it may or may not give you the link for that.

It’s basically going to give you the name for that theme and then you can Google that theme and you can see. Now if you use this on yourwebsiteengineer.com, you’ll see that the theme name is called Your Website Engineer.com because I created it. So I’m not sure what all type of information you’ll get from that. It may just relink you to yourwebsiteengineer.com. So not 100 percent sure how that one goes but I saw that one out there and thought that would be worth a mention. There’s another extension called Window Resizer, and this gives you the opportunity to make sure that your website is responsive. If you are using this, you can go ahead and you can click on the different sizes and it’ll actually set the user agent as that correct size. So scrolling the windows bigger and smaller sometimes works, but it doesn’t necessarily simulate all of the different browsers and different things, so you might want to check out Window Resizer. Another one is called Stylish, and I really like Stylish because it gives you the ability to overwrite CSS code on anyone’s website, so there’s different ways that you can do this. But basically if you wanted a certain font to be different, maybe you go to a website and it’s a font that you cannot read. Basically you can load Stylish and you can set a style precedent, so whenever you’re on that site, that it will automatically take that crazy script font and turn it into courier new or whatever font that you want it to be.

It’s really really cool. You can change the color, if it’s a website that you can’t see the color or you want to change the color, basically you can make custom CSS changes to other people’s websites that will load specifically in your browser, which is really cool. So I use this for a few things. There’s, on my chat program within Automatic, there’s the font I hate, I can’t, I completely detest it and I can’t stand it so I’ve changed it to a nicer looking font that doesn’t make me crazy every time that I look at it. So that is something called Stylish. All right, there’s a few more here before we wrap up, and these are kind of in the writing and editing category if you will. There’s one called WordPress Admin Bar Control, and this gives you the ability to just hide that admin bar that appears at the top of your site. So sometimes if you’re working on your site and you’re logged in if you don’t want to see that bar, you can click this button and it automatically just goes away. It’s pretty slick. Not necessarily needing it all the time, but if that’s something that you just want to get rid of that bar every once in a while but not have to log in and get to the settings page and turn off the dashboard for that specific user, then check out WordPress Admin Bar Control. A couple more here. I guess one more here, and this one is called Grammerly, and this is an extension that’s just not for WordPress but it’s for anytime that you’re entering text on the web.

It just basically identifies spelling mistakes and grammatical ones too. Most of the web browsers these days will let you know if you’ve got a spelling mistake when it comes to text, but it won’t let you know any of the grammar mistakes, so Grammerly will do that as well. So it also does a, when you have this installed, it actually gives you corrections, or it gives you suggestions for corrections, when you hover over the word in question. It’s got a green little line when it’s underlined when there is a grammatical change that’s necessary and then when it’s a spelling error it is a red line as well. So it works on all different types of platforms so if you are a notorious bad speller or bad grammarer, then this would be a plugin for you to check out. So those are the browser extensions that are out there. Again, some of them may be applicable for some of the other browsers that are out there, but since Chrome is a platform agnostic it works on Windows and Mac, and then I felt like this was a good thing to share. So some of these if you want to find them, see if they’re on the Firefox or different, your favorite web browser, be sure to just kind of take the name and Google it as an extension and see if that pops up. All right, let’s go ahead and wrap this thing up. Thanks so much for tuning in this week. Remember, there is a WordPress webinar that’s happening on September 4th at 12:00 p.m. Eastern. We’re going to be talking about CSS stuff and little html stuff. It’s not going to be overloading.

It’s going to be some very basic stuff. How you can format the text perfectly on your website whether it’s in a post or a text widget, things like that, that’s what we’re going to cover. You can sign up at yourwebsiteengineer.com/webinar. That’s all I’ve got for you this week. Take care, we’ll talk again soon.