Lessons

Lesson Info

WordPress Themes

Let's talk about themes. This is the thing that everybody wants to know how to do. How do I make my site go from this to something like this or something? Like, you know, the photographer theme that we looked at earlier? It's fine. That cool in the viewfinder theme. That's awesome. So my favorite themes. Okay, so here's the viewfinder theme. Really cool. Loads up really nice. That's a lot of JavaScript and CSS and stuff happening in here. Right? So how do we get a site that looks like this? Well, first of all, you're gonna have to have a bank of content. All right, You've got to have content, because if you don't, there's gonna be nothing but a big whole your site right there. All right, So before you pick a theme like this, make sure you have content to fill it out. All right? Um, a theme like this requires a lot of content. Some don't. All right, there's a great one on press 75 that doesn't require a whole lot of contents. A great portfolio theme. It's called, um folio elements. I be...

lieve it's called if I can find it. There it is. a folio Elements. All right, it's actually free theme so you can download it for free right now. Go to press 75 dot com, and you can download this from their side. And so this theme is basically a standard one page portfolio. Check the sedative slides. That's all it does. It's all its meant to do. And you can, you know, hover over to get a description. If you click the plus sign, it goes up in a light box. Pretty slick, right? And so it's easy. It's easy to do. All right, let's download this and actually see how to use it. Alright, some to go back and theme info. I was just not a free one. I thought it waas I apologize. No, not a free one. Oops. Um I don't know why I thought it was Yeah, exactly. Sorry. Maybe it's this one. I think it's very side block. That was free. Yeah. Side block was the free one. I'm sorry, but sidewalk still pretty cool. I mean, side block is it's not as nifty is that I mean, you can still see how you can use it as photos, photo posts and stuff like that it's more log E right, but still not that bad. Okay, so question. So when you pay for a theme, are you buying it forever? Are you buying it until the next version of WordPress comes Outbreaks? It are you. What are you doing? You subscribe to it. It depends on their license. Right. So, like Jason's licenses here, you have to pick a package. So into the essential package where you get access to all of your current and future themes for a period of two months. Do the extended package. We get access to him for six months or you get a lifetime package 400 bucks where you get access to everything. Anything he builds from now to the end of time for 40 bucks. Um, cool part about that one is he donates 20% of that one. A charity, which is kind of nice. Once you have the theme, it's yours. You know, he's not gonna take it away from you. Um, now, will you get updates to it? No. You'll get however many update tea allows you to months of free updates. Six months of free updates and themes, support, lifetime updates, and themes, support. But will new versions of WordPress break it? In some cases, Yes. In some cases, it just depends. You know, I've upgraded from one version more personal and not broken. A theme I've upgraded and completely broken a theme. It just depends. Um, when you upgrade wordpress, my suggestion would be this. Before you ever upgraded WordPress set yourself up a dummy site either on a live environment or local environment. Okay, Have all of your themes that you use everywhere on the web have those all installed that one thing WordPress. And then when you update toward press, update the local version first test each and everyone make sure they don't break that way. You can go to your live sites and then update, uh, after the fact. That's why. So it looked like he had a price for the theme. But then you showed us a page where you could buy access to a bunch of themes. Right. So it's like $75 for one thing, but it was $100 for everyone. Everything you get downright in a month or so. Yeah, you can. You can buy individual ones. You know, you can buy this one theme for 75 bucks, or you can get the package deal where you get all of his themes for two months. For 100 bucks, chances are the themes. We're gonna be good, you know? Well, past the two month mark. All right? I've been running, you know, certain things for years, and they haven't broken. I've been running his video elements theme on my on my podcast site for almost two years, so Okay, anyway, just just read the license. Yeah, absolutely. Orman Clark's themes. It's just a one off. You pay 35 $40 you get the theme and its lifetime. All right, let's let's do some stuff of something's going to go to themes. Our meet the appearance tab, and we're gonna go into install themes. I'll go into uploads. I've got some already uploaded are already downloaded to my hard drive here. And so the 1st 1 we're gonna use is the folio elements that we talked about earlier, right? And what I actually need to do because this has already been unzipped. I need to go zip it back up. So it's going here. Wordpress Onley. Understand? Zip files where presidents not understand folders. Okay, does not speak folder. So I have to zip that and then I'll take that and open it up and install it. Okay, Once it's installed, you can activate it. Okay? It becomes your your active thing. It tells you, hear that you have an options panel so I can configure my options panels. Let's say I want to be dark or light. He gives you two versions, so it could be water black, whatever one you want. All right. In this case, Mr with a dark custom logo, you can do an image for this. Okay. Most themes offer you a plain text logo if you want to use a plain text logo. I don't have a logo to put here, so I'm not gonna worry about that for a round. Okay? You can also do a custom fabric on if you know what a fab economies see, these little icons that go across my bookmark bar. That's the fabric on whatever appears next to you when people bookmark you. Alright, Chances are you're gonna want that to be a square image. pixels by 16 pixels and P and G's worked pretty well for that. So if you want to use a dot PNG file that be preferable. It tells you right here. Uploaded by 16 pixel. Okay, header options. Slight tagline. Okay, years, my awesome portfolio. You would be a little bit more business, even this All right, categories, menu text. Okay, is it explains out to the right what you do into the text you wish to use for your category menus. All right. By default portfolio will be used. If you want to change that to photos or photography. Whatever you want to change it to. That's fine. If you have a Twitter user name you wanna put in there at Justin Seeley? Shameless plug. Facebook integration. If you want to add in your Facebook page, you can do that too. Yes, I do. Sadly have a Facebook fan page. I'm a big fan of Google plus over Facebook. All right. Every time you change something in here, you'll save it. Options updated. Cool. Ready to go Info box. All right. Enter the title for your info box. These air little info boxes, It'll tell you here. Do you want to enable the header info boxes? It does not use standard WordPress pages, but you can configure up to three info boxes as shown in the Folio limits. Demo. Basically, this theme does not use pages at all. It's a one page theme. You can put information like about me, and then fill that in with text. So let's do some bacon. Ipsum text. Give me bacon. All right, so just take this. Copy it over. All right? Box two. Um, my story and box three, uh, I like photos. And you could This could be whatever you want. Like my services, whatever you want. So yeah, exactly. Footer options. Okay. So I can come in here and I can type out Ah, copyright or whatever you wanna put here. It accepts HTML if you know how to type html. Let's find if you have Google Analytics, you can copy and paste the Google Analytics code in here. Most themes support that Google analytics code. Pretty cool if I go out right now. And I look at this site, okay? I notice one thing. My thumbnails don't look right, do they? That is because the last theme that I was using the thumbnails that were built into the theme are not the same aspect ratio. Is these thumbnails here nor there the same size. So it is attempting because wordpress upload the photo and then crops and in several different versions to fit your themes specific thumbnail needs. So great way to get around that cause. Otherwise, you have to go in here and delete these and re upload to get it to work. Check this out. There's a great plug in. And this is one of your essential plug ins that you would need, especially for going to switching themes. Okay, but add new regenerate thumbnails. Should be the 1st 1 Return version 2.2 install. Okay, activity. All right, So remember, this is what it looks like now. Okay, let's go back to plug in. Section down here and maybe, and the tools region thumbnails regenerate him. All right, now it's gonna go through regenerate. A moment may take a little bit of time, depending on how big your photos are. How many photos you have in this case? It only has five to do. So it's not that many. Once it finishes during all of these, it will tell you whether or not. It was successful. All done. Okay, Cool. Go back and refresh. Hello. Full sized thumbnails. It's pretty awesome. So again, that's called regenerate Thumbnails. Yes. Do you know how that works? Does it is WordPress hanging on to your original ones that you upgrade bloated and it's The original one is in the WP content uploads folder and then basically, it goes through. It's kind of, you know, ph PP software that uploads that changes the size change to mention crops it down all that Costa. So it's not just reshaping, though. Yeah, you just reshaping the original, essentially. I mean, they are actual images. If I go in to the code editor here and look in my, um, be content, why is my uploads fold or not? You reload, They're going up loads 2011. Uh, today you can see here is all the different size 1 53 102 103 100 through all these different ones. And you can click on that. You can actually see them in code A. You can see all the different ones and the ones without numbers behind where the original ones you uploaded present. There's the gigantic one right here. Theoretically, it's a big one. Boom. So there's a full size image. Okay. All right. So this one here, you know, I don't know what that is. Nothing there gets because they don't have enough post to fill this up. So I tell you what. Let's go do that pursed. All post. All right. Hello. Created by audience Does not have anything there, right? Let's edit them. Featured image. It's got a gallery. Show it. And let's use this as a featured image and it's updated when I go back. Refresh. There it is. And so then I can page through here, hovering over these, you know, should give me a little when it's in the center. That's when it gets the little thing, gives you the preview of it, right? The problem with this is, you know, there is no single post page in this template. The images got broken earlier. So, unfortunately, the full size image for this one's kind of hosed, but in this case, you know the same way. But if I upload a new image of work here in these, you know, these are the information boxes that we talked about earlier. My story about me, so I just kind of, you know, it's an interesting way of displaying stuff, right? It's not Not Yeah, those are essentially your pages. Absolutely. Twitter and Facebook links. All right, let's do go with another thing. Ah, James. So you saw how easy it was for me to set that up, right? My site looks like this right now, which is not bad. It's pretty cool. I can go in and I can install anything, and we're gonna use that one. It's already zipped. So that's good. Okay, Oops. Choose file. And this one's called Garnish. It is from premium pixels dot com. Cost you about 30 40 bucks to buy it, but I mean 30 to 40 bucks for a fully functioning website. Are you kidding me? Like people? There's a lot of people that gripe about the price of WordPress themes. Would you rather do Pay five grand for somebody to build your side? Pay $35 for a theme. $35 for a theme. Right are $100 a year for a subscription, right? Absolutely. You know, So let's activate them. Alright, it's got a different look tells me here It's got an options panel. Great love options panels. All right. Now, earlier, I was talking to someone on break about a theme that required basically here. Let's refresh This is what my home page will look like now. Well, for one thing, it's kind of ugly. It does not look like what the Here's what the garnish home page looks like on the premium pixel site. Okay, let's find it over here somewhere. There it is. It looks nice and clean with little squares everywhere. Right? So how in the world do I get my page to show the little squares? Well, it's in the theme documentation, but I'm gonna walk you through how to do it. And most of Foreman's themes do this. Okay. All right. So I'm gonna go into first, not the theme options, but the settings of my WordPress installation. I'm gonna go into the reading section. Okay. Remember, front page displays. What, over this? Well, I've gotta have some content to put in here, because basically what I want to do is I want to put that grid of thumbnails. That portfolio. I want to put that on a page and have that page display as the front page of my psych, because right now it's just displaying the posts on the front page and these air ugly, ugly. So it's going here. I'll create a couple of pages, add new right, and these could be blank pages completely blanked. You don't put anything in here. Okay? This 1st 1 I'm gonna call home the template is gonna be the home template. Remember, some themes have templates. Some don't. This one does. Home template published. Okay, add new page blawg template we're gonna do in archives. Template published. All right. No. Go back in here to refresh this page. Just so it has the options, I'll say OK on the front. I want a static page, please. From page. I wanted to be home. Post page. I wanted to be block now. Save now when I go and visit my site, check this out. No more posts on the front page, right? No more post on the front page. If I want to start setting up portfolios, he's got a custom post type here called portfolios. Custom post types are a way to extend WordPress to make them show different things in different ways. custom postdocs were introduced in WordPress three point. Oh, so basically, I can create a different type of post those other posts become block posts. Okay, These are actual portfolio pieces. So let's add new. And let's call this Nashville. Okay. Set my featured image. I'm gonna upload the new one, because remember, I broke those other ones, so let's find Nashville. There it is open and uploaded in crunching. I love that crunchy. It's like it's going to the gym. Use us. Featured image. Yeah. So there's featured image also here, check this out. It's got options down here for images. So the image thumbnail to 20 by 1 60 You can also add in these images. So what you would have to do for this is you would actually have to have images that match this width and height, right? I don't necessarily have those here. I can, however, go in here and edit the image so I can go in here to gallery show at an image inside of the image. I can change the aspect ratio changes, scaling or whatever. So I'm gonna talk about that more in depth tomorrow. But I just want to show you how it works. Okay, so let's say here that I want to browse for this media library. Show me this and I'll use a medium image for this. I know it's not the right size, but it maybe work, Okay, Just to show you proof of concept here, if it's a video, he has video in bed settings. So you could just embedded the YouTube video there instead. All right, don't add a description. You can bacon text all about the bacon skill types. This case, it's gonna be street photography. It's the street. So that's a skill type for this, and I'll publish it. If I go to the homepage. There's my new check out when I hover over it. Okay, If I click on it, it takes me to the page, all right. And theoretically should show me the big image. But I didn't specify the big image here. The bottom member image one and all that stuff that you would actually have to go in and specify that. But that's no week deal. All right, let's just go ahead and do one. That's special eye brows, media library show and let's do a large one and insert into post notice. This has insert into post us and inserting it into a post that's just inserting it there. Right update now refresh, Click. There's the big image. There's a description. Okay, I don't necessarily like the way this is laid out. I would probably actually go in and tweak this a little bit more. But, you know, Yeah, I would tweak two CSS. I would actually put the description to the right of the image, you know? I mean, for small. Yeah, personal preference? Absolutely. And so here's another thing that's cool about this theme. You know, if you don't want to have them click through to another page from here, check this out. You go into the theme options inside. Styling options are no. Excuse me. Home page option enable the Magic Door Who? The magic door Right now. Check this out. When I go back to the homepage, watch this slide down. I'm nifty is that if you have other you know, images or whatever, you can cycle through those here and so that's really awesome. Also, if you have different categories like, for instance, you have Street, let's add one more. Just go and get some contactar. It's do one more portfolio piece. No, it's all CSS and job script. Yeah, I'll CSS. So let's do our biggest. Okay? This case, let's do add new Let's do our kids picture. I think I spell that right. If I didn't Sumi. All right, let's browse, select the file and let's find my little Vegas man. There he is. And so it's gonna go through and get him going crunching in jeopardy tunes. All right, uh, let's do this one. Insert that into the post. Oh, theoretically, really, it's not. Give me the option inserted into the pope's. Strange. All right, but it's just close out. See? Image them now. Gallery show Still that. Give me the option. That's weird. Yeah. Okay. No biggie. I'll tell you. Here's a shortcut. It's go here. Image, media library show. I know what a Let me insert it here, so I'm gonna do the medium. It won't let me insert it there. You see, something's wrong with that file again. Has to be okay. Well, regardless, it doesn't matter. Let's just, uh, go here. We find that little good, you it's going to the same image, but that's no big deal. Okay, so let's go here. Bam! Yeah, Let's go here and browse the library. Civil. Let me put one in here. Show No, no. Let me do it there either. Well, let's just do this. A copy. And there you go. All right? No, this one's architecture, it's all good. Published. Let's go back out. All right. They're both the same thumb that lies. Right? But there's Vegas. Check this out. If I do, architecture fades it out. Street. So if you have multiple ones out there would fade out the ones that don't go with that category. Rest of the ones that do. And so that's really an awesome little feature. If you hit all fades and back in. So there's Vegas Magic Door. Of course, the pictures freaking huge, but no big deal there. Right? The problem event is I can't get to the close button, so I actually have to just refresh to get rid of that. You get the idea. All right. Now, I said earlier was gonna talk to you a little bit about how to edit a theme. We're gonna get into some CSS stuff later on, but not today, unfortunately, but Let's say, for instance, on this post that I think this is too far away from this or vice person. So I can on a on a chrome browser Google Chrome innocent Firefox to write you can right Click something and inspect the element And so I can see here in different areas of the work. Look at this. Move this up. See, how was I mouse over stuff. It highlights different areas of my sight. So, like, here, Look, I can see Okay, there's the slider and it's got that yellow border. You saw that right there. That yellow border indicates how much space is over there to the right. So you notice here it's got 20 pixels. It tells me right here, it's got 20 pixels of margin right there. It also tells me that this is on the CSS dot or the style that CSS file online 10. 42. If I happen to click that, it will show me where that is in the C s s. Okay, then if I go back in here in your appearance section, you have an editor. The one thing I don't like is they don't show me line numbers in here. Okay. Coda shows me line numbers, but check out what I can do. Remember this was what? Pound signs. Slider, right. Slider. I just did command F control left on the PC and found it. There's the margin. If I want that to be five pixels, I change it to five instead of 20. Update the file. Okay. Remember what this looks like here gonna refresh, and Oh, this was probably got margin on it to a bit. Let's see, But this is what you do. I mean, this is how you break stuff down. Oh, that's flush, right? That's why. Okay, but the slight See how smaller the yellow line is now. Okay, This the reason why it didn't get closer the other things? Because this is flush, right? If you notice here, it tells me right here, it's floating. Right. Okay. So that's why that's all the way over there. I could change the width of that, and that would move it closer to that. So right now it's 2 20 Watch this, find movement and change it to 41. Chapel happens, and you could do this live in your browser, by the way. See How much closer again? If I change that to 50 see how much closer again? If I change that to 200 watch how far away it gets. See how far away you can actually use these little inspect element tricks to go in and make tweaks here before you ever even go into the actual code of your website? The best part is there's no penalty. Because if you refresh, everything goes back to normal. Yes. Temporary. Absolutely temporary, right? What if tool and then you could take that? You can actually copy that. Go right into your CSS document and paste it and you're good to go. Okay, so I think we're We're nearing the wrap up of today. So we're gonna get mawr into customization than stuff tomorrow. But hopefully by now you have a better understanding of the general ins and outs of WordPress. How to use posts, pages, themes and plug ins and all that good stuff. You know, tomorrow we're gonna go. Ah, lot more in depth with a lot of stuff and then Segway into some security stuff on day three. Some stuff a lot of people been talking about. So tomorrow I'm actually gonna talk about optimizing photo photography for the Web and a bunch of other great stuff like that, too.