Lessons

Lesson Info

What is WordPress?

How is everybody doing good? You know I'm pretty good I'm actually doing really well I I I do a lot of different stuff and today we're going to go through like jim said and this could just create a website using wordpress that's going to be responsive and that's kind of the key the big deal of this whole thing aside from you know, working with wordpress how many of you have created sites before any kind of side okay interview code anybody do any html css eso a little that I can't say I really can't admit it ok every every time I do I teach a lot of people cause I work with adobe and I go speak it conferences and things like that and the last people I say you know how many of you have taken a class you know, in html you know how many of you remember like three things you know, that kind of thing so that's kind of usually where we're at right? Um as far as creating a website these days there's so many options there's a lot of just a lot of ways we can do it and we're going to go in like ...

I said and use wordpress and create this site now I'm just going to take a quick kind of a tour kind of run through a little bit just kind show you some of the features some of the things one thing we're going to really kind of hammer on is we're going to talk about what it called themes and picking the right theme because the theme is huge as faras wordpress, it basically sets the stage for functionality. For what it's gonna look like, uh, just just a lot, okay? And we can take it a lot further. We can actually dig in if we really want to. If you guys want to dig into code, you can sky's the limit with wordpress. That's the great thing. Uh, but we can also keep it at the same level if we want to do that as well. Eso this with this site, we do have a bunch of pages and that's. One thing I want to focus on because with wordpress, a lot of people like how many of you guys, your word press and maybe think blawg that's because that's actually where it started, it's started there's a blogging platform and a way for you to create a blogger and just kind of, you know, get out there and show your info like I actually have a link here called blawg. Let me let me click on that one, I've got a block and you'll see that this is a lot of times what we're used to seeing with a blogger, you just see the block posts and you know, somebody spits out what they want to say and you know, there's a new one every day or whatever however they do it right, but with wordpress we can create a site and actual website and maybe have some blogging and if we want to because these days word prices actually used this what's called a content management system if you will so it's kind of like it if we don't the sterett code you know the open like an h e mail file and start hacking away okay, that kind of thing you could actually open what's called an admin and we'll look at that of course all day today and you can basically you could do it through an administrator ok, which is really it's actually really helpful, very visual and you know, it kind of protects you from the code a little bit if you will but we can we can go in and create pages we can create blogging, etcetera and the things that were I guess you could say we're used to ok as far as creating a site let me take just a quick step back I want to tell you who I am and I got to reload this page because you gotta watch take a look there's some gratuitous animation here there we go yes that's me yeah you know um and actually you guys I didn't plan on having this happen but it's actually a good learning experience you're going to see to see the tweet box up there I was completely blank makes me look I don't I don't do anything three wise that broke because I updated wordpress this is actually something that is going to happen I was going to fix it because I was all embarrassed and I updated wordpress but I've actually left that for a couple classes so yes I did it on purpose okay uh anyway this is my site I I do a lot just to give you a little background I actually I am a wordpress developer that's kind of my thing I started in print I'm not going to say how long ago I started a long time ago in print and I started eddie bauer doing catalog work uh I actually did I started in design I was there for two weeks doing design and catalogues and I was told not so subtly that I sucked so I should switch to doing something else and aside from fire me they decided you know let's give this guy a chance why don't you try production so I started doing catalog production working in cork express and guys use any programs like that um and I started doing a little bit of hand coating on the side just kind of I was like okay, I po there's always people getting rich around me so one guy had an I po and he said if you start learning to make melon css what we can do is well, I'll get you in okay and then it will skyrocket will make a million right here I am today so I didn't quite make it but same time I learned a lot I hated it when I started it because it was all hand code and I really didn't get it and there's no resource there was nowhere to learn you had to kind of figure it all out these days we have something like wordpress and this is this site was actually built on wordpress and if I you know, kind of scroll down a little bit you'll see that you really honestly thinking about word pressure you can't tell because it's not a block you know what I mean? It's a it's a pure website that has a lot of the functionality were used to today and you know, some extra things etcetera and I even kind of proud of this. Yes, you see my three d books which is kind of cool but yeah it's kind of whatever it's gratuitous animation once again, you know, um I actually also I work with will be quite a bit and I'll stop in a second here my own horn I've written the whole state of classroom the book for the past like five versions I wrote the music classroom in a book as well as a book on dps, so I do a lot of different stuff a lot of things which is really cool and keeps it interesting so okay, so what I want to do is I want to take you back to the site hero quick and just talk about the response of part of this for a second because this is a big deal today, okay? I've got the site open on one of my devices here and I know it's getting hard for us to see this, okay uh but you're going to see that I've got that this site and one of the things about sites today is that forever and a day we used to create websites and we used to complain to no end and it's just ridiculous, but we've to create websites that we had tto fit into a browser that was on the desktop and that was it right? And then suddenly we had like the iphone come out and all this exploded or imploded however you want to look at it and suddenly had to concern ourselves with all of these devices, right? So to get a site to have a good experience or the user to have a good experience on the browser on a a tablet I see something have ipads, different tablets like that or even a device like a you know, a phone, you've got to figure out how that's actually going to work and the different methods of methodologies for, you know, doing things like navigation, so definitely different that we have on the desktop version, etcetera, but it's it's a better experience for mobile simply because it's fit to the device taylor to it, it loads faster there's all these things we need to think about. Okay now, responsive design is a big deal and it's something that we're just going to kind of focus on when I get back to the site here. But the great thing about wordpress that I love is that when I tell somebody that they need to create a website from scratch, okay without using something like wordpress and they need to make it responsive. There's a lot of stuff you gotta do to get it to work with with wordpress waken simply pick the right theme, which is awesome is kind of like a template it's kind of a dirty word for designers, but it's a good thing and that's what we're gonna we're gonna look at today too, so let's, do this let's start out by talking about wordpress in general, this was actually kind of kind of ah I guess you could say confusing for me when I first started because there's actually a wordpress dot com thing has ever been there okay there's a wordpress dot com and there's a wordpress dot or ge and I was always like wait a minute what what's the difference does anyone do you guys know the difference and one is that goes through your website company or your web hosting okay okay right yeah. So the idea here is that with wordpress dot com you can create a website for free if you want to let you go in and do this kind of thing if you want to add certain bells and whistles or extra features to it you can actually start to pay for it. Okay? And this is something that directly through this you know this site if you will and you kind of set it up this way and you're using ah let's go portal to go through here. Okay, now if you decide that you want to build a wordpress site, for instance and you want to host it yourself you wanted meaning this you're not gonna have a machine next to you and say everyone's coming to that machine you want to use like bloo host or go daddy or one on one or you know one of these types of hosts out there there's a million wordpress dot or ge is actually the centralized location toe like download wordpress this's crazy. But if you look, it says download wordpress I always when I first started doing this, I was, like, download wordpress. I was like, um, I downloading the company. What am I getting with this word? Presses is a folder full of files, and we're actually going to take a look at it if I show you, this is pretty it's actually. Pretty cool to take a look. When I download wordpress and you guys, we're not gonna have to do this, okay? I'm just trying to show you what it is. All right? You're going to see it zipped, file download. And if I unzip that if I go toe wordpress here and take a look, it's a bunch of stuff inside, this is this is it. This is your site. This is everything and entailed and all of our images there's stuff that we're going to use with wordpress. Usually all of our themes like our templates, if you will, video content, things like that can live in this folder and this folder is going to be up on go daddy or blue host or wherever we're hosting this. Okay. So so this is this is words press were presses world this is what your sight's going toby and what's kind of cool is when somebody opens up your sight and all these files are going to be up on your server were not don't worry, we're not coding all this stuff I'm just showing you index is usually the name of the first page this is what people are going to go to that's going to come here and just kind of more gets magic and get into your your template and show your site it's pretty cool actually so that's that's essentially what? We're presses where presses a folder now they're a couple other pieces or things that were press requires okay and I want to kind of talk about some of this stuff and we'll also talk along the way here something else that wordpress requires is where press requires ah hosting environment somewhere to host it okay, wordpress also requires a database you guys are familiar with what a databases I know you've heard the term I know that but like what is a database? Is anyone want to throw that out there? Like, well, it's just a documentation of all the data that you want to store him and whatever names contact information or yeah, let's say that you know all the information content, right? Okay and you get when you first work with wordpress at least for me anyway I started doing this and it was just magic it was like black box you know what I mean? You just didn't you just did it you didn't understand it but if you really actually understand just generically how it works it opens up new worlds I mean, it really truly does it's kind of cool somebody go over to the white board and just show you quickly when we talk about wordpress what were typically saying here is we're saying okay we have let's pretend that this is ah machine computer this is like old school computer I know. Okay, this is your host okay, so this is like you know one and one or go daddy or blue host or six million other hosts go debbie whatever go, daddy. Okay, so that's your host okay, now what's gonna happen is we're actually going to put the word press right they're going to do this ourselves or a lot of these host is the best thing they have a button click and it takes that folder puts it on the server and just set it up for you it's awesome. So one klick install so there's gonna be a little folder forward press and it's going to be that folder I was just showing you guys okay now all those files in there sitting there ready to go okay all your stuff is going to be in there essentially but the information that you put in there things like any content, any pictures any of that stuff are actually gonna live usually on the same machine sometimes somewhere else I'll just put it over here though they're going to live in what's called a database okay the database itself I because I work with databases I'm not a database expert I can't like hand code one from scratch and that's the thing you don't need to do but a database to me when I first started I was kind of like how many of you guys have worked in excel okay anyway um I needed so I got to take a class I'm not very good at it that's why I don't like it right now but exelon is you know, very important very vital but let's suppose that excel and this is kind of ah simplified oversimplified version of this but like an xl I can create like why do we use excel let me ask you that why not just leave okay like to get like the combs and rose make adding with that pledges race there's a lot of uses for numbers yeah there you go okay calculations and all that kind of stuff that I don't like that there uh we're going to see like if we had a table and we had some information I had like okay here's a page um here's some images, et cetera and then I could say page one two three and have the data stored in here so that I could look at it later you know, kind of access it right this is how wordpress works in a simplified way okay, the database actually in what are called database tables like we see it so stores information and just puts all the stuff you guys type in okay sticks it in there and what happens is these two play together okay, so when you somebody goes to look at your site they actually taking in that little folder they're basically all little magical files in there which some of them I don't understand what they do they just work goes out, grabs information, pulls it back in and what it does this is the coolest thing in the world you actually have when you guys look at it in the browser okay, let me switch back over the browser here when you look at the site in the browser it's it's like it's the page right it's like the final thing when we work on this and we're press we're not going to see this like final version because the wayward presses composed is here's here's the browser okay here's the final site here's all my content pictures whatever wordpress actually works by having little files like let's say the header a little file called footer and all these little pieces of files that it it has set up in files and what it does is when you guys go to look at this in a browser goes in the folder grabs the data grabs all the pieces, assembles it together and that's what you guys get I mean seriously you guys shot works when I first isn't seriously which I'm shocked it works too it's it's like it's just it's amazing it's black box so one of the things that if I refresh here like she just said if I refresh I mean that took you know how long I mean that's going over the internet think about that every time I think about this and there's other stuff involved other things going on it's kind of like gold's magic and only so the more elements that you put on each page animation this that and the other it takes more time to get it, which is why sometimes pay websites not mine but other other websites take longer to load yes ok look really hello you've got you've got maybe, you know, join enormous pictures hanging out in your banner up here and maybe they're really big aside beautiful looking, you know, compress him a lot you know enough, but yeah, each picture is going to get stored in the database the information for it anyway and yeah, once it gets it's got a kabulis together it's gonna take a little more time. So that is also something we have to consider right when we build sites? Yeah, I have a really basic questions about why use wordpress versus all the other templates that are available. Why that building websites? Phenomenal question when you ok? If you go in and you decide you want to build a sight a lot of times what I used to do is just crack open and editor, okay? I actually using that of their enemy not telling you to do this. You're probably not gonna even ever touch this, but you can use, like dreamweaver. You know how many you better have been dreaming open dream weaver and, like that's a ce faras you got, you know, wade about an hour and got nowhere the dream? Yeah. Okay. Well, this is good because supposing somebody came to you and said, ok, I need a page, a web page and you just think, okay, one web page talk. I can do that, right? So I'm gonna have to go into an editor of some kind, pick a template or type it all in right kind of do my thing and I'm proud of myself because I just made a web page they come back to you and say well we need this functionality is well we need to be able to isaac client I want to be able to edit the footer I want to be able change copyright info at a telephone number stuff like that you know how scary it is to let a client at it your native fight like edit the files themselves that's insane okay wordpress has what's called an admin and we're going to look at this all day today okay if you take a look this is the word press admin you give them this earl they type it in their browser and usually given like a password kind of thing and they can go in and they could do things like let's you know, let's pick well okay, you can bet we're going to talk about that because that is crazy if you don't but so they can go in and do things like let's add content like I have a page here for instance and I want to go in and edit it or make a new one hears all my stuff I can start to type and change pictures and do things like that where is if we wanted to do that in just a regular old files would be a lot harder ok? The other thing I was kind of trying to get at was if somebody came to you let me go back to the other somebody came to you in this you're cobbling together the html you know, thinking you're all awesome and somebody said you know what I need a slideshow we know this lodge owner site or we need access to social media icons we need to put them in there and they need teo re link to here and do this and that or just something you have no idea how to do a shopping cart. Okay wordpress has what are called plug ins these are your life saver. Okay, these things are awesome plug ins extend wordpress wordpress by itself is really cool because you could make a pages you could have content etcetera but as soon as you want to take it to that next level and had a form and you sell something to etcetera if I could just quickly go take a look at plug ins we can just grab what's called a plug and a lot of them are free summer paid you could just click and say install it'll install it it'll give you a cool little panel of settings and you're on your way I mean it's you don't coat it because it's all done there are tons of plugging developers out there that do this stuff for a living okay, so those are some of the reasons why we might use a wordpress install it it's easy quick install etcetera as well so is that kind of makes sense? Okay, all right, let me I'm gonna log out here just because we're gonna use that eventually. Okay, so it's a pse faras what? How wordpress works. It just kind of wanted to break that down. I do have a visual here. I just want to show you a real quick that I created a while back. Weps, let me zoom out a little bit here. Can you guys see that? Okay, okay. Remember how I said before that if I go back to the board here when you when the page gets, like, put together like a puzzle kind of thing there's like the header piece, the footer, peace, etcetera, these are the main pieces of a web page and wordpress, this is how most of it all works, okay? You're actually going to see there's like a a lot of the files and wordpress, I just figure I get this out of the way our php we don't care because we don't have to deal with them. Okay? Just behind the scenes. A lot of times we have a head or a lot of times we have, like, sidebars. Okay, we've got footer, those of the main components of war press site almost every time you guys get a template or what's called a theme they're gonna have all this stuff already built you just decide you know what kind of what I like you know what we need and then we have something called the content or the loop they call it and we'll talk a little bit about that it's just let's go grab your page stuff and stick it in that's what? This? So so just quickly on how it's built on kind of how it works so what I want to do you just gotta question on that specifically, it almost looks like the right side is what you see on the computer and the left side is the order that you see it on the cell phone. Is that because I know I noticed that on if I have like columns I have to change the columns around because I noticed when it's on the cell phone I don't want that information coming first I want this information coming first that's actually is part as faras responsive that's completely true this honestly, this was a happy accident, this's just here's a bunch of things that just come together is like a jigsaw and there it is. But honestly, when you look at us a lot of sites these days we don't even have to worry about this has done for us in the theme it looks like that, but then all those pieces just kind of come into this and mobile. Theyjust reorganize themselves when you make a smaller, have a smaller device, so it just it's awesome power works. It really is.