Creating a Responsive Website with Wordpress

Lesson 5 of 11

How to Find Good Themes

 

Creating a Responsive Website with Wordpress

Lesson 5 of 11

How to Find Good Themes

 

Lesson Info

How to Find Good Themes

There's a lot of other things to think about with themes and that's what I want to talk about right now because this is this is ah big conversation have to be honest I'm going to switch back over just for a second here to this pdf file that you can get and this one right here er this one actually lists just some of the themes that people are people use okay there's some some pretty popular themes uh like themes how many of you have ever heard of theme forest isn't aware of her there okay forces huge they sell a lot of themes you by the theme itself they give you the zip of the theme the folder okay, you take that and you put it in I'm gonna show you how to do that okay, but enforces a big one uh who themes there's tons of them out there I'm not telling you to go to these but you're going to see you can also if you decide later down the road this is more advanced you could have what's called a framework or a starting point it's just bare bones it just has like here's a couple of columns...

it's black and white you know that kind of thing where it's not like a lot of customization you have to dig in and a lot of times you're gonna go into the code you added it okay so these are definitely more advanced something that we don't start with typically okay you're also going to see something like this there are tons of sites out there now I'm sure a lot of you have done this go search for top ten the key here is the word responsive themes almost any theme today is going to be responsive but we need to make sure we're getting one of those so just do a search for like top ten responsive wordpress names and the key here is to search for a year okay because a lot of stuff on the web I'm going to tell you all that's eight months old that is so old okay, only eight months old so you gotta you know you got to think about that and also paid versus free I want to talk about this a little bit all right um now this is crucial things to look out for when you get a theme what we're gonna do is we're gonna talk about some of this we're then going to go up and look at themes that are paid not and show you where to find that info okay the first thing right here make sure it's related I cannot tell you how many times I've been with a client they go out and they go search for themes they're like a let's get someone so told me about this cool theme they go find it they buy it for like forty, eighty six thousand whatever dollars it is ok? And they're like use this and maybe the theme has to do with putting on a carnival and they're like, you know, selling doctor's equipment or something and has nothing to do with what they're doing okay or you're a photographer you want to showcase your work, your photography, etcetera slide shows light boxes however it happens to happen and this site is nothing to do with that so you have to completely customize it it's got to be relatable okay to the business to your personal whatever happens to be if you decide that you want to have a site that's more blogged in sight it's got to be more blogged in sight in the theme okay, otherwise we're gonna be doing a lot of editing. Changing this is key to is their support. I get so many times where I client will get us ah theme and say use this or I'll go buy it for them because they said I want this theme and there's very little support at all so if something breaks they upload it they have a fix it was on sale actually I get I do get that yes, I get that they're like I just got a bundle of themes you know for like forty bucks or whatever sometimes that is gold sometimes it's you know, a hit or miss, but so is their support and is a support any doing? Are they there? Is it responsive? And I'm going to tell you right now that this is almost a no brainer these days almost you have to be careful and you got a lot for it because you know, some sights I've actually seen claim to be responsive, but they're adaptive different type there's things like that you have to look out for. Okay, I I'm going to tell you a story about this one. What browsers doesn't support once again, it has to do with client the client bought the theme uh, they didn't look at anything they just said good price uh, it looks awesome good colors and it's gonna fit kind of close I told them it's got a kind of be relatable they're like if it's close to what we're doing awesome, they didn't look and see where it will actually work, meaning what browsers or what devices that will work in there are themes out there that will not work in and explore ate earlier. Okay, a lot of us honestly, as developers, I it's a strong dislike I'm not going to say hey, but it's a strong dislike for older browsers like in an explorer eight and seven because they blow your side up you got to do a lot to fix it to make it work in there. Okay, so a lot of developers air like my theme forget those early ones were just going later their main client base was in iii seven, ninety eight they bought a theme that was eighty nine and plus and that's all supported you know how much work I had to do to make it work backwards so it actually fixed okay, so it's one of those things you got to check it out to check the browser supported its key uh actually, this is key to doesn't work with the latest word press version that seems like uh but I bought a theme that was just a month old and they hadn't updated for two years. I didn't check that, you know, I mean, so you gotta look at this stuff it seems like well, they're selling it to you you think it would be current, but you gotta watch that. Okay? Is there any documentation? I cannot tell you how many things I get into I dig into and they say, oh, just go to the customize it over there and then they just leave you hanging there like they don't tell you how to do it they don't say here's where you got it, you know, so that's something that's super important too I'm gonna talk about this to reviews and downloads if you find a theme you love, I'm not telling you not to download it. If it has, like, one review, okay? It could be brand new. It could be that I have no idea. I've done it before. Okay, but look at the reviews, see what people say and look at the number of downloads ifyou're start trying to decide between two themes and you're like this. One's cool. This one school full fit one has a million downloads and one has six downloads, you know? Okay, how editable is it key? Huge ki kiki, because we're saying if you can't customize this thing just by using the admin, you're gonna dig into code, you know what I mean? So you're it's going to be kind of useless for a lot of us that are just starting. So these are all things we gotta look are things that we need to look for kind of watch out for, um, we do have and I'm just going to mention this really quick just because people have heard of it. This's more advanced, okay, but there are themes that are based on what are called frameworks like has anybody heard of twitter? Bootstrap? Okay, see, this is that it's a lot of us they're starting have not heard of this stuff. The further you go into, the more you can actually get a theme that's based on something a lot of developers use. Okay, that's all I'm gonna say all right, we're not gonna go there. We are going to talk about child themes in just a second here, but I want to get out. I want to show you a couple themes and talk about that. So let me back out to my browser here and I'm going to get to some of these sites right here now I showed you that we can if we want to, we can go in and we can grab a theme okay? Through the admin, we can look at him, we can download over and stall him. We can also go toe wordpress dot or egg here, and we're pressed that orc has aton of information extended great stuff and you're going to see what's called the themes directory. You don't have to be in the admin, though. Look at these, so this is somewhere we can go and these air usually I'm pretty sure. Um, no, they're not most of these themes air free, but you're going to see that there are some commercial themes that you can click on and go by but check check this out there's there's like over there's almost like three thousand themes to choose from and there's like over one hundred million downloads so there's a lot of stuff we can do I actually tend to look at on the right over here the most popular you know I mean because a lot of times this is stuff we're going to do we're going to see on people no pay a lot of people are using them you're also going to see like newest themes etcetera now here's something you need to think about when you look at a theme I'm looking at this is a great name for a theme flat e okay so I'm gonna go look at a flat e here it's kind of weird you're going to see a button called download we don't need to do that because we could do it right through the admin ok we can go find this in the admin it's there I'll show you in a minute but so I'm gonna click on flat e okay I got to be just frank here and say that this is probably this page you see here this structure this is the best page onward press this this what you see here for plug ins and themes the reason why I'm saying that is because when you get into the directory and see the theme itself and it kind of tries to sell you a little bit okay little description of this little of that the key here is to look at ratings see if there's any ratings for it also there was a big big deal is to see right up here you're going to see when it was last updated that is huge if a theme has been updated for like two years be careful okay, because it might not work with your version of wordpress it might break something um also if you do see that the theme has not been updated for a long time and buy a long time what do you what do you think? I mean by a long time? I'm thinking like five months, six months a year is a long time yeah on the web in more like five months, you know, seven months, that kind of thing it's whatever but here's the thing no don't don't just dismiss the theme because it has been updated for five months they might not have updated it because it still works. You've got to think of that, okay? But what you want to do is look right down here. They're actually going to say usually that zero people say it's broken and zero people say it works a lot of times they give you something that says it's working or not, even though they don't say it say it supported in your your version of wordpress so we gotta check her views we've got to kind of look at things you also want to do this I'm gonna go to most popular and we're going to hit like let's see here okay responsive is a big one I've used this one in the past and do you think it's responsive okay yeah yeah based on your you know your whatever um okay so you're going to see right here what I would do is I would take a look at the actual reviews themselves don't just look at the star ratings okay, look at the reviews themselves and the reason why I say that is not to say hey, this thing is so awesome those kind of views okay that's great, but if you have a let's say, uh particular thing you're working with like plug ins you need to use you have to use somebody said you have to use this plug in in some of these comments people will say it doesn't work with ex plugin ok, so these air just things to take a look at all right? The first one is is kind of interesting because that that's something that I would be interested in like so they're saying there's a picture in the background and it's got uh infront text with a white box and they want to take that white but I don't want to mess with anything so if I already see that that's for someone who's new I don't want that one that that is great. Yeah that's that's that's good. I didn't read that one, but you're right I mean it's because all themes are different in all things have different customs ations thatyou can do you know any means somewhere just like okay install me now hit the code now figured out hit the code some of them are like it's told me and the world sky's limit just do it right in the admin so yes, that is awesome to look at and I also will look att at stats look att downloads per day and if you start to see a trend going down like a nosedive just think about that, okay? Yes question how soon after somebody like apple doesn't operating system update do does it affect themes and do they come back with updates? That's a great question um you know it's it's? Yeah, a ce faras responsive design the actual os is not and I'm gonna get going get comments on this. I know, but it's not going to be as big a deal. Okay, now, if it's if it's ah browser like let's suppose that in an explorer eight suddenly everybody just dropped it and nobody's using it anymore things that used to support it we'll be able to just drop all that stuff and maybe even give him or content or things to work with, because now they could spend their energy to do that it is it is important to a certain extent, I think, honestly, it's more important, if new devices come out and new things come out that you're theme may not support, so if you have ah, let's suppose that everybody in the next week gets a device that's like four feet wide and an inch tall or something like that, and they just stick in your back pocket and we look at our site and it's like that that's stupid that looks ridiculous, you know, that's something that we would need toe definitely look out so that's that's a really good question, um, so yes, so these are all things that we need to consider as faras themes are concerned, okay, so what I want to do is this we're going to go in, and we're going to start tio at our theme and talk about just a different things that we can do to customize it and show you how far we can take that and come to a certain point, yes, I just noticed something where on their can you show us, do we look for the browser compatibility that you mentioned previously yeah, you know what? Um that's that is a great question and the reason why everybody says that's a great question is because either you don't know the answer or it's not there okay a lot of times they I found that they don't actually put browsers support up here um they will actually if you either go to the support itself and asked the question you can ask the question there or search and support somebody's already asked it doesn't support aii eight for developers if I go to developers here is kind of scary, but they'll a lot of times talk about that kind of stuff in there um not a lot, but sometimes they will so you can kind of just dig in a little bit and see what and actually you guys to see how many versions there are right here and paid them that if they keep updating this thing okay, maybe it's broke a lot I don't know know know yeah top of their people are finding stuff right? So they're on it so you know it's going to be supported you hope it is what I tend to do a lot of times you're going to see that there's typically a link to the actual home page to develop the person that made this has a website with it on it already so I can actually go to the home page itself if you take a look and you'll see something like you know, the response of wordpress theme or something like that and there's more information out there usually and a lot of times they'll talk about it supported by this browser and not that etcetera okay but that is something that you're getting a free theme he's a lot of these air free we're looking at so you're kind of taking your chances a little bit right um if the person made it is nice then yes okay maybe it will be there but let me just switch gears on that question that's actually a great question but you're going to see that there are a ton of web sites out there and I'm not pointing in any one direction for our sights are concerned but you're going to see theme forest is a pretty big one and you see how many cite themes and templates they have from three dollars most of these air paid okay and you're gonna be able to go in and kind of take a look and if you look at a theme let me take a look here um global community picked by in vado team that's actually pretty cool I'm gonna go to word press here and just pick like if you guys take a look you're going to see that they have a lot of categories here based on just you know, the type of business you're working etcetera so I goto like creative and I'll take a look and we'll take a look at one just really good you'll see like a theme in here ok there's some that are really popular etcetera I go in and if you are going to buy a theme for instance, you're going to see that most teams will come with support which could be a big deal free things it's passive support okay sometimes and sometimes they're really good about it I'm not I'm not saying that, but if you look at this team they're going to give you a lot of information about it they're also check this out I love this about themes you find you're going to see things like what compatible browsers are there they have to say this works with this browser and this operating system, that kind of thing okay that's actually something that I believe that required that mean that it doesn't work with seven I mean at least it's okay doesn't mean it doesn't work but they're not designed for seven they're not claiming that is completely supported in ninety seven right that's good and this is on the the paid sites you got a lot of times when you're paying for something obviously the theme is important and theme has I'm not gonna lie to you if you buy a theme it's not always gonna be the case, but a lot of times they some things have spent more time giving more customization was to say that but it's not always the case. Okay, yeah, jim so I have a question on dh this is from mac ribs. And the question is nice after you customize a theme and they release a new version how do you update it while keeping your changes? Do you want to talk really briefly about that? Yeah, we need to talk about that. So one of the things working with themes let me get back. Uh, and I have a couple other pages were going to show you, but we don't need to go there. So what I'm gonna do is I'm gonna go back over to the admin and just talk about this part of it since they brought it up. It's a good, good thing to talk about. So here's the thing we just got it, we got ourselves a theme for instance, okay? And we this is the admin I went in and I said let's, go at a new one is amy. Remember what that one was called that I just, uh but we describe, uh, responsive, right? Okay, so if you take a look in my admin now I go find a theme you're going to see right over here right here, search teams, okay? This is going to go search that team director I was just showing you the free ones on word presses site okay, so I'm gonna just type in responsive how can I always misspell responsive it's just amazing and it's going to go through and just filter immediately you're going to see there it is right there, so if I want to I can just all within here I can go take a look at it, see what's up, preview it or directly install it and say let's start working okay, now I'm gonna go ahead and install something like this was going to say let's go ahead and packages gonna grab the folder put it up there do its thing and I'm gonna just gonna shotgun in here after a while you just start doing this you're like whatever it's going to activate it you gotta be really careful with that though. Okay? It's been it's been activated in a lot of times with teams that'll tell you ok, you conduce different things this theme recommends the following plug ins look right here. This stuff is important to look at if a theme developer is doing their job a lot of times they'll put this in here for you and say you need these plug ins or called we'll talk about plug ins in a little while okay? So my point is this we get this team installed okay, reactivate it. I go take a look at it. I'm I'm liking it. I refresh my page. Awesome. Good. I go in let's say, and just I'm gonna broach this a little here. I'm not gonna take you too far, okay? We're going kind of look behind the curtain, if you will. But if you take a look under appearance here, you're going to see that we have what's called me. Move up here, editor. Tread lightly. Okay, I'm gonna click on over there. You are looking. Remember that folder that themes folder I told you about. You're looking at all the files now up here on the right that are in that theme folder. And if I go click on one of these, you have the ability to edit them right now, if you go into this theme file right here and you delete that, ok, one of those things where tread lightly, if you don't know. Ph a lot of these are built on php. So you gotta be careful. So but here's the thing. A lot of times when you go open, you're looking all the files for this. Wow, there's a lot going on. Okay, let's get to the end when you first go to edit a theme you're going to see the style sheet and this is where most people jump in there like oh, I know styles I know cia says I'm gonna go in here and just start, you know, jamming on it if you make changes in here, okay? And you're gonna see it's actually editing is pointing to different style sheets. Okay, if we go make changes in here and we're all happy with every change colors, etcetera and we go look at our site something looks great. Here's the thing that's gonna happen now let me go back to the themes themselves over here on the left let's say the next day, two weeks from now, whatever. Where I got this team, they made an update. They have enough. Okay, so I'm like I'm looking at it. Word press is gonna yell at me and said, hey, there's a theme up that you need to update it first instinct is to do what do you think? Update let's day there's, maybe new stuff we got to update the problem is it's gonna wipe everything you did? This is what happens to everybody everybody does this if you go into the outer, they're there, and even if you do it if you're tricky and you go to the files themselves you could do that you go to the other there make changes basically anything you guys did is going to get replace because they don't say let's replace this file in this file if they did that, people seems would probably break and everything would work so they just say let's just dump the folder and put anyone in there and there's a new thing okay, so if you decide to do something like this if it's your own bread and butter and you are like, I don't care if they ever update awesome I'm gonna go dig in to the code, go for it, okay? What we do is if we decided we want to do that, we actually create what's called a child theme that I had ever heard of a child theme I've heard of it. I don't know good, because then we know what a child with a child. Okay, all right, let me let me take a look. I'm gonna show you this real quick so if you have a theme and you guys okay, this pretend this is a theme, all right? I don't know why I just drew a box what does that even mean, okay, the theme has a bunch of files in it and all the stuff that's your theme okay now if we decide to go make changes to the code once again if we update it's gonna get replaced totally and let's just say that this is actually a folder and there's your thing colder it's gonna get replaced so what we can do instead okay to make kind of save ourselves an animal security we can actually create and there's a lot of different ways to do this. You can learn about it in advance class we can create another theme called our theme and we use the name with the same thing child all right, this is called a child team. What a child team does it's actually really dead simple there's not a lot in here. It just simply says whatever's in here let's use that and then we're gonna go in and make some changes. Ok, so what has to be in a child team? They're actually has to be a css file, so we want to go in and change colors and maybe get into the styling and edit the code, right? If you want to do that, you can safely go here to this theme. This is actually an entire theme that you activate, so you're going to see it listed here and it's gonna actually show up it's going to be called, for instance responsive it's gonna be called responsive, active or responsive? Childs so basically it just pulls everything in and we just put this on top of it and say okay, I want to make some changes here there if this theme updates the folder gets replaced, a new one gets in there when you do the update ok in there and it's just going to do the same thing it's just going to pull it in and our changes they're still there question on that though if you actually not changing the style the css and there you're actually just using the themes ability to change colors or whatever when you update will you lose those colors I'm gonna tell you like ninety eight percent of the time that's a great question by the way uh, no, because that information is stored in the database that's separate from the theme itself now if the theme person people, whatever that make it if they decide that they want a new couple sections, you're not going to do that anymore maybe, but they don't really know if they do that they're going to get firestorm intern I mean, so yeah, this is a child team is really if you want to go in and you want it at it like going not just I'm not talking now I'm not talking just going in and changing like customization settings and colors and stuff like that but actually digging in and saying the thing you can't do that I want to do it though so that's like baby steps before you want to create your own site that's like the little the little baby step before you want to just create it yourself off of what you were talking about you like the more advanced worker yeah, that type of thing exactly so steps so those of us that's exactly so those of us that want to get a theme that's already created maybe they buy it and get it for free and you want to make the changes and you could make it a lot of changes you khun just completely rework it if you want we usually don't but but for people that are going to make themes for a living and things like that way usually are going to just we're gonna work with the theme itself and give that to people some themes you guys will actually come with a child theme already it's kind of crazy it's kind of cool so you load the theme and it'll just both will show up and it will activate that one so you're safe so you start to kind of do your thing I have a question that you can answer later or not at all but is there any way to look at someone's website that you really admire and like and know what theme there using or if they're using rip what a wordpress in order to say who I really like theirs that's a great starting base and I can just incorporate my own colors that's that's that's a good question and the answer most of the time not always is yes. Okay, now the only thing is that I sometimes will actually, um if you see, like like here's kind of ah giveaway to at least being in it in the right direction look up here at the earle and you're going to see this contact us. Okay, if you see paige names remembered us talking about with the permanent thing and it's gotten if it has hyphens, a lot of hyphens going on things like that a lot of times that's, wordpress okay, kind of not always not always but a lot of times. Okay, the other thing that you're probably gonna have to do unless it says proudly powered by word press like this powered by wordpress. Oh, and the theme to in the theme it says it I think the look there's actually a fair amount of themes in the foot or they'll put that in there. Okay? Because you know that way I don't know the other thing is a little more advanced to be honest and I have to look at the code for the page and kind of take a look at it you're going to see that sometimes in there it's going to stay a horse you look at the view source it's called view pages or somewhere and if you kind of dig in here now I'm just gonna kind of cheat here I'm gonna look for the word wordpress and way down here to take a look now if somebody's being sneaky they could take this stuff are you going to say it was generated by wordpress now if you get sneaky you're going to start to see like w p hyphen stuff in length wordpress okay so that's that's if you got to be sneaky all right so anyway so yeah there's there's a lot there's ways to tell but you're right that's a good crush so all right let me let me do this we need teo we're talking about themes talking about what we can and can't do uh oh and the types of things we want I'm going to take the theme that we have for creative live and let's put it in here okay I'm gonna activate it and kind of get started so if you look this is what you get you get you get the creative lives up so if you ever download a theme they're usually going to give you a zip file and this is what we put into our sight okay and the way we do it is would you just put the zipper you find it okay I go back to my admin, which is up on the web or wherever it is. Ok? And you're going to see we have the same procedure here. We're going to see add new so I go add new now in this case instead of going out and kind of looking down here searching you're going to see right here upload theme okay, so this is if it's on your somewhere you could get it so I click and upload theme and it's gonna say all right, go choose a file now it's gonna tell you right here that it's gonna be in a zip format. That's cool. So click on choose file and I'll go out, take creative, live that's it click open and now it's going to say let's install now, the great thing about this is that if you install it, just gonna copy the folder, unzip it and stick it up there in the folder k don't stall now doing the thing now I could go another activate or do what we talked about before. As far as looking at her previewing it I'm just gonna go back to the themes page and going to see that there it is right there and I'm gonna go in and just all activated or preview it all activated go. And now if I go out, I don't have to say because, you know, we just did it. We just activated. If I go back out to the main site and refresh, we get started. Okay? And that guy's looking at this like this is wow, that really that's it. That's. That's. Horrible that's. Great. Very interesting. Not very interesting. All but here's the thing. We have a lot of customization. We could do that I built into this team. So that's what? We're gonna get him. Okay? Uh, matter of fact, what I want to do right now is we're gonna take you for just a little bit here and talk to you about the customization settings that themes come with. This is crucial. This is key. If you don't want to have to go in and, like, dig into the code and do things like that, the theme needs to provide you with a way to do it through the admin to, like, change colors and add pictures and just to the main area. Okay, so if you look over here it appearance, you'll see that on the left, I have went to get my themes. You're gonna notice that when you install a theme by the way you want to and actually when you install anything when you put anything it's new in here what you want to do is you want to go look at the side bar over here and see if there's any new menus because of you install stuff it can actually create a whole new menu specifically for that thing that air settings for it okay, yeah, a lot of teams do a little differently inward press things have kind of changed or shifted for the better here because something's will actually have a section separate that our theme options you could go to it's called team options and you start editing what's newer is what's called customizer this is it's been around for a little while but it's a little bit you're so all themes have something called customized if I click on customizer customizer you remember last before I showed you when we were looking at a theme just kind of see what it did and you can tell how much customization is there? These are the customization settings we have available okay, now I know you're looking at the team before and you're like, wow, that was not good looking anyway um what I tried to do is I tried to make it to wear with the theme you can go in and do things like let's add header styling so if you start opening these up you're going to start to suddenly see that there is a tonic stuff weaken d'oh okay tana stuff free twenty sections for instance I want to change the background color of the header like I want to go up there and maybe, you know, make it something like yo, you're going to see the auto update that there's for flesh is live and this just happens for just about a lot for a lot of teams okay, so I could go in and pick some kind of color and if I want I kind of wrote down the color because I always forget these colors I wrote it down so this type and you can also type any color uh and it's going to tell you if you are messing up or not you see right there there's the color create a lot of color that you like or the color of your logo or what it's probably makes. I can't believe I haven't done this yet and I'm admitting it, but it probably makes sense to know that hash tag number yeah letter thing get the right color because my colors never right that's a good question that's great because because if you look in here we have the ability to do even you can even do transparency is an alpha's if you want, but you're visualizing it right? So if you have a company color and you need to know how do you know that? So what I tend to do is I'll actually go into photoshopped illustrator whatever look at color picker, you know however I want to get to it so I'll say, you know, file new whatever and usually in photo shop for instance, I'll go down here and you'll see like colored however you a lot of you know how to do this, I know, but I'll goto like color picker or the soil stalls in your logo open the logo to a little sample and you'll see usually that hex decimal value right there awesome okay awesome old state or does pretty much the same thing so you could do that a lot of these programs do okay if you get into like making the color or setting even now in design will show you to make us watch. It'll show you this hex hex color which is kind of cool so you can even pick it from your friend. You can search on google too I think they have some pages right that so it's just there's so many colors office a million there's a million so so this is something we could do and you're going to want to go in and start to pick what's relevant or, you know, works with your theme and your site obviously so and you know, to be perfectly honest, a lot of people we just jumped in a wordpress we said let's pick a theme let's get going some people will start in footie shop and come up with an idea they'll have a design created by any means especially if let's suppose your photographer maybe you're you don't want to design it or your strong suit is not designed but you won't have a good look good, you know I mean you can hire designer to design it and usually what they'll do is they'll do it in footie shopper illustrator give me that file you can then sample and take the color like we're talking about and put that into your theme but that's another thing to think about if you get a photo shop design or an illustrator some design from a designer, what do you think we're going to try and do with the theme and the design match them? Okay, that's what I'm talking about doesn't relate you know they mean you guys have a design and you pick the design is a single column really cool scrolling lots of pictures and you pick a theme that has three columns and no pictures no okay, that kind of thing so that's something else to think about, okay, so let me get back over to customizer and I could go on and do things like this supposed that you know I have that site title right there which is something we started with I can change that if I want. Obviously I can also go in and replace it if I want to I can say let's add a logo and this at this point when you're doing customization like this it's going to take imagery that you have and upload it to your host okay or to your site so I'm gonna click on image let's select a file and I'll go grab and what you can do these these central files these air the bonus files that you have you sign up, we actually have the logo in here. What I'm gonna do is dio lower white and as far as images are concerned one quick second on that have you all created an image like a j peg give for ping before one of those three those are those are the three main types of images were going to use inward press on the web in general so jpeg gift and paying the fourth type we're gonna be using a fair amount that I actually gave support here is spg how many of you have worked? Let me just write this down how many of you work with us for doing know what spg is? Okay, so spg we actually go over it a lot in the advanced class and we talk about it just because it's something that's key if you have a logo for instance like we've got the doughnut logo for instance like that okay lot of times we'll make a j peg or a ping out of it problem is that what if that logo is pretty big on desktop but needs to get this big on mobile or something like that scaling can look kind of bad it can look kind of crap okay if spg stands for scaleable vector graphics factor vector is is anybody use illustrator at all ok or vector and photoshopped that type of thing spg is a file saved that is what's called vector and you can create the's an illustrator there's a lot of programs you can use but you just save it is an spg file these can be used on your side as well because they're stressed they could stretch bigas you want to get it bigas you want they go small without losing getting ugly there's no pixels it's all vector so vector means it's made out of math and it's got a beautiful precise curve every time let's say there's a curve in it so that's something you can create tuas forest like let's say illustrator you just do it you're doing a save as spg so in illustrator you khun save is an spg yes and it's different than an illustrator file you got it but you can still added administrator is kind of crazy okay photo shop for yeah, exactly. It's going to be something that is created in illustrator and saved out of illustrator but the spg file, you're typically just gonna add it back and illustrator. Very cool. Thank you so much for that. Check this out. I'm an illustrator. I'm not gonna go over the whole process. I just want to show you this is vector data, which means that I drew it. For instance, if I come up to file an illustrator and I do and this is not the only program that does this, obviously, and I go to just say that if I go to format, you're going to see right down here s the g let me zoom into that spg we don't do compressed usually spj if you save it out that way, going to scale for you let you scale be beautiful look perfect look great. We don't let them worry about anything responsive, okay? Because it's going to do it. All right, so let me get back over. I'm going to actually choose the white spg version, so I created spg you're gonna find it. Not all themes will let you do this. You'll try and pick an answer me, jean, and won't let you put it in, it'll say we're press will say no can't do that because not all supported so something to think about. You can add support as well later if you want. But that's we did that in advanced class. I'll open up the spg file. We'll take a look. It's gonna put it out there now sometimes it actually takes a second. I need to actually save unpublished for to show up. But it will be up there. I promise you we can now go in and start to edit. You could do things like you want to put it back on image in the header. Go for it. You guys could put an awesome, beautiful picture in there. You can tell it to overlay the color. You're gonna have to be transparent. You could remove the background color here of the head or if you want, you can kind of do both. You can do things like let's cover the whole background or just like fitted in there's. A lot of options that I put in here. Wow! This is one of my favorite things. Sticky header, that's just gonna click on sticky header and what it actually is going to do. And this is annoying there's. Not enough information, but watch it's going todo sticky means stay at the top of that everything I am in love right now. Okay, so that kind of thing is kinda nice so you can either say I don't have it sticky or if you turn off sticky header it's going to just scroll with the page so we'll go with the pigeon disappear so you can also then go in let me actually just I'm going to save it and publish real quick and then go over to the main site and I'll refresh take a look and you guys going to see that didn't put my logo in there let me put my logo back in it's like the file on the white open it I'll just put the thing in there for a second well that's the background image hello, brian wow doing a little too fast here I'm trying to go too fast. Uh look away. Okay. All right. Um some reason I'm not getting it to work right now but let me just quickly, okay, there we go. Got it. Same post. Ok, cool. So if you take a look the other big thing about this team is we can if we look down here you could do things like edit a bunch of colors uh we can add what's called a header image if we want to the header image is actually in the top another image we could put up there kind of interesting we have a page back on image this is the big thing right here the header banner photographers this kind of thing could be really good so you can actually show it's called a banner on the pages so this banner is going to be full full full with if you will and responsive and we just picked pictures for each page and it will put it in there for us. So this banner with with combined with the sticky header it's actually gonna make it to where it actually schools like that the text itself if you take a look, we can stay on the home page only or on every page the text and the picture some pointing right here the text in the picture you can edit in each page that you make so it could be separate in each page otherwise it's going to save eve oh, donut you got added it uh the other things we can do here if you take a look like footer content on the left down here, I can go in to do things like changing the school down here for her gunny things like, you know, if you want to add what's called foot or contact, I made some areas where you could just type in text you guys want to type an e mail addresses website address is that kind of stuff? You can do that, okay? I also hid the powered by wordpress but we cannot hide it down there if you want. Okay um and we can align the photo techs I tried to think of a lot of things that we might actually do like center left aligning the text down there yeah, this kind of thing footer background color let me actually fix that real quick I know I have an actual color in here I'm gonna do let's see like two, six, three, nine, five and then we're gonna be pretty close to done here. Okay, there we go. It was pretty much already there all right? And then just couple of things you can kind of explore could put a picture in the background if you want to the footer having the full screen, a cupful cover etcetera and there's a lot of other settings you're gonna want to explore but this is the kind of stuff that if you get it right you did it done you're going to be a long way towards making it look the way you wanted teo so that's kind of the deal so let me save him publish here and I'll go out and take a look now I need to change the background color of the page itself because that looks ridiculous something go out and go to colors here and I've got back on color and I'll just make it white you know, to see if this's so I love the fact that we're press does this it's just so smart, it just changes it automatically. Well, saving, publish, let me go take a look at the site now and refresh, and you'll see that we're getting started, so it looks a lot better than it did just a few minutes ago. So a lot of customization, a lot of things that we need to look for and things that are important, that you need to consider it there in the template or in the theme, rather or not, right? So if we didn't have a lot of this customization, you'd be stuck with what they give you that's one of the things to think about, yeah, because would you be able to change that header, the height of it and stuff along with that same? So the height itself is based on the theme files, so if we want to do that, we're going to set up a child theme and started edit the css there's. Anything about things you're gonna find there's on ly a certain amount of customization you, khun build into them before you, you and your client start to lose their mind, you know, whoever gets the theme because there's only there's only so much that can you don't have trying to say here, believe me, I want everything in there, I want everything to be customizable, but sometimes you just have to stop. You also don't want that too big anyway, because then on a cell phone it's going to be it's going to take up like that? Almost that whole page you got. So I've started to learn to think about cell phone since I checked my google analytics and thirty percent or forty percent of my customers are viewing it on a cell phone. So then I need to know that that's what I have to keep in mind when I'm designing a website and that banner, that header part or the top part is huge, it is really a huge you're dead on. I mean, I when when people get further in toward press to start thinking and working with clients or even even their own site, they did. They're redoing it, looking at what's called google analytics khun b huge it's it's information that google can provide that you've set up okay, it says people in this size brows have been looking at it or people on these devices are these operating systems it's really gonna be amazing and permission, so you know, if you notice, you're going to see that this actually goes down to mobile, and like I said before, this is the kind of thing where, if you don't like this type of mobile adaptation, maybe the themes not for you, you really mean because sometimes the customization wise, they won't let you customize that directly in the theme, sometimes they will, okay? And it really depends, but that's, something we need to think about, okay, so that is working with and kind of inserting our theme once we go through a lot of these settings and I know believe me that you're going to go through all the cities and then be wanting everybody does that, you know what I mean? They're like, but can you it's relatively? No, you're what I've seen you're going to see, though, okay? I'm gonna be honest, you're going to see that sometimes some of these themes will actually have layout in here. You can say b two columns be one combi three column, that kind of thing you're going to start to see a lot of that stuff as well, ok? I didn't go there because I did it a little different way, so I decided to go a little differently. So let me let me. We're in the customizer right now, so what I'm gonna do is I'm going to say, ok, saved it. I make sure I saved it. I'm gonna go out here and get out of here, okay? And then we're back in our admin, and we could start to start, start the work, start to add our content, do different things, menu's, different systems like that and really start to get at it.

Class Description

You don’t need to know a line of code to build a gorgeous, fully-functioning website. With WordPress you can create and maintain websites for yourself or your clients with minimal technical know-how. Brian Wood shows you how in Creating a Responsive Website with Wordpress.

Brian Wood is an Adobe Certified Instructor who has spent years training designers and business owners how to build and grow an awesome, professional web presence. In this class he’ll cover WordPress website development from the ground up. You’ll learn how to:

  • Choose a host and install WordPress
  • Make your WordPress site mobile-friendly
  • Pick and apply the right theme for the job
  • Change essential WordPress settings
  • Add menus and widgets
  • Work with posts and pages
  • Add functionality through plugins

Brian will give you a greater understanding of WordPress that lays a solid foundation for all of your future web work. You’ll learn your way around the admin area and find out which add-ons are worth paying for and which ones you can use for free.

Everyone needs a website – learn how to deliver one with this complete guide to setting-up, managing, and updating a WordPress site with Brian Wood.


Software Used: Wordpress 4.0

Reviews