IntroductionWelcome| 00:04 | Hello, and welcome to WordPress: Creating
and Editing Custom Themes. I'm Chris Coyier.
| | 00:10 | In this course, we're going to
step through the entire process of
| | 00:13 | conceptualizing, designing, and coding
a complete WordPress theme according to
| | 00:18 | the specific needs of a client.
| | 00:20 | We're going to start with a blank slate
and go through the entire workflow,
| | 00:25 | beginning with creating a design in Photoshop.
| | 00:28 | Next, we'll create a webpage template
based on that design using HTML and CSS.
| | 00:35 | Then we'll move on to WordPress.
| | 00:37 | We'll go in-depth into the process
of creating a new theme from scratch,
| | 00:42 | focusing on the details of how themes work.
| | 00:45 | Finally, we'll finish up by
looking at how to extend the theme using
| | 00:49 | JavaScript and plug-ins.
| | 00:51 | You'll get the most out of this course, if you
already have a basic knowledge of HTML and CSS.
| | 00:57 | I have been using WordPress as my
go-to tool for creating websites for years.
| | 01:04 | Building sites from scratch is a very
rewarding experience, and it's even better
| | 01:08 | when you can create a custom design
tailor made for the needs of a client.
| | 01:12 | I'm very much looking forward to this journey.
| | 01:15 | Let's get started with WordPress:
Creating and Editing Custom Themes.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library or if
| | 00:05 | you're watching this tutorial on DVD-ROM,
you have access to the exercise files
| | 00:09 | used throughout this site.
| | 00:11 | I have downloaded these exercise files.
| | 00:13 | I have them on my Desktop,
and I have the folder open here.
| | 00:17 | There are a few things I want to
go over with these exercise files.
| | 00:21 | Now in Chapter 1, movie 5 here, there is
a Photoshop file Widget Corp Homepage.psd.
| | 00:28 | If I open up that, I have the finished
Photoshop file that we ended up with in this course.
| | 00:36 | You can do whatever you want with this.
| | 00:37 | If you want to use this as a starter
template for your own project or tweak
| | 00:41 | things around to your visual liking.
Just feel free to do whatever you'd like with that.
| | 00:46 | Now some of the aspects of that
Photoshop file, the logo and some of the product
| | 00:51 | images, they've come from iStockphoto.
| | 00:52 | So we want to thank them for this
image, which is our logo, and some
| | 00:56 | product images, and this.
| | 01:01 | So in Chapter 3, we start out
creating the WordPress theme.
| | 01:06 | This folder here called BLANK-Theme,
| | 01:09 | in chapter 03_04, is literally that.
| | 01:12 | It's a blank stripped-down,
bare-bones WordPress theme.
| | 01:17 | So this isn't specific to this course.
| | 01:20 | We do start with it, but it will be
a great starting point for any theme.
| | 01:24 | Then from 03_05 onwards, we
provide that same theme, only it's now
| | 01:29 | called WidgetCorpTheme-1.
| | 01:32 | These files in here are the starting
point for each of these movies, but they
| | 01:37 | are a complete WordPress theme as well.
| | 01:40 | So if you're jumping in at one of
these movies, you'll need to activate this
| | 01:44 | theme as it's provided.
| | 01:46 | So how you do that is here
in MAMP, in our htdocs folder --
| | 01:51 | Now this htdocs folder is the root
of our local WordPress installation.
| | 01:58 | In PC, it would be the www folder.
| | 02:01 | Let me go ahead and drag that into
the themes folder, which is within the
| | 02:06 | wp-content folder of our root here.
| | 02:10 | Then we can go into WordPress, into the admin
area, and activate that theme. So let me do that.
| | 02:19 | localhost is where we're working.
| | 02:21 | Within that is this wp-admin folder.
| | 02:26 | Under Appearance now, that theme is
going to be available for us to activate.
| | 02:31 | Now if you activate this right now,
it might look a little half complete.
| | 02:35 | Of course, that's because
these files are not complete.
| | 02:38 | These are just starter files
for where we start in that movie.
| | 02:42 | If you want to jump all the way
to the end and have the complete
| | 02:46 | WordPress theme, come here to the
Chapter 5 folder of the exercise files,
| | 02:51 | in the Final folder.
| | 02:53 | That'll be the folder for
the completed WordPress theme.
| | 02:56 | So, let me drag that over. Replace that.
| | 03:01 | Now if I reload over here, that
theme is still going to be available.
| | 03:04 | We haven't activated it yet, because
if we activate it now it's not going
| | 03:08 | to look quite right.
| | 03:10 | The theme is one part of this finished product.
| | 03:13 | The other part is all the database stuff,
all of the pages that we've published
| | 03:18 | and all the blog posts that we've published.
| | 03:20 | You're not going to have that in your
own local install of WordPress just yet.
| | 03:25 | You can follow along with all the
movies and publish it as we publish it, or
| | 03:29 | to jump ahead, there is this file here
that you can import that's going to give
| | 03:33 | you all that stuff.
| | 03:34 | So, that's that widgetcorp.xml file.
| | 03:37 | I'm going to copy that on to our desktop.
| | 03:41 | Now if you want to import it, go
under Tools, to the Import option here.
| | 03:45 | The last link is for the WordPress.
| | 03:47 | That's the one you want.
| | 03:49 | You can Choose File, grab that XML
file, and hit Upload file and import.
| | 03:55 | We're going to choose our self a one user here.
| | 03:59 | Check this checkbox.
| | 04:00 | We want to make sure we get absolutely
everything that's in this XML file. Hit Submit.
| | 04:04 | It's going to go through its importing process.
| | 04:07 | If we go under Pages, you'll see all
these pages are going to pop-in here.
| | 04:11 | You didn't have to hand-publish these.
| | 04:13 | It just came with that import that we just did.
| | 04:16 | Another important aspect to make sure
this theme is kind of going to look right
| | 04:21 | is the fact that this
product-images folder is here.
| | 04:24 | That's provided in the
Exercise Files in this Final folder.
| | 04:28 | Make sure that's present in the root
directory of locally working with WordPress.
| | 04:34 | Now under Appearance, I'm going to
Activate the new theme and go click our
| | 04:41 | title here and take a look.
| | 04:43 | This is where we end up.
| | 04:44 | This is our final product of this whole course.
| | 04:47 | So there are a few things
that look little different.
| | 04:49 | You can adjust this in the settings,
where it says Just Another WordPress Site.
| | 04:54 | There is an option to change that.
| | 04:55 | But otherwise, this is our final looking theme.
| | 04:58 | If you are a monthly subscriber or
annual subscriber to lynda.com, you don't
| | 05:03 | have access to the Exercise Files,
but you can follow along from scratch
| | 05:06 | with your own assets.
| | 05:08 | It's also important to note here that there
are some free assets that come with this theme.
| | 05:13 | You can download those as
exercise files from the course page.
| | 05:17 | Those being the Photoshop file
here and the Blank starter theme.
| | 05:22 | So let's get started.
| | Collapse this transcript |
|
|
1. From Spec to PhotoshopReviewing the client spec and deciding on WordPress| 00:00 | The website we're going to be
building in this course is for an imaginary
| | 00:04 | manufacturing company called Widget Corp.
| | 00:07 | They've come to us to ask for
a redesign of their website.
| | 00:10 | When any client comes to you and asks
for a redesign it is because they're having
| | 00:14 | problems with their current website.
| | 00:17 | It could be real tangible problems, like
we want to sell more widgets or we want
| | 00:21 | more traffic to our website, or it
could be less tangible, like they're just
| | 00:25 | sick of their current website.
They just think it's ugly.
| | 00:28 | It's our job as designers to uproot a
clear set of goals for this project.
| | 00:33 | So let's look at the goals
we've uncovered for this project.
| | 00:37 | The first goal that we're going to
try and meet is identity. Widget Corp.
| | 00:41 | is a company that makes widgets, so
there shouldn't be any doubt when a user
| | 00:44 | gets to this page that
the page is about widgets.
| | 00:47 | This is a widget making company, and in
fact, they want to be able to showcase
| | 00:51 | some specific widgets, and then
overall just improve the look of the website.
| | 00:56 | Their next goal is just about
information, making it easy for people to find
| | 01:01 | information about the
company and contact the company.
| | 01:04 | Now those are easy things for us to do.
We just want to make sure to not bury
| | 01:07 | those links as we move forward with the design.
| | 01:10 | The next thing they want
is a blog and that's great.
| | 01:13 | It means they want to be involved more
with their website, publish new content,
| | 01:18 | get readers to their site. That's great.
| | 01:20 | That ties directly into our last goal
in that they want to be able to update the
| | 01:24 | website themselves, and when they say
that, it means they want to be able to
| | 01:28 | do it through the web.
| | 01:29 | Of course, they don't want to
learn HTML and all those technologies.
| | 01:33 | So of course, they'll be able to
publish new blog articles, but because they've
| | 01:36 | expressed an interest in this, we're
going to try and make as much of their
| | 01:40 | website updatable by themselves as possible.
| | 01:44 | So with this clear set of goals, we're
going to keep all of those in mind as we
| | 01:48 | move forward with the design.
| | 01:50 | Since we're starting from scratch with
this website, our first big project is
| | 01:54 | going to be designing in Photoshop,
but before we do that we should have some
| | 01:59 | grasp of the technologies we're going
to use on the final website, as it may
| | 02:03 | inform our design decisions.
| | 02:06 | The technologies that we choose should
match the goals that we just covered.
| | 02:11 | First and foremost, we're going to need
to be using a CMS. The vast majority of
| | 02:16 | websites these days use some kind of CMS.
| | 02:19 | Basically it's just a good idea.
| | 02:21 | For us, it's going to allow us to
fulfill that need that our clients had that
| | 02:26 | they want to be able to update the site
themselves, do their blogging, publish
| | 02:30 | new content, edit content is
already their, stuff like that.
| | 02:34 | CMSs also usually have some
built-in technology to be able to
| | 02:39 | be able to extend the functionality of them.
| | 02:41 | So if you need your website to do
some fancy new thing, a CMS usually has
| | 02:47 | someway to kind of get that done.
| | 02:48 | The vast majority of websites these
days are using a CMS of some kind.
| | 02:54 | The most important idea though about a
CMS is about the fact that it abstracts
| | 03:00 | the content away from the layout, and a
good analogy is going to serve us here.
| | 03:05 | Think of CSS. You could have a website.
| | 03:09 | It's got a thousand pages on that website,
all those thousand pages linked to one CSS file.
| | 03:14 | So if the day comes you want to change
the background of your website from brown
| | 03:18 | to black, you go into that CSS file,
you change that one line of CSS, and all
| | 03:24 | thousand of those websites have that
new background color applied to them.
| | 03:28 | It's that level of abstraction
that makes Web design easier.
| | 03:32 | It's the same idea with the CMS.
We have 500 blog post published. We decide we
| | 03:37 | want to make a change in that layout.
| | 03:38 | We want to put the date at the top of the
article instead of the bottom of the article.
| | 03:42 | We can go in and make a change to
that layout and it's going to be updated
| | 03:46 | on all 500 of those blog posts, without
having to go in and edit 500 pages of content.
| | 03:51 | It's that same abstraction idea
that makes using a CMS a good idea.
| | 03:57 | So it should be no surprise to
you folks that we're going to end up
| | 04:00 | choosing WordPress.
| | 04:01 | That's what this course is all about.
| | 04:03 | So WordPress is a CMS and it matches all
those technologies that we just talked about.
| | 04:10 | The biggest thing now, WordPress has
a great interface. The admin area of
| | 04:14 | WordPress just looks nice and it's easy to use
and train other people to use in my experience.
| | 04:20 | Very easy to use buttons.
| | 04:22 | It's very easy to tell a new client
how to go in and publish a new blog post.
| | 04:27 | Speaking of blogging, our clients
wanted blogging. That was one of their needs.
| | 04:31 | WordPress has its origin in blogging.
| | 04:34 | It's great blogging software, but it's
not only blogging software. Old kind of
| | 04:40 | curmudgeons and trolls on the Internet
might give you some slack once in a while
| | 04:44 | telling you, "WordPress, it's not a CMS.
| | 04:47 | It's only a blogging engine." That's not true.
| | 04:50 | WordPress has grown up a lot over the years.
| | 04:52 | It's definitely a full
content management system.
| | 04:55 | We're going to need to be using the CMS
abilities of WordPress to flesh out our
| | 05:00 | widget pages and our store
and all that for this client.
| | 05:03 | So we need a full CMS. WordPress is a full CMS.
| | 05:07 | WordPress is going to serve us well here.
| | 05:09 | WordPress is also extremely easy to
extend with new plug-ins and functionality.
| | 05:14 | There are tens of thousands of plug-ins
for WordPress to extend what it's able to do.
| | 05:20 | We can't ignore our own
needs here though either.
| | 05:23 | WordPress is going to match our client
needs very well, but we just can't ignore
| | 05:27 | ourselves. We're the ones that
are going to be building this site.
| | 05:30 | So what we need is important too.
| | 05:32 | A lot of our own needs match
our client needs and that's fine.
| | 05:36 | Like the user interface, that's important.
| | 05:38 | If we found a CMS, it's a great CMS, it
matched our client needs perfectly, but
| | 05:44 | we didn't like using it,
it would be unpleasant for us.
| | 05:47 | We don't want to work day in and day out
in a tool that we don't like, so that's
| | 05:51 | perfect for us in that way.
| | 05:53 | Here is a big one though.
| | 05:55 | This is personal to me.
| | 05:56 | I already know WordPress well.
| | 05:58 | If you take this course and you build
a WordPress site, you're going to know
| | 06:02 | WordPress pretty well too.
| | 06:03 | Now, next week we're done
with the Widget Corp. site
| | 06:06 | and we have a new
client come through the door.
| | 06:09 | Do we want to go ahead and pick our
completely different content management
| | 06:13 | system and go through the learning
curve of that one? Not necessarily.
| | 06:17 | A lot of these CMSs have the same kind
of things that they're able to do, the
| | 06:22 | same kind of feature set. Joomla!,
| | 06:24 | great software. If we went through that
whole learning curve, maybe there is a
| | 06:28 | new client that walks through the
door, we'd pick Joomla! for it instead.
| | 06:31 | It's just one of those things where
repeating things that you have already
| | 06:35 | learned often isn't necessary.
| | 06:36 | So if we know one technology really
well, we can be instantly productive with it
| | 06:41 | and that will save us a lot of time.
| | 06:42 | So now that we've settled on WordPress
as the software we're going to be
| | 06:46 | building the site with,
let's get started doing it.
| | Collapse this transcript |
| Reviewing assets and resources and creating a mood board| 00:00 | It's time for us to dig into
some real design work in Photoshop.
| | 00:05 | First, let's explore what Widget Corp.
has provided to us as assets for this project.
| | 00:10 | If you have access to the exercise files,
all these assets will be available in
| | 00:14 | this chapter 01_02 folder
here in the Assets folder.
| | 00:17 | So they've given us a logo, they've
given us some product images, and they've
| | 00:21 | given us some text files.
| | 00:23 | Let's go ahead and open up that logo by
dragging it to Photoshop icon in our dock.
| | 00:27 | Now I say they gave this to us,
but of course, Widget Corp.
| | 00:30 | is a fictional client of ours and
really this file came from iStockphoto.
| | 00:34 | So really cool looking logo though, isn't it?
| | 00:38 | One of their needs that we
established earlier was that they wanted their
| | 00:41 | website to really be clear that
they're widget making company,
| | 00:47 | no ambiguity about it.
| | 00:48 | And this widget logo really does that
for us already. If we use this properly in
| | 00:54 | the design, there will be no doubt
about that they're widget making company.
| | 00:58 | So through meeting with them and reading
this text that they gave us and looking
| | 01:03 | at these product images, we've kind of
gotten a feeling from them that kind of a
| | 01:08 | relaxed corporate looking site is
going to be the way to go for them.
| | 01:12 | Now, these product images,
| | 01:14 | let me go ahead and show you these. They
give us three for each one of their products.
| | 01:19 | So I'm going to go ahead and drag
these three down into Photoshop, so you can
| | 01:23 | just see what they gave us. There is a
large version, a regular size version,
| | 01:27 | and a mini version, if we need it.
| | 01:30 | So in these product images and in
their logo you can see some grays and light
| | 01:35 | blues and kind of some relaxed colors
that will probably work pretty well for
| | 01:39 | the design as we move forward.
| | 01:41 | If we were to go with red and bright
yellow and like a guy surfboarding on the
| | 01:47 | homepage of the website, it's probably
not going to jive very well with their
| | 01:51 | corporate feel and their logo that
already exists and stuff like that. No need
| | 01:56 | to rock the boat there.
| | 01:58 | A great technique when starting a new
design from scratch is to use what's
| | 02:02 | called a mood board.
| | 02:05 | And a mood board is just a design file.
| | 02:07 | It literally could be a piece of paper,
but it could be a Photoshop file as well.
| | 02:11 | It is kind of a scrapbook of
little bits of design that you kind of think
| | 02:16 | are cool or appropriate
for the mood of the site.
| | 02:19 | So I have here in this Ideas folder
as part of the exercise file, the file
| | 02:25 | called Example Mood Board.
| | 02:27 | I'm going to double-click and open up
that in Photoshop. Now this, what you're
| | 02:31 | looking at here, has
nothing to do with Widget Corp.
| | 02:35 | and the project that we're
going to be moving forward with.
| | 02:37 | It's just an example of
what a mood board could be.
| | 02:40 | So it's just these swatches of
color around, there are some typography
| | 02:45 | exploration, there is images in the
background, you can see this top image is
| | 02:49 | blurred out, and we have some
blurred text that kind of go with that.
| | 02:53 | There are some textures going on and
some different kinds of fonts with opacity.
| | 02:58 | Just lots of stuff going on here.
| | 02:59 | It doesn't look like a finished design at all.
| | 03:02 | It's just giving us a feel for
something, like maybe this design here is kind
| | 03:06 | of an urban thing, as we can see some
buildings and some underground kind of
| | 03:11 | stuff going on here. It's just a feel.
| | 03:13 | So we're going to do that for Widget Corp.
| | 03:15 | with our own mood board.
| | 03:17 | So I am going to make a new file in
Photoshop and give it some kind of arbitrary
| | 03:21 | pixel dimensions here.
| | 03:22 | We're just kind of playing around,
and we just get this white canvas.
| | 03:26 | And the white isn't so bad really.
I mean, white is chill and relaxed and
| | 03:30 | corporate. No problem with that.
| | 03:32 | So maybe the content of our site will
be on white, but we should work on a
| | 03:36 | background. So let me just grab the
Rectangle tool and just make a square here
| | 03:41 | that will be representative of our background.
| | 03:44 | Maybe we'll make it kind of
neutral gray color, a darker gray.
| | 03:47 | Now when you have two flat colors like
this next to each other, it's a little boring.
| | 03:52 | It's a little flat.
| | 03:53 | Let's give that background a little bit
of noise, just to loosen it up a little
| | 03:59 | bit and provide a little text here.
| | 04:01 | And then now we can give it a whole
bunch of noise, but that would be annoying
| | 04:04 | and a little over the top for us
probably, but since we're kind of going for
| | 04:07 | chill, so just a very-very light
amount of noise can kind of go a long way
| | 04:12 | for visual interest.
| | 04:13 | So that's kind of neat, kind of
imagining our content over here and this being
| | 04:18 | our background over here.
| | 04:19 | Now they did give us this logo,
so let's open that up in Photoshop.
| | 04:23 | I can grab our black arrow tool and just
drag it over to our other project here.
| | 04:28 | I am going to press
Command+T to resize this thing.
| | 04:31 | Command+0 to get my resize handles
all in the screen, then hold Shift as I
| | 04:36 | resize this, just so
it's a more manageable size.
| | 04:40 | That's all I'm doing here.
| | 04:41 | Now, one of the first things I notice
is that this logo is looking good on dark
| | 04:48 | as well as white. So it's a kind of
interesting that way. Not that our logos are
| | 04:52 | able to do that, so that's kind of neat.
| | 04:54 | Another thing I often like to see in
these mood boards is separators or way to
| | 04:59 | partition content from one another.
| | 05:02 | In a corporate site like this,
one pixel rules I think are pretty neat.
| | 05:06 | So let's grab one of those. I grabbed
our Line tool. I'm going to hold Shift
| | 05:10 | and draw straight line.
| | 05:13 | And that's kind of nice. That might be
a way to separate our header from our
| | 05:16 | footer, or blog post from
each other. I am not sure yet.
| | 05:20 | And when I see one pixel lines like that,
a lot of times I'll think of Helvetica
| | 05:24 | Neue, in their Ultra Light font.
I think that's really nice.
| | 05:27 | We could just go ahead and type WIDGET CORP
in all caps and that font really reminds me--
| | 05:32 | It looks itself like a one
pixel line, so that's kind of neat.
| | 05:36 | We can just play around here. We're
not exactly designing their website right now,
| | 05:40 | even though this is kind of
starting to take shape a little bit.
| | 05:43 | We're just kind of dropping stuff on the
page and getting a feel, getting a mood.
| | 05:47 | That's the whole point.
| | 05:49 | Now, as we are playing around with mood
or we're looking around an iStockphoto,
| | 05:54 | we found this file.
I'm calling it mailmarks here.
| | 05:58 | And I'll press the Spacebar just so
we can take a peek at it, and it has all
| | 06:01 | these like stamps and stuff that looks
like it came from the Post Office, pretty
| | 06:06 | neat stuff. I was thinking, maybe
this could work in our design, you know.
| | 06:10 | It looks corporate-y to me, just in
that corporations get and send mail and stuff.
| | 06:16 | I think this would work.
| | 06:18 | Most of the site is going to be pretty
sterile and clean, but having a few kind
| | 06:22 | of rough edges like this might be kind of neat.
| | 06:25 | So I'll go ahead and open that up in
Photoshop and maybe we'll just grab like
| | 06:31 | one of these postmarks or
something and drag that in there.
| | 06:34 | I'll grab the Lasso tool and just draw
a really loose selection around that and
| | 06:40 | grab our black arrow and just drag it over here.
| | 06:43 | Just so we have a reference to it, just
anywhere in here. Maybe we'll grab some
| | 06:48 | more stuff, just in case, for playing around.
| | 06:50 | I'm just lassoing around in this area
in this JPEG file we have, dragging that
| | 06:57 | over to? I'm not sure. I mean
those are looking pretty humongous, so
| | 07:01 | again, I've selected their layers and
pressed Command+T. So I can resize them
| | 07:06 | and then just holding Shift.
| | 07:08 | Holding Shift will keep their
dimensions straight as I resize, so that they
| | 07:12 | don't get distorted.
| | 07:13 | That might work. We'll see. I could
even see knocking them down in opacity a
| | 07:18 | little bit, so they're
not as strong on the page.
| | 07:20 | Playing around with color is
also important in your mood board.
| | 07:24 | I can grab the Rectangle tool here,
and just kind of maybe draw some bars in
| | 07:30 | here and pick some colors.
| | 07:32 | Now sampling colors from already
existing elements on the page might be a good idea.
| | 07:37 | Their logo has all kinds of blues in it.
| | 07:40 | Since it's gradients, there is light
blues towards the top and dark blues
| | 07:43 | towards the bottom, really dark
blues, and that's kind of neat.
| | 07:47 | We could base our color
scheme off of their logo.
| | 07:49 | There would be no problem with that.
| | 07:51 | I want to grab that bar and drag it
to the page down here to duplicate it,
| | 07:56 | and then grab my black arrow and just
move it. So we can pick another color,
| | 08:01 | maybe another blue.
| | 08:02 | It's kind of neat. I'll duplicate it
again. We're just playing around with
| | 08:09 | colors, playing around with feel.
| | 08:11 | We don't have to stay in all blue.
| | 08:13 | That would be boring if we did
that, so we could branch out.
| | 08:16 | That actually that's working for me.
| | 08:18 | That looks kind of neat.
| | 08:19 | Just playing around with color,
playing around with different graphical
| | 08:22 | elements, using their logo, setting up
some background textures here, playing
| | 08:27 | around with typography.
| | 08:28 | That's what a mood board is all about.
| | 08:30 | So let's go ahead and save this as our
mood board, and we'll use this later as
| | 08:36 | we start building out the
actual design structural files.
| | Collapse this transcript |
| Building a home page mockup| 00:00 | Now it's time to start creating the
actual design of the site in Photoshop.
| | 00:05 | If you don't have any interest in
working in Photoshop, or this part of the
| | 00:08 | workflow, the finished Photoshop
file is available in the exercise files.
| | 00:13 | If you don't have access to those, it's also
free exercise file available on the course page.
| | 00:19 | Then you can continue with
this course in Chapter 2.
| | 00:21 | We are going to be
working in the homepage design.
| | 00:25 | The homepage is just as good of a
place to start as any, but you wouldn't
| | 00:28 | necessarily have to.
| | 00:30 | If you have particular inspiration to
start with a different area of your site,
| | 00:34 | by all means go for it.
| | 00:36 | Now we have this mood board created.
| | 00:38 | It just has some typography styles
and some color choices,and some things
| | 00:43 | we are playing with to kind of set the
mood for what the design is going to be like.
| | 00:47 | So I have that open here. We'll be
using that potentially a bit, but we are
| | 00:51 | going to need a new
document for the actual design.
| | 00:53 | So I will create a new document.
| | 00:56 | I am going to create it at 800x1200
pixels, width and height respectively there.
| | 01:02 | Now there are no major theories at work here.
| | 01:06 | It's just what we are going to go with
now. If we find out as we are laying stuff out,
| | 01:10 | these things need to be
adjusted, we can absolutely do that.
| | 01:13 | That's the part of the
beauty of working digitally.
| | 01:16 | Now double-click the background layer.
| | 01:18 | That's just going to unlock it, and
then I am going to go to Image > Canvas Size,
| | 01:23 | and make the width maybe
1200x1400, something like that.
| | 01:29 | Now that's going to put our white
background from our original document just
| | 01:33 | perfectly centered in this document,
just so that we have, this is going to be
| | 01:38 | representative of our content area,
and then we'll have some background area
| | 01:42 | to play with as well.
| | 01:43 | So I make a new layer in the Layers
palette by clicking on this little page icon
| | 01:48 | down here. Drag this layer
beneath the Content layer.
| | 01:52 | I'll name it as we go here, so Content.
Then I am going to fill this layer just
| | 01:59 | by pressing Command+Delete.
| | 02:00 | It's going to make it white, so we
have some white on white going on there.
| | 02:04 | Maybe we'll fill it instead with a gray color.
| | 02:08 | We'll pick some dark gray.
| | 02:10 | So I am going to hit Option+Delete
then to fill it with our foreground color.
| | 02:16 | Remember I am trying to
replicate this noise thing going on.
| | 02:19 | So that's looking a little dark.
Maybe we should try and mimic this exactly.
| | 02:23 | I am going to go ahead and click the
Eyedropper tool, and then sample a
| | 02:27 | gray from over there.
| | 02:28 | So now our foreground color is this gray.
Hit Option+Delete to fill with that color grey.
| | 02:33 | Now that's closer to what we are
happy with, with our mood board.
| | 02:37 | Then I'll fill it with noise as we did before.
| | 02:40 | So Filter > Noise > Add Noise.
| | 02:42 | This gives us an example of
what that noise might look like.
| | 02:45 | It looks like it saved that setting from
when we are playing with the mood board.
| | 02:48 | So that level of noise is pretty nice.
| | 02:51 | You can't see it when I am zoomed out
here, but if I press Command+1 to look at
| | 02:55 | this document at full size, you can
see the noise on the outside here.
| | 02:59 | The content area is a little far from
the top. Maybe I'll grab my black arrow
| | 03:04 | tool here and drag it up a little higher.
| | 03:08 | Let's get that logo over here.
| | 03:09 | I am in our mood board. I am going to
grab the layer that is our logo, and drag
| | 03:16 | it over into our new document.
| | 03:18 | Now it's kind of big
looking, but that might be good.
| | 03:21 | It might be cool for this site.
| | 03:23 | Now remember I feel like this
logo works cool on dark and light.
| | 03:27 | It actually works cool breaking
the boundaries of this white a bit.
| | 03:31 | So I mean, we could tuck it in
here, that might be a traditional look for a
| | 03:34 | logo, but I don't see any reason not to
break the mold a little bit and offset it
| | 03:39 | on this content area.
| | 03:40 | That looks kind of neat.
| | 03:42 | And we have these one pixel lines going on.
| | 03:44 | Maybe I can draw a line like that.
| | 03:48 | This is kind of working for me as a header area.
| | 03:50 | So grab the Line tool. Maybe make
a line separating a header area.
| | 03:57 | Now we should move that underneath the logo.
| | 04:00 | So it doesn't cut into the logo, and
we'll grab that typography from Widget Corp.
| | 04:07 | We'll drag that in.
| | 04:08 | Now maybe this logo is a little big.
So I am picturing if we start being smart
| | 04:17 | with our grid here, and I'll just press
Command+R to open up our rulers on the
| | 04:21 | edges of this document, we can start
dragging guides in, and I'm picturing if
| | 04:25 | we put a guide there, that makes sense
to start having content down here that
| | 04:30 | lines up nicely with that, and
maybe this would be a nice sidebar area.
| | 04:34 | This is pretty big for a sidebar area.
| | 04:36 | It's not even like one-third, two-thirds.
| | 04:39 | It's more dramatic than that. I am
hoping our sidebar is a little more
| | 04:42 | toned back something like that.
So maybe we should make that logo bit
| | 04:46 | smaller to accommodate.
| | 04:48 | I pressed Command+T to get
the resizing ability here.
| | 04:51 | I am going to hold Shift as I resize.
| | 04:53 | Maybe make it something like that.
| | 05:00 | Bring Widget Corp over, another guide.
But we are not working with a grid
| | 05:07 | layout in that this is a 12 column
grid or anything like that, but we are
| | 05:11 | working with the grid in that we are
going to be dragging in guides to make
| | 05:14 | sure that what we do kind of make sense.
| | 05:18 | Now I get this feeling from this.
| | 05:20 | It almost looks like letterhead, which
is kind of neat, and that works with our
| | 05:24 | idea that these mail marks that we
found, remember back in the exercise files
| | 05:28 | here from the previous
movie, there is these assets.
| | 05:31 | This is what they gave us, and
then under the idea folder there is
| | 05:36 | this mailmarks.jpg, which are
these files, scans from mail images
| | 05:42 | from iStockphoto.
| | 05:43 | We could use some of that to work with
this letterhead type of look, and in our
| | 05:48 | mood Board, we have some of these marks already.
| | 05:51 | I am going to go ahead and find the
postmark looking one up here, drag that
| | 05:56 | over, maybe stick it up in the upper
right corner here, and that's pretty bold,
| | 06:00 | but I can tone it down with
Opacity right on this layer. No problem!
| | 06:06 | You see how it sticks out above the background?
| | 06:08 | That's a little awkward.
| | 06:09 | So I am going to Command+Click the
Content layer, which is going to make that
| | 06:13 | box the active selection, and then
click onto this, which is our Mail Mark.
| | 06:17 | I will name it that, Mail Mark, so we
can find it easily again in the future.
| | 06:21 | And with this selection going, I'll
click this little icon at the bottom of
| | 06:25 | our Layers palette.
| | 06:26 | It's going to give it a layer mask, so
it's going to cut that at the edges there.
| | 06:31 | It doesn't bleed over the top.
| | 06:32 | That's kind of neat.
| | 06:35 | We can move along with our sidebar a bit.
| | 06:38 | Navigation, of course, is a super
important part of any site and the part of the
| | 06:42 | goals that we establish for this site is
they want to have it be able to like,
| | 06:47 | be easy to contact the company, find
out more information about the company,
| | 06:51 | feature their widgets.
| | 06:52 | So part of those goals are going to be
what forms our navigation and a sidebar
| | 06:57 | looks like it's going to
be a good place to do that.
| | 07:00 | Now we have some colors going here,
some color bars, and I am thinking even
| | 07:03 | though we weren't necessarily thinking
about design structure with these bars,
| | 07:08 | that they kind of help work in that way.
| | 07:10 | Let's just go ahead and drag those over here.
| | 07:12 | I mean that's humongous and weird, but
maybe we can take a portion of those.
| | 07:17 | Let's just perhaps just kind of lay it
here and then we'll cut a selection from
| | 07:24 | the edge to that first guide and then
make another layer mask, and then maybe
| | 07:30 | just those bits of that
bar can work as a navigation.
| | 07:36 | That's kind of neat.
| | 07:37 | So our widget is the only real like
three-dimensional element we have here.
| | 07:42 | We have a bit of a drop shadow on the
typography of the name of the corporation
| | 07:46 | that raises it up, but everything is
like coming at us, three-dimensionally, and
| | 07:49 | maybe it would be kind of neat if
we move backward a little bit too, for
| | 07:54 | some, just to ground it a bit.
| | 07:56 | I am going to duplicate this layer
that we have gone from navigation.
| | 08:00 | So now I have two copies
of them, as you can see.
| | 08:03 | Now I'll move it over a bit.
| | 08:04 | I am going to get rid of the layer mask,
which is this part of the layer you can see.
| | 08:11 | I am going to just drag that to the
Trash and it's going to ask me,if I want to
| | 08:14 | apply it before removing.
That's fine, we can do that.
| | 08:17 | Then I am going to shrink it down a
little bit so it's just this little nub
| | 08:22 | sticking off to the left.
| | 08:23 | If I turn off the layer you
can see the nub goes away.
| | 08:26 | I'll leave it on and kind of nudge it
downwards maybe, so it kind of has this
| | 08:32 | offset, and maybe we will cast a shadow
from our document on this so it kind of
| | 08:39 | gives a better three-dimensional look.
| | 08:41 | I am going to move these little nubs
below the content area and then I am going
| | 08:44 | to double-click the content area layer.
I am just going to open the Layer Style
| | 08:49 | palette, where I can give it
the Content area a drop shadow.
| | 08:53 | So we are working with this big
white box, our whole content area.
| | 08:56 | If I take the distance all the way down
to zero and bring up the size a little bit,
| | 09:01 | it puts this drop shadow around
that box. I can tone it down a little bit.
| | 09:05 | We'll see it gives
that dimensionality to this.
| | 09:08 | So that's kind of neat.
| | 09:09 | It looks like it's kind of a ribbon
that's hanging off the edge of it.
| | 09:12 | It's a simple design effect.
| | 09:15 | Maybe that will work.
| | 09:16 | Now this is going to be navigation literally.
| | 09:19 | So we need to think, I mean we are
in this design stage, we should think,
| | 09:22 | what is the navigation exactly?
| | 09:25 | I know they want to feature their
widgets, so maybe our widgets, and let's pick
| | 09:30 | a color that's going to work with all
of these different colors. A neutral like
| | 09:34 | white should be fine,
because they are dark enough.
| | 09:36 | So I just typed Our Widgets, which is this layer,
but now we are too low in the Layer palette.
| | 09:41 | I am going to drag it up above
that so we can see the text, and drag it over.
| | 09:49 | Now I am not sure about that.
| | 09:51 | We have Helvetica going on up here,
kind of a web safe font for the most part,
| | 09:56 | later in the CSS we'll be dealing with
fallbacks and all that, but let's go with
| | 09:59 | something even safer for our navigation.
| | 10:01 | Like probably a font like
Georgia. And that's a little big.
| | 10:06 | I am going to open our Character
palette here and make it smaller.
| | 10:11 | Make it not all caps.
| | 10:17 | I am going to duplicate that layer.
| | 10:19 | I can do that just by hitting Command+J,
just drag the duplicate layer down, and
| | 10:26 | I'll say maybe About Us, duplicate that
one, drag it down, Contact Us, and their
| | 10:40 | blog of course, and maybe the
blog should have some personality.
| | 10:44 | I mean, we could just say Blog, but blog is
such a kind of gross word, isn't it sometimes?
| | 10:51 | Maybe we should call it The Grind.
Then we could say like our blog, so people
| | 10:57 | have some idea what the about, but it
doesn't just say blog. I'll make that
| | 11:02 | maybe italic and a bit smaller.
| | 11:08 | Okay, so the navigation is working.
| | 11:10 | I can picture that being pretty
obvious how that will work. It should be fine.
| | 11:14 | What we have done here is a great
start on the structure of the homepage and
| | 11:19 | actually probably most of the pages on the site.
| | 11:21 | We'll continue fleshing out the
content of the homepage in the next movie.
| | Collapse this transcript |
| Finishing the home page| 00:00 | The structure of our site is
coming right along in Photoshop.
| | 00:03 | So let's keep going, designing
the content for the Home page.
| | 00:07 | We still have this little kind of
letterhead thing going on though. I'm kind of
| | 00:10 | picturing the ability of maybe just
having some intro text for Widget Corp.
| | 00:16 | Now I know we have an About page and
maybe that will be about the company.
| | 00:20 | Maybe this will work, maybe it won't.
We are still exploring a bit here.
| | 00:23 | I could see some intro text
working explaining what Widget Corp is.
| | 00:26 | Now we need some Lorem Ipsum text, so
one of my favorite resources for that is
| | 00:31 | just to hop out to the web and go to
html-ipsum.com, which I can just copy and
| | 00:36 | paste some Lorem Ipsum text.
| | 00:39 | I'll close that and just paste it in there.
| | 00:44 | You can't see it because it's
white, so let me select all here.
| | 00:47 | Open the Character palette, change the
color to-- maybe I will sample the same
| | 00:52 | gray that was happening up here.
| | 00:55 | Get non-italic, pull in the line
height a bit, maybe make it a bit smaller.
| | 01:03 | Some intro text to kind of drive home
that letterhead look we have going on.
| | 01:08 | What else can we do here?
| | 01:09 | Now they definitely want to feature
their widgets, so I want to have something
| | 01:13 | going on the homepage to do that.
| | 01:15 | We'll grab our Rectangle tool as a divider.
| | 01:18 | Let me pick one of the colors
we already have going on here.
| | 01:24 | Make sure our color
palette is kind of reined in.
| | 01:27 | We don't want to pick a hundred different
colors on here. Keeping it simple is nice.
| | 01:32 | So one of their widgets is, if we go
out to these asset files they provided us
| | 01:38 | with some project images.
| | 01:39 | One of them is the Super Sprocket,
so we'll just say Super Sprocket.
| | 01:46 | I've managed to make this text layer
now beneath this layer, so we can see that
| | 01:51 | here in the hierarchy of the Layers palette.
| | 01:53 | Let me pull that above and spell it
correctly, and maybe make it white so you can
| | 02:00 | see it good, and larger.
| | 02:02 | I am going to click on the T here and just drag.
| | 02:05 | That's how you can adjust
font sizes in Photoshop easily.
| | 02:09 | We are going to need that picture for sure.
| | 02:15 | So while we are out in the Assets,
let me grab the-- maybe just the
| | 02:19 | regular version of that. I'll drag it on the
Photoshop to open it and just drag it over.
| | 02:23 | All right, that looks good.
| | 02:27 | Maybe it can break into this
a bit, maybe above it, sure.
| | 02:30 | And maybe we'll have some information
about the sprocket. I'll duplicate this
| | 02:39 | paragraph going on up here and I'll do
that by dragging it down onto this page
| | 02:43 | icon, so I have two copies of it.
| | 02:45 | They are going to be sitting right
on top of each other, but hat's okay.
| | 02:48 | I can drag the second one down here.
| | 02:49 | And let me grab the Hand tool and
move the page so you can see it better.
| | 02:56 | Double-click that and drag the handles of
this text box in a bit, nudge. So that's cool.
| | 03:06 | We might need a way to get to the Super
Sprocket. Maybe you click the Sprocket
| | 03:09 | itself, maybe you click the title,
but maybe those aren't obvious enough.
| | 03:13 | So let's get a button in there, kind
of trying to line it up with the bottom,
| | 03:20 | and we'll make it white for now because we
are going to put a gradient over the top of it.
| | 03:24 | Gradients are nice for buttons.
| | 03:26 | They like give it some three dimensionality.
| | 03:28 | I double-clicked on this
shape that we just made.
| | 03:32 | I'll open the Layer Style palette.
| | 03:34 | Say Gradient Overlay and I'll drag it
all the way so we can see our button as we
| | 03:39 | work with the colors.
| | 03:40 | Click this bottom color here and pick a
blue. Maybe I'll start with this blue,
| | 03:46 | make it a bit darker, and then I will
click the other white color, start with
| | 03:50 | that color and make it a bit lighter.
| | 03:52 | So we are working with this in the
same color palette, just giving it some
| | 03:56 | three dimensionality.
| | 03:57 | Well I closed that Layer Style palette.
I am going to open it back up again.
| | 04:01 | Let me give it a white stroke on the
inside and then maybe give it a bit of a drop
| | 04:10 | shadow, really emphasize
that three dimensionality of it.
| | 04:14 | So we want that button to be
view product. An action item.
| | 04:23 | I am going to make a new text layer
called view product and stick it on top there.
| | 04:30 | It's a little big, so I'll make it a
bit smaller, all caps. That works.
| | 04:42 | We could move all the stuff up here
but I am kind of thinking in this area up
| | 04:45 | here, since it's the homepage and we
are going to have an Our Widgets page
| | 04:49 | that's just for viewing widgets and stuff,
maybe we could have something like,
| | 04:54 | I don't know, a quote from a
customer or something like that.
| | 04:57 | Let me grab block so we can kind of have
a quote style, grab one of these colors
| | 05:04 | that already exists, and write
some quote in there. That's like...
| | 05:09 | Grab this Text tool, click so I can
get some text going, just anywhere, and
| | 05:14 | I will move it into place in a minute.
| | 05:16 | "We are able to do the job we do because
of these widgets," and I will drag it in
| | 05:25 | here so you can see it.
| | 05:27 | Maybe we should bring that Helvetica back.
| | 05:36 | Make it nice and thin, italic.
Hmmm, maybe we can split it into three lines.
| | 05:48 | Make it larger and that looks pretty cool.
| | 05:54 | Space it out a bit, center it in there, just
by dragging things around. That's kind of neat.
| | 06:00 | Maybe we can bring in some more of that
mail stuff that we are looking at, those
| | 06:03 | scans of postal marks.
| | 06:06 | I am going to open up that again.
| | 06:08 | Maybe this dude here, pointing in.
| | 06:10 | Let me zoom in on so we can see it good.
| | 06:12 | It seems like a cool way to emphasize a
quote, have a big finger pointing at it.
| | 06:19 | I am going to grab the
Lasso tool and cut it out.
| | 06:24 | Yeah, cut out this Return To
Sender while we were at it.
| | 06:27 | Just get the hand all by
itself. Drag that over.
| | 06:34 | Now it's too big, so I can resize it.
| | 06:36 | Notice it also has the white on the back of it.
| | 06:38 | If I set this layer, instead of at
layer style Normal to a blending mode of
| | 06:43 | Multiply, anything that's white will
just go away, because white doesn't have
| | 06:47 | anything to multiply.
| | 06:48 | It doesn't have any value.
| | 06:50 | So just to keep somewhat organized
over here, I will call it Hand. Resize it.
| | 06:55 | Let me bring it in here, and maybe tone it
back by adjusting the Opacity a little bit.
| | 07:04 | Now it's sticking out, so we'll use that
same technique we used for the postmark up here.
| | 07:10 | I'll click on this Content area, then
we'll go find the Hand and give it a mask.
| | 07:20 | So we'll cut off those rough edges.
| | 07:22 | So that's pretty neat.
| | 07:23 | Now just a few more things we want to do here.
| | 07:25 | We have this sidebar and
all we have here is navigation.
| | 07:28 | So what else could we do with the sidebar?
| | 07:31 | Well, we could do-- Their blog was a
big deal, and they really wanted to blog.
| | 07:35 | So I think maybe showing their most
recent blog post, instead of just simply a
| | 07:39 | link would be kind of neat.
| | 07:40 | So maybe let's show just a small part
or it, not their whole blog post, but
| | 07:44 | just a small part of it.
| | 07:46 | So let's make kind of a box
over here where we plan to do that.
| | 07:49 | If I just make a white box and I give
it some drop shadow, I have been using a
| | 07:57 | little drop shadow so I am not afraid
of that. No distance, just a little bit
| | 08:01 | of drop shadow here.
| | 08:02 | Now right against the edge that looks a
little weird. I am going to hide these
| | 08:05 | blue lines by pressing Command+Semicolon
| | 08:08 | to get rid of them, so we
can see what's going on there.
| | 08:11 | Having a drop shadow around the whole
thing looks a little too strong to me, so
| | 08:15 | maybe we'll just emphasize
just the corner of it.
| | 08:17 | I am going to go ahead and put a layer
mask on it by clicking the layer that
| | 08:21 | we have just created in this little
circle in the square here, so we have a
| | 08:26 | layer mask to work with.
| | 08:27 | Now I will click down the Gradient
tool and make sure that it's a Linear
| | 08:31 | Gradient, I am looking in this bar up
here, and I am going to put it on mode
| | 08:35 | Multiply and make sure that
it's on the white to black.
| | 08:40 | Now a layer mask anywhere that is black
is going to hide what's showing here and
| | 08:45 | anything that's white is going to show.
| | 08:47 | So I am not drawing, like literally
drawing on what you can see. I am hiding.
| | 08:52 | Anywhere that's black is going
to hide in this particular layer.
| | 08:56 | I am going to hit Shift and drag over
here and you are going to see that it's
| | 08:59 | going to hide a bit of this.
| | 09:01 | What's going on there is that Drop
Shadow is showing through here. Let me
| | 09:04 | double-click this layer. On under
Blending Options here, I am going to say
| | 09:09 | Layer Mask Hides Effects.
| | 09:12 | So if I click that, that inner
weird drop shadow is going to go away.
| | 09:16 | Now we didn't quite accomplish what we want to.
| | 09:18 | Let me set this back to Normal, and I am
going to select the layer mask here and
| | 09:25 | delete everything out of it. So it's all black.
| | 09:28 | It's hiding everything.
| | 09:29 | We want to show bits of it though.
| | 09:30 | So I am just dragging the wrong direction.
| | 09:33 | As I drag other direction, you can
see it hides different parts of this.
| | 09:38 | That's what working with
the layer mask is all about.
| | 09:40 | We can I am sure find a cool portion
of this. I mean really any one of these
| | 09:46 | looks kind of neat, but I want to
try to show this upper right corner.
| | 09:49 | So let's get that going on. Then I am
going to set it on Multiply, so that
| | 09:54 | the next time we drag, it's going to
duplicate-- wrong direction, I am going to drag down.
| | 10:00 | So now we have just the corner showing,
and I think that's a neat way to block
| | 10:03 | off a bit of content here.
| | 10:05 | So we could have any number of them.
| | 10:06 | I will duplicate this entire thing, drag it
down, and now we have another blocked off area.
| | 10:13 | So that's kind of neat.
| | 10:14 | We can fill up these areas with content.
| | 10:17 | Maybe I'll put a bar in here.
| | 10:21 | Pick one of these colors
that's already going on.
| | 10:23 | The blog is probably appropriate in
this case because, I am going to turn off
| | 10:28 | drop shadow, because we were
displaying the last blog post.
| | 10:31 | So having these colors tie in is important.
| | 10:38 | And I'll make it be the date.
| | 10:39 | I will say like March 16th or something,
and drag it right onto that bar, maybe
| | 10:48 | I'll make it real small,
and letters spaced out a bit.
| | 10:53 | That's what this is about.
| | 10:55 | And that's going to display the title
of the blog post. So Latest Blog Post.
| | 11:03 | Make sure that color is some kind of
readable color, and not all caps but maybe
| | 11:11 | we'll go Italic with this, and we'll
bring that letter spacing back to zero, and
| | 11:16 | make it bigger, because it's the title.
| | 11:22 | And then some of this Lorem Ipsum,
because it's going to be the first few
| | 11:25 | sentences of whatever they
wrote for their blog post.
| | 11:29 | So let me Command+Click on this, which is
going to hop us to this layer really quickly.
| | 11:33 | I am going to duplicate it, drag it
over here just to represent some content
| | 11:38 | for what their latest blog post will
be, just make it smaller, create the
| | 11:44 | handles. So that works.
| | 11:49 | Now we have a little bit more area,
maybe we'll show another sprocket down here.
| | 11:53 | Maybe we'll show some content from
other blog posts over here, later blog posts
| | 11:58 | or blog posts from another site even,
but this looks like a pretty strong start
| | 12:02 | for what's going to be the homepage of our site.
| | 12:06 | So let's make sure to save our work so far.
| | 12:09 | Go up to the File menu and click
Save and we'll call it Homepage Design.
| | 12:16 | In fact we probably should have saved
it long before this. Save early, save
| | 12:19 | often is a good idea.
| | 12:21 | So now we have a really strong mockup
to work from as we start building out our theme.
| | Collapse this transcript |
| Planning the rest of the site| 00:00 | At this point, I've done a little
playing around in Photoshop to finish up what
| | 00:04 | will be our final homepage design.
| | 00:07 | This file as you see it is available
in the exercise files and if you don't
| | 00:12 | have access to those it's available as
a free exercise file on the course page.
| | 00:16 | So you can see it's a little
different than where we ended off.
| | 00:19 | There is an extra product down here
and the sidebar has been fleshed out a
| | 00:25 | little bit with articles that
come from an external source.
| | 00:29 | So this is going to be kind of
a final design for our homepage.
| | 00:33 | This is actually where we're
going to stop with Photoshop.
| | 00:36 | Now, we could think about what's the
blog going to look like, what are these
| | 00:39 | sub-pages going to look like, and we
are going to need to think about those
| | 00:43 | things, but we have what we need to
start moving into HTML and CSS and start
| | 00:49 | fleshing out a structure and getting
that stuff ready and as we're doing that,
| | 00:53 | that might inform what the rest
of those pages would look like.
| | 00:57 | If we need to come back to Photoshop,
we can, but we have what we need to
| | 01:02 | basically wing it as far as
creating sub-pages from here on out.
| | 01:06 | That's just how I like to work.
| | 01:08 | Get a good structure, get it looking
good in Photoshop, but then as soon as
| | 01:12 | you can, start moving onto those next
steps and if you need to come back to
| | 01:16 | Photoshop, you can.
| | Collapse this transcript |
|
|
2. Converting Photoshop to HTML/CSSStarting with a base project| 00:00 | With the design of our Homepage
complete in Photoshop, we're ready to start
| | 00:04 | converting it into an actual website.
| | 00:06 | My workflow is generally to convert a
design first into HTML and CSS rather than
| | 00:11 | go directly to the CMS.
| | 00:13 | There are a couple of reasons for this.
| | 00:15 | Number one, it keeps us
focused on the task at hand.
| | 00:18 | Our primary task right now is to
convert our design into the best possible
| | 00:22 | HTML and CSS as we can, and dealing with
WordPress right now might become a distraction.
| | 00:29 | Number two, it keeps us CMS agnostic.
| | 00:32 | So if sometime late in the process,
unfortunately, if we were to switch away
| | 00:36 | from WordPress and use some other
software, we'd still have this to come back to
| | 00:40 | and it's going to be a lot easier to
convert HTML and CSS to a new software than
| | 00:44 | it would be to convert an
existing theme into new software.
| | 00:47 | So to start all my projects, I have this
folder setup called BASE and I am going
| | 00:53 | to go ahead and Option+Drag
copy this to our desktop.
| | 00:56 | It's just a starter project for all
the projects I do, and you can see what's
| | 01:02 | inside of it over here.
| | 01:03 | There is a CSS folder, an Images folder,
a JS folder for JavaScript, and then
| | 01:08 | just an index.html file.
| | 01:11 | The text editor we are going to be using in
this course is TextMate and it's kind of cool.
| | 01:16 | I can drag this whole folder down into
the TextMate icon in our dock and it's
| | 01:20 | going to open up this
thing as a project in TextMate.
| | 01:23 | So it's kind of neat.
| | 01:24 | You can see the insides of this
folder over here in the project drawer.
| | 01:28 | I can click the index.html file to open up that.
| | 01:32 | This is what it's giving us.
| | 01:34 | There is a DOCTYPE, we're using the
HTML5 doc type, and yes, we are going to be
| | 01:39 | writing this theme, this whole project in HTML5.
| | 01:43 | We're not going to dig super deep
into the feature set of HTML5, but we are
| | 01:46 | going to use some new elements and
some touches of it here and there.
| | 01:49 | There is a title of the page, which
we'll ultimately be changing to Widget Corp.
| | 01:55 | Links out to a style.css file.
| | 01:59 | This bit of JavaScript right here
enables HTML5 to work in older browsers to
| | 02:05 | style those elements, and we link out to a
copy of jQuery in a local JavaScript file.
| | 02:11 | We won't be dealing with JavaScript right now
but we will touch on it later in this course.
| | 02:16 | Now, then we have an opening body tag, a
closing body tag, and a closing HTML tag.
| | 02:22 | This is where we will begin starting our markup.
| | 02:24 | The last point I'd like to
make here is regarding workflow.
| | 02:28 | If you've done this a bunch of times,
you're super comfortable with WordPress,
| | 02:32 | you're super comfortable with HTML.
| | 02:34 | Feel free to jump straight from the
Photoshop design right into the theming.
| | 02:38 | If you want to do that, you can go
ahead and start in Chapter 3 of this course.
| | 02:43 | I personally like to start this way if
I possibly can, if there is enough time
| | 02:48 | in the project to do that.
| | 02:49 | If your time constraints are shorter,
feel free to make that jump but for the
| | 02:54 | reasons we covered earlier here,
I prefer to start writing static HTML and CSS.
| | 02:59 | So now that we have a solid plan and a good
working environment, we'll start writing some markup.
| | Collapse this transcript |
| Writing HTML code for the home page| 00:00 | Let's start writing the HTML for this design.
| | 00:03 | When I say let's write the HTML, I mean
let's focus ourselves entirely on that one task.
| | 00:09 | We're going to open our Photoshop file
that we ended up with here on the left
| | 00:13 | and I am going to open the project file,
the index.html file, here on our right.
| | 00:18 | So what we're going to be doing is
looking at what's going on here on the left
| | 00:22 | and writing what we see on
the right in our project file.
| | 00:26 | That's going to keep us as semantic as possible.
| | 00:29 | You've heard the word semantic be
used in web related discussions, they are
| | 00:33 | generally talking about HTML and they're
talking about how well you've described
| | 00:39 | a website with HTML tags.
| | 00:41 | So very semantic means you've done a
good job with that and non-semantic
| | 00:45 | means that the HTML tags you're using don't
make sense together with what you're looking at.
| | 00:50 | Most of our content exists
in this big white block here.
| | 00:54 | So we are going to need a div for that.
| | 00:56 | I am going to say div with an id of page wrap.
| | 00:59 | just an element that wraps our entire page.
| | 01:01 | We're going to start with that.
| | 01:04 | Then we'll start at the top here,
we've got this logo. We've got Widget Corp here,
| | 01:08 | and this Established 1987 here,
all this I can see being grouped.
| | 01:13 | We'll use the HTML tag header.
| | 01:16 | I am going to press Command+Option+
Period to auto close that tag in TextMate and
| | 01:21 | then we have a logo.
| | 01:23 | Now, I am kind of seeing this as a
separate entity, so I am going to say div
| | 01:28 | with an id of logo, and
probably not put anything inside it.
| | 01:31 | We might put Widget Corp inside it if
it was the logo and the type together,
| | 01:36 | but it's kind of a separate entity
over here. I am going to let Widget Corp
| | 01:39 | actually just be an h1 tag.
| | 01:41 | So Widget Corp, close that tag, and
then we'll just have a paragraph up here in
| | 01:47 | the header for Established 1987.
| | 01:50 | Now, there is that letter mark up here.
| | 01:52 | We can do that with CSS.
| | 01:53 | That doesn't need to be content necessarily.
| | 01:55 | So there is our header. Underneath
the header we have this paragraph here.
| | 02:01 | But I'm thinking we should separate
everything that we can see on the left here
| | 02:04 | and everything that we can see on the right,
so this is main content and this is our sidebar.
| | 02:10 | That makes sense to me
to kind of do it that way.
| | 02:12 | Let's start with the main content first.
| | 02:14 | That's more important.
| | 02:15 | It should be above the sidebar.
| | 02:17 | So we'll say div with an id of
main content. Close that out.
| | 02:23 | Now, in the homepage here
we have that intro paragraph.
| | 02:26 | So I am going to make a paragraph tag.
| | 02:28 | I can think though, just thinking ahead
a little bit, that this might want to be
| | 02:33 | styled differently than other
paragraph tags across the whole site.
| | 02:37 | So I'll give it an ID if intro just in
case later on we'll have a CSS kind of
| | 02:41 | hook there then to style
that differently if we want to.
| | 02:45 | Now, this is just Lorem Ipsum,
just kind of generic filler text.
| | 02:49 | We can get that in TextMate
by just typing lorem, Tab.
| | 02:53 | That's just going to fill that with
a bunch of Lorem Ipsum text for us.
| | 02:58 | Now right below that we have this quote.
| | 03:01 | "We are able to do the work we do because of
the quality of these widgets." That's a quote.
| | 03:05 | It's a blockquote.
| | 03:07 | I can think probably we're going to
end up replacing it with an image.
| | 03:11 | Well, that doesn't mean we
shouldn't use the proper tag for it.
| | 03:14 | So I am going to say blockquote and
then within it I am going to say,
| | 03:17 | "We are able to do the work we do because
of the quality of these widgets," and
| | 03:25 | we'll close that blockquote but it also says
Frank James from the Tick Tock Corporation.
| | 03:30 | So the semantic way to cite
a blockquote is the cite tag.
| | 03:35 | So we'll say Frank James, Tick Tock Corp,
| | 03:41 | and close that tag.
| | 03:43 | So we're looking good there.
| | 03:44 | Now, blockquote, we already know
that they are interested in blogging and
| | 03:48 | writing their own articles.
| | 03:50 | It's pretty common to have
a blockquote in a blog post.
| | 03:54 | So this is going to be different
than other blockquotes on the site.
| | 03:58 | So we'll say this is an ID of
like main-quote here or something.
| | 04:01 | So we can get our hands on it uniquely
without affecting other blockquotes in the future.
| | 04:06 | Now below that blockquote says Featured Widgets.
| | 04:09 | That's a header but it is one
level deeper than Widget Corp here.
| | 04:12 | So we'll say h2, Featured Widgets,
close that tag, then there is these
| | 04:18 | two featured widgets.
| | 04:19 | Now I am feeling like they should
have a relationship to each other.
| | 04:22 | There should be a tag that
encompasses both of them if we can.
| | 04:26 | There is probably a number of different ways we
can do it but let's just make it an unordered list.
| | 04:31 | So it's like a list of widgets.
| | 04:32 | That's fine I think.
| | 04:34 | An opening and closing list tag for the first
one, and then let's describe what we're seeing.
| | 04:39 | We're seeing a title, a description, an image
and a View Product button. So let's try that.
| | 04:44 | Now we are one level deeper on headers again.
| | 04:46 | So we'll make an h3 tag.
| | 04:48 | Call this the Super Sprocket 1000.
| | 04:51 | There is a description in there.
| | 04:52 | We'll just use some Lorem Ipsum text
there again, and we're seeing an image.
| | 04:57 | So we'll say image equals, now with the
source of. Now where we're going to put these?
| | 05:03 | It will probably be
somewhere like product-images.
| | 05:06 | We're just making some decisions.
| | 05:08 | I am not sure if this is
actually where we'll put them.
| | 05:10 | We're just kind of making the call
right now as we are writing this HTML.
| | 05:13 | Super Sprocket 1000.
| | 05:16 | We'll probably have an alt text of
product image or something like that, and
| | 05:21 | then there will be a button, an
anchor link, so A with an href, we're not sure
| | 05:27 | where it's going to go yet.
| | 05:28 | We'll just put a hash tag.
And it looks like a button.
| | 05:31 | I am thinking if there is a link in
this text over here or there is a link in
| | 05:35 | this text over here, it's going to be
different than this, but they're all just
| | 05:39 | regular As, regular anchor links
but this one looks differently.
| | 05:42 | So let's give it a class of Button.
| | 05:45 | So anywhere we want to have a link
look like a button, we'll just style this
| | 05:49 | class of button. So View Product.
| | 05:53 | Now, there are two of these.
| | 05:55 | So I am just going to go ahead and copy
and paste, paste that in there, but the
| | 05:59 | name is going to be different.
| | 06:01 | Triple Spunkler, and the
image path will be different.
| | 06:10 | But mostly, it's going to stay the same here.
| | 06:12 | So that's the main content.
| | 06:14 | We just wrote all of the HTML for that.
| | 06:16 | Now after the main content
we're going to have this sidebar.
| | 06:19 | Now where should we start the sidebar?
| | 06:21 | It's already getting a little confusing
down here because I am not sure should
| | 06:24 | I start here or here?
| | 06:26 | I do remember that the first div
that we opened up was the page wrap.
| | 06:30 | So let me make a note here that
says this is the end of the page wrap.
| | 06:33 | Just keeps us more organized
down here. And then what's this div?
| | 06:37 | Well, it's the end of the main content.
| | 06:39 | So let me mark that just
so we know what's going on.
| | 06:45 | So after the main content, but still
within the white page wrap area, we're
| | 06:49 | going to have a sidebar.
| | 06:50 | In HTML5, it's often called an aside.
| | 06:55 | So within that, it starts out with a navigation.
| | 06:58 | HTML5 has a tag for that, nav, and there
is going to be an unordered list within it.
| | 07:03 | So we'll make an unordered list, and
it's going to have, we're looking at four
| | 07:08 | different links here.
| | 07:09 | So let's make four links.
| | 07:10 | In TextMate, I can hold the Option key
and drag up and select multiple lines.
| | 07:15 | pretty neat little trick.
| | 07:16 | Now I can write on four
lines all at once. Pretty cool!
| | 07:26 | If I click away, I am all out of it.
| | 07:28 | Now, each one of these will have a
different name like Buy Widgets, About Widget
| | 07:35 | Corp, Contact Us, and The Grind.
Oops. I put that in the wrong place, didn't I?
| | 07:47 | Now, it has that little "Our Blog" part in there.
| | 07:49 | I'll just use an em tag for that.
| | 07:50 | em meaning emphasis, but
often italic text as well.
| | 07:56 | Now, notice that there are different colors.
| | 07:59 | Should we put a class
name on this that says blue?
| | 08:03 | No, that would not be semantic, because
what if we wanted to change that color
| | 08:07 | later and we wanted the
first one to be green instead?
| | 08:11 | Well, then our class of
blue is going to be green.
| | 08:13 | That's going to be weird.
| | 08:15 | We could put class of Buy Widgets
here and make it blue with that.
| | 08:19 | But then if we move Buy Widgets
down here, it could screw up our color scheme.
| | 08:23 | We're really not going to apply
classes at all to it, knowing that we can use
| | 08:27 | CSS actually to target each one of these in
their position and affect their color that way.
| | 08:32 | So that's what we are going to plan to do there.
| | 08:34 | Just two more areas to mark up quick.
| | 08:37 | It's this area, the Latest Posts
and this area, the Industry News.
| | 08:41 | So we'll make divs for those.
| | 08:43 | We'll call them widgets. Why not?
| | 08:48 | Thinking of, in the WordPress world,
I just happen to know that when you drop
| | 08:52 | things in your sidebar
they are often called widgets.
| | 08:55 | Now this is a header, Latest Post, but
we've already made it down to h3, which
| | 08:59 | was Super Sprocket 100 here.
| | 09:01 | So let's make this h4,
and we'll say Latest Post.
| | 09:05 | Let's put a div there and we'll have a
class of date, because that's what we're
| | 09:12 | looking at here is just a date and
we'll say March 16th, 2010. Close that.
| | 09:20 | Then there's another title.
| | 09:21 | We've made it all the way down to h5.
| | 09:22 | h5 and it says, "This just in:
Don't get gremlins wet!"
| | 09:30 | Super important advice. And we have some
Lorem Ipsum text there. One last time.
| | 09:39 | So this is the end of a widget.
| | 09:42 | That's that one more and we can kind of
copy and paste this except for our widget here.
| | 09:49 | There are two things inside this widget.
| | 09:53 | So we'll just copy and paste
everything from the date down, we'll do again.
| | 10:00 | Maybe I'll just have a different date
and we'll have a different title like "This
| | 10:05 | is another blog post" down here or whatever.
| | 10:11 | We've made it all the way.
| | 10:13 | Very one last thing is that there is
actually two little bits of text down here
| | 10:17 | and it's outside of this white box.
| | 10:20 | It's the footer area.
| | 10:21 | So we're going to put it after the page wrap.
| | 10:23 | We're going to call it footer, HTML5 tag there.
| | 10:27 | There are two things in there.
| | 10:28 | It says "One wheel turns another" on the
left, and it has the copyright on the right.
| | 10:33 | So we could do something like div id
footer-left or something like that, but
| | 10:39 | again that's one of those things where
it's not very semantic because what if we
| | 10:43 | wanted to flip-flop these?
| | 10:45 | Then our left class is really on the right,
and our right class is really on the left.
| | 10:49 | That doesn't make sense.
| | 10:50 | Let's describe it better and say there
is an id of quote and then we'll say, One
| | 10:56 | wheel turns another, and we'll have copyright.
| | 11:02 | So if we want to apply float-left and
float-right for example in our CSS later,
| | 11:08 | we can do that, flip-flop them
around, and it stays just as semantic.
| | 11:12 | So, Copyright 2010 Widget Corp. So that's it.
| | 11:20 | We've done it. We've written all the HTML for this
entire page that we're looking at, really focused.
| | 11:27 | That's why we wanted to do it this way.
| | 11:29 | Just for fun we are going to
open this quick in a browser.
| | 11:32 | So let me close this.
| | 11:34 | I am going to open up that HTML file
that we just finished writing in the
| | 11:38 | browser so we can look at it and wow!
| | 11:40 | It doesn't look like much,
does it? But that's okay.
| | 11:43 | This is what we're expecting to look at.
| | 11:45 | This is what like a search engine
would see when it reads your site.
| | 11:49 | This is what someone with sight
disabilities would see when they are looking at
| | 11:53 | your site, and it all makes perfect sense.
| | 11:55 | Widget Corp and the tagline for the
company, and introduction text right into
| | 11:59 | the Featured Widgets.
| | 12:01 | This is exactly what we want to see
and a great base for us to start styling.
| | Collapse this transcript |
| Starting the CSS: Creating the header and basic style structure| 00:00 | So with out HTML in place, we are ready to
start working with CSS in styling our page.
| | 00:05 | I want to make a working copy of this,
put it on our desktop, and open it up in
| | 00:10 | TextMate as a project.
| | 00:14 | So this is our HTML, our whole project.
| | 00:17 | Here I am going to open up our index.html file.
| | 00:20 | Notice this line here we are
linking out to a style.css file.
| | 00:25 | That's here in our project.
| | 00:26 | This is what we are going to be working with.
| | 00:28 | Notice there are a few lines in here
already, a basic reset, we're setting the
| | 00:33 | font to Georgia here and then this
line here is all about those new HTML5
| | 00:37 | elements, ensuring that they are
display block as they should be.
| | 00:41 | We are going to be using two other
applications in this movie. One is
| | 00:45 | Photoshop, we are going to have our
Photoshop mockup open, as this is what we
| | 00:49 | are trying to write CSS to match, this
is how we want it to look, and the other
| | 00:53 | is just the browser.
| | 00:54 | So I'm going to have the browser open.
I want to open our project here, drag the
| | 00:59 | HTML file into the browser, and this is
what our HTML file currently looks like
| | 01:05 | and that we are going to be styling.
| | 01:09 | So let's take a look at that Photoshop file.
| | 01:12 | We have this big white box that's our page wrap.
| | 01:15 | That's a great place to
start, so we'll start there.
| | 01:19 | Remember we originally made that
800 pixels, so an ID of page-wrap.
| | 01:24 | We are going to set the width to 800 pixels
and we are going to centre it on our page.
| | 01:28 | We want it centered in the browser window.
| | 01:30 | You can't see that it is centered in
the Photoshop file of course, but that's
| | 01:34 | what we are intending on the web.
| | 01:36 | You normally do that with CSS with
margin 0 auto. This is short hand for
| | 01:41 | the margin property.
| | 01:42 | It means 0 margin top and bottom and
automatic margin left and right, which
| | 01:46 | does the centering.
| | 01:47 | But we really not have 0 margin on the
top and bottom. We have about 30 pixels
| | 01:53 | on the top which we can see in the
ruler and may be 10 pixels after the bottom
| | 01:57 | of this white rectangle and before the text.
| | 02:00 | So we will put 30 pixels, 10 pixels here.
| | 02:05 | That means 30 pixels on the top,
automatic margin left and right does the
| | 02:09 | centering, 10 pixels on the bottom, and
we will make sure that the background is white.
| | 02:15 | So now let's deal with outside
here, this whole outside region.
| | 02:19 | Now the nicest way to handle that
is to style the HTML element itself.
| | 02:24 | That ensures that just everywhere,
everything that you see is going to be
| | 02:27 | covered in that background.
| | 02:29 | We can't just set our color like gray
because our background actually has that
| | 02:33 | noise texture on it.
| | 02:35 | So if we zoom in here, you
can really see that noise.
| | 02:37 | The cool thing about a noise
pattern is it's very easy to repeat.
| | 02:41 | I can actually just take a small
section of it, I grab the Crop tool and I am
| | 02:47 | going to press Return here and just have
our screen really just be that tiny bit
| | 02:51 | that I just cropped out. Save that for
Web & Devices. We will make it a JPEG,
| | 02:57 | which is going to compress it really small.
| | 02:59 | It's only 684 bytes.
| | 03:01 | I am going to hit Save, and I am
going to save it our project files on the
| | 03:05 | Desktop here into our images folder
and I am just going to call it bg.
| | 03:10 | That's our background.
| | 03:12 | Now I am going to jump back out of
this so I don't accidentally save our
| | 03:17 | Photoshop file zoomed in like that.
| | 03:19 | That wouldn't be good.
| | 03:20 | And come back over to our CSS file, and
on the HTML element, I am going to say
| | 03:26 | we want the background of it to be, well
we will make it black. We won't see black
| | 03:32 | because it's going to be
completely covered by this image.
| | 03:35 | So it's actually in the images folder,
bg.jpg, and if we don't pass it anything
| | 03:42 | else here it's just going to mean please
repeat these images wide and far as you can get.
| | 03:46 | So you will never see any black but if
this image fails to load, it would be
| | 03:50 | black and there it still be some
contrast and that would be good.
| | 03:52 | So I am going to hit Save there and
we can jump back out to the web and see
| | 03:56 | if that worked for us. Now it did!
| | 03:58 | Now if we make the browser window wide
enough, you will see that texture back
| | 04:02 | there and you can see how it
just repeats pretty seamlessly.
| | 04:05 | You can still see the noise but it
looks pretty good there and then the white
| | 04:09 | from our page wrap, so
that's looking pretty good.
| | 04:11 | Structurally we have already come pretty
far here, very nice. Our header though,
| | 04:17 | we need to deal with that.
| | 04:18 | So let's think about the header.
How does it look in the HTML?
| | 04:22 | It's this bit here called header.
| | 04:25 | So we know it's display block, because
in our HTML header has display block.
| | 04:30 | So it's going to default to 100% wide.
| | 04:33 | We could do something like padding:
20px on it and just kind of see with that does.
| | 04:39 | It's going to push everything in this
block, this kind of invisible black on the top,
| | 04:44 | now it has 20 pixels of
padding to it, so that's neat.
| | 04:47 | We can accomplish in our design these
lines by just using borders, so we don't
| | 04:52 | even have to use images for that.
| | 04:54 | So we will say border-bottom is one
pixel solid and then we'll just kind of pick
| | 04:59 | a gray color like 666.
| | 05:03 | Come back up to the web.
I'm going to see what that did.
| | 05:06 | It makes a perfect line
there just like we want it to be.
| | 05:09 | Now it's a padding of 20 pixels, maybe
we should push this over to make room
| | 05:13 | for the logo up here.
| | 05:15 | How far should we push it?
| | 05:16 | Looks like, I don't know, maybe 250 pixels.
| | 05:21 | So instead of padding 20 here we will
do like padding 20px 20px 20px and then
| | 05:26 | the last one is 250px.
| | 05:29 | So how that works is like a clock.
This is like 12 noon up and then you go
| | 05:33 | clockwise on top, right,
bottom, left is the last one.
| | 05:37 | Hit Save there and take a look.
| | 05:39 | So it's just going to push that
over and make room for that logo.
| | 05:41 | That's pretty cool.
| | 05:42 | Now it's not the right font, is it?
| | 05:45 | Of course, we got Helvetica going
here and kind of a lighter gray, so
| | 05:49 | that's that h1 tag.
| | 05:50 | Well let's make-- target all h1s may be
and say that the font there is really
| | 05:57 | Helvetica, we have to declare size
though may be 36 pixels of Helvetica, and we
| | 06:03 | can declare fall back fonts like Arial and
then just generically San-Serif. That's cool.
| | 06:09 | In our HTML you will notice Widget
Corp is lowercase but here it's uppercase.
| | 06:13 | So we could just do Widget Corp here,
but that's not the right way to do it.
| | 06:17 | If one day we decide that we don't like
uppercase anymore, instead of having to
| | 06:21 | change the markup, we can change the CSS.
| | 06:24 | And it's generally little smarter.
| | 06:25 | So we will say text-transform:
uppercase and it's not pure black.
| | 06:34 | This is going to default to pure black.
| | 06:35 | We will make the color the
same as the rule underneath it.
| | 06:40 | Check on our progress. Doing pretty good.
| | 06:43 | There is a subtle little shadow here.
| | 06:45 | If I zoom way in on this,
we add a shadow to that.
| | 06:49 | Let me sample that color from Photoshop and
grab it out here. We are going to use that.
| | 06:55 | I opened up the Color
Picker and grab that value.
| | 06:59 | We can set that shadow by using text shadow.
| | 07:02 | So we will say text-shadow and how
far to the right and down do we want it?
| | 07:08 | Maybe 2 pixels and how much do we want
it to blur? Zero pixels and then that code.
| | 07:14 | Hit Save and we'll get that
subtle shadow going on there.
| | 07:18 | That's looking pretty good.
| | 07:19 | No this isn't the placement
we want for that certainly.
| | 07:22 | It more or like kind of goes over here.
| | 07:24 | Let's take a look in the HTML.
| | 07:26 | It's this paragraph tag within the header
and it's the only paragraph tag in there.
| | 07:31 | So we can target it uniquely with
something like header p. Now we want to place
| | 07:36 | it just where we want it, just over here.
| | 07:38 | So we can do that generally when you
have a like this exact place you want to
| | 07:42 | put something is with position: absolute.
| | 07:44 | You got to be really careful with
position absolute though. What we want to do
| | 07:50 | is maybe place it like 20 pixels in
from the right and we will see what
| | 07:54 | happens from the bottom.
| | 07:55 | From this block, notice how it's kind of
measuring with my mouse from this block
| | 08:00 | and to sort of limit position absolute
| | 08:03 | to be within these boundaries, we
will make the header position: relative.
| | 08:11 | So we will say in from the right, may
be 20 pixels and from the bottom we will
| | 08:17 | just put like 0 from for now.
| | 08:20 | You see what happened there.
| | 08:23 | Now our box collapsed because it
disappeared from here, but it pushed right over here.
| | 08:28 | So we'll make that bottom little taller,
maybe also 20 pixels, in the right maybe
| | 08:33 | 30 pixels, and that's going to work
on positioning that more properly, more
| | 08:38 | like how we want it.
| | 08:39 | So still have to deal with that logo, now
maybe we should think about that right now.
| | 08:42 | Here is the logo.
| | 08:45 | We can find that in our Photoshop file.
| | 08:48 | One of quick way to find it is just
grab this black pointer and just kind of
| | 08:52 | Command+Click on it.
| | 08:53 | It's going to tell you what folder
it's in, and that's easier to find.
| | 08:56 | And if I Option+Click on this little
eyeball here on this layer, it's going to
| | 09:00 | turn off everything except for it.
| | 09:03 | That can be convenient because I am trying
to just get a tight crop of their logo here.
| | 09:07 | I'm going to go under Image then and
Trim, so it's going to trim away every
| | 09:11 | transparent pixel here, so we just
get a nice tight crop of this logo and
| | 09:16 | then Save for Web & Devices and use PNG-24
here to make sure it's nice and alpha-transparent.
| | 09:21 | I am already in the images folder.
| | 09:24 | I am going to call this logo. Back out of that.
| | 09:29 | Okay, so what is the logo?
| | 09:31 | If we look in our HTML's div with an
id of logo. We will go into our CSS here
| | 09:38 | for logo, make a new selector for it, logo.
| | 09:46 | We want it to be absolutely positioned as well.
| | 09:50 | Now we are going to give it a background
image of that image that we just created.
| | 10:00 | Now we are going to have do ../,
because the CSS files are located one level
| | 10:04 | deeper in our images folder.
| | 10:09 | And we want to make sure
that it doesn't get repeated.
| | 10:12 | It's not going to matter very much because we
need to know the exact width and height of it.
| | 10:16 | Let's jump back to Photoshop and we
will move forward after that Trim and just
| | 10:21 | check out what the size of this is
exactly. 295X191, so a width of 295 pixels, a
| | 10:30 | height of 191 pixels. That's cool.
| | 10:35 | That should do us there.
| | 10:36 | Now we set position: absolute, but we didn't
tell it where we want it to be position absolute.
| | 10:41 | Now the bounding box for this, it's within
the header. So that should work for us okay.
| | 10:46 | Only if we take a look at the Photoshop
file, it's actually has negative values.
| | 10:53 | Top 0, left 0, would be this
exact little point right here.
| | 10:56 | It's actually you know maybe now
50 pixels left and -30 pixels tall.
| | 11:02 | So let's give it negative values here.
| | 11:04 | So top of maybe -25 pixels, left -50 pixels.
| | 11:11 | Save and take a look at what we did there.
| | 11:13 | Now we have got our logo in there,
hanging off the side and to the top just
| | 11:17 | kind of how we want it there.
| | 11:19 | So we have made great progress on
this structure but you can tell from the
| | 11:22 | Photoshop file, it's not
exactly quite matching yet.
| | 11:25 | There is a lot of work yet to be done.
| | Collapse this transcript |
| Styling the Navigation panel| 00:00 | So our CSS is really coming along here.
We have some good structure built and
| | 00:04 | our header has taken shape.
| | 00:07 | It's changed a little bit since
you've last seen it and then I have this
| | 00:10 | vertical bar added here which I added
with a border-left on the H1 tag and this
| | 00:15 | mailmark added in the upper-right by giving a
background image to the page wrap, this graphic here.
| | 00:22 | So now it's time to dig into the
Sidebar and specifically the navigation.
| | 00:26 | Now, you can see we're looking at this page on
the web that our navigation is way down here.
| | 00:32 | Now, that's not where we want it
of course. We want it to be up here.
| | 00:35 | We want our whole Sidebar over here on
the left block, and the main content here
| | 00:40 | in a bigger area on the right.
| | 00:42 | We can accomplish that layout pretty
easily just using float left and float
| | 00:47 | right on those two things.
| | 00:48 | Our sidebar is called an aside.
| | 00:52 | We'll make it float left and
we'll give it a width of 275 pixels.
| | 00:57 | Now, our main content is float right,
and we'll give it a width of 500 pixels.
| | 01:06 | So if we save that and go back out to the
web it's going to look broken, fair warning.
| | 01:11 | Where did all the white go? Very weird.
| | 01:14 | It's because our parent
container collapsed upon itself.
| | 01:18 | Now, when a parent contains floated
items like that it doesn't know how to
| | 01:23 | calculate its own height and it
just basically falls into nothing.
| | 01:27 | Now, there're a few
different ways you can handle it.
| | 01:29 | My favorite way is by using what's
called the clearfix. All one word.
| | 01:34 | If you want to learn more about
specifically how it works, you can google it.
| | 01:38 | Pretty easy to find but I'm just
going to copy and paste it into this code
| | 01:42 | and we'll look at it.
| | 01:43 | Now, it has a class name of group.
| | 01:47 | Could be anything, could be
clearfix if you want it to be.
| | 01:50 | I like group just because I like that word.
| | 01:53 | It kind of makes sense to me.
| | 01:54 | It means it's wrapping multiple things.
| | 01:56 | Now there is some backslashy stuff in here.
| | 02:00 | That's just ensuring that it's
going to work in all browsers.
| | 02:03 | So to use the clearfix we have to
apply this class of group on the element we
| | 02:08 | want to clear and in our
case it's the page-wrap.
| | 02:10 | So let me add a class of group to this
page-wrap, and you'll see if we refresh
| | 02:16 | in the browser, we're going to be all good.
| | 02:19 | Now, I've got to save the CSS file for
that to take effect. We're all good.
| | 02:25 | No problem.
| | 02:25 | So we have our sidebar in place here.
| | 02:28 | I mean, it's tucked up underneath the
logo, but we can fix that with just a
| | 02:32 | little top padding on the aside.
| | 02:34 | So we'll apply padding here.
| | 02:36 | Remember it's like a clock. We'll say
70 pixels on the top, but nothing for all
| | 02:41 | the rest of the values for now.
| | 02:44 | That pushes it down just wherever you want it.
| | 02:46 | Now, each one of these is a link.
| | 02:49 | So let's look at our Photoshop file
and see what we are trying to match.
| | 02:52 | We want to be able to click anywhere
in this block and go to the appropriate
| | 02:56 | page that this is navigation for.
| | 02:58 | So let's make this whole block our
anchor link, and let's take a look at the
| | 03:03 | HTML that makes that area.
| | 03:08 | It's this here, down here.
| | 03:11 | So it's within the nav tag, within this
unordered list, within these list items.
| | 03:15 | These anchor links are
what we're trying to style.
| | 03:19 | So in the CSS we kind of follow the trail there.
| | 03:22 | nav ul li a. We'll make them display
block because anchor links by their
| | 03:28 | nature are in-line elements, and we'll start
just describing what we're seeing here a little bit.
| | 03:36 | There's some padding on each of them.
| | 03:38 | Maybe 10 pixels all the way around.
Except for in the left it's a little wider,
| | 03:43 | so I'll say maybe 25 pixels for that value.
| | 03:46 | The color is white.
| | 03:48 | The font size is a little bigger
than the default. Maybe 16 pixels.
| | 03:55 | Text-decoration, we're going to set
to none, anchor links by default are
| | 03:59 | underlined, so that's going to
get rid of that underline for us.
| | 04:03 | We'll just give it a background color.
| | 04:06 | Maybe just some dark gray for now and
we'll deal with this coloring here in a minute.
| | 04:11 | You can see that they're set apart
from each other a bit, maybe 5 pixels.
| | 04:15 | So none on the top, none on the right,
5 pixels in the bottom, and none on the left.
| | 04:20 | That's how those shorthand properties work.
| | 04:22 | I'm going to hit Save.
| | 04:23 | We'll go back up to the
browser to see how we're doing.
| | 04:27 | So, pretty good, not bad.
| | 04:28 | We do have these little bullet
points that are coming from the list.
| | 04:31 | We should get rid of those.
| | 04:33 | Those come from the list itself.
| | 04:34 | So if we say nav ul, list-style none,
and reload the browser, those will
| | 04:43 | go away, no problem.
| | 04:44 | Looking pretty good.
| | 04:45 | Let's handle the coloring and do a little
thinking in Photoshop here for a minute.
| | 04:50 | So there's four navigation items right
now on top of each other and they kind of
| | 04:55 | follow a nice color pattern, from blue to
a little bit lighter blue, to yellow, to a green
| | 05:01 | to kind of a muddy yellow.
| | 05:04 | I think if we were to switch some of
these things around, and we've got to be
| | 05:07 | smart and assume that maybe our client will
someday want to switch these things around,
| | 05:11 | I think the color pattern that's
going on here is more important than the
| | 05:16 | specific tie between what
the link is and the color.
| | 05:19 | So we kind of want to color
in the right order no matter what.
| | 05:23 | We're going to do that in a special
way by using the nth-child selector.
| | 05:28 | So you notice that they're all grey now,
and instead of having them be gray, we'll
| | 05:33 | have the default be with
that top one, is this blue.
| | 05:36 | So let's grab this blue color and replace this.
| | 05:42 | We're going to say the background-color
is that blue, and then we'll reload the
| | 05:48 | browser, and they're blue.
| | 05:49 | Now, we want to target the
second one, just the second one only.
| | 05:54 | I am going to sample the color there,
grab that color code from the color
| | 05:57 | picker, and then say nav ul li and we'll
use this nth-child selector, it looks like
| | 06:04 | this, and say we just want
number 2. The second one.
| | 06:07 | So that anchor link within that,
we want to have a background color of this
| | 06:13 | that we just sampled.
| | 06:15 | Let's check that out in the browser.
| | 06:18 | Second one got the color perfectly.
| | 06:20 | That's how you can target individual
elements depending on their position.
| | 06:25 | So we have two other positions to deal with.
| | 06:27 | So let me copy and paste the CSS
there and say three and four and then copy
| | 06:33 | those color codes from
Photoshop as I sample them.
| | 06:36 | Copy the green. Copy the yellow color.
| | 06:41 | We'll go to the web and see
how we're doing. Pretty good!
| | 06:48 | Pretty good, perfect! Looking very good!
| | 06:50 | Now, in Photoshop, another thing,
the last thing we need to deal with are
| | 06:54 | these little kind of nubs that stick
down, giving us that ribbon effect, that
| | 06:58 | kind of 3D effect there.
| | 07:00 | We're going to need a separate
HTML element to deal with this.
| | 07:04 | So let's jump over to the
HTML and give us that element.
| | 07:07 | It could be anything.
| | 07:09 | We're just going to give it a span.
| | 07:11 | I am just going to chuck that right within
the anchor tag on each one of our menu items.
| | 07:16 | It gives us a little bit of
a thing to play with there.
| | 07:19 | So let's go ahead and save that, and
we're going to want to target it uniquely.
| | 07:27 | So let's say nav ul li a span.
| | 07:33 | We're going to position them absolutely,
so we can target exactly where we want
| | 07:39 | them to be and remember when we use
position absolute, the parent of it needs to
| | 07:44 | have position relative so we can kind
of make sure that it's relative to what's
| | 07:48 | going on here. Otherwise if we give it
position absolute, it'll be relative to
| | 07:52 | who knows what? Maybe the body or who knows.
| | 07:55 | So we'll make sure that the
anchor tag has position: relative.
| | 08:02 | It's not going to move it.
| | 08:04 | It's just going to set the context for
us and then we want to position it with
| | 08:08 | a right value of 100%.
| | 08:10 | So no matter what, as wide as this
thing is, we're going to start counting at
| | 08:15 | the way left edge here.
| | 08:17 | That's what right at 100% is able to
do, and the top value of maybe 5 pixels
| | 08:22 | will push it down, and give a width
15 pixels, and then a height of however
| | 08:28 | tall that anchor link was, 100%.
| | 08:33 | So let's just give it a background
color of that blue for now that we used as
| | 08:38 | the default and see how
we're doing in the browser.
| | 08:43 | Very good! We've got the nub
sticking out here, but they're all blue.
| | 08:49 | So let's deal with that coloration first.
| | 08:51 | All we have to do is just copy this
selector, put a comma so it's kind of a
| | 08:56 | multi-selector, put a span after this,
so that it will share the color properly,
| | 09:01 | and we'll do that on all three of these.
| | 09:11 | Save it, and reload, and now we
have the color working out nicely.
| | 09:15 | It's just that the color, they just bleed into
each other. We need to give it that 3D effect.
| | 09:20 | That little shadow that sticks out.
| | 09:21 | So let's jump into Photoshop and make
that shadow just a really tiny little box.
| | 09:27 | 12 pixels wide, 10 pixels tall, and
I'm going to go ahead and zoom-into it so
| | 09:32 | you can see real close what's going on.
| | 09:34 | I'll double-click the Background layer
to unlock it, select all and delete the
| | 09:41 | white that's by default there, and
now this has a transparent background.
| | 09:44 | I'm going to grab the Gradient tool.
| | 09:48 | Make sure that I have black selected
as my color, and then make sure that our
| | 09:53 | gradient is on the second one in here,
this foreground color to transparent, and
| | 09:59 | then hold Shift, and kind of just drag
a little bit of background in here and
| | 10:04 | then knock down the Opacity
maybe to 40% on that layer.
| | 10:08 | I'm going to save this image
out as a graphic called navshadow.
| | 10:16 | Jump back over to our CSS.
| | 10:18 | We're going to use that on the spans,
so it's going to have a background image
| | 10:25 | of url(../images/navshadow.png).
| | 10:33 | We're going to make sure that it's
positioned on the right, starting at the top,
| | 10:40 | and it's going to be able to repeat vertically.
| | 10:44 | Let's hit Save and see how
we're doing there. Great!
| | 10:48 | Now, we have that shadow giving it
that 3D effect in the navigation.
| | 10:52 | So that's the CSS for our navigation.
| | 10:55 | Great start as we move forward with our CSS.
| | Collapse this transcript |
| Styling the sidebar| 00:00 | Our structure is looking good, our
header is looking good, and we just finished
| | 00:04 | with the navigation.
| | 00:05 | So let's finish off styling of our sidebar.
| | 00:08 | The last thing we have to do here are
these little boxes over here, so if we
| | 00:13 | look in the Photoshop file, this is what
we are trying to accomplish, and now if
| | 00:18 | we look in our index.html file, each of
those boxes are within these divs here.
| | 00:25 | Div with a class of widget.
| | 00:27 | So that's what we are going
to working with in our CSS.
| | 00:30 | Now I'll scroll to the bottom here, just
after the navigation, and anything with
| | 00:38 | a class of widget here is
what we are going to be styling.
| | 00:42 | Now in our Photoshop file, the only
image we are going to be need is this
| | 00:46 | gradient, little page curl
thing here. That's this layer.
| | 00:50 | I can verify that by turning at on
and off, this layer here, Sidebar Box.
| | 00:55 | So I am going to option click on the
eyeball, and get just it activated.
| | 01:01 | Then in the Image I am going to Trim and give
rid of all Transparent Pixels, so we have just it.
| | 01:06 | I am going to Save for Web & Devices and call
this image Widget Shadow and save it into our Images folder.
| | 01:18 | Now, all of our widgets here now-- I know
that little bit of confusing term here,
| | 01:23 | because we are working with the Widget Corp.
| | 01:25 | But widget is the proper term here,
because eventually WordPress is going to be
| | 01:29 | referring to these boxes as widgets.
| | 01:32 | We'll give each of these divs with a
class of widgets a background of URL,
| | 01:39 | where we go get this widget-shadow.png.
| | 01:45 | We are going to set it in the
top right with a no-repeat value.
| | 01:51 | Now if we just save that and come
out here and look, we are going to get
| | 01:54 | our shadow in there.
| | 01:56 | But the placement is a little weird.
Because the edge of this image is actually
| | 02:01 | a part of the shadow,
| | 02:02 | it doesn't line up perfectly with
our anchor links from our menu above.
| | 02:08 | We can fix that most easily by just
nudging back in the size of those links, so
| | 02:13 | if we just give each of those links
a slightly smaller width, that should be
| | 02:22 | getting lined up nicely.
| | 02:24 | Now each of those widgets will have
some padding applied to it, quite a bit of
| | 02:30 | padding, give it 30 pixels, and we'll
push it down away from the navigation
| | 02:34 | with some top margin.
| | 02:38 | Also 30 pixels will stay
geographically sound here.
| | 02:42 | So we are making good progress there.
Let's deal with this Latest Post here.
| | 02:47 | We will remind ourselves with this
is looking like in our Photoshop file.
| | 02:51 | I am going to open this up and back out.
| | 02:54 | It's the same color as this here.
So let me go ahead and sample that color.
| | 02:59 | We are displaying the latest post
from our blogs, so having the color match
| | 03:04 | the link to the blog kind of make
sense there, and we'll remind ourselves
| | 03:08 | with the HTML looks like.
| | 03:10 | It's this h4 tag within
the div with a class of widget.
| | 03:15 | So widget, h4, has this color that we
just copied, and it's aligned to the
| | 03:25 | right, so we will say text-align:right.
| | 03:28 | That's a little bigger
than the default font size.
| | 03:36 | See it has a little bit of a shadow
here? We are going to go ahead and copy
| | 03:40 | that same text shadow that we used on
the h1 tag for the site, so consistency
| | 03:46 | in shadowing there.
| | 03:50 | It's uppercase letters, wherein the
HTML file it's not uppercase. We will make
| | 03:56 | it uppercase, text-transform:
| | 03:59 | uppercase, and we'll give it some
margin. We'll check in and see how it is
| | 04:06 | doing in the browser.
| | 04:07 | I am going to save that, reload the browser.
| | 04:10 | Good, we are doing okay.
| | 04:15 | It's a little more spaced out
letter-wise, so we can use letter spacing.
| | 04:22 | Literally 5 pixels there, and I
think we're about where we want to be.
| | 04:27 | I think this is not bold, whereas in
the browser here we are bold, so we can
| | 04:33 | remove that bolding of font weight.
| | 04:37 | Pretty good. Now right below that in
the Photoshop mockup is this date field
| | 04:42 | here, so it's the same color. We will
make sure that we have a copy of that
| | 04:46 | color as the background this
time, instead of the text color.
| | 04:51 | So in the HTML that's a div with a class of
date here, so in the CSS we'll say widget.date.
| | 04:59 | It has a background of that color,
and the text color, it's not white.
| | 05:06 | It's a bit of a yellow color.
| | 05:08 | We will try and get sample of it.
| | 05:20 | It has a little padding of its own.
| | 05:22 | It's also aligned to the right, but
the special part of this is how it is
| | 05:30 | aligned to the left here, all the way
to the edge of the page, but we have
| | 05:34 | padding on this widget
that's going to affect that.
| | 05:37 | So let's save and can see
where we are in the browser.
| | 05:40 | Well, that background color didn't apply,
because I spelled it wrong. So we'll
| | 05:46 | fix that and reload.
| | 05:48 | You can see it's pushed in this 30 pixels.
| | 05:52 | Now that's what we told it to do, but
we want to stretch it back out. So how we
| | 05:56 | can do that is just giving it some
extra width and then pulling it back to the
| | 06:00 | left with a negative margin.
| | 06:03 | So we will make its width maybe
235 pixels and use some margin.
| | 06:10 | Now we're going to push to the bottom,
so maybe 12 pixels in the bottom, but
| | 06:14 | also to the left -30 pixels.
| | 06:16 | So if we Save there and reload,
it should touch that edge just like we want to.
| | 06:21 | There are few other things that we need to
style with that. Let's take a look in Photoshop.
| | 06:27 | It's uppercase, a little smaller of a font
size, and letter spaced out a little bit.
| | 06:32 | Not quite as much as the post though, and
we should be right on with that. Yeah, perfect!
| | 06:54 | Now we have the title for latest post.
We will make that bigger and that's an h5 tag.
| | 07:00 | That's as low as we are going with other tags.
| | 07:04 | Say the font-weight of it
is also normal not bold.
| | 07:09 | It's a little bit lager though actually,
18 pixels in size, and we will push the
| | 07:14 | text below it down a little bit as well.
| | 07:20 | So that's looking good. Now just the
last thing as this text right here below it.
| | 07:25 | That's a p tag, so widget p, and now we
will make the color a light gray color,
| | 07:33 | and its font size much smaller at 12 pixels.
| | 07:36 | So if we hit save and reload, there
we have a nice looking sidebar unit.
| | 07:42 | It's looking just like our
Photoshop version, so with some very minor
| | 07:47 | alterations, we can fix that bottom up,
just changing a few colors and we will be
| | 07:52 | ready to style the main content area.
| | Collapse this transcript |
| Styling the home page, pt. 1| 00:00 | So, we're ready to start styling
the main-content area of our homepage.
| | 00:05 | Now, we're going to do a
little bit of prep for this.
| | 00:08 | Because we're going to be styling this
area of the homepage, it's likely that
| | 00:12 | the CSS that we're using to style this
is unique to the homepage, in that the
| | 00:17 | CSS doesn't need to be loaded
when we make these other pages.
| | 00:20 | It's kind of unique to the homepage.
| | 00:22 | So, I'm going to make a new CSS file
in our CSS folder of our project that I
| | 00:28 | have open here in TextMate.
| | 00:29 | I'll call it home.css and then in our
index file, I am going to load that up
| | 00:36 | with another style sheet and I'll just
make a note here and a comment that says
| | 00:43 | only load on homepage, in
case we choose to do that later.
| | 00:49 | So now both of these CSS files will
be affecting this page in the browser.
| | 00:55 | So, let's take a look at the Photoshop
file and what we're trying to match.
| | 00:59 | I'll zoom in a little bit
so you can see what's going on.
| | 01:02 | We have this paragraph here,
and this blockquote here.
| | 01:05 | So, we're going to start with that.
| | 01:06 | I can notice a few things
in the browser right away.
| | 01:10 | Font size is too big.
| | 01:12 | It's too close to the header.
| | 01:13 | It's too close to the edges over here,
and the quote has no styling at all.
| | 01:18 | So, there is a number of things that
we're going to need to accomplish here.
| | 01:22 | So, let's take a look at the HTML for
that area in our index.html file, and here
| | 01:29 | is the header and here is the main-content area.
| | 01:31 | It's these two things
that we're trying to style.
| | 01:34 | We have the foresight here when we
wrote the HTML that we gave this "intro"
| | 01:38 | paragraph an id of "intro," just
thinking that it might be a little different
| | 01:42 | than other paragraphs on
the site. Probably will be.
| | 01:45 | So, if we go into our home.css file,
we can target that intro, and take care
| | 01:52 | of that spacing issue.
| | 01:54 | We could give it a top margin and bottom margin.
| | 01:58 | Now, when you only give margin two
parameters like this, the first one means top
| | 02:03 | and bottom and the second
one means left and right.
| | 02:06 | So we want 20 on the top, 20 on the bottom.
| | 02:08 | That's going to work for us, and the
line-height here, it's pretty tight
| | 02:12 | with the line-height.
| | 02:13 | I want to make the line-height 2.
| | 02:17 | And you notice I didn't put
like 18 pixels or something there.
| | 02:20 | If you don't give it any kind of unit like
pixels or ems or whatever else, it's a multiplier then.
| | 02:28 | So it's going to be twice as high
as what the font size for that is.
| | 02:34 | The font size is also a little big, and
we can go ahead and change it right here.
| | 02:37 | We can go 12 pixels where we will
make it a bit smaller, but I'm starting
| | 02:42 | to think we're doing that a lot and
maybe we should set the default font size on
| | 02:46 | our page to 12 pixels, so that'll just
kind of be the default size, and anything
| | 02:51 | we want to adjust, we can do
it individually from there.
| | 02:54 | So we can do that in the
style.css file on the body itself.
| | 02:58 | So, if we change that to 12 instead of
14, it's going to cascade down to this
| | 03:03 | paragraph and that will be 12 pixels.
| | 03:05 | So, let's see how we're doing in the browser.
| | 03:08 | So, the font size is smaller.
The lines are spaced out a bit.
| | 03:12 | It's properly distanced from this top line.
| | 03:15 | It's still pretty tight over here
though, but we can see scrolling down the
| | 03:18 | page that everything is too
tight to that edge over there.
| | 03:21 | It's kind of uncomfortable.
| | 03:22 | Over here, we space things in
about 30 pixels from that edge.
| | 03:25 | So let's get that same 30 pixels over here.
| | 03:29 | Now, we could do it right on this
paragraph, but the problem is all the way
| | 03:33 | down, so we might as well deal
with it on the container itself.
| | 03:36 | Go into the style.css file and that's
the main-content div. So it's this here.
| | 03:42 | I'm going to add some
padding on the right of it.
| | 03:45 | So, padding, and it's like a clock.
| | 03:47 | Top, 30 pixels on the right,
and then none for everything else.
| | 03:52 | When we do this, we're actually
expanding the width of the overall box.
| | 03:57 | I know it says width of 500, but the overall
box in the browser is now going to be 530 pixels.
| | 04:03 | We got to be just conscientious of that,
and I'll make it 470 pixels here to
| | 04:10 | compensate for that padding that we just added.
| | 04:14 | So, when I reload here, we'll get that spacing,
but the overall box size kind of stays the same.
| | 04:20 | Now, this isn't quite lined up with
the W, how we might want it to be.
| | 04:24 | So, I can squeeze that over to the right
a little bit just by reducing the width
| | 04:28 | of the main-content area.
| | 04:30 | Just maybe make it like 67 or something,
and that's going to squeeze over to the
| | 04:36 | right and line that up nicely.
| | 04:37 | It's also a bit too long.
| | 04:38 | Now, I know this is just fake text,
but when we ultimately show this to our
| | 04:43 | client and they're replacing fake text
with the real text, it's going to give
| | 04:47 | them a queue for how
much text they should write.
| | 04:49 | So let's remove a little bit of that
text and we can just remove a bit.
| | 04:58 | Not scientific here, just so we get down
to about four lines of text. Looking good.
| | 05:03 | Now we have to now we have
to deal with this blockquote.
| | 05:05 | Let's take a look in
Photoshop at what that looks like.
| | 05:07 | It's this, and remember we wrote it
into our HTML literally with text. We gave
| | 05:12 | it this id of "main-quote".
| | 05:15 | Now, this is going to not force it,
but it just is accessible and semantic.
| | 05:19 | It's the right way to do a blockquote,
even though we're actually going to make
| | 05:23 | this an image in our actual design.
| | 05:25 | So, let's get a nice crop of this.
| | 05:27 | I'm going to Save for Web & Devices.
| | 05:33 | I'll make mine be a PNG-8, just when
you're ever doing this, saving for Web &
| | 05:39 | Devices, make sure that you're looking
at the file size, making sure that it's
| | 05:42 | not enormous, like if they said 200K down here.
| | 05:45 | That's just too big for an image of this size.
| | 05:48 | But 20K is probably fine
here and that it looks okay.
| | 05:52 | It doesn't look blurry or
have little aberrations anywhere.
| | 05:56 | Now, I'm going to go ahead and save
that out to our working directory.
| | 06:00 | We'll call it mainquote. Okay.
| | 06:06 | Now, in our CSS file, we have that id.
| | 06:11 | That id again is coming from the
id that we put on it, main quote,
| | 06:15 | "main-quote", and we're going to put
it in our home.css file, because that's
| | 06:21 | specifically from the homepage, so main-quote.
| | 06:27 | We'll give it that background of the
image that we just cut out, so I'll make
| | 06:36 | sure that we don't want it to repeat.
| | 06:39 | Now, just to verify, you've got to check
our work at least once in a while here.
| | 06:44 | We're going to go out to the Desktop,
look in our working directory and make
| | 06:48 | sure that we have it named exactly right,
mainquote, no dash in there. That's perfect.
| | 06:53 | Now, we're going to check on the dimensions.
| | 06:56 | 475 pixels wide, 188 pixels tall.
| | 07:09 | Now, the trick here, what we're
doing here, normally this would be a box.
| | 07:13 | This is going to be a box.
| | 07:15 | We gave it the size that we wanted to.
| | 07:17 | It's going to have a background, but
you'd be able to see this text right over it.
| | 07:21 | What we're doing is
actually replacing this text.
| | 07:24 | So we're going to use a little trick
here and just kick the text off the page,
| | 07:27 | so you can't see it.
| | 07:28 | With a large negative value,
we'll kick it right off the page.
| | 07:35 | So, let's reload and see what we got. Awesome!
| | 07:38 | We got the image in there.
| | 07:40 | Now, it's not lined up exactly right.
| | 07:42 | In our design, there's no gutter over here.
| | 07:44 | So, let's remove that.
| | 07:46 | We can do that with a little--
I guess left padding or left margin will
| | 07:51 | kick that over just how we wanted to, and
we should push this stuff down a bit as well.
| | 07:54 | So let's say margin, none on the top,
none on the right, maybe 20 pixels on the
| | 08:02 | bottom, and we'll try 20 pixels
on the left. See how that goes.
| | 08:07 | Really close, maybe two more pixels
on the left, and it's going to line up
| | 08:12 | perfectly against that edge.
| | 08:14 | So, our homepage is looking okay.
| | 08:16 | We just have a little bit more work to
do on the homepage, which we'll do next.
| | Collapse this transcript |
| Styling the home page, pt. 2| 00:00 | There is just a little bit more of
the main content area of our homepage
| | 00:04 | that needs to be styled.
| | 00:06 | It's this section here.
| | 00:08 | So let's get to that.
| | 00:09 | Let's take a look at the Photoshop
file that we are trying to match, and
| | 00:13 | it's this region here.
| | 00:14 | So it's this Featured Widgets text and
then our list of two widgets here with a
| | 00:19 | title, description, their image,
and this View Product button here.
| | 00:23 | So that's what we are going to be styling.
| | 00:25 | Let's take a look at the
HTML that covers that area.
| | 00:31 | It's in our index.html file here.
| | 00:33 | I have our whole project opened in
TextMate and it starts right here.
| | 00:37 | It's just this h2 tag of Featured Widgets,
and then each of those two widgets is
| | 00:42 | wrapped in this list with
an ID of featured-widgets.
| | 00:45 | So let's style this h2 tag first.
| | 00:48 | Now it doesn't have any special IDs
associated with it, so let's actually put
| | 00:52 | the styling for this h2 tag in our style
.css file, so that we can re-use it on
| | 00:58 | other pages if need be.
| | 00:59 | So all h2 tags in the site
are going to look like this.
| | 01:05 | It's going to have a color associated with it.
| | 01:08 | It's that blue color.
| | 01:09 | Let's grab that blue color from
actually the first navigation item in our list.
| | 01:15 | So if we look at that, it's this Buy
Widgets and that's kind of cool to tie
| | 01:19 | the color of Buy Widgets into what the
featured widgets are. So that's working.
| | 01:23 | Make the color of that color.
| | 01:31 | It's all uppercasing-in, so we
will say text-transform upper-case.
| | 01:38 | It has a bit of a shadow to it.
| | 01:40 | We are going to go ahead and steal
the shadow that we use for the h1 tag.
| | 01:44 | It's not bold and h2 tags are by default bold.
| | 01:47 | So we will say font-weight is
down to normal. It's biggerish.
| | 01:53 | We will set that size up a little bigger.
| | 01:56 | We will push some things
below it down with margin.
| | 02:01 | We will see how we are doing in the browser.
| | 02:04 | Looking pretty good!
| | 02:05 | It's just tight to each other.
| | 02:07 | So we forgot the letter spacing.
| | 02:09 | So let's say letter-spacing, literally
the space between two letters there, and
| | 02:15 | pull it out a little bit.
| | 02:16 | So that's looking good.
| | 02:17 | Now, we have the two widget areas here.
| | 02:20 | Again, just as reminder, that's
this ul tag, unordered list with an ID
| | 02:25 | of featured-widgets.
| | 02:27 | So because this is specific to the
homepage, we'll put it in the home.css file.
| | 02:31 | Say featured-widgets.
| | 02:35 | The thing I am going to do
first is list-style: none.
| | 02:41 | It's going to get rid of these
bullet points that we don't need.
| | 02:43 | We are going to set these each
of those list items in this list,
| | 02:49 | featured-widgets, list
item, to position: relative,
| | 02:55 | because we are going to be doing
absolute positioning within it.
| | 02:58 | So we are just setting that context
again, and then give it some bottom
| | 03:02 | margin, so that we can push that second one
away from the first one, just a little bit there.
| | 03:12 | Now, we want to be styling this title.
| | 03:14 | So that's an h3 tag within here.
| | 03:17 | Probably not going to be like
h3 tags on the rest of this site.
| | 03:20 | So let's make the
selector for it fairly specific.
| | 03:28 | We'll give it that same
background as the color of the h2 tag.
| | 03:32 | So we'll steal that.
| | 03:37 | That's that blue color as the background.
We'll make the actual color white, not
| | 03:42 | quite as big in the font
size world. also not bold.
| | 03:47 | Let's put some padding around it.
| | 03:52 | We are going to kick it in from the left.
| | 03:55 | So before I do that, let's see
what we are doing in the browser.
| | 03:58 | It's looking good, but in our mock-up,
we are actually going to get this image
| | 04:03 | and put it up here, kind
of breaking into this bar.
| | 04:06 | So we are going to kick the actual text
inside this bar over to the right.
| | 04:10 | Take a look in Photoshop,
so you can see what I mean.
| | 04:13 | Kick that text over to the right,
so there is room for this image.
| | 04:16 | So let's kick it over 200 pixels.
| | 04:21 | You can see what that does in the browser.
| | 04:24 | Just moves it over.
| | 04:25 | Now, we need to move this text over as
well and that's a paragraph tag in there.
| | 04:29 | So we'll say featured-widgets li p, and
to kick it over will just give it some
| | 04:36 | padding on the left.
| | 04:37 | So padding in the left.
So top: none, right: none, bottom: none, left:
| | 04:43 | 200 pixels but actually on the top it's
kicked over 204 pixels because of the padding.
| | 04:49 | So we will actually make this
204, so it's lined up perfectly.
| | 04:53 | I will make the color not quite black
but a dark grayish just to give it some
| | 04:59 | differentiation and space it out a
little bit with that line height and we'll
| | 05:07 | give it some top and bottom padding as well.
| | 05:09 | We'll save and see how
we are doing there. Great!
| | 05:12 | It's lined up right and we
have room now for this image.
| | 05:15 | So let's get it up there.
| | 05:16 | That's why we set that position
relative on this list item, so we could use
| | 05:20 | absolute positioning to push it up there.
| | 05:22 | It's the image that we're targeting.
| | 05:31 | If we look at the HTML, it's this image
that we are getting inside this list tag.
| | 05:39 | Say position: absolute
| | 05:42 | and it's actually going to break out at
the top a little bit. Just like we did
| | 05:45 | with the logo on the top, we are going
to kind of mimic that look, giving it
| | 05:48 | -10 pixels so it's higher than the top
and we'll set the left to 0 and check
| | 05:55 | out what happens there. Very cool!
| | 05:57 | We moved that up right
there just how we wanted to.
| | 06:01 | One last step, this View Product button.
| | 06:03 | Let's take a look in Photoshop.
| | 06:05 | This is the design that we are trying to match.
| | 06:07 | Now this is a generic button style.
| | 06:09 | We kind of just want to be able to
apply a class of button to anything in the
| | 06:14 | HTML and have it look like this.
| | 06:17 | So we are going to go into
our actual style.css file.
| | 06:20 | I am going to paste in some code
here just because it's a lot of lines.
| | 06:24 | Then we are going to look at it.
| | 06:27 | Right at the top it's this generic
class that we can use with anything.
| | 06:31 | So anything with the class of button here
is going to have all the stuff applied to it.
| | 06:35 | Now, this is the CSS3 way of applying
a gradient without having to use images.
| | 06:41 | So in Mozilla, that's Firefox browsers from
top to bottom is going to be this gradient.
| | 06:47 | It's going to start here and fade to
this color and this covers WebKit browsers
| | 06:51 | like Safari and Chrome.
| | 06:53 | It's going to start here and fade to this.
| | 06:55 | Slightly different syntax there.
| | 06:57 | Then browsers that don't support it
will just kind of have a default color.
| | 07:01 | It has some padding.
| | 07:03 | We just do some resets.
| | 07:04 | It has that border.
| | 07:05 | It has a shadow around it.
| | 07:07 | Then when you hover over it,
the shadow changes a little bit.
| | 07:10 | The background color changes a little bit.
| | 07:12 | So let's save and take a look at what
that button looks like in the browser.
| | 07:18 | Just how we want it to.
| | 07:19 | It has that gradient, has that shadow,
has that rollover that we want to.
| | 07:23 | So the last step is just to
position it where we want it here.
| | 07:27 | We will do that with absolute positioning
again in our home.css file. position: absolute.
| | 07:43 | And the top value, we'll push down maybe
150 pixels and to the left say 32 pixels.
| | 07:50 | Take a look in the browser.
| | 07:53 | It hasn't quite taken effect yet. Let's see.
| | 07:55 | It's not li.button.
| | 07:57 | That would be a list
item with a class of button.
| | 08:00 | We want to target child elements of the
list item that have a class. Just missed
| | 08:05 | a little space there.
| | 08:06 | I am going to hit Save, Reload, and
that's going to be then positioned just
| | 08:10 | where we want it to be.
| | 08:12 | So that completes the styling of
the main content area of our Homepage.
| | Collapse this transcript |
| Finishing the CSS| 00:00 | There is just one more thing we need
to do before the styling of our page is
| | 00:04 | complete and that's deal
with this footer down here.
| | 00:07 | So you can see that this block text
kind of outside our page wrap or
| | 00:12 | white div area here.
| | 00:14 | Let's look in the HTML and
what's going on with that footer.
| | 00:17 | Now it's after the end of the page wrap, so
that makes sense why it's not in this white box.
| | 00:22 | It has the HTML5 tag footer and
then here is the content in there.
| | 00:27 | So let's get start to styling that up.
| | 00:30 | It's going to be in the style that CSS
file, because of course the footer will
| | 00:33 | be in all of our pages and I might as
well put it in this file which we'll get
| | 00:36 | loaded on all pages.
| | 00:38 | We'll put the styling information at
the way bottom where any good footer
| | 00:43 | information should be. So footer.
| | 00:46 | Now it's not subject to the same
width, because it's outside of this.
| | 00:50 | So we're going to have to set the width
of our footer equal to the width of what
| | 00:54 | our page wrap is, which is 800 pixels.
| | 00:58 | We're going to center it with margin 0 auto.
| | 01:01 | Now we don't need to give it any top
padding, because it's already have been
| | 01:06 | pushed down a little bit from this,
but we'll give it some bottom padding.
| | 01:10 | Just push it away from the edge of
the bottom of the browser window.
| | 01:18 | We'll make sure that the color in the
footer is white as is in the mockup and
| | 01:23 | that the text is uppercase.
| | 01:27 | Then the letter-spacing is just spaced out
just a little bit to kind of look cool.
| | 01:34 | So let's save and reload and now we
have it going on pretty good there, but we
| | 01:40 | need to move this over here.
| | 01:42 | So one way that I like to that is kind
of split it in half. Split these two
| | 01:47 | area is in half make this one on the
left, this one on the right and then make
| | 01:51 | sure to set this right area to text align right.
| | 01:55 | So it's flesh again this right
edge, just like it is in our mockup.
| | 01:58 | Well, let's take a look at the HTML we
have two divs in there, one with quote
| | 02:06 | and one with copyright.
| | 02:08 | So let's style those and say quote is
half the width and float it to the left.
| | 02:19 | Copyright is half the width
and float it to the right.
| | 02:25 | We'll make sure that the text-
alignment on that right side is to the right.
| | 02:30 | We'll hit Save and reload and that's
perfect there except for one little thing.
| | 02:35 | Remember what we learned about when
you float objects in a parent it's going
| | 02:40 | to lose its height.
| | 02:41 | It's going to collapse.
| | 02:42 | So we don't have that push against the
bottom of the browser window, because the
| | 02:45 | apparent has no height.
| | 02:47 | So all we have to do fix that is go
into our index.html and give footer a class
| | 02:52 | of group which fixes that issue specifically.
| | 02:56 | We'll hit Reload and now the apparent
has that height and we can get that push
| | 03:00 | away from the bottom of our browser window.
| | 03:02 | So our footer is complete and
styled and that was our last step in
| | 03:06 | completely styling this page.
| | 03:08 | Now we have everything we need
to start moving on to creating the WordPress theme.
| | Collapse this transcript |
| Moving on: One page is enough| 00:00 | So we just finished up the HTML and the
complete CSS styling for our homepage.
| | 00:06 | In my workflow this is usually
where I stop and move on to creating an
| | 00:11 | actual WordPress theme.
| | 00:13 | It's similar to what we did in
Photoshop where we just mocked up the homepage.
| | 00:17 | We could've kept on going in
Photoshop and created the designs for all the
| | 00:21 | different pages, but we decided that
the homepage was enough for now and
| | 00:25 | decided to move forward.
| | 00:26 | So a lot of times that's what I'll do here too.
| | 00:28 | I have this homepage completed in
the HTML and CSS and I'll move into
| | 00:32 | creating the actual theme.
| | 00:34 | But bear in mind that you don't
have to stop here if you don't want to.
| | 00:38 | You might want to press on
and mock up additional pages.
| | 00:41 | In fact that's what we've done here.
| | 00:42 | I've mocked up a number of
additional pages for other areas of this site,
| | 00:47 | doing it this way is going to save
us a little bit of time when move into
| | 00:50 | theming in the next chapter.
| | 00:51 | So let's take a look at these
pages and the final HTML and CSS code.
| | 00:55 | Now this is the exact file that we're
going to be working from when we were
| | 00:59 | creating the themes.
| | 01:00 | So we're looking at the index.html file.
| | 01:03 | Now we just finished up theming this.
| | 01:05 | It's just slightly different
than where I left you guys off.
| | 01:08 | There is the Search form at the top.
| | 01:10 | I've added a home link and there is a
little bit of content here to fill out
| | 01:15 | this column, this Web Special of the Week.
| | 01:17 | So let's take a look at
this project in TextMate.
| | 01:21 | We'll look at that index.html file and
at the top of our sidebar is this form
| | 01:28 | that's that search form, in case you're
following along and want a search form
| | 01:32 | on your site as well.
| | 01:33 | I've added this Home link and
I've added just another up here.
| | 01:41 | I got another h2 tag with this coupon below it.
| | 01:45 | So that's just the only thing that's
different on the homepage, this index.html page.
| | 01:50 | There is a few other pages
that I've mocked up though.
| | 01:54 | One of them would be the homepage of the blog.
| | 01:56 | So if you click on The Grind here and
go to the blog, The Grind is going to
| | 02:00 | have this kind of big bold identity
and then recent blogpost and that's what
| | 02:04 | that's going to look like.
| | 02:05 | A single blog article like if you were
to click on this article and go read this
| | 02:09 | individual article, is this
file called blog single.html.
| | 02:14 | It looks like this.
| | 02:15 | This is the design for an individual blog post.
| | 02:18 | Then inside the store there are category pages.
| | 02:21 | We're hoping they look like this
with the different categories here and
| | 02:25 | individual products
below those category headers.
| | 02:28 | This is what we want an individual
product to look like, a big image for the
| | 02:33 | product and this kind of design here.
| | 02:35 | So these are the exact files that
we're going to be working from as we move
| | 02:39 | forward with our WordPress theme.
| | Collapse this transcript |
|
|
3. Building a WordPress ThemeSetting up WordPress and MAMP on a Mac| 00:00 | So we have our HTML and CSS template
done and we're ready to start moving that
| | 00:05 | into a WordPress theme.
| | 00:06 | In order to do that we need a
WordPress environment to work in.
| | 00:11 | We could work live. We could use the
client's domain name or we could use a
| | 00:15 | subdomain of the client's
domain name, something like that.
| | 00:18 | That's absolutely fine.
| | 00:19 | You can work that way.
| | 00:20 | I like to work locally.
| | 00:23 | In order to do that we are
going to use a tool on the Mac,
| | 00:27 | I am in the Mac environment, called MAMP.
| | 00:29 | MAMP is a little software program you can run.
| | 00:31 | It's an acronym really.
| | 00:32 | It stands for Mac, Apache, MySQL, and PHP.
| | 00:36 | There is a pro version of it which
has some cool features, but you don't
| | 00:39 | need that for this.
| | 00:41 | You can use the free version.
| | 00:42 | You can download it from here.
| | 00:44 | I already have it downloaded and then
installed, and it's here in my dock.
| | 00:48 | I am going to click to open it.
| | 00:50 | As I do that it's going to pop open a
Safari window, which is kind of proof
| | 00:54 | between this and here in the main
MAMP window with this green lights, that
| | 00:59 | kind of prove that the Apache server is
running and the local MySQL server is running.
| | 01:05 | Then we're going to see this page that
says, hey, welcome the MAMP, which is our
| | 01:08 | good solid proof that MAMP
is running good on our system.
| | 01:11 | So we are not so interested in
this screen that it's showing us.
| | 01:14 | I am going to remove this bit of the
URL and hit that, so we were just looking
| | 01:19 | at the root local host
and that's going to say "hi."
| | 01:22 | Now where that's coming from is, let me
double-click on my hard drive, inside the
| | 01:27 | applications folder where MAMP is installed.
| | 01:30 | There is this folder called htdocs which
has one file in it, an index.php file.
| | 01:35 | I am going to go ahead and drag that
onto the TextMate icon in our dock, which is
| | 01:40 | the text editor I've been using.
| | 01:42 | You see it just says hi in there and
says hi over here in our browser window.
| | 01:46 | Again, proof that this is working
and that this is the folder that is the
| | 01:52 | root of local host.
| | 01:54 | So whatever we put in here is going to be
served up here in the browser at local host.
| | 01:59 | So now that we have local host set up,
we can download the files that we need
| | 02:04 | for WordPress for our fresh installation.
| | 02:07 | We're going to a wordpress.org, go to
the Download area, and click the download
| | 02:12 | button here to grab a fresh copy of WordPress.
| | 02:14 | We're in a great position here in that
we are installing WordPress fresh, the
| | 02:19 | latest copy. Going out to the web and
grabbing it is great, because you know
| | 02:22 | you're getting the most
recent copy of WordPress.
| | 02:26 | So it's going to download this.
| | 02:27 | It's not too big of a group of files here.
| | 02:29 | I am going to double-click that folder
that I put on my desktop and these are
| | 02:33 | all the files that are a WordPress install.
| | 02:36 | So I am going to move this over here.
| | 02:38 | So we're looking at our htdocs folder and the
files that we just downloaded from WordPress.
| | 02:43 | I am going to select all the files
that it gave us and drag them over into
| | 02:47 | the htdocs folder, replacing the index file
that's already there and that's a WordPress install.
| | 02:54 | There is one more little piece
that we need to get this to work.
| | 02:58 | WordPress needs a database, and in
order to create a database and manage your
| | 03:04 | databases on the Mac there is
another great free software program you can
| | 03:08 | download called Sequel Pro.
| | 03:10 | So just go to sequelpro.com or Google
Sequel Pro and you can download it from here.
| | 03:15 | I already have it installed.
| | 03:18 | So in my dock here you can see
this little icon with the wrench and
| | 03:22 | screwdriver sticking out of it.
| | 03:23 | This is what it's looks
like when you pop it open.
| | 03:26 | You connect via Socket to root, root and
that username and password comes from MAMP.
| | 03:31 | Those are the defaults.
| | 03:33 | Hit Connect and now it's
connected to our local MySQL server.
| | 03:37 | We needed to create from here on
new database for WordPress to use.
| | 03:42 | This is one of these vital
components of the WordPress site.
| | 03:44 | So I am going to go to, from this drop-
down, add database and I'll just call our
| | 03:49 | new database WordPress.
| | 03:50 | We got a new database!
| | 03:52 | That's all we need to do with the
software, because all the rest of the database
| | 03:56 | work is going to happen
during the WordPress installation.
| | 03:59 | So I'll just close that,
because we don't need it anymore.
| | 04:03 | We do need to tell WordPress how
to connect to that database though.
| | 04:07 | So notice this file I have
selected, wp-config-sample.
| | 04:13 | We're going to remove the sample bit.
| | 04:15 | What we're looking for is just
to have this file named wp-config.
| | 04:19 | So I'll remove that bit and hit Return
and save that there and then drag it down
| | 04:24 | to our TextMate, our code editor.
| | 04:26 | If OS X warns you about opening,
it's completely fine to open. Of course.
| | 04:31 | We need to change a few
values in this wp-config file.
| | 04:35 | We need to change the database name and
remember we just named it wordpress, and
| | 04:41 | the username and password
again come from those MAMP defaults.
| | 04:46 | It's just going to be root and root.
| | 04:49 | So if I save that file and come back
over to the web finally and reload, it's
| | 04:54 | going to take us to the
WordPress installation screen. Perfect!
| | 04:59 | Proof that we did a good job.
| | 05:01 | So we'll pick up title for our site.
| | 05:03 | Of course, Widget Corp.
| | 05:05 | I will pick a username for myself.
| | 05:07 | I'll just use my name.
| | 05:08 | I'll pick a password,
a nice, strong password of course.
| | 05:12 | This an important one.
| | 05:14 | I'll enter my email here, and there is
a last checkbox asking if I would like
| | 05:20 | to have my site appear in search engines.
| | 05:22 | Of course, that's fine.
| | 05:24 | So we'll hit Install WordPress.
| | 05:26 | It's telling us Success! That's fabulous.
| | 05:30 | Then the last step here is logging
in for the first time to your freshly
| | 05:34 | installed WordPress site and now we're
logged in, we're looking at the WordPress
| | 05:38 | dashboard, we have done a good job. This is it.
| | 05:41 | It's done. WordPress is installed.
| | 05:43 | So from here we're going to
be back here a lot doing stuff.
| | 05:46 | We'll get to that later though.
| | 05:48 | If we click the title of our site in
the upper left, we'll be looking at what a
| | 05:52 | user would look like if they came to your site.
| | 05:55 | So this is the 2010. That's the name
of the theme, the theme that ships
| | 05:58 | with WordPress 3.0.
| | 06:00 | So this is the front-end of our site
with a successfully installed WordPress.
| | 06:04 | This is where we're going to be working.
| | Collapse this transcript |
| Setting up WordPress and WAMP on a Windows computer| 00:00 | I'd like to cover installing and
working with WordPress locally on a
| | 00:04 | Windows machine as well.
| | 00:06 | So, I'm here in Windows 7.
| | 00:09 | I'm going to open up our web browser.
| | 00:11 | Now on the Mac, we went to and used a
tool called MAMP, which stood for Mac,
| | 00:16 | Apache, PHP, and MySQL.
| | 00:19 | On Windows, we're going
to use a tool called WAMP.
| | 00:23 | So we can just do a search for WAMP.
| | 00:24 | The first result here is wampserver.com.
| | 00:27 | That stands for Windows, Apache,
MySQL, and PHP. So this is free.
| | 00:32 | You can download it and install it.
| | 00:34 | I've already done that.
| | 00:35 | That puts a little thing in your
Task Tray here, this little WAMP Server.
| | 00:39 | It says server offline.
| | 00:40 | I can click that and click Start All Services.
| | 00:43 | That's going to startup all of those local
servers that we need running for us here.
| | 00:48 | I'll go back into our web browser,
and then I'll browse to localhost.
| | 00:53 | That's where our local
environment is going to be.
| | 00:55 | You can see, it says "Howdy, folks"
here in the browser.
| | 00:58 | So where is that coming from?
| | 01:00 | I'm going to open up our Computer,
and browse to our local C drive where we
| | 01:06 | have WAMP installed.
| | 01:09 | Open up the WAMP folder, open up the www folder.
| | 01:13 | Within that is this index file.
| | 01:16 | So if I right-click that,
and go Edit with Notepad++.
| | 01:20 | That's the text editor we'll be using.
| | 01:22 | There is just one line of PHP in here.
| | 01:25 | It says echo 'Howdy, folks!.' Now
that's proving to us that PHP is working and
| | 01:30 | that this www directory is the root
that we're going to be working with.
| | 01:35 | Now in this root is where
we want to install WordPress.
| | 01:39 | So we need a copy of WordPress to install.
| | 01:42 | We open a new tab here, and go to
wordpress.org where we can download the
| | 01:47 | latest, greatest, freshest
copy of WordPress that we can get.
| | 01:51 | Click the Download button.
| | 01:52 | Then I'm going to right-
click and say Save Target As.
| | 01:56 | It's going to download.
| | 01:57 | I'm going to download it into our
Documents folder here, and let that go.
| | 02:02 | It's pretty quick download here.
| | 02:04 | We're going to open it up when it
finishes, and we'll be able to see all the
| | 02:10 | files that are a WordPress installation.
| | 02:13 | Now I am going to need to move
those into our root, our document here.
| | 02:19 | So let me minimize our browser window here.
| | 02:22 | This is our root for localhost, and these
are the WordPress files we just installed.
| | 02:27 | So let me select all and drag those over here.
| | 02:30 | It's going to copy them over here.
| | 02:32 | It might give us a little grief in
two seconds, because there is already an
| | 02:36 | index.php file over here,
and WordPress has its own.
| | 02:41 | So I'm going to make sure to
replace the one that WordPress comes with.
| | 02:47 | Now there is this file called wp-config-sample.
| | 02:53 | Ultimately, we're going to have
to remove the -sample from that.
| | 02:56 | WordPress needs a wp-config file.
| | 02:59 | So I'm going to say Rename.
| | 03:00 | I'm going to remove the -sample from it.
| | 03:04 | That's the file where we're going to
put our database connection info into.
| | 03:09 | So now that this is here.
| | 03:10 | If we go back up to the web and we
reload our localhost, it's going to give us
| | 03:16 | some grief about establishing a
database connection, because we don't have a
| | 03:21 | database yet for this.
| | 03:23 | Now we can manage databases with WAMP.
| | 03:26 | I'm going to open up the System Tray.
| | 03:29 | Go under this WAMPServer thing
here and go up to phpMyAdmin.
| | 03:34 | That's a browser-based tool
for dealing with databases.
| | 03:38 | It comes with that WAMP
download that we downloaded.
| | 03:41 | I'm going to make a new database.
| | 03:43 | So I'm going to under Databases, say
Create new database down here, and just
| | 03:48 | call it wordpress. Create.
| | 03:51 | That's really all we need to do.
| | 03:52 | We've created this database for WordPress.
| | 03:55 | Let me just look under
Privileges quick. There is one user.
| | 03:59 | It looks like there are two
users here, our localhost user.
| | 04:02 | We're going to go ahead and Edit
and make sure that it doesn't need a
| | 04:05 | password, and hit Go.
| | 04:08 | Now we can close that out.
| | 04:09 | We've done all we need to do with the database.
| | 04:12 | We're going to edit that wp-config file.
| | 04:16 | I am going to hit Edit
with Notepad++. Open that up.
| | 04:22 | Change the database_name to
what we just created, wordpress.
| | 04:27 | Change our username to root.
| | 04:29 | Then we said no password.
| | 04:30 | So password can go away.
| | 04:32 | Then we'll hit Save.
| | 04:35 | Come back out to the web. Reload the page.
| | 04:39 | It should be able to connect to that
database and show us our install screen.
| | 04:43 | So that's proof that we did our job good.
| | 04:45 | So to install, we'll just
call our site Widget Corp.
| | 04:49 | Make a user for myself.
| | 04:52 | Pick a nice strong password. Enter my email.
| | 05:00 | Leave the checkbox checked
asking us about search engines.
| | 05:04 | Click Install WordPress.
| | 05:05 | It goes really, really quick.
| | 05:07 | It installs the database tables in there.
| | 05:09 | I'll click the Log in button.
| | 05:11 | Enter my username and password that
I just created. Log in. That's it.
| | 05:18 | Internet Explorer is asking me
if you want to save the password.
| | 05:21 | You can just click No for now.
| | 05:23 | We're looking at the WordPress dashboard.
| | 05:25 | So WordPress is installed,
and we're ready to go.
| | 05:28 | I can click the title of the site up
here, look at the front end of the site,
| | 05:31 | and isn't that pretty?
| | 05:33 | We have a locally running version
of WordPress on our Windows computer.
| | Collapse this transcript |
| Modifying important settings| 00:00 | So we have an absolutely fresh install
of WordPress that we're looking at here.
| | 00:05 | We are looking at the front end of our
site with the default theme 2010 that
| | 00:09 | comes with WordPress 3.
| | 00:12 | I want to take this opportunity
| | 00:13 | while the install is fresh to go
through different WordPress settings.
| | 00:18 | So to get back to the Dashboard, if
you're looking at the front end of your site,
| | 00:21 | my favorite way is, since we
installed the WordPress at the root here,
| | 00:24 | just to go to wp-admin.
| | 00:24 | It's going to take your right to
your dashboard if you are logged in.
| | 00:29 | If you are not logged in,
it'll take you to the login screen.
| | 00:31 | You can enter your username and password,
and you'll come right to the Dashboard here.
| | 00:35 | So, what I am going to be
doing is go through the settings.
| | 00:38 | So there is this little arrow here.
You can pop down the settings.
| | 00:40 | We're going to go through each panel here.
| | 00:42 | But in the General Settings,
you can name your site.
| | 00:45 | So let's try changing that just for fun.
| | 00:48 | Now what I'm going to do here is I'm
going to Command+Click the title of our site,
| | 00:52 | and open up the front end in the new tab.
| | 00:55 | So I have the settings here on the left, and
this other tab is the front end of our site.
| | 00:59 | So if I just change this, I'll just put
test at the end of it, and save these settings.
| | 01:03 | You can see that this theme takes that into
account and changes the title of our site.
| | 01:07 | So that's what that's all about.
| | 01:08 | I can change the tagline, so you see the
tagline is up here. I can change that.
| | 01:13 | Our theme may utilize these things.
| | 01:17 | We'll see as we move forward.
| | 01:19 | Then I am going to click on the Writing tab.
| | 01:21 | One of the things I like to change in the
Writing tab right away is the Size of a post box.
| | 01:25 | You see it says 10 lines.
| | 01:27 | Let's see what that means.
| | 01:28 | Up here in the right there
is a button that says New Post.
| | 01:31 | This is how you create a
new blog post in WordPress.
| | 01:33 | So I'll click that.
| | 01:34 | We'll come to the new Add New Post screen.
| | 01:37 | What it's talking about here is this box,
this white box where you can write a blog post.
| | 01:43 | Now at this screen resolution,
this amount of room kind of looks okay.
| | 01:48 | It kind of looks proportional.
| | 01:49 | If you have a larger monitor, it
might look kind of small and it can feel
| | 01:53 | cramped as you start to
write kind of larger blog posts.
| | 01:56 | So that's what that Setting is all about.
| | 01:58 | So if I go under Writing, it's going to
warn me about this draft, like "oh, you
| | 02:02 | were writing a blog post, you don't
want to lose it, right?" That's okay.
| | 02:05 | Obviously, we're just writing
gibberish there, so you can change the size of
| | 02:08 | that box here, which is a nice feature.
| | 02:11 | I like to change it to 20 or
even 25 lines a lot of times.
| | 02:14 | We'll click on the Reading tab.
| | 02:16 | It's going to ask us about where we
want to show on our front page, how many
| | 02:20 | blog posts do we want to show?
| | 02:22 | So if we click back on to the front page of
our site here, you can see this Hello World.
| | 02:26 | This is our first blog post.
| | 02:28 | There is only one blog post.
| | 02:29 | We can see that in the admin
area, clicking under Posts.
| | 02:32 | There is one post here, Hello World!
| | 02:35 | So in our Reading Settings, it says
show the 10 most recent blog posts.
| | 02:40 | Well, there is only one, so that
won't really affect us very much.
| | 02:43 | Let's say there were 11. If there were
11, it would only show the first ten,
| | 02:47 | and then a link to kind of go back in time,
and we would show that further one back.
| | 02:51 | So that's what that setting is all about.
| | 02:54 | Under the Discussion tab, we're going
to have a whole movie later on in this
| | 02:58 | course all dedicated to comments.
| | 03:00 | So, we'll deal with looking
at that one when we get there.
| | 03:03 | Under Media, this is about like when
you upload an image that's going to be
| | 03:06 | part of a blog post.
| | 03:07 | What size do you want the thumbnail to be?
| | 03:09 | What size do you want the other sizes to be?
| | 03:12 | How that works, and nothing that we
necessarily need to change here right away.
| | 03:16 | Now remember when we're installing
WordPress, we had that choice, where it was
| | 03:19 | asking us, do we want our site to be
able to be crawled by search engine bots
| | 03:25 | like Google, Bing, and Technorati.
| | 03:27 | Since we're working locally,
it absolutely doesn't matter.
| | 03:30 | Google can't really get to
this site to look at it anyway.
| | 03:33 | But if you were working live, and there
was a live site and a dev site, you might
| | 03:37 | want to turn this on temporarily.
| | 03:38 | So, Google doesn't find out about your
dev site and start there being
| | 03:42 | incoming links to it before it's ready.
| | 03:45 | So that's kind of a nice feature.
| | 03:46 | The most important one that I want
to take time to consider here is the
| | 03:50 | Permalink Settings, so you can see
what different permalink structures are.
| | 03:54 | It has examples of them, is the
ones that I'm highlighting here.
| | 03:58 | The default that WordPress comes with
kind of has at the end of this thing has
| | 04:02 | a question mark, and a p, and
kind of an arbitrary number here.
| | 04:07 | It works that way, because this is going
to work on any server environment there is.
| | 04:11 | So it kind of defaults to that,
but it's also kind of ugliest.
| | 04:14 | So if I come here and I clicked over
and we're looking at the front page of
| | 04:18 | our site, if I click on the title of this
and go to the permalink of it, now we
| | 04:22 | can see the comments. We're kind of at
the permanent page for this blog post.
| | 04:26 | You can see the URL has that same structure.
| | 04:29 | It has the question mark and the p and =1.
| | 04:33 | It's just not really a great looking URL.
| | 04:36 | We can be friendlier with it.
| | 04:37 | We can have more information up there
and really even be more SEO friendly, if
| | 04:42 | that's kind of important to your site,
which it really should be for everybody.
| | 04:45 | Let's change that structure to something
more like this, which has the year that
| | 04:51 | blog post was published, the
month, the date, and the slug.
| | 04:54 | The slug is kind of a string of
characters that you can specify for an
| | 04:58 | individual post that puts some keywords
up there and kind of makes that URL kind
| | 05:03 | of more representative of
what is going to be on that page.
| | 05:06 | So if we choose that and hit Save
Changes, it's going to tell us our permalink
| | 05:10 | structure is updated.
| | 05:13 | If we come back here and kind of go to
our homepage and then we'll click back
| | 05:16 | on to that Hello World, you can see that
the URL structure has changed now to be
| | 05:21 | more of that friendly format.
| | 05:22 | Not longer, but there is just more information.
| | 05:25 | That's a friendlier format.
| | 05:27 | Now the reason I'm talking about
permalink structure now is because it's really
| | 05:30 | important to deal with now,
at the beginning of your site.
| | 05:34 | If you were to have this default
setting for a year and be writing and
| | 05:39 | publishing blog posts and building up
your site and then came back later and
| | 05:44 | changed it to a completely different structure.
| | 05:46 | Say you had this structure
and later chose this structure.
| | 05:50 | Now all these URLs that you published
with this structure, if there was a link
| | 05:54 | on some third-party website, linking
to the URL that had this structure,
| | 05:58 | it's now going to basically go
to a 404 page on your site.
| | 06:01 | It's not going to take them to that proper
blog post any more, and that's a problem.
| | 06:06 | It's no good to break people's links like that,
not to mention it's not good for your SEO.
| | 06:10 | So at this point, my summary is pick
one and stick with it, because it's going
| | 06:17 | to live with you for the rest of your site.
| | 06:20 | So we've looked at each of the different
settings and now we're ready to really
| | 06:23 | get into theme building.
| | Collapse this transcript |
| Starting with a blank theme template| 00:00 | We're ready to start digging
into really building our theme.
| | 00:05 | My favorite way to do that is
to start with a blank theme.
| | 00:08 | So again we're looking at the
2010 theme that came with WordPress.
| | 00:12 | It's a nice-looking theme, but we've
already created our Photoshop file.
| | 00:15 | We've created our CSS and HTML template.
| | 00:18 | We know what our site is going to
look like and it's not like this.
| | 00:21 | So we're going to actually remove this theme
entirely and replace it with a blank theme.
| | 00:26 | Blank themes are great, because it's
not going to be us wrestling against
| | 00:29 | this existing theme.
| | 00:31 | It's going to be starting with
absolute and complete scratch and you'll see
| | 00:34 | what I mean in a minute.
| | 00:36 | If you don't have access to the exercise
files, I've included the blank theme as
| | 00:40 | the free exercise file that you
can download from the course page.
| | 00:44 | So this is the WordPress theme.
| | 00:46 | Now how do you install a WordPress theme?
| | 00:48 | Where do WordPress themes go?
| | 00:50 | Well, these are the files in the Applications
folder in the MAMP folder in the htdocs folder.
| | 00:55 | Remember that's where we installed WordPress.
| | 00:57 | That's where all the files
that power WordPress are.
| | 00:59 | I'm going to drag this htdocs folder
into our sidebar over here so we can have
| | 01:04 | easy access to it moving forward.
| | 01:06 | There is a folder in here called wp-
content and within that there's a plug-ins
| | 01:12 | folder, a themes folder, an upgrade folder.
| | 01:14 | Within that themes folder, our folders
for each of the themes that are installed
| | 01:19 | and ready to go, ready to be
switched between in the WordPress lane.
| | 01:23 | There's only one folder in there.
| | 01:25 | That's the twentyten theme.
| | 01:27 | So, from our WordPress site we're
going to go to the Dashboard by going to
| | 01:31 | wp-admin and click on the Appearance
button over here and that'll show us that
| | 01:36 | current theme that's activated on this site.
| | 01:39 | Notice there's only one in here and
that's exactly what we're seeing here.
| | 01:42 | There's only one theme available.
| | 01:44 | Well, here's our BLANK_Theme.
| | 01:46 | I'm going to hold the Option key
and drag it over to the themes folder.
| | 01:50 | That's going to copy it over there.
| | 01:51 | Now there're two themes available in
our themes folder and if we reload the
| | 01:56 | page over here in our admin area, it's
going to now show us that the currently
| | 02:00 | active theme is still 2010, but there's
an additional theme available and it's here.
| | 02:05 | It's not the active theme,
but there are some options.
| | 02:08 | We can activate it, preview it, and delete it.
| | 02:10 | Let me click Preview, so you
can see what that looks like.
| | 02:13 | It basically opens what our site
would look like in an iframe style popup.
| | 02:18 | So, hopefully you weren't freaking like,
whoa, what's that? That looks broken.
| | 02:22 | It looks weird.
| | 02:23 | It looks completely unstyled,
but that's what a blank theme is.
| | 02:26 | It's not broken that's what we're looking for.
| | 02:27 | We're looking to start from absolute
scratch with this theme rather than fight
| | 02:32 | against the existing theme.
| | 02:34 | So from here we're able to
activate it, and that's fine.
| | 02:36 | It's just this preview is nice
if you're working on a live site.
| | 02:39 | You can see what a new theme looks like
and even click it out and interact with
| | 02:43 | it without activating it.
| | 02:44 | So you don't have to worry about
people seeing that where you're really
| | 02:47 | just playing around.
| | 02:49 | So of I Command+Click the title of our
site here, we can open up the front of
| | 02:54 | our site in a new tab, and that's
what our site is looking like.
| | 02:57 | Completely blank, it's a great
starting point for our theme.
| | 03:01 | A quick little thing that I want to touch on
is if we click to open all the theme files,
| | 03:06 | so here's all the files that are this theme,
| | 03:09 | there's one file in here.
| | 03:10 | It's actually required file in all themes.
| | 03:12 | It's the style.css file.
| | 03:15 | I'm going to click-and-drag it onto
TextMate and open it up in the text editor
| | 03:19 | we've been working with.
| | 03:20 | Notice, there's a bunch of
comments at the top of this CSS file.
| | 03:24 | This is where we can brand our theme
and say that this is the Widget Corp Theme
| | 03:29 | and it's a theme for widgetcorp and we
can give it a description and the author
| | 03:35 | and say what version it is and
stuff like that and hit Save.
| | 03:38 | It doesn't really show up anywhere except
for here in the Appearance area of WordPress.
| | 03:43 | So if I reload then, it'll say this is
really now the Widget Corp theme, number 1,
| | 03:48 | version 1, by me, and with the
description that we gave it and all that.
| | 03:53 | Notice there's also a
thumbnail for it that says BLANK THEME.
| | 03:56 | That's just what, this screenshot.png.
I can double-click to open to open it.
| | 04:01 | It'll open and preview and it's
just this graphic that shows kind of an example.
| | 04:05 | So if we open the twentyten, it also
has that file, but it's exactly what
| | 04:11 | you're seeing down here.
| | 04:12 | It's just a preview of
what your theme looks like.
| | 04:14 | So if you wanted to change it, put
some widgets in here, make it real obvious
| | 04:17 | that this is the Widget Corp Theme.
| | 04:19 | That's how you would do that.
| | 04:21 | Starting fresh is a great way to
start with a new theme, especially like us
| | 04:25 | since we already have that HTML and CSS going,
to not have to fight against an existing theme.
| | 04:30 | So now we have a great foundation
for digging in with some real code.
| | Collapse this transcript |
| Introducing template file structure| 00:00 | We have installed and activated
the blank theme for WordPress.
| | 00:04 | So that's what we are looking at
here is the blank theme activated on
| | 00:08 | our WordPress site.
| | 00:09 | But we didn't take too close of a look
at what makes a WordPress theme tick.
| | 00:14 | I didn't show you all the files
in that WordPress theme folder.
| | 00:18 | So I wanted to take the opportunity here to
give you guys the grand tour of a WordPress theme.
| | 00:23 | What all those files in a
WordPress theme folder do.
| | 00:27 | So I am in the htdocs folder.
| | 00:30 | This is our root where WordPress
install in the wp-content folder, in the
| | 00:34 | themes folder, and there is our
WidgetCorpTheme-1, which is the blank theme
| | 00:38 | that we installed.
| | 00:39 | I am going to drag that folder onto the
TextMate icon in our dock, and this is
| | 00:44 | all the files of a WordPress theme.
| | 00:46 | You can see in our project sidebar in TextMate
all the files that make up a WordPress theme.
| | 00:52 | The first one we will open up is index.php.
| | 00:55 | It's the one we would probably
gravitate towards on any site really.
| | 01:00 | The file that powers the root of any
directory is the index.php file, and indeed
| | 01:06 | this file that we are looking at in Safari,
| | 01:09 | the root of our website, is
powered by the index.php file right now.
| | 01:14 | So what's in this file?
| | 01:16 | It starts with this command.
| | 01:18 | This little PHP function, get_header,
and it ends with a couple of PHP
| | 01:21 | functions, get_sidebar, get_footer.
| | 01:24 | What do these things do?
| | 01:26 | Really, really simple. WordPress
works in this modular kind of way.
| | 01:30 | Get_header means go get the file
header.php and put that code that you
| | 01:34 | find there right here.
| | 01:36 | So header.php file. What's in that?
| | 01:39 | Well, it's the top of the
page. It's the DOCTYPE.
| | 01:43 | It's the head section.
| | 01:44 | It's inside the head section where
the title of our page is generated.
| | 01:48 | It has the opening body tag, and it
has some kind of opening tags here.
| | 01:54 | So all this code that's in header.php
gets just plunked in right here where
| | 01:58 | this get_header is.
| | 02:00 | Then it moves on to this code.
| | 02:01 | Then it says get_sidebar.
| | 02:03 | That's going to go get sidebar.php and
put all this code where that function is
| | 02:10 | in the index.php file right here.
| | 02:13 | Now get_footer, I bet you can guess it.
| | 02:15 | It's going to go get the footer.php, all
the code that it finds in the footer.php file,
| | 02:20 | and put it there.
| | 02:21 | So there is some content, a special
function here, a little comment reminder for
| | 02:26 | us to not forget analytics as we move
to launch our site and then the closing
| | 02:32 | body and closing HTML tags.
| | 02:34 | So that code gets plunked right down
into our index.php file right here.
| | 02:38 | So it's that modular concept
that WordPress is working with here.
| | 02:43 | Let's say I click on to this
Hello world post. It changes links.
| | 02:48 | Now we are looking at just this one
blog post and it has this comment out here
| | 02:53 | and it has the text box here where I
could leave my own comment on that post.
| | 02:57 | Now is index.php powering
this as well? No, it's not.
| | 03:02 | It's using single.
| | 03:03 | What single.php means is single blog post.
| | 03:07 | So you can see it's very
similar looking to index.php.
| | 03:10 | It has this get_header, get_sidebar,
get_footer, but it's a little bit different.
| | 03:15 | For instance, it has this PHP
function here, comments_template.
| | 03:20 | So that's one of the big differences.
| | 03:22 | You can see that it's outputted this comment
and this form for me to leave a new comment.
| | 03:26 | That all comes from this, and can
you guess? This is a module as well.
| | 03:30 | It's says go get the comments.
php file and put that right here.
| | 03:34 | So here is the file that has all the
code that gets dropped in right there.
| | 03:41 | So there is a few other files in our theme.
| | 03:43 | Think of the 404 page.
| | 03:45 | Now if you were to go to a URL that
didn't exist on this site, I will just
| | 03:50 | type a bunch of gobbledygook up here
and hit Return, it's going to say Error
| | 03:54 | 404, Page Not Found.
| | 03:56 | That comes from this 404.php file.
| | 04:00 | It uses these modular chunks, but
then just has its own special content.
| | 04:04 | It doesn't need to say much more than this.
| | 04:06 | So this is your opportunity to
customize and create a 404 page for your site.
| | 04:10 | There is the archive.php file.
| | 04:13 | This is in-charge of displaying something if
we wanted to look at just a month on our site.
| | 04:18 | So just in August.
| | 04:21 | Here is the archive for August.
The archive.php file will be in-charge of
| | 04:25 | displaying that site.
| | 04:27 | Comments, we already looked at. The footer.
| | 04:29 | These are just little modular chunks.
| | 04:31 | WordPress themes work in
this modular kind of way.
| | 04:35 | You don't have to repeat yourself
in all of these different files.
| | 04:38 | You can just call the modules as you need them.
| | 04:41 | That's kind of the idea.
| | 04:42 | Now I don't want you to think
that this is your whole tour of the
| | 04:46 | whole WordPress site.
| | 04:47 | We are going to be looking at each one
of these files in more detail as we move
| | 04:51 | forward and as we actually
build and flesh out this theme.
| | Collapse this transcript |
| Breaking up the HTML| 00:00 | So we are in a great place right now,
because we have our finished HTML and CSS
| | 00:05 | template that we finished at the end
of Chapter 2 and we just took a tour of
| | 00:09 | the WordPress themes.
| | 00:10 | So we can move that static stuff to this
dynamic WordPress theme stuff. That's the plan.
| | 00:16 | Move from one to the other.
| | 00:18 | To do that, we are going to open up
both projects side by side in TextMate and
| | 00:23 | look at them both at the
same time to do the moving.
| | 00:26 | So I am going to open up the HTML and
CSS by dragging the whole folder to the
| | 00:30 | TextMate icon in the dock to open that
whole project and open up the theme by
| | 00:35 | dragging that whole folder to
the TextMate icon at my dock.
| | 00:38 | So I have got both of these
projects opened side by side.
| | 00:42 | I am just going to arrange them just so, so
we can be looking at both at the same time.
| | 00:46 | So we are going to be moving static on the left.
| | 00:50 | Our static HTML and CSS to dynamic on the right.
| | 00:53 | Our WordPress theme on
the right. Left to right.
| | 00:56 | We have got a little bit of prep to do
before we can start looking at that though.
| | 00:59 | All these images from our sliced up CSS over
here we are going to drag over into our theme.
| | 01:06 | So I am going to Option+Drag all those
images in to the images folder of our theme.
| | 01:10 | So now our theme can
have access to them as well.
| | 01:14 | There is a little bit of a thing to
note here in that our CSS file was in a
| | 01:17 | folder in our static thing before.
| | 01:21 | It's no longer in a folder over here.
| | 01:23 | So the relationship between it and
the images are just slightly different.
| | 01:28 | So if I open up that CSS file in our
theme, first thing I am going to do is
| | 01:34 | actually move that CSS to the theme.
| | 01:37 | Open up the CSS file, literally just
select all of it and just paste it over here.
| | 01:43 | So our theme and our static has the same.
| | 01:45 | We don't have to do a careful
line-by-line analysis of the CSS.
| | 01:49 | That's just a straight copy and
paste except for these file paths.
| | 01:54 | It start with this dot, dot, dash over here.
| | 01:56 | They don't need to start with that
../ anymore, because of that change in
| | 01:59 | relationship, but TextMate has
a really easy Find and Replace.
| | 02:04 | So this ../ we will just
replace it with nothing.
| | 02:07 | Hit Replace All, close it, and now
we can see that in that example we are
| | 02:11 | looking at, it doesn't start with ../ anymore.
| | 02:13 | It's just gone and that's just replaced
with the proper file path. So there we go.
| | 02:19 | I am going to save that CSS file.
| | 02:22 | Then we are going to start looking
at the index.html file over here.
| | 02:26 | We are going to start with the
header.php file in our WordPress theme.
| | 02:30 | Both of these start with the DOCTYPE.
| | 02:33 | So we are starting at the top
and working our way to the bottom.
| | 02:37 | Anything that we see different, we are
going to check it out on a line by line
| | 02:41 | analysis and figure out what we should do.
| | 02:43 | So right away on line 2 we can see
that there is a bit of a difference.
| | 02:46 | So over here it just says html. Over
here it says html and it's got this special
| | 02:51 | php function in here.
| | 02:53 | WordPress has a special function for
outputting the language attributes.
| | 02:58 | There is no reason to
remove that. It's just nice.
| | 03:01 | It's just saying WordPress is going to
be setting the English language and just
| | 03:04 | proper outputs that attribute there.
| | 03:06 | So we got to analyze if WordPress is
trying to do something smart for us over here.
| | 03:12 | Not to remove it, just because we
don't have it over here, but to leave it in
| | 03:16 | because it's not affecting anything.
| | 03:17 | It's just WordPress trying to
help out and be a little smart.
| | 03:20 | It comes up again right away, because
it comes up in this meta character set.
| | 03:24 | We just have a static UTF8 over here.
| | 03:27 | But WordPress is outputting it
dynamically here and we might as well leave that.
| | 03:30 | It's just WordPress trying to
help us out with some smarts.
| | 03:34 | This meta tag here right here in
between these PHP tags is saying don't index.
| | 03:41 | So that's a little weird.
| | 03:42 | Why would we tell a theme not to index?
| | 03:44 | Well, it's only telling it to
index on very specific pages.
| | 03:48 | WordPress has this thing
called conditional tags.
| | 03:51 | So if we read this out loud in
plain English, it says if is a search.
| | 03:56 | So is_search is the conditional tag.
| | 03:58 | It will return true or false, meaning
that this meta tag is only going to get
| | 04:02 | output if this is true, which is
only if you are searching for something
| | 04:06 | literally on a search result's page on
your WordPress theme, and those type of
| | 04:12 | pages can have a lot of
repetitive content on them.
| | 04:15 | It's good to not have search engines
index those page and possibly penalize you
| | 04:19 | for duplicate content and stuff like that.
| | 04:22 | Over here where we are linking the CSS files.
| | 04:25 | That happens down here in the
WordPress theme. It's fine.
| | 04:28 | It's doesn't matter where that happens.
| | 04:31 | Right here, we are linking to the style.
css file, but in our CSS link here,
| | 04:36 | it has the special WordPress
function, bloginfo, stylesheet_url.
| | 04:41 | It's just ensuring the fact that this
URL that it outputs is absolutely going to
| | 04:46 | be correctly pointed at the CSS
file that's part of our theme.
| | 04:50 | So it's nice to leave that there. But boy!
| | 04:53 | What's going on with this title tag?
| | 04:54 | That's a lot of code there.
| | 04:56 | That there is a lot of these
conditional tags that we looked at.
| | 04:59 | As we covered, WordPress
works in this modular way.
| | 05:03 | There is all these little
chunks that are getting called.
| | 05:06 | You remember how it calls the header, it
calls the footer, and it calls the sidebar.
| | 05:10 | Every single page on our entire WordPress site.
| | 05:12 | At WordPress there is
going to be thousands of pages.
| | 05:14 | All over them are going to call header
.php, all of them are going to use the
| | 05:18 | same code over, and over, and over again.
| | 05:21 | So it needs to do smart
things with the title of the page.
| | 05:26 | If it's the homepage, it should
probably just say what the name of the site is.
| | 05:31 | If it's an archived page, it should probably
mention the fact that it's an archive page.
| | 05:35 | So this looks like a lot of code.
Don't worry about it too much.
| | 05:39 | It just kind of makes sure that what gets
output in that title tag is a smart and
| | 05:43 | appropriate thing for the title instead
of here on our static side on the left
| | 05:48 | it just says Widget Corp.
| | 05:49 | We wouldn't want that just to be the title of
our head in every single page of our whole site.
| | 05:54 | That will be no good.
| | 05:55 | We have some JavaScript going on up here.
| | 05:57 | We are going to cover JavaScript
in the later chapter in this course.
| | 06:00 | So let's not worry about
JavaScript right here at this moment.
| | 06:04 | We have the opening body tag then.
| | 06:06 | So here is the opening body
tag in the WordPress theme.
| | 06:09 | WordPress has a special
function for it called body_class.
| | 06:12 | It outputs a bunch of classes based on
the type of page that you are looking at.
| | 06:15 | So if it was a search page, there is
going to be class of search on it as well
| | 06:19 | as a whole bunch of other thing.
| | 06:21 | It's just a really nice and
convenient thing that WordPress provides mostly
| | 06:25 | for styling of CSS.
| | 06:27 | Then we open up our page-wrap.
| | 06:29 | There is this class of group over here.
| | 06:31 | We don't have a class of group here.
| | 06:33 | So we detected a difference.
| | 06:34 | We might as well put this
class of group over here as well.
| | 06:38 | So that's a match, div with an id of header,
this h1 tag in here that links to Widget Corp.
| | 06:45 | Over here it's the same deal, only
it's outputting these links dynamically.
| | 06:50 | So we are doing good.
| | 06:51 | Then we just have a paragraph
tag over here that says Established 1987.
| | 06:56 | Over here we have a div of class
description. That's different.
| | 06:59 | We might as well just do what we
have already written in our page.
| | 07:02 | So we are making those match, but
we will leave in this dynamic part.
| | 07:06 | That we can change through WordPress settings.
| | 07:09 | Remember we looked at settings and
how it said just another WordPress blog?
| | 07:12 | We might as well make that say Established
1987 and that way we are staying dynamic.
| | 07:18 | We are using the intelligence of WordPress.
| | 07:20 | That's where this header.
php file ends over here.
| | 07:23 | So we need to be careful here, because
notice we opened the body tag, we opened
| | 07:27 | the page-wrap, but we didn't
close either of those two thing.
| | 07:31 | We really need to be careful when we open
tags to make sure that they are closed again.
| | 07:35 | Make sure that our page looks right
and validates and all that good stuff.
| | 07:39 | Let's jump right away to footer.php.
| | 07:42 | So this is what comes with the blank
theme, but in our static we can just zoom
| | 07:45 | all the way to the bottom to take a
look at what's happening in the footer.
| | 07:48 | Let's make sure that page-wrap is
closed and notice we did all that scrolling.
| | 07:52 | So sometimes when you do see a
closing div tag, you are like what is
| | 07:57 | that closing again?
| | 07:58 | This is a nice comment to
remind us what it exactly is closing.
| | 08:03 | So let's copy that and make sure that
because we opened it, we are going to close it.
| | 08:07 | Then grab this footer code over here.
| | 08:11 | This is more appropriate of what's going on.
| | 08:13 | We will just paste it in there
and leave what was already there.
| | 08:16 | So we can copy and paste. This is smart.
| | 08:19 | It's about the same thing, outputting
the copyright, but this is dynamically
| | 08:23 | outputting the year and the
name of our site. That's nice.
| | 08:27 | So we don't have to change the copyright
manually each year. Paste that in there.
| | 08:31 | Get rid of the old stuff.
| | 08:33 | So we have made sure that the body is
closed and that tag that we opened is closed.
| | 08:37 | We are doing a good job there.
| | 08:39 | We have this wp_footer in here that is
telling us that's where the footer of
| | 08:44 | this site is if a plug-in or something like that
| | 08:47 | needs to know where
the footer of your site is.
| | 08:49 | Here it is, in case it needs to
insert its own kind of stuff, and our nice,
| | 08:53 | little, friendly comment
reminding us about analytics.
| | 08:56 | That's where we are.
| | 08:57 | We have analyzed this as best as we can
so far, going line by line and comparing
| | 09:01 | what we already have and
fixing it up in WordPress theme.
| | 09:05 | So we are doing a good job and we
are going to continue looking at
| | 09:08 | comparing these files to what we have already
written and making it into a WordPress theme.
| | 09:14 | So we have finished our line by line
analysis of this theme, moving from the
| | 09:18 | left to the right, making sure the
tags are closed, and that we've moved and
| | 09:23 | properly have everything that is from
our working site into our WordPress theme.
| | 09:27 | Let's take a look in the browser and
see where we made it. Fair warning, this
| | 09:31 | may not look super pretty,
because we are not quite there.
| | 09:33 | We are only half way through, but you
should see some progress of this thing
| | 09:37 | starting to take shape as it should.
| | 09:40 | Well, that's a little messed
up, but don't worry about it.
| | 09:43 | There is a reason that it looks like that
and we are going to be fixing everything.
| | 09:45 | I am sure you guys can relate to this site looking
a little weird once in a while. Don't worry.
| | 09:50 | We are going to fix it all up as we move along.
| | Collapse this transcript |
| Building the sidebar| 00:00 | One of the major design
elements of our site is the sidebar.
| | 00:04 | For the most part it's
consistent across all pages of the site.
| | 00:08 | So what we have here is just
like we have been working before.
| | 00:12 | On the left is a TextMate project with
our static HTML and CSS conversion and on
| | 00:17 | the right is our WordPress theme.
| | 00:19 | So at the end of the last movie,
we opened up the browser and saw some
| | 00:22 | weird layout problems.
| | 00:24 | That was because we hadn't yet
dealt with the sidebar, which is a major
| | 00:27 | structural element of the site.
| | 00:29 | So we need to move the sidebar from
the left as we've built it to the right.
| | 00:34 | So on the right we have opened the
sidebar.php file, which is the modular bit of
| | 00:40 | the WordPress theme that deals with the sidebar.
| | 00:42 | So I want to go ahead and copy the aside
element from the left and paste it over to the right.
| | 00:51 | But I don't want to just select all
and copy and just get rid of the whole thing.
| | 00:55 | I want to make sure that we
salvage anything from the existing sidebar
| | 00:59 | that we might want to save.
| | 01:00 | So let's take a look at what
we might want to save over here.
| | 01:03 | A lot of this just isn't a part of our design.
| | 01:07 | it wasn't a part of our Photoshop design.
| | 01:09 | It's not a part of what we converted.
| | 01:11 | It's not stuff that we want anymore like
these archives, and the categories, and
| | 01:15 | the bookmarks, and this meta
information, all the stuff can go.
| | 01:19 | There are a few things that we want to
save though, and that's this smart little
| | 01:22 | get_search_form function.
| | 01:24 | That's another one of these
WordPress modules in a way.
| | 01:27 | It just says go, get the searchform.
php file and put that code here just
| | 01:32 | like other theme files, say get sidebar,
which gets all of this code and puts it in there.
| | 01:37 | So get_search_form in a way
is a module within a module.
| | 01:41 | If you want to use the search form on
multiple different theme files, you just
| | 01:46 | use this there, so you
don't have to repeat yourself.
| | 01:49 | This bit at the top here says if
(function_exists('dynamic_sidebar') &&
| | 01:53 | dynamic_sidebar('sidebar Widgets')).
| | 01:55 | So that's a bit of a mouthful
there but that's a way that you can
| | 01:58 | widgetize a WordPress theme.
| | 02:00 | You are kind of declaring a
WordPress widgetized area.
| | 02:05 | The sidebar is a very common place for that.
| | 02:07 | So we want our theme to be smart and
widgetized, so we are going to save that bit.
| | 02:11 | So we are going to save this and this.
| | 02:14 | Notice this nice little comment here
too that says, "All this stuff in here only
| | 02:18 | shows up if you DON'T have
any widgets active in this zone."
| | 02:21 | So it's a warning that anything come in
between this and where this closes out
| | 02:27 | is subject to only if
there is no widgets active.
| | 02:29 | As soon as you activate a widget, all
this stuff kind of gets wiped out and gets
| | 02:33 | replaced with widgets.
| | 02:34 | So we want to be aware of that.
| | 02:36 | So since we're saving basically these
two bits, I am going to go ahead and cut
| | 02:40 | them and paste them above here, and
then just get rid of all the rest of this stuff,
| | 02:45 | because all that stuff is going to go.
| | 02:47 | We are going to copy our static stuff
from the left and paste it over here.
| | 02:52 | Then we are going to
incorporate these things that we saved.
| | 02:56 | So get_search_form, I am going to cut,
and replace the form that's already there
| | 03:01 | because all this code just gets
replaced with this nice little function, this
| | 03:05 | little modular thing. Then the widgets.
| | 03:08 | we are going to put at
the bottom of our sidebar.
| | 03:10 | So that's where we want widgets to go in
case someone were to activate a widget.
| | 03:15 | But we want all the stuff
to be here no matter what.
| | 03:18 | So at the very bottom of our sidebar,
we're going to put this thing here, and
| | 03:21 | really nothing inside of it.
| | 03:22 | We are just going to make sure to
close out our PHP function, so we don't get
| | 03:26 | any nasty PHP errors, but
otherwise this is where widgets will go.
| | 03:31 | So let me hit Save there and let's jump
back out to the web, so you can see our
| | 03:35 | progress on this theme.
| | 03:37 | So structurally looking a lot better.
| | 03:40 | The sidebar is in place, you can see
our search form, the navigation, all
| | 03:44 | the stuff is static.
| | 03:45 | So as we move forward here we're going
to be taking a look at different parts
| | 03:49 | of the sidebar, making them smart
just like we made our sidebar smart.
| | Collapse this transcript |
| Building the navigation| 00:00 | So our sidebar is looking good.
| | 00:02 | Structurally it's in place.
| | 00:04 | We have our navigation that you can see
here, but this navigation is pretty much
| | 00:08 | just a copy and paste from our static
site that we are working in, that you can
| | 00:12 | see over here, it's just static.
| | 00:14 | We're basically going to get rid of that.
| | 00:16 | Gone, and we're going to replace it with
WordPress 3.0's new dynamic menu system.
| | 00:23 | It's really nice.
| | 00:24 | it's specific to WordPress 3.0,
which we'll be covering here in a minute.
| | 00:27 | So, let me just save that and you
can refresh this page and see that our
| | 00:32 | navigation is gone here.
| | 00:34 | And I'm also going to go to the
wp-admin here. Under Appearance and Menus is
| | 00:40 | where you build these
new menus in WordPress 3.0.
| | 00:44 | Now, it's giving us this warning up
here at the top here and says this theme
| | 00:48 | does not natively support menus and
it's giving us that warning because we
| | 00:52 | haven't declared any new menus.
| | 00:54 | So, in order to kind of enable and use
this feature, we're going to have to do a
| | 00:58 | little bit of coding to enable it.
| | 01:00 | That happens in the functions.php file.
| | 01:02 | So, at the bottom of this, we're
going to keep the stuff that's in there.
| | 01:06 | The stuff that's in there is good and
helping us out, but we're going to add
| | 01:09 | some new stuff at the bottom.
| | 01:11 | What we're adding is a new
function called register nav menus.
| | 01:16 | So, register_nav_menus and we're going
to pass to that function one parameter.
| | 01:24 | That's an array and in this array,
we're going to say 'main_nav'.
| | 01:29 | We're declaring this, 'main_nav,' and
we're going to give a description of
| | 01:34 | 'Main Navigation Menu.' So that's that.
| | 01:38 | We have called it, we can save it, we
can refresh over here and it's going to
| | 01:42 | not give us that error anymore, but
we should future proof or even more
| | 01:49 | appropriate kind of past proof our
code here, in that this function,
| | 01:54 | register_nav_menus, is
specific to WordPress 3.0 and later.
| | 01:59 | So if you were to grab this code and
use it on a WordPress 2.9 site, it's going
| | 02:04 | to give you a PHP error.
| | 02:06 | A show-stopping PHP error
that will prevent your theme from even
| | 02:11 | running at all, which is bad.
| | 02:12 | So, we're going to wrap this whole bit
of code here in the special PHP function.
| | 02:17 | It's not WordPress specific.
| | 02:19 | It's just a PHP function called function-exists.
| | 02:22 | So, if function_exists, and you
can see an example of it up here.
| | 02:26 | This is for widgetizing a sidebar.
| | 02:28 | Now that didn't exist
forever in WordPress in either.
| | 02:31 | So this code is kind of past-proofed
and then it wraps this register_sidebar
| | 02:36 | function in the same thing.
| | 02:37 | So, we can even copy and paste.
| | 02:39 | We'll just steal their version of it.
| | 02:41 | Only we are not testing for
register_sidebar; we're testing
| | 02:44 | for register_nav_menus.
| | 02:46 | So we'll do that and then close out that if,
and we have some past proofed code here.
| | 02:52 | Now, if we save this and reload,
nothing is going to change at all over here,
| | 02:56 | but since this is enabled, we can now
create the menu that we want to create.
| | 03:01 | So, let's start by doing that.
| | 03:02 | We'll call it Main Nav Menu.
| | 03:04 | No problem. Create Menu.
| | 03:06 | Now we need to fill that menu with stuff.
| | 03:09 | What do we want to fill it with?
| | 03:11 | Well, if you remember back in our
static design, we have homepage, About page,
| | 03:16 | Contact page, all these
things we need to have in our menu.
| | 03:20 | So, how do we fill our menu with
it in the WordPress site over here?
| | 03:24 | We don't have any content yet to do that with.
| | 03:27 | So, let's just quickly create some
content so we have some pages to fill it with.
| | 03:32 | So, what were those things again?
| | 03:34 | Now that I'm in the pages land, I have a
little quick link up here says New Page.
| | 03:38 | So I'll click New Page and
I'll make the Contact Us page.
| | 03:44 | We have a special homepage for our site.
| | 03:46 | So I'm going to make a homepage and publish it.
| | 03:47 | I'm not worrying about
filling these with content.
| | 03:50 | I just need the pages to exist, so I can
make a menu out of them. I have a blog.
| | 03:57 | Does that cover it, or are we missing one?
| | 03:58 | We've got four in there and we're missing one.
| | 04:00 | So, let's look and see
what it was again. Buy Widget!
| | 04:04 | That's our dtore page.
| | 04:06 | So, we'll jump back and make
the store and hit Publish there.
| | 04:11 | So we have the five things that are
what we plan on being our main navigation
| | 04:15 | menu at least for now.
| | 04:17 | So we'll go back under Appearance,
under Menus, and we're going to need to add
| | 04:21 | stuff to this menu that we created.
| | 04:23 | So, one of those things that you
can add to a menu is existing pages.
| | 04:27 | So here's those five pages we just created.
| | 04:29 | I'm going to go ahead and check all of
them and click Add to Menu and they're
| | 04:32 | going to pop over here into this area.
| | 04:34 | Now, I'm just going to hit Save
Menu and then I'm going to go ahead and
| | 04:38 | Command+Click so we can look at the front
end of this site again, and nothing is there.
| | 04:41 | It's because we haven't put anything
in our sidebar.php file where we deleted
| | 04:46 | that old static menu.
| | 04:48 | We need to put some code here to
output that new menu that we just created.
| | 04:52 | So, the function for that is WP nav menu.
| | 04:57 | So, we'll open up PHP.
| | 04:58 | It's a PHP function, wp_nav_menu,
and we pass it again one parameter.
| | 05:08 | That's an array and it's menu and then
we need to say what we called that menu.
| | 05:14 | So, let's go back into the WordPress
admin and copy and paste exactly what
| | 05:18 | we named that menu.
| | 05:20 | So this bit of code is
outputting that new menu that we built.
| | 05:23 | So, let's hit Save, go back to the
front of the site, and reload and you should
| | 05:28 | see our menu pop in there,
which you do. Fabulous!
| | 05:31 | So that's looking good.
| | 05:33 | Now, why did we do it this way?
| | 05:35 | Specifically so we could get all the cool
dynamic stuff that WordPress menus can do.
| | 05:40 | So, back in the admin, I can drag
these things around and kind of match
| | 05:44 | what we've done before.
| | 05:45 | So, let's take a look at what the order was
before. We want it to go Home, About, Contact.
| | 05:51 | I can just drag these
things around, Homepage, About.
| | 05:55 | Notice how it indented a little bit here.
| | 05:57 | That's going to make it a
submenu. We don't want that.
| | 05:59 | I'm going to drag it to the left,
so they all stay on one level.
| | 06:02 | Home, About, Store, Blog.
| | 06:05 | Now, if I hit Save, jump back over to
the front, you'll see them rearranged
| | 06:09 | themselves in this order.
| | 06:10 | So, boom, they've rearranged themselves.
| | 06:13 | Now, the color stays the same because
of our all little smart CSS trickery,
| | 06:18 | how we colored them based on their
position, not based on what they are.
| | 06:22 | So, no matter how we rearrange them,
they'll stay in this color pattern, which
| | 06:26 | we prefer to stay in that pattern.
| | 06:27 | So, you can imagine that this is a lot
easier for our client to deal with, and
| | 06:31 | really it's easier for you to deal with too.
| | 06:33 | If you ask me, if you just want to
change a few things, add a few things, it's a
| | 06:37 | lot easier to do from the admin than
it would be to have to jump into a code
| | 06:41 | editor and edit these things.
| | 06:42 | So, if your client, they want to add a
link to Google.com, they can just add a
| | 06:47 | custom link, just hit Add to Menu and
it'll pop down at bottom of this menu.
| | 06:51 | Just hit Save, reload over here, and
you'll see Google pop right in there.
| | 06:55 | They can rearrange that of course,
hit Save, and see Google jump up in
| | 07:00 | that menu, whatever.
| | 07:01 | You can get rid of things really.
| | 07:03 | So we will just click this arrow to
drop down, hit Remove, it's gone, hit Save,
| | 07:09 | jump back to the front,
reload the page, and Google is gone.
| | 07:12 | So, you can see how dynamic and easy
it is to deal with menus and that will
| | 07:17 | serve us well in the future.
| | Collapse this transcript |
| Showing one recent post| 00:00 | One of the things we want to do in our
sidebar is display our most recent blog post.
| | 00:06 | So that's what you see right here.
| | 00:07 | It's looking just how we want it.
| | 00:09 | Only this is just static stuff.
| | 00:11 | this is just a copy and paste of
HTML from our HTML and CSS template.
| | 00:16 | We want to do this dynamically.
| | 00:18 | Get it to pull from the
database the most recent blog post.
| | 00:22 | So, I have opened our project in TextMate.
| | 00:25 | We're working with the sidebar.php file,
and here is the code right here that's
| | 00:31 | dealing with this area.
| | 00:33 | It says Latest Post and it just has a
static date in here, a static title, and
| | 00:39 | some Lorem Ipsum text.
| | 00:41 | We want to replace that with
dynamic WordPress stuff to make this pull.
| | 00:45 | So, in order to pull that kind of
content from the WordPress database,
| | 00:50 | we're going to using special
function called query_posts.
| | 00:55 | It's a really powerful cool
function that allows us to adjust what
| | 01:01 | WordPress gives back to us.
| | 01:04 | We're going to pass it some
parameters, which make those adjustments.
| | 01:07 | This is really easy one.
| | 01:08 | We just want one thing back and
we want the most recent post back.
| | 01:12 | So, we're going top pass it just one
single parameter called posts_per_page and
| | 01:18 | we will say equals 1.
| | 01:19 | Just give us one thing back.
| | 01:21 | A lot of times you'll see this query_
posts function used before a WordPress loop.
| | 01:28 | Now, the whole concept of
the loop is that it loops.
| | 01:31 | It goes again and again.
| | 01:32 | So, if there is multiple posts
you want to return, like if we said
| | 01:35 | posts_per_page 5, that loop would run
five times and we would output five chunks
| | 01:41 | of HTML that is appropriate for that.
| | 01:44 | Since we only have one, we don't
really need to write the code for the
| | 01:46 | opening of the loop.
| | 01:47 | We're just going to use this little
part of it that says that's called
| | 01:50 | the_post, which sets up the ability
to use some other functions that we're
| | 01:55 | going to need here.
| | 01:56 | So, what are those other things?
| | 01:58 | Well, instead of using the static date
right here, we're going to get rid of that
| | 02:02 | and we're going to use a
special function called the_date.
| | 02:06 | So that's that and no more
static date, now a dynamic date.
| | 02:10 | We're going to want to be
able to click this title.
| | 02:14 | So, we're going to have an
anchor tag for the title.
| | 02:17 | So, what's the actual title?
| | 02:20 | Well, it's just the_title. So, php the_title.
| | 02:24 | What is the anchor link to?
| | 02:27 | Well, the_permalink.
| | 02:28 | So, another special PHP function, the_permalink.
| | 02:34 | Now, these things, the_date, the_
permalink, the_title, are enabled by the post.
| | 02:40 | That sets these things up.
| | 02:41 | So, if that wasn't there, that will
be a problem, but of course we're going
| | 02:44 | to leave that there.
| | 02:45 | Now, instead of this Lorem Ipsum text, one
last thing we're going to use. the_excerpt.
| | 02:53 | So, if we save this, in our sidebar,
now instead of the static content it's
| | 02:57 | going to be this, because this is
our most recent blog post right now.
| | 03:00 | It's the one that just came in when we
installed WordPress, this HELLO WORLD!
| | 03:04 | So, let's refresh, and instead of the
static content that was there we have the
| | 03:08 | date this article was published, the
title, and you can see it's linked now.
| | 03:12 | If I click on it, I'll go to that post.
| | 03:14 | We're not quite ready for
that yet though, and an excerpt.
| | 03:17 | So this is dynamic now,
pulling in the most recent post.
| | 03:21 | The last thing that we want to touch
on here is whenever you manipulate the
| | 03:25 | query, like we're doing here, we're
changing the query for this page, we want to
| | 03:29 | reset that query, just in case
someone else were to use it later.
| | 03:33 | It's just kind of the courteous
thing to do and we can do that real quick
| | 03:36 | with wp_reset_query.
| | 03:41 | That way if we're going to use query_
posts again perhaps later in the sidebar
| | 03:45 | it's okay and it won't be affected by this.
| | 03:47 | It'll just be back to the default query.
| | 03:49 | We'll hit Save and it's not
going to change anything over here.
| | 03:52 | It's just the right thing to do.
| | 03:54 | So, that's how you can pull the latest
post from your WordPress database and
| | 03:59 | display it in your sidebar.
| | Collapse this transcript |
| Fetching external content| 00:00 | The last thing we want to do in our sidebar
is display some content from an external site.
| | 00:06 | Basically, we're going to be pulling
in from an RSS feed some content to
| | 00:11 | fill out the sidebar.
| | 00:12 | So again, this content that exists
here now looks how we want it to look, but
| | 00:17 | it's just static content.
| | 00:19 | So I have opened our WordPress theme as
a project in TextMate and we're working
| | 00:24 | with the sidebar.php file.
| | 00:27 | This bit of content here is
what we're looking at over here.
| | 00:31 | It's just that static content as this
h4 tag of Industry News, and then just
| | 00:36 | these static dates, static titles,
and Lorem Ipsum text for the excerpts.
| | 00:41 | We're going to be replacing that by
dynamically pulling in content for that.
| | 00:45 | So we're going to be using a
special built-in WordPress function called
| | 00:50 | fetch_feed, which is going to
be doing all that magic for us.
| | 00:54 | So we're going to start it right here.
| | 00:56 | Remember how when we were in the
functions.php file and we were declaring those
| | 01:00 | menus and we were past proofing it
by making sure that function exists?
| | 01:04 | We're going to do that same thing
here by just making sure that fetch_feed
| | 01:10 | function exists before we use it.
| | 01:12 | So if (function_exists
('fetch_feed')), then do stuff.
| | 01:20 | So everything that we're going
to do is kind of be within these.
| | 01:28 | We only need one of these because
we're going to be looping, so we will just
| | 01:32 | save one of them as kind of a
template. Put that within here.
| | 01:37 | Now, we've proven because we're
inside this if statement that this function
| | 01:41 | exists, but in order to use it, we're
going to need to do an Include for the file.
| | 01:46 | That kind of enables all the stuff to work.
| | 01:49 | So we'll just use the standard
include_once function, and this stuff here,
| | 01:55 | ABSPATH and WPINC, are constants that
are declared that WordPress just knows
| | 02:03 | about, and it's going to make sure that
we get to the right path despite what's
| | 02:07 | going on in our theme and despite
other settings and stuff like that.
| | 02:10 | So this is just the smart
way to do it. /feed.php.
| | 02:14 | We need this feed file for this to work at all.
| | 02:19 | You know what, this is actually PHP.
| | 02:24 | Now we're going to call
this fetch_feed function.
| | 02:30 | So we're going to actually make a
variable for it called feed. We're going to
| | 02:34 | set it to fetch_feed.
| | 02:37 | The parameter that you pass
fetch_feed is an RSS feed.
| | 02:41 | So wherever this RSS feed lives, I
happen to have one handy here, so that's just
| | 02:46 | add http://www.topix.com/
rss/business/manufacturing.
| | 02:56 | In my limited searching, that was
the fastest one I could find that had
| | 03:00 | anything to do with a widget.
| | 03:01 | So we'll play with that in a minute but
that's basically how you do a fetch_feed.
| | 03:05 | Well we have to set some things
like the limit is going to be our feed
| | 03:10 | object, get_item_quantity.
| | 03:15 | We're just going to say we only want
to get two things because in our mockup
| | 03:18 | over here we have two loops.
| | 03:20 | So just don't waste time. Just only get
two. And we're going to set up a new variable.
| | 03:26 | items, and it's going to be our feed
object and we're going to say get_items
| | 03:31 | from 0 to the limit.
| | 03:34 | Just setting ourselves up here, so that
we'd be able to loop through these items
| | 03:39 | and output them properly.
| | 03:41 | So first we want to make sure that it works.
| | 03:43 | So if the items variable doesn't really
have anything in it, then we have a problem.
| | 03:49 | We're going to have to echo
something out, some kind of a problem.
| | 03:52 | So, we'll just say problem for now.
| | 03:54 | But if it does exist, which it
probably should, we'll say else.
| | 04:00 | So everything is cool in here.
| | 04:05 | If it's cool, we're going to
need to loop through these items.
| | 04:08 | So we're going to do a foreach
loop, just a real standard PHP loop.
| | 04:12 | So foreach ($items as $item).
| | 04:15 | It's going to mean that item is one
individual kind of RSS entry and in this
| | 04:22 | foreach loop is then finally this content.
| | 04:25 | Get rid of this.
Put that in that foreach loop.
| | 04:28 | We're going to have to make sure this is happy.
| | 04:34 | PHP tags are being closed
properly and opened properly and such.
| | 04:40 | That should get us right.
| | 04:43 | So this is the loop.
| | 04:44 | So this loop is going to run twice.
| | 04:47 | We've said we want two items, so
there're going to be two objects in this items
| | 04:53 | and each individual one is item and
now we have what we need to replace the
| | 04:57 | static content with dynamic content.
| | 05:01 | So we're going to try echo and we
have access now to this individual item
| | 05:07 | and that's an object.
| | 05:08 | So we'll use the get_date function on
it and we can format the date however we want,
| | 05:14 | like the month, day,
year is pretty standard.
| | 05:19 | For the title, we'll echo up
the item again. Now, this is PHP.
| | 05:25 | It keeps slipping in and out of PHP
here, so php tags, echo, the item, the
| | 05:34 | get_title, maybe we already
used that one, and the content.
| | 05:41 | One last thing. Get rid of this
Lorem Ipsum and we'll see. get_content.
| | 05:53 | So there we go, closing the foreach,
and let's see. What is this one?
| | 05:59 | This one closes the If.
| | 06:00 | I think we might have an extra one in here.
| | 06:02 | Hopefully that doesn't cause an error.
| | 06:05 | We will know soon enough. We're going
to need to end that foreach loop though.
| | 06:11 | That's what this does, right?
| | 06:12 | Let's save it and see how we're doing over here.
| | 06:16 | We've caused an error somewhere.
| | 06:18 | I bet we can track it down now.
| | 06:30 | In fact, we didn't have an
extra one here. That was natural.
| | 06:34 | That was closing
the If statement up here.
| | 06:37 | So the foreach is closed, the If is
closed, and the if function_exists is closed.
| | 06:41 | So all of our things are
being closed here nicely.
| | 06:44 | If we hit save and reload our theme,
indeed we're getting content from that
| | 06:49 | external RSS feed over here.
| | 06:51 | One last thing is we're hoping to
link those titles out to those places.
| | 06:55 | So let's make an anchor tag out of our
titles, close that anchor tag, and then as
| | 07:03 | the href for this link, we'll echo
out one last thing, the permalink.
| | 07:12 | So now those are linked to
the articles as they should be.
| | 07:22 | So what's kind of neat there is that
we can just plop in basically any RSS feed
| | 07:26 | and display content from those
external RSS feeds, and WordPress is real
| | 07:31 | smart and that it caches.
| | 07:32 | So it's not like every single time
this page loads, it has to go out and hit
| | 07:36 | this external resource.
| | 07:37 | It's just intelligent
about caching that information.
| | 07:41 | In fact, lynda.com has an RSS feed
and we could replace this RSS feed with
| | 07:46 | lynda.com's blog RSS feed, and just hit
Save and reload the page over here, and
| | 07:51 | instead of displaying those
manufacturing related articles, it's going to show
| | 07:56 | actual lynda.com blog articles.
| | 07:59 | It's going to have too
much content in here probably.
| | 08:01 | We can write some PHP to truncate that
content if we want to, but let's just
| | 08:06 | leave our manufacturing feed in there,
which displays nice excerpts already.
| | 08:10 | So that's how easy it is to use an
external RSS feed, grab content from it, and
| | 08:16 | display it right on your own site,
using this fetch_feed function which is a
| | 08:20 | built-in WordPress function.
| | Collapse this transcript |
| Creating a custom home page| 00:00 | So the structure of our website is
looking good, our sidebar is looking good,
| | 00:04 | but one thing you will notice that is
drastically different from what we're
| | 00:07 | looking at right here from what we
ended up with, our Photoshop design and our
| | 00:11 | HTML and CSS template, is this main content area
| | 00:14 | doesn't look anything like our final design.
| | 00:17 | We just haven't got in there yet, but
this is what we are going to be doing,
| | 00:19 | creating a custom homepage
with our WordPress Theme.
| | 00:22 | Now WordPress actually makes it pretty
easy to do. So, I am going to show you on
| | 00:26 | the right here we have open our
TextMate project with all the files from a
| | 00:30 | WordPress theme, and on the
left we have this TextMate project.
| | 00:33 | That's where we left off with
our static HTML and CSS templates.
| | 00:37 | So, what I can do to make a custom
homepage-- You don't have to do anything fancy.
| | 00:42 | It's really easy.
| | 00:43 | I am going to make a new file by
clicking on the folder at the top of the
| | 00:46 | sidebar and say New File. We're
going to create a new file for our theme.
| | 00:50 | I'm going to call it home.php.
| | 00:53 | Now it comes in as a blank file and if
I just type like "hey guys" in here and
| | 00:57 | saved it and went back out to the web.
| | 01:00 | Looked at our site, we are
at the homepage right now.
| | 01:02 | It's just going to say "hey guys." zit's
going to know the currently active theme
| | 01:07 | has this home.php file in it, and the
homepage just going to render that page by default.
| | 01:12 | So whatever I put in here
it's going to show up on our homepage.
| | 01:14 | Now our index.php file is a
good starting point anyway.
| | 01:19 | So let me just copy that entire block
of code and past it over here and hit
| | 01:24 | Save in our home.php file. Reload the
page and we are going be back right where
| | 01:29 | we started exactly.
| | 01:31 | Now, everything is right about
this except for this block here, this
| | 01:35 | main content block.
| | 01:36 | So if I were to just go ahead and grab
everything from the main content block
| | 01:41 | and delete it, it's going to do
probably what you think it's going to do.
| | 01:45 | There is just going to be
nothing inside there instead.
| | 01:47 | So what we're going to do is replace
that with what we have already designed for
| | 01:51 | our homepage and then grab everything
from the main content div over here and
| | 01:59 | just drop it in over here.
| | 02:01 | Now one thing that's not going to be
ready is these images of our products.
| | 02:06 | We have to make sure that those exist
on our kind of live local environment so
| | 02:11 | that they don't come up as broken images.
| | 02:13 | So let me just minimize our projects.
Minimize the web so we can look at what's
| | 02:17 | going on out here in the Finder.
| | 02:19 | This htdocs folder is the root of our
website and that's where I want to make
| | 02:23 | those product images available from.
| | 02:25 | So here they are in our static HTML and
CSS template. I am going to drag those
| | 02:30 | over to the root of our htdocs over here.
| | 02:33 | Now I didn't drop them in the theme,
because I kind of have this theory that
| | 02:37 | these are going to be their product
images despite what theme is active.
| | 02:41 | So let's not put them in the specific
theme. Let's just put them at the root.
| | 02:44 | That's appropriate.
| | 02:45 | And then we'll go in and make sure that
those file paths are correct here, so we
| | 02:49 | are going to be in product-images
and /product-images and I'll hit Save.
| | 02:57 | We'll come back out to the web and
reload and our custom homepage will be present
| | 03:03 | there, and everything is looking good.
| | 03:05 | So that's how easy it is to make
a custom homepage for the site
| | 03:08 | that's completely unique to the
homepage, totally different template than any
| | 03:12 | other template on the site.
| | 03:14 | It's just as easy as making your
home.php file on your theme and putting in the
| | 03:18 | stuff in it that you would want to be there.
| | 03:20 | Now it's maybe not as
dynamic as we hope it to be later.
| | 03:23 | We are going to make these products
later pull dynamically from the store, once
| | 03:26 | we've created those, but
we will revisit that later.
| | Collapse this transcript |
| Introducing custom fields| 00:00 | So with our homepage now in place, we are
going to start building out some more
| | 00:03 | sections of this site from within WordPress.
| | 00:07 | So what we are looking at here is our
static HTML and CSS design for what our
| | 00:11 | product page is going to look like.
| | 00:12 | So it's got the title of the product
up here, a big image of the product, its
| | 00:17 | price and product code and an Add To Cart
button and some information about that product.
| | 00:22 | So that's what we're trying to build.
| | 00:24 | Now I want to do a little bit of
introduction to how best we can store all this
| | 00:29 | data from within WordPress
in the smartest possible way.
| | 00:33 | So let me minimize this for a
second and remind you that we have our
| | 00:37 | WordPress theme open on the right in
TextMate and our static HTML and CSS
| | 00:41 | template open here on our left.
| | 00:43 | We'll look at the HTML code for
storeproduct.html, so this is the code that is
| | 00:51 | creating that project.
| | 00:52 | It's got the title of the product up
here, it's got that information about the
| | 00:57 | product here, the price and the product
code, and the description of the product here.
| | 01:02 | So we are going to need to do is make
a custom page template and stuff but I
| | 01:06 | want to talk about data storage
first and a specific feature of WordPress
| | 01:11 | called Custom Fields.
| | 01:13 | So when we're going to be
creating these new product pages,
| | 01:18 | they are literally going to be pages.
| | 01:19 | I'm going to come up here to New Page and I
am going to be title the page just like this.
| | 01:25 | I'm going to call it the Mega Sprocketizer page.
| | 01:27 | I'll probably make it not uppercase
like that. We can always make things
| | 01:32 | uppercase with CSS if we want to, but
if we wanted to make it lowercase then in
| | 01:37 | the future it will be a lot
easier if it's already in that format.
| | 01:41 | We could come out to our TextMate
project and grab all the stuff that isn't
| | 01:44 | the title, if I want to.
| | 01:48 | Come over here and paste that into the product.
| | 01:51 | We wouldn't paste in the visual
editor like that. We would click HTML and
| | 01:54 | then paste stuff in here, so that retains
all these HTML tags that we already have going.
| | 02:00 | And we could publish that and that
would be fine and that would work, but think
| | 02:03 | about what we got going on here.
| | 02:05 | Everything is kind of just in here, the
price, the product code, the dimensions,
| | 02:09 | it's all kind of stuck in this template.
| | 02:12 | Let's say two months down the road
they decide you know we're not going to
| | 02:15 | display pricing anymore. We just don't think
that's appropriate for the Widget Corp Corporation.
| | 02:20 | We want to remove those, and
let's say we got a thousand products.
| | 02:23 | We got to come in here manually to
each one of these and delete this line and
| | 02:27 | resave it a thousand times.
| | 02:29 | And it's just not a good way
to handle this type of thing.
| | 02:33 | We have a much smarter product than that.
| | 02:35 | We're using WordPress and storing data
like this all kind of just clumped up
| | 02:39 | into this content area.
It just isn't a good idea.
| | 02:42 | So we're not going to do that.
| | 02:44 | We are going to publish this page as is.
| | 02:46 | For now we'll make it a child page of
our Store, see how you can do that, you
| | 02:50 | can give it a parent.
| | 02:51 | Then just kind of hit Publish and it
will be a child of the store page, there
| | 02:57 | you can see in the URL.
| | 02:58 | We are going to store each bit of that
information separately and that's what
| | 03:03 | custom fields are all about, and that's
what I want to introduce you to. So you
| | 03:07 | can see right below this content area
is this area called Custom Fields below
| | 03:13 | and we are going to store all those
little bits of data as custom fields.
| | 03:17 | So one of them is going to
be Price so let me grab this.
| | 03:20 | I'm going to call the custom field,
Price. I can call it whatever I want in the
| | 03:24 | Name field over here, paste in the
price, and just click Add Custom Field.
| | 03:28 | You'll see it flash yellow, kind of
telling you that it saved in there.
| | 03:32 | I'm going to grab the product code.
We call this one product_code. Save that.
| | 03:41 | I'll grab the dimensions, 3' x 3'.
It's like the world's largest widget. And then
| | 03:52 | the information about the product
we'll just store as the actual content.
| | 03:56 | It's just one bit together.
| | 03:58 | And we'll save that.
| | 03:59 | So that's how custom fields works and that you
can save these individual bits of data like that.
| | 04:04 | Then when we go and create our custom
template, which we're going to be doing next,
| | 04:08 | we can grab out these little
bits of data and use them in special
| | 04:13 | places in the template.
| | 04:14 | That way later if we've made that same
decision where we were not going to be
| | 04:19 | displaying the price anymore, we can go
into that template and just delete the
| | 04:22 | little area where it outputs the price
and it's just all taken care of, prices
| | 04:26 | removed for all thousand of those
products because there was a template change
| | 04:30 | not an actual content change.
| | 04:32 | That's the idea behind custom fields.
| | 04:34 | Now if we're going to make another
product, click New Page again and we'll
| | 04:39 | call it Supers Sprocket 2000, and
we'll have that same content in there,
| | 04:46 | just same kind of content.
| | 04:47 | Now you'll see this is, the one little
change is, because we already have created
| | 04:52 | price and product code and we've already
have custom fields. Now they show up in
| | 04:56 | this drop-down box and we can collect them.
| | 04:58 | If you want to make a brand
new one you can always do that.
| | 05:00 | You can always invent them anytime you
want, but it's just trying to help us
| | 05:04 | out so that we can be consistent there,
and then make a different price like
| | 05:08 | $200, and just go through an add those.
| | 05:11 | So that's the smart way to store data
like this and it's really what makes a
| | 05:15 | content management system a content
management system, so that is how custom
| | 05:20 | fields work within WordPress.
| | Collapse this transcript |
| Creating custom product pages| 00:00 | Widget Corp is a company that sells widgets.
| | 00:03 | So there is going to be a bunch of
pages on this site that are dedicated to
| | 00:07 | specific products that they sell.
| | 00:10 | So that's what we're looking at here is
our design for an individual product page.
| | 00:15 | We just covered custom fields and how
we can store this data, like price and
| | 00:20 | product code as custom fields, but we
didn't yet cover how to create a custom
| | 00:24 | template to publish and make
the page look exactly like this.
| | 00:27 | What we're looking at on screen here
is our static HTML and CSS template.
| | 00:33 | So let's create a special new template
in our WordPress theme, which we have
| | 00:38 | opened on right here, and our
static HTML and CSS on the left here.
| | 00:43 | I'm going to create a brand new
template by right-clicking the project folder
| | 00:47 | here and saying New File.
| | 00:48 | We're going to call it page-product.php.
| | 00:51 | It's going to be a blank file to begin with.
| | 00:53 | So we're creating a brand new template.
| | 00:56 | How do we get WordPress to
recognize these new templates?
| | 00:59 | It's a really simple just PHP
comment at the top of the page.
| | 01:04 | Just like this, and we're going to start a
comment like that, end the comment like that.
| | 01:11 | We'll say Template Name.
| | 01:13 | That's the important part.
| | 01:14 | We're going to call it Product Page.
| | 01:16 | So now that we've done that, WordPress
is just going to see that this is present
| | 01:20 | in our theme and allow us to pick this
template when we're creating new pages.
| | 01:26 | So let's jump back into the Dashboard.
| | 01:29 | We can do that here.
| | 01:30 | We have our Dashboard open for our project.
| | 01:33 | If we go under Pages, you'll see
that we've already published two
| | 01:36 | different products here.
| | 01:37 | I'm going to click it to edit it.
| | 01:41 | This is where we created
those custom fields and all that.
| | 01:43 | Now, all of a sudden, this has just
popped in, is a drop-down menu where we can
| | 01:48 | pick which template we want this page to use.
| | 01:52 | Now, by default, it's
just going to use page.php.
| | 01:55 | But we're going to pick that we want to
use the Product Page, the brand new one
| | 01:59 | we just created, and hit Update.
| | 02:00 | If I'm going to Command+Click to open
this in a new tab, it's just going to be
| | 02:05 | barren, white, nothingness, because now
it's using this new template, and there
| | 02:09 | is nothing in there for it to show.
| | 02:10 | So there is not going to be anything there.
| | 02:13 | For the Homepage that we created,
we use this index as a template.
| | 02:16 | We'll do the same thing there.
| | 02:17 | I'm just going to Select All and Copy
everything from index and just paste it over here.
| | 02:23 | If we save that, we'll see that
basically this is going to look just like our
| | 02:26 | Homepage then, showing the product in that template.
| | 02:30 | We don't want that.
| | 02:31 | We have our own ideas here.
| | 02:32 | So I'm going to delete everything from main
content, between that opening and close div.
| | 02:38 | Hit Save. Now we have this
nice blank template to work from.
| | 02:42 | What we want to fill that with is we'll
jump into our HTML and CSS, and we have
| | 02:47 | a special HTML file
that's just for store products.
| | 02:51 | So I'm going to copy and paste
within the main content div over here, and
| | 02:57 | paste it over here.
| | 02:58 | I'm going to hit Save and jump back to
the web, and you can see then that we're
| | 03:04 | getting there as far as a special
template just for products, and we have a few
| | 03:09 | things to shore up here.
| | 03:10 | One is we'll fix this file path to
make sure that it's pointing at the root
| | 03:15 | product images directory there.
| | 03:17 | And then we have a bunch of static.
| | 03:18 | It's statically displaying the price.
| | 03:20 | It's statically displaying the dimensions here.
| | 03:23 | We want to make that all dynamic.
| | 03:24 | That's the whole point of this, is this is a
template that can be used for any products.
| | 03:28 | So why don't we replace these right away
with the custom field values that we had?
| | 03:33 | So instead of displaying
just $519 like that, php echo,
| | 03:38 | we're going to echo out using a
special function called get_post_meta().
| | 03:45 | Now, the get_post_meta
function has three parameters.
| | 03:49 | You have to tell it what post, so we can
get that from the post object. It's ID.
| | 03:56 | We need to tell it which custom field exactly.
| | 03:59 | We can tell which custom field exactly by
looking at the custom fields that we published.
| | 04:04 | One is called price.
| | 04:05 | That's what it's asking for here.
| | 04:07 | Put price in there, and then a true or false.
| | 04:10 | Now, we're going to say true here.
| | 04:12 | True means just give us a
string that we can easily echo out.
| | 04:15 | If there are multiple price
values, just give me the first one.
| | 04:19 | If we're doing something like selling
t-shirts, where we might have size as a
| | 04:23 | custom field, and then have small,
medium, large, extra large, stuff like that,
| | 04:27 | you could use false and it will give you
an array and you can iterate over that
| | 04:30 | array and display all the available sizes.
| | 04:33 | We don't need that.
| | 04:34 | We're just going to keep it real simple
with putting true as that third parameter.
| | 04:37 | Well, let's Copy and Paste this and
use it in the same way for product_code.
| | 04:42 | product_code, copy and paste here, so we
don't make any mistakes, and dimensions.
| | 04:56 | So let's hit Save.
| | 04:58 | Now, this is an important point to
cover here is that this function is an in
| | 05:02 | loop WordPress function.
| | 05:04 | It means that it needs to kind
of be within the WordPress loop.
| | 05:07 | We don't really need a full loop here,
because we're only displaying one product.
| | 05:13 | We'll never display two
products on a single product page.
| | 05:16 | It's just not what we're doing.
| | 05:17 | So we don't need to open the loop necessarily.
| | 05:20 | We're just going to say the_post.
| | 05:22 | Remember we used this in the sidebar
when we did a query post to get the
| | 05:25 | most recent blog post.
| | 05:27 | We needed to use that so we could
use functions like the_title and
| | 05:30 | the_permalink and stuff like that.
| | 05:32 | Now that this is in place,
these functions will work.
| | 05:36 | So let me hit Save and
come back out here and reload.
| | 05:39 | We fixed that file path, so it's there.
| | 05:42 | It's displaying the price and
code and dimensions now dynamically.
| | 05:46 | Notice we lost the dollar sign there.
| | 05:48 | It's kind of proof that it's working.
| | 05:49 | But we can get that dollar sign back
just by altering the template, putting a
| | 05:52 | dollar sign there, and
reloading, and that will show up.
| | 05:56 | So in our example where Widget
Corporate has come to us months later and say we
| | 06:01 | want to remove all the
prices from all the product pages,
| | 06:04 | now, of course we can just make one
edit in this template file, save it,
| | 06:09 | and that's going to go away
in our thousands of products.
| | 06:12 | We don't have to edit it one by one.
| | 06:13 | We can just make this one change
to a template file and have that go.
| | 06:16 | There are a few other things
that we should make dynamic here.
| | 06:19 | One is the title of the product. So we could
get rid of that and just echo out the_title.
| | 06:29 | The other is the file path for this image.
| | 06:32 | So I'm just going to cut that away.
| | 06:35 | We're going to need access to it dynamically.
| | 06:37 | So let's make a brand new custom
field as a part of this page in WordPress.
| | 06:42 | It's not in the drop-down menu.
| | 06:44 | It doesn't exist yet.
| | 06:44 | We'll say enter new, and we'll say
product_large, because there's a few other
| | 06:50 | versions of this image.
| | 06:53 | The medium_one and the small_one,
and we're after the large one for now.
| | 06:56 | So we'll hit Add Custom Field.
| | 06:57 | It will flash yellow, proving that it's saved.
| | 06:59 | Then we'll use one of these custom field
echoing statements as the source for that image.
| | 07:07 | So it's going to be
product_large instead of price.
| | 07:12 | So if we hit Save and come back out here,
now we're going to be fully dynamic.
| | 07:17 | The title is coming from that.
| | 07:18 | The title looks a little
different, doesn't it? So why is that?
| | 07:21 | We'll take a look at our static code.
| | 07:23 | There are a couple of
style differences actually.
| | 07:26 | The price had this block over
here where all this stuff is saved.
| | 07:31 | That's because there are some custom
CSS that we want to apply for this page
| | 07:36 | that is only for this page.
| | 07:39 | So it doesn't matter on the homepage.
| | 07:41 | It doesn't matter on the Contact Us page.
| | 07:43 | It's CSS that's specific to this page.
| | 07:45 | So in order to kind of save bandwidth
and keep our CSS smart and modular, we're
| | 07:50 | only going to load up that CSS on this page.
| | 07:55 | So how do we do that?
| | 07:56 | First, let's take a look at where that CSS is.
| | 07:59 | So in our static HTML and CSS
template, we have a css folder.
| | 08:04 | This file here, product.css,
deals with that CSS specifically.
| | 08:09 | So let's make sure it's available in our theme.
| | 08:11 | I'm going to Option+drag it over here
to the css folder that's in our theme.
| | 08:15 | Then we're going to open up the header.
php file as a part of our theme, which
| | 08:19 | has the head section in it,
which is where we link up CSS files.
| | 08:24 | Here is the main link for our main CSS file.
| | 08:28 | We have that again, only instead of the
stylesheet_url, which links directly to
| | 08:36 | it, we're going to link to the template_
url, which just links to the folder, and
| | 08:40 | then say /css/product.css.
| | 08:45 | Now, that would load it on
every single page of the site.
| | 08:48 | We only want to load it when this
specific template is being used, and we can do
| | 08:52 | that with a WordPress
conditional tag called is_page_template.
| | 09:01 | Now, which template?
| | 09:02 | We have to give it to it by name,
and we've named ours page-product.php,
| | 09:09 | so page-product.php.
| | 09:13 | Then we'll make sure to close this if statement.
| | 09:19 | We'll hit Save, and so it will load up
this product.css file only on product pages,
| | 09:25 | which of course this is.
| | 09:29 | Looks like we made an
error. if is_page_template.
| | 09:36 | Then our title looks right.
| | 09:38 | Our pricing information looks right, just
how we had it styled in our original template.
| | 09:44 | So that's how you create a custom page
template using custom fields to create a
| | 09:49 | unique page template within WordPress.
| | Collapse this transcript |
| Creating custom category pages| 00:00 | So we just finished upgrading this
custom product page template for our design
| | 00:05 | and that's what we're looking at here,
but a page like this is actually going to
| | 00:09 | live at the bottom of
the hierarchy of this site.
| | 00:12 | There's going to be a couple of levels above it.
| | 00:14 | This Sprocketizer is going to be in a
product category of sprockets, which is
| | 00:19 | going to be within the top level,
which is the store page, and the store is
| | 00:24 | going to display all the categories.
| | 00:26 | So, we're going to need a new type of
page template in our theme called
| | 00:31 | Category, and that's going
to end up looking like this.
| | 00:34 | So, the homepage for the store and it's
got this header for Sprockets and then
| | 00:39 | two products that are under the
Sprockets category and then this header for
| | 00:42 | Sprunklers and this one product
that's under the Sprunkler category.
| | 00:46 | This is what the store homepage looks like,
and it's going to share that same template.
| | 00:51 | If you are just looking at Sprockets,
we just see the header for Sprockets and
| | 00:55 | then just these two products.
| | 00:57 | So, let's get started by
creating that new template in our theme.
| | 01:01 | So, I have our whole theme
opened in TextMate as a project here.
| | 01:05 | I'm going to right-click and create a new
file and we're going to call it page-category.
| | 01:10 | That's going to be the page that we go ti.
| | 01:12 | So to get WordPress to recognize this
new page, we have to do the same thing
| | 01:16 | that we did in our page-product.php,
is put this PHP comment up the top of it,
| | 01:21 | so WordPress recognizes it.
| | 01:23 | Put that up here and call it Product Category.
| | 01:26 | So now that this exists,
WordPress is going to recognize it.
| | 01:30 | So, I'm going to jump back to the web
into our Dashboard and tell our store page
| | 01:35 | to use that new category.
| | 01:37 | So, in our Template drop-down, it's going to
be available to choose this Product Category.
| | 01:42 | So, let's start out Default.
I can pick Category. Hit Update.
| | 01:46 | Now, if I open up the store page, here
it's just going to be nothing, because
| | 01:50 | it's using this template in
which there's nothing in it.
| | 01:52 | So that makes perfect sense.
| | 01:55 | We need to flesh it out though.
| | 01:56 | We're going to use the code from our
page-product template, let me just copy and
| | 02:01 | paste all of it over here, and as
we've been doing I'm going to remove
| | 02:07 | everything from inside of main-content. Save it.
| | 02:11 | I'll reload our Store page over here
and we have this nice canvas blank space
| | 02:15 | here and we can fill up this main-content
with, basically what this is going to look like.
| | 02:20 | Now, this page has some special styling
attached to it, like this rectangle here
| | 02:26 | with the centered text inside of it.
| | 02:27 | It has some special CSS
only needed on these category's style pages.
| | 02:32 | So we're going to only load it
on these category style pages.
| | 02:35 | So, if I jump out to our Finder here,
there is a CSS file in our static HTML and
| | 02:41 | CSS template over here called
store.css that is just for that.
| | 02:46 | I'm going to Option+Drag it over here
into the CSS folder in our theme, so
| | 02:50 | that that's available.
| | 02:51 | Now, I'm going to open the header.php
file in our theme, which has the head
| | 02:56 | element in it, which is where we link
out to CSS files, and this is our main
| | 03:01 | style sheet and this is where we added
that custom CSS just for page products.
| | 03:06 | We're going to copy and paste that,
because we're going to do the exact same
| | 03:09 | thing for page-category, and we'll
call it store.css, and save that.
| | 03:14 | So just on the category page
that store.css will load.
| | 03:19 | Then here in the category, this is
our opportunity then to create this
| | 03:24 | unique category page.
| | 03:26 | Now, I'm going to I guess cheat a little
bit and copy and paste all the code for
| | 03:29 | this into this template, and don't
worry. There's a bunch of code here, but
| | 03:33 | we're going to go through it line
by line, so you can see how it works.
| | 03:36 | If you want this code, just go to the
exercise giles for the next movie and grab
| | 03:41 | the code out of this page-category.php file.
| | 03:45 | So, I'm going to go ahead and save that,
but we have a little prep work to do
| | 03:48 | back in the admin of the site
to prepare ourselves for this.
| | 03:52 | So, let's go into that Dashboard and
publish the pages that we're going to need
| | 03:57 | in the proper hierarchy.
| | 03:59 | So, we're going to make a new page and
we're going to call it Sprockets and
| | 04:03 | this is going to be a category
page that has a parent page of store.
| | 04:08 | So you can see that in this drop-down I
can select the store page as its parent
| | 04:12 | page and it's going to
have a template of Category.
| | 04:15 | It doesn't need any content, I can hit
Publish, and then if I go back into this
| | 04:19 | Pages menu, you can see it's
got this dash in front of it.
| | 04:23 | It's a child page now of the store.
| | 04:25 | We'll do another one the
same way for Sprunklers.
| | 04:31 | It also has a parent of store
and a template of Product Category.
| | 04:36 | Now, each of our product, we've
created the Mega Sprocketizer and the Super
| | 04:41 | Sprunkler 2000. The Mega
Sprocketizer, I'm going to open it up.
| | 04:45 | It already has a template of Product
Page, but I'm going to give it a parent of
| | 04:50 | Sprockets, because it's a sprocket.
| | 04:51 | So this is us setting up this hierarchy.
| | 04:54 | While we're in here, we're going to give
it a couple of extra custom fields, and
| | 04:59 | now if I jump back out into the Finder
and then into our product-images folder
| | 05:03 | that were provided by our client, you
can see that each product has three images
| | 05:07 | associated with it that they gave us.
| | 05:10 | So, we might as well just put each one
of those in as a custom field so we can
| | 05:13 | use them on these category pages.
| | 05:16 | We're not using the large version.
| | 05:18 | We're kind of using the regular version of it.
| | 05:21 | So we might as well put those in there now.
| | 05:23 | Now, I'm going to make a new custom
field called product, call it regular,
| | 05:29 | product_regular, and this is the sprocketizer.
| | 05:33 | So I'm going to call it product-images.
This is the file path to that image
| | 05:39 | then, and we'll make one called
product_small and that's this mini version.
| | 05:46 | I'll add that custom field there.
| | 05:52 | Now so, it has the right template
and it's in the hierarch properly.
| | 05:57 | So, in Pages, I'm going to click to our
other product, the Super Sprunkler 2000,
| | 06:02 | just to make sure that it has the proper parent.
| | 06:04 | It's a Sprunkler, is its parent page.
| | 06:07 | We'll have to flush out
its custom fields as well.
| | 06:09 | So, its dimensions we'll make 5' x 3', just
the world's biggest widget, and its product_code.
| | 06:18 | It'll just be abc123, and there
is three images associated with it.
| | 06:25 | This is the Sprunkler, right.
| | 06:33 | Small, regular, and large.
| | 06:52 | We'll update that to make sure it's
good to go, and now we can see as we're
| | 06:56 | viewing our pages, View in the admin,
that everything has a proper hierarchy as
| | 07:03 | it should and each of these pages has the
correct template and parent chosen for it.
| | 07:11 | So, we're in our theme.
looking at page-category.php.
| | 07:18 | That's the template that's like in
charge of displaying these categories.
| | 07:23 | We're going to do some coding in here.
| | 07:26 | I did that copy and paste.
| | 07:27 | Now, I want to show you how this is all working.
| | 07:30 | One of the very first line is I'm
creating this variable called categoriesCF
| | 07:34 | that stands for categories custom field
and I'm going to pull in a category with
| | 07:39 | the name of categories right away.
| | 07:42 | And I put an example value below here
and this is what this might look like
| | 07:46 | for our store page.
| | 07:47 | So, I'm going to copy that and come back
into the admin and paste that in there.
| | 07:51 | This is going to be a value that we're
going to attach to every single category
| | 07:56 | page that tells us what we want
displayed on this category page.
| | 07:59 | It's just kind of some custom field
trickery of how we've decided to do this.
| | 08:04 | I'm going to start with the store,
which is a Category page, we're recycling
| | 08:08 | this template, and make a new custom field
called categories, and paste that in there.
| | 08:14 | Now, what is this 43 and 47?
| | 08:17 | I know what Sprockets and Sprunklers are.
| | 08:18 | That's the title of our
categories. So that's cool.
| | 08:20 | I'm going to hit Add for now.
| | 08:22 | They're going to represent category
ids that we just kind of need to get our
| | 08:27 | hands on in order to output what we want output.
| | 08:30 | They're the ids of those two pages.
| | 08:33 | So, if I go under Pages, we can
figure out what the ids of these pages are
| | 08:38 | by clicking on them.
| | 08:39 | Go under Sprockets and I know this is a
little weird, but up in the URL is where
| | 08:43 | you can figure that out.
| | 08:44 | So, Sprockets is 92, and Sprunklers is 94.
| | 08:50 | So 92 and 94 are what we're
going to want to put there.
| | 08:53 | So in our Pages and Store, 92 and 94,
and then I'll hit Update, until it is
| | 09:00 | going to flash yellow to
confirm that that has been saved.
| | 09:07 | Okay, so we have access to that now.
| | 09:09 | Back in our template, this
variable that we just created is going to
| | 09:13 | get_post_meta that value.
| | 09:15 | So this example value,
it's really going to be 92 and 94.
| | 09:19 | This is just an example value.
| | 09:22 | It's the comment just telling us
what this value is going to return, and
| | 09:26 | there's another category and it
explodes and this is a PHP function based on
| | 09:31 | this comma character.
| | 09:33 | So you see this value? It's got
this comma in the middle of it.
| | 09:36 | It's going to turn allCategories into
an array and then this array is going to
| | 09:41 | have two values in it, and
so that allCategories(0).
| | 09:44 | It's going to be Sprockets|43 here, in case 92.
| | 09:48 | So, how an array works is allCategories(1)
would equal the second part of the string.
| | 09:56 | That's what explode is all
about. That's incorrect.
| | 10:00 | It should have this pipe character.
| | 10:01 | That's our separator.
| | 10:03 | So, let's go verify that back in
the admin for sure, that we used a pipe
| | 10:07 | character ,that we're trying to
separate this from this, with one custom field.
| | 10:12 | And that should be a pipe and you can
get the pipe character with a Shift+Backslash.
| | 10:20 | Just make sure that's perfect before we go on.
| | 10:23 | Now, because allCategories is an array,
like we've just proved with these two
| | 10:28 | values, we're going to loop through it.
| | 10:30 | What we want this loop to
be is every sub category.
| | 10:35 | We're giving it two
categories, Sprockets and Sprunklers.
| | 10:38 | We want to loop through that twice.
| | 10:39 | This is going to make it easier for us
in the future if we want to add a new
| | 10:42 | category in this way.
| | 10:44 | It'll just drop right in there.
| | 10:45 | It's just we're kind of writing
our code to be smart that way.
| | 10:48 | If you want to drop the category, really
easy to do. Just change this custom field.
| | 10:52 | Add a new category? No problem,
just change that custom field.
| | 10:55 | So we're going to take
then this value, this value.
| | 11:00 | It's going to be exploded
again based on the pipe character.
| | 11:03 | So, we're doing this like double
explode technique. It's kind of neat.
| | 11:07 | So, it's going to be an array again,
and so pieces of 1 then would be the
| | 11:13 | second part of this.
| | 11:15 | This is Sprockets, so this value would be 92.
| | 11:20 | So that's what exploding on a certain
character does is it's able to split apart
| | 11:25 | a value based on a certain category.
| | 11:27 | Now that we have access to those, the
page id and the title that we want, we're
| | 11:32 | going to make a new variable called link
and it's going to get the permalink of
| | 11:37 | of the page with an id of 92, and we
have all the data that we need to start
| | 11:42 | constructing and what
we're constructing is this.
| | 11:45 | This is what we're trying to build, the
smart dynamic loop that'll be able to build this.
| | 11:51 | We're going to output a div.
| | 11:52 | It wraps the whole thing.
| | 11:54 | We're going to output an
<h3> tag that outputs pieces 0.
| | 11:58 | Now what's pieces 0?
| | 11:59 | It's the title of the
category that we're dealing with.
| | 12:02 | Then we're going to start a WordPress loop.
| | 12:05 | Now, we have just loops within loops
here, but trust me, it's real smart.
| | 12:08 | We're going to query for how
many pages per post. It has -1.
| | 12:12 | Remember when we were in the sidebar, we
used the same parameter with query_posts?
| | 12:16 | Only we put one.
| | 12:17 | That's saying we just want
one result from the database.
| | 12:21 | -1 says, we want all the results.
| | 12:23 | Every single thing that you
find that matches this, return it.
| | 12:27 | It's going to have a post_type of page,
which is important that all of our
| | 12:31 | products are published as pages in
WordPress. We only want pages as a result.
| | 12:35 | And then its parent is equal to pieces
1 and pieces 1 is this ID that we passed
| | 12:41 | it way back in this custom field.
| | 12:43 | So, just this line right here is
telling us, return to us all child pages of
| | 12:50 | that particular category, and then do the loop.
| | 12:52 | So this is the beginning of the
loop, this is the end of the loop.
| | 12:56 | So, as many products as you find,
repeat this bit of HTML here, and this bit of
| | 13:00 | HTML are each of these blocks.
| | 13:04 | So, it's just an anchor tag with this
special class name on it which styles it just so.
| | 13:09 | It has a title that's equal to the price,
and when I'm inside there, there's an image
| | 13:14 | and we're using
the meta product_thumbnail.
| | 13:17 | I think we used a
different id here though didn't we?
| | 13:20 | We're looking for the kind of regular-
sized version of it, which we called,
| | 13:26 | if we go look into one of our
products, just product_regular.
| | 13:34 | Then it outputs the title and it just
uses this function, the_title and that's
| | 13:38 | enabled, because we used the_post.
| | 13:40 | So that's come up a number of times as
soon as we do the post that we get access
| | 13:43 | to be able to use these functions
like the_title and the post_meta.
| | 13:48 | And then we're going to
output the product-code.
| | 13:50 | So, image, title, product-code, just
like here, image, title, product-code.
| | 13:57 | This is what we're trying to replicate here.
| | 13:58 | So, let's go ahead and save
this and take a look at it.
| | 14:02 | So, if we go back to the web and check
out our real store page, which is now a
| | 14:08 | category page, there we go.
It looks just like how we hoped it looked.
| | 14:12 | There's a title for Sprockets and
this link to the Sprocketizer page.
| | 14:16 | If I go back, we have a link to the
Super Sprunkler 2000, which links to the
| | 14:20 | Super Sprunkler page, and I can go back.
So we have perfectly working category page.
| | 14:25 | We could easily create a new product
that's a Sprocket and just categorize it as
| | 14:30 | Sprocket and it'll just pop in
right here. Likewise with Sprunklers.
| | 14:33 | So, if we click on the Sprockets, it's
going to take us to that Sprockets page,
| | 14:37 | but we need to quickly make
sure that that's setup as well.
| | 14:40 | So, let's go under to the Store
quick and see how this was setup.
| | 14:43 | We're going to grab all of this, go
back under Pages, go back under Sprockets,
| | 14:49 | and make sure that it has that custom
field that that category's page is going
| | 14:52 | to be looking for, but since we're on
Sprockets here, we're just going to give
| | 14:56 | it the Sprockets portion and
hit Add Custom Field. Update.
| | 15:01 | And then for Sprunklers, we're going to
do the same thing. Categories, and give
| | 15:06 | it the sprunklers, Add Custom Field, and Update.
| | 15:10 | Now, if we go under the Sprockets page,
it's just going to show us products that
| | 15:15 | are under the Sprockets category.
| | 15:17 | If we go back to Store, and we go to
Sprunklers, it's just going to show us
| | 15:20 | categories in the Sprunklers.
| | 15:21 | That's how we're recycling that category page
for both the store homepage and subcategories.
| | 15:29 | So that's creating a custom category
page using custom fields for our store
| | 15:34 | homepage and category pages.
| | 15:36 | Now, we're ready to move on
to other areas of the site.
| | Collapse this transcript |
| Creating the blog home page| 00:00 | Time for us to start working
on the blog section of our site.
| | 00:04 | So what we are looking at here is the
static HTML and CSS template version of
| | 00:09 | our blog home page and this is our
actual WordPress site and what we have for
| | 00:13 | the blog homepage right now.
| | 00:15 | Clearly not quite what
we are looking for it yet.
| | 00:18 | So to do this we are going to create a
new template in our theme that's sole job
| | 00:23 | is for the blog homepage.
| | 00:25 | So let me open up our project here in TextMate.
| | 00:28 | We have our static HTML in the left
and our WordPress theme on our right.
| | 00:32 | We are going to be making a new
type of page just for this blog home.
| | 00:37 | So let me go ahead and do
that and make a new file.
| | 00:39 | Let me call it page-bloghome.php and
much like we have been doing with other pages,
| | 00:45 | give it this first few lines
which tells WordPress that it is indeed a
| | 00:50 | special type of page template.
| | 00:52 | I am going to call it
Blog Homepage and save it.
| | 00:56 | Now the HTML that we are going to be
kind of copying from is over here in our
| | 01:00 | static HTML and CSS
template, the bloghome.html file.
| | 01:04 | So we are going to be kind of
copying some of that structure over here.
| | 01:08 | Remember in the very beginning of this,
the index.php file used to be in charge
| | 01:14 | of our homepage and just
show the most recent post.
| | 01:17 | So that's a good starting point for
us over here in our WordPress theme.
| | 01:20 | Now open that index.php file,
| | 01:23 | basically steal the whole thing,
and drop it over here in our page.
| | 01:28 | Now at the top of it, it opens up a
very traditional looking WordPress loop.
| | 01:34 | We are going in to adjust that a
little bit, because this is the page.
| | 01:37 | So we are going to do a query post
up here. You can tell if that is a popular
| | 01:42 | WordPress function and it has a lot of
power and we end up using it a lot in
| | 01:45 | custom theme building.
| | 01:46 | I am going to say post_per_page, say 5.
| | 01:53 | That's going to just adjust and give us
the five most recent posts that we want back.
| | 01:58 | I will save that.
| | 02:00 | Let's jump back now to the web into our
dashboard. So we can get there by going to wp-admin.
| | 02:08 | Take a look at our pages.
| | 02:09 | If we open the Blog page, it's
just what we published earlier.
| | 02:13 | Remember we published this one when we
are building our menu. We just made a
| | 02:16 | page called Blog and just published it
with no content, no parents, no template
| | 02:21 | really, but now that we have the Blog
Homepage template. That's going to show up
| | 02:26 | in his drop-down menu of templates available.
| | 02:28 | So we can select that and hit Update
and now it's going to be using this
| | 02:33 | template that we just have created.
| | 02:35 | So let's save it and see what we got going
on the web for our new Blog Homepage.
| | 02:40 | I am going to open it up in a new tab
and see that we have our one most recent
| | 02:45 | blog post showing here,
which is basically what we want.
| | 02:48 | We don't want to be looking at
anything that says blog anywhere.
| | 02:51 | This is just kind of a placeholder for
that template that really displays this.
| | 02:56 | We said we wanted to see the five most recent,
well, we only have one blog post published.
| | 03:01 | So if we were publish
another one, we would see it here.
| | 03:04 | So let's do that real quick.
| | 03:05 | So a new post, that's what a blog post is,
and we will call it Widget Corp Turns Five!
| | 03:13 | Content here and we hit Publish.
| | 03:15 | Now that should turn up on top through
our blog that's the most recent blog entry.
| | 03:20 | So that's what we have going on.
| | 03:22 | It still doesn't look
quite like this, though.
| | 03:24 | That's what we are going for.
| | 03:26 | That's why we have both projects in
TextMate open and we are going to match
| | 03:29 | what's going on over here
to what's going over here.
| | 03:32 | The biggest most obvious difference is
that there is this gigantic THE GRIND,
| | 03:37 | which is the name of our Widget Corp's blog.
| | 03:40 | So that we will copy over here.
| | 03:42 | It is this h1 tag with the class of giant,
which indeed it is. We will post that over here.
| | 03:49 | Let's look line by line a little bit.
| | 03:51 | Posts open up with div of class post
over here and that's what's going on here
| | 03:55 | with some extra WordPress stuff
going on. But that should be fine.
| | 03:59 | Our post titles are h4 tags here.
| | 04:01 | We will make these h4 tags to match.
| | 04:04 | Then it goes into our meta information
and you can see in this theme right now
| | 04:09 | that comes from that blank template that we used,
| | 04:11 | it's including this meta information so
that we can reuse it as a modular chunk.
| | 04:16 | Let's open up that meta to
make sure that it's very similar.
| | 04:19 | Posted on, it's dynamically displaying
the date, the author, how many comments.
| | 04:24 | So that's pretty close to what is
going on here and even has a div of class
| | 04:28 | meta, just how we want it to look.
| | 04:30 | In ours over here we don't list comments.
| | 04:32 | So we can take that out.
| | 04:33 | We will hit Save, come
back to our homepage here.
| | 04:38 | Then our content gets spit out
here within a div class of entry.
| | 04:42 | That's just what's going on
over here. So that's cool.
| | 04:45 | Then it displays this metadata here.
| | 04:46 | We are not going to need that, because we've
already displayed our metadata for the most part.
| | 04:50 | So we will get rid of that.
| | 04:53 | Then at the end of that this includes
this navigation, which should be a links to
| | 04:58 | show reading older posts and newer
posts that people go back and forth and we
| | 05:03 | didn't mock that up, but
that's fine for over here.
| | 05:05 | So I will hit Save and come back to the web
and see we are doing on the blog homepage.
| | 05:10 | This is our live version
and we are doing much better.
| | 05:13 | It doesn't look exactly like this,
because we have these specific posts here
| | 05:17 | with more content, but the styling
is exactly the same and that's what we
| | 05:20 | are going for here.
| | 05:21 | We don't see any navigation, because
we don't have more than five posts, which
| | 05:25 | is what we asked for.
| | 05:26 | But if we had six posts, we would see
some links down here for pagination.
| | 05:30 | So that's our blog homepage, mocked up
just how we have it in our HTML and CSS.
| | 05:35 | Now we need to look at
stalling an individual blog post.
| | Collapse this transcript |
| Creating a single blog entry page| 00:00 | So we have the homepage for our blog
setup. Now let's get into styling what an
| | 00:04 | individual blog article looks like on our site.
| | 00:07 | So in this tab I have open
here the blogsingle.html file.
| | 00:12 | This is from our HTML and CSS static
template. This is what we want an individual
| | 00:17 | blog article to look like, as we've mocked up.
| | 00:20 | This is the first time we've broken
out of the structure that we have going on
| | 00:24 | with this bold presentation of the post
title in this cutout section with the light on dark.
| | 00:31 | So let's take a look at our WordPress
theme project in our right in TextMate and
| | 00:36 | our static HTML and CSS project on our left.
| | 00:39 | The blogsingle.html file is what we're
working with. That looks how we want it to look.
| | 00:45 | In the file in a WordPress theme
that has to do with displaying what an
| | 00:48 | individual blog article looks
like is the single.php file.
| | 00:52 | So I'll open that up.
| | 00:53 | Now if we're comparing these two
things, we can see that there is this
| | 00:57 | opening div id of main-content, which is on
every one of our pages in our WordPress theme.
| | 01:03 | That's way up here in this file.
| | 01:05 | We have a number of things
going on before that opening tag.
| | 01:08 | The post-title and the meta
information come before that opening main-content tab.
| | 01:12 | Here they come afterwards.
| | 01:15 | So I am going to go ahead and cut those
and put them above the main content kind
| | 01:19 | of where they belong.
| | 01:20 | Notice that this also has an id of post-title.
| | 01:22 | We're going to bring that over as
well, because that has to do with that
| | 01:26 | specific styling going on and remove the stuff.
| | 01:30 | Now notice that the post-title uses
the dynamic WordPress function the_title,
| | 01:35 | which we've seen before.
| | 01:36 | Now the function that enables the
title to work is the WordPress loop and
| | 01:41 | specifically this function the_
post, which we've also seen before.
| | 01:45 | We're in this position again where
we don't really need a WordPress loop.
| | 01:49 | We're looking at one individual
blog article here, not multiple.
| | 01:53 | So we don't really need a traditional loop.
| | 01:55 | I am going to go ahead and take the_post
and then get rid of the opening and the
| | 01:59 | closing of the loop and
put the_post up here instead.
| | 02:03 | So it's before we're using the_title.
| | 02:05 | So that's going to work out just fine.
| | 02:07 | Now let's continue to
compare kind of line by line here.
| | 02:11 | Now we open the main-content.
| | 02:13 | We open the main content.
| | 02:14 | We have div within the class of post.
| | 02:17 | That's what's going on here with an extra
WordPress action going on, in case we need it.
| | 02:21 | Then the content of the actual post
is within this div class of entry.
| | 02:26 | That's what's going on here.
| | 02:27 | We're outputting for multiple page
posts in case we enable that feature.
| | 02:31 | That might as well be in there as
well as how the post is tagged.
| | 02:34 | We're not using any tags right now,
but it might as well be in there for now.
| | 02:38 | Now this link here is just for if you're
logged in as an administrator on this site.
| | 02:43 | It's going to show you a little link to edit
that post which you can click and go edit it.
| | 02:47 | Anybody else isn't going to see this link.
| | 02:49 | So that's just kind of a bonus for us, but
otherwise we're doing well here as far as layout.
| | 02:53 | Let's go ahead and save that.
| | 02:55 | Now just because we want to try and
match what's going on here in our static thing,
| | 03:00 | let's post this exact
blog article on our actual site.
| | 03:04 | So the name of this post is Five Ways
Widget Manufacturing Can Be Bungled.
| | 03:09 | Let's go ahead and
publish a post under that name.
| | 03:18 | Now we need a bunch of fake content here.
| | 03:19 | We don't have any actual
content to publish here.
| | 03:22 | So a great resource for that if we just
need some quick fake content, normally
| | 03:25 | you think of Lorem Ipsum text for that,
| | 03:28 | there is a site called HTML-Ipsum that I did.
| | 03:31 | There is a little title
here called Kitchen Sink.
| | 03:34 | You could just click that and we'll
copy all of this content within this box to
| | 03:38 | your Clipboard and then you can just hit Paste.
| | 03:41 | The advantage to doing that is it has
a bunch of lists, lists within lists,
| | 03:46 | headers, bold text, links, stuff like
that so you can just get some quick starter text,
| | 03:51 | but it's already in HTML tags.
| | 03:53 | So I am going to go ahead
and Publish that new blog post.
| | 03:56 | Then I'm going to click View Post.
| | 03:58 | Open it up in a new tab, so we can
see how we're doing here. Very good.
| | 04:02 | So this is our actual live WordPress site.
| | 04:05 | It has this content going
on here and it looks great.
| | 04:09 | So our client will be all set for
blogging and publishing good-looking
| | 04:13 | articles on their blog.
| | Collapse this transcript |
| Implementing comments| 00:00 | The commenting system in
WordPress is really quite nice.
| | 00:03 | We're going to be looking at enabling
comments for our individual blog post
| | 00:08 | articles in our theme.
| | 00:10 | So we just looked at styling an
individual article for our theme, but at the
| | 00:15 | bottom of it the article just ends.
| | 00:17 | So that's where we're going to want to
enable our comments and get that system going.
| | 00:21 | I have our theme open here as a
TextMate project. In the single.php file is the
| | 00:28 | theme file that controls
what this page looks like.
| | 00:32 | You can see on this line here that
the comments_template is commented out.
| | 00:36 | That's what these two slashes are here.
| | 00:37 | So if I just remove that from here
and save it and reload this page, that's
| | 00:42 | instantly going to enable the
commenting functionality of our site.
| | 00:45 | So all the sudden there
is this Leave Reply thing.
| | 00:48 | So that's what the comment form looks like.
| | 00:50 | It asks for your name.
| | 00:51 | It asks for your email.
| | 00:52 | It asks for your website.
| | 00:53 | You can type a comment in the box
and Submit Comment to show a comment.
| | 00:57 | This also would have shown comments
that have already been posted on this
| | 01:02 | blog post, if there were any, and
there isn't.There does exist one though
| | 01:07 | in that blog post that comes when you
install WordPress, the very first post Hello world!
| | 01:12 | comes with a default comment.
| | 01:13 | So you can see it here.
| | 01:14 | Mr. WordPress is telling us Hi, this is a comment.
| | 01:17 | So you can see on this blog post, here
is the content of the post, here are all
| | 01:22 | the comments that have been left so far,
and here is the comment form below it.
| | 01:26 | We enable all of that just by this one
little line, this comments_template and
| | 01:30 | we can use that anywhere else that we want.
| | 01:32 | If we wanted our pages to have
comments, we just put this line there.
| | 01:36 | Really easy that way.
| | 01:37 | Now it's a modular piece in that
| | 01:40 | basically, what this says just like
sidebar, and footer, and header it says go
| | 01:44 | get comments.php and put that code there.
| | 01:48 | So all the stuff is coming from this file here.
| | 01:52 | So it does some tests. There is
different things that can happen in WordPress
| | 01:57 | related to comments that this needs to test for.
| | 01:59 | If you decide that comments are
closed for this post, then it won't show
| | 02:03 | this, things like that.
| | 02:04 | If you decide that this post is password
protected, it needs to know to not show
| | 02:08 | the comments for that as well.
| | 02:10 | So that's some of the
logic that's going on here.
| | 02:12 | You may not need to touch this file at all.
| | 02:14 | In fact we're going to be
doing very little with this.
| | 02:17 | We just need to know how to style
this stuff and just kind of basically
| | 02:21 | what's going on in here.
| | 02:23 | A really nice feature of the blank theme
that we used to start this project, and
| | 02:28 | now that's going to be available in
exercise files here under the BLANK-Theme.
| | 02:32 | If you don't have access to the exercise
files for this course, you can download
| | 02:37 | this BLANK-Theme as the free
exercise file from the course page.
| | 02:41 | Now, there is a style.css
file in this BLANK-Theme.
| | 02:45 | We're going to open it up and remember
there is very little CSS styling in here,
| | 02:49 | but one really cool feature of this
BLANK-Theme is that it comes with all this
| | 02:53 | base styling right here.
| | 02:55 | Everything that starts with
ol.commentlist and ordered list with a class
| | 02:59 | of commentlist is deal
specifically with WordPress comments and
| | 03:03 | specifically threaded comments.
| | 03:05 | So I can just go ahead and copy all of
the styling and open the style.css file
| | 03:10 | from our own theme and just
paste that in here somewhere.
| | 03:13 | Now that's going to deal
with styling of these comments.
| | 03:17 | So if I hit save and reload, you're going
to see some changes with this comment list.
| | 03:22 | Now it's styled like this.
| | 03:23 | Not a huge difference, but what's cool is
that it's enabled for threaded comments.
| | 03:29 | So if we were to leave a reply here,
now this is also a good point is that it's
| | 03:33 | asking for our name, and
address, and website, and stuff.
| | 03:36 | If we log in WP admin, it's going to ask
us for a username and password, because
| | 03:41 | we're not logged in at the moment.
| | 03:44 | Go back to our blog post page that we're
just looking at and down to the bottom.
| | 03:50 | Notice it's going to ask us for our name,
address, and website anymore, because
| | 03:55 | we're logged in and it already
knows that information about us.
| | 03:58 | So if I type "This is a comment" and post
it, it will get posted as another comment.
| | 04:03 | See it has a little bit
different of a background color.
| | 04:06 | That's all coming from the CSS
that we just copied and pasted.
| | 04:11 | Replies are ready to go.
| | 04:12 | So if I click Reply, notice how that works.
| | 04:15 | I can click Cancel to get out this reply.
| | 04:17 | It moves this comment form within this
comment to visually represent that we're
| | 04:22 | replying to this comment.
| | 04:24 | So "This is a reply" and Submit Comment,
and notice it gets this new styling now
| | 04:30 | where this reply comment is kind
of buried within this other comment.
| | 04:33 | All that styling that visually
represents this is coming from this CSS over here.
| | 04:39 | So it's just a nice base to work from,
rather than having to figure out how to
| | 04:43 | write all that stuff from scratch originally.
| | 04:45 | You can adjust things.
| | 04:46 | Notice how there is some margin
involved here and that's not quite lined up.
| | 04:50 | We can go ahead and make adjustments
to the CSS, just remove the margin from
| | 04:55 | that outer wrap and kind of get
things lining up a little better.
| | 04:59 | We could add some bottom margin to
kick it away from Leave A Reply and give it a
| | 05:06 | little more breathing room there, but
it's a nice feature of the blank theme and
| | 05:09 | we already have comments styling ready
to go and comments enabled for our theme.
| | 05:14 | There is a few settings that we
should look at in regards to Discussion.
| | 05:20 | We have this box checked right here that says
C"moment author must fill out name and e-mail."
| | 05:24 | That's making those two fields required.
| | 05:27 | So you can't submit an anonymous comment.
| | 05:29 | If you wanted to allow anonymous
comments, you could leave that unchecked.
| | 05:33 | There is also things in here about
requiring users to be registered. There is
| | 05:37 | things about An administrator
must always approve comments.
| | 05:41 | If you don't want to allow any talents
until you literally approve the,m and this
| | 05:45 | bit about threaded comments.
| | 05:47 | So how deep do you want to
allow that threading to work.
| | 05:50 | So read through these discussion
settings and make sure that your comments are
| | 05:54 | set up just how you want them to be.
| | Collapse this transcript |
| Finishing the home page| 00:00 | So our WordPress theme is almost done.
| | 00:02 | There is just one more thing that we
need to wrap up, and that's the homepage.
| | 00:06 | That's what we're looking at now, and
it looks just how we want it to look.
| | 00:10 | It's just these two Featured Widgets
down here are just static content and
| | 00:14 | we want to replace that with dynamic content,
now that the store has been fleshed out.
| | 00:19 | So I will open up our WordPress theme.
| | 00:21 | We have opened all of our WordPress
theme files as a project in TextMate.
| | 00:25 | And the file that we have working,
that's our homepage, is this home.php file.
| | 00:30 | And you can see here is Featured Widgets
and then there is an unordered list and
| | 00:34 | here is the two widgets that we have
featured as list items, but you can see
| | 00:38 | that this content is just static.
| | 00:40 | It's not dynamic as we want it to be.
| | 00:43 | So what we're going to do is show one,
the most recently published widget in
| | 00:48 | the Sprockets category, and the most
recently published widget in the Sprunkler category.
| | 00:54 | That way it kind of changes a little bit.
| | 00:55 | If they publish a new sprocket, this is
just going to swap out immediately with
| | 00:59 | the new one that they published.
| | 01:01 | And they can switch things around
if they want by just adjusting the
| | 01:04 | publication date of the widget's page,
and the most recently published one will
| | 01:08 | be here on the front.
| | 01:10 | So we are going to use a query_posts function.
| | 01:13 | You have seen it before in these
previous videos, query_posts, and we want to
| | 01:19 | pass it parameter, a parameter, a query
string, telling it exactly what we want.
| | 01:25 | So we want posts_per_page of 1, we just
want 1, and we want the post_type to be
| | 01:33 | a page, and the post_parent is the
ID of the parent page of sprockets.
| | 01:41 | Now, if we forgot what that was we
can just go back to our pages.
| | 01:47 | Find the Sprockets page.
| | 01:49 | You can see if you click on it
in the URL, it says post =92.
| | 01:53 | That's the number, that's the ID, and
any product that we publish that's in the
| | 01:57 | Sprockets category is a child page of Sprockets.
| | 02:00 | And you can see that we have the Mega
Sprocketizer is a child page of Sprockets.
| | 02:05 | That's what we're after here, so
the post_parent is 92 in this case.
| | 02:10 | Now, we don't need to start a loop
again, because we're only showing this one thing,
| | 02:13 | so we'll just do the_post.
| | 02:16 | And instead of displaying the
static title, we'll use the_title.
| | 02:23 | And instead of displaying the static
content here, we'll just say the_excerpt,
| | 02:29 | which is kind of like the content only.
| | 02:31 | It just only displays a little
bit it, a few sentences of it.
| | 02:34 | In case the description was super, super long.
| | 02:37 | It's going to prevent that from coming up.
| | 02:39 | Now, instead of the static URL resource
here, we're going to grab that custom field.
| | 02:45 | We're going to echo out the
get_post_meta of the post ID.
| | 02:52 | We're passing it product_regular here,
and just as a recap, if we go into that
| | 02:59 | product and look at its custom
fields, product_regular has this value of
| | 03:05 | exactly where that image is located.
So that's what's getting spit out here.
| | 03:08 | And then true to ensure
that it's just a single string.
| | 03:13 | And then it's the Image of, we'll just
use the title here again, so we have a
| | 03:19 | proper alt tag, and then a
link to the product itself.
| | 03:24 | So we can do that with the_permalink.
| | 03:26 | Now let's get rid of this one for
now and see if that's working properly.
| | 03:37 | Go out to our homepage in a new tab.
| | 03:41 | We have the Mega Sprocketizer.
| | 03:42 | It looks just like how it looked before,
only everything is being pulled in
| | 03:46 | dynamically, and if we click VIEW
PRODUCT we'll go right to that product, just
| | 03:49 | how we want it to be.
| | 03:51 | So we want to also display the most
recent product in the Sprunkler category, so
| | 03:57 | let's just duplicate that code and
instead of it being 92 we'll make it 94,
| | 04:02 | which is the ID of the Sprunkler page.
We'll hit Save and we'll be able to see
| | 04:06 | exactly what happens there.
| | 04:07 | The most recently published
Sprunkler is right here, again, with the same
| | 04:11 | dynamic content, and hit VIEW PRODUCT
and I'll go right to that product page.
| | 04:15 | So we've come a long way here, folks.
Our theme is complete. We have a homepage
| | 04:20 | that's dynamically showing widgets.
| | 04:22 | We have a few pages you
can click around and view.
| | 04:25 | We have a store page where you can
view categories of products as well as
| | 04:29 | individual products.
| | 04:31 | We have a blog page where you can see
the most recent blog entries as well as
| | 04:35 | individual blog entries with a
comment system. Lots going on here.
| | 04:40 | So I think you have the tools you
need to extend this theme as needed.
| | Collapse this transcript |
|
|
4. Beyond the ThemeWill this work with WordPress?| 00:00 | One of the questions that I get from
people very commonly is, will this work
| | 00:05 | with WordPress, where "this" in that
sentence is usually some nifty looking effect
| | 00:10 | they found on the web?
| | 00:11 | The answer almost always is yes.
| | 00:15 | So there's three really important
things that you should know here, in that
| | 00:19 | WordPress doesn't care what
HTML you use in your theme.
| | 00:23 | WordPress doesn't care what
CSS you use in your theme.
| | 00:27 | WordPress doesn't care about JavaScript either.
| | 00:30 | It doesn't care what you do with any
of these technologies in your theme.
| | 00:33 | It just doesn't matter.
| | 00:34 | It's just there to help you serve up content.
| | 00:37 | So let's take a look at an example.
| | 00:39 | On the web here, on one of my web sites,
there is this article called Creating a
| | 00:44 | Slick Auto-Playing Featured Content Slider.
| | 00:47 | So let's go down, I'm going to scroll
down and click the View Demo button and
| | 00:51 | take a look at the demo for this article.
| | 00:54 | You can click these little thumbnails
here and it will slide around and show you
| | 00:57 | different content panels.
| | 00:59 | So this is what one of those
emails might have been about.
| | 01:02 | It might have been, will
this work with WordPress?
| | 01:05 | And it's absolutely, yes, it will.
| | 01:07 | So let's take a look. I am going to
go back to the article and click the
| | 01:10 | Download Files button and download this example.
| | 01:13 | I'm going to drag this folder onto the
TextMate icon and open it up as a project.
| | 01:18 | I'm going to open up the
index.html file that came with this.
| | 01:22 | And look at what's going on here.
| | 01:24 | There are some JavaScript files being
loaded. There's a CSS file being loaded.
| | 01:29 | So if you want to use this, of course
you're going to need to load those scripts
| | 01:32 | and that CSS as well.
| | 01:35 | Down here we have the HTML
that's making this thing happen.
| | 01:38 | Looks like there is a wrapper, and
another wrapper, and then each one of
| | 01:43 | those panels that we're looking at looks like
it's got one of these div with a class of panels.
| | 01:48 | So we just talked about the WordPress
loop in the last chapter. This looks
| | 01:53 | like a good opportunity to have a
loop that would output each one of these
| | 01:57 | panels, doesn't it?
| | 01:58 | So if we open up our theme, we're
going to need to probably open up the
| | 02:07 | header.php file, load our
scripts, and our CSS up there.
| | 02:12 | Then maybe we'll make a custom
template like we did for our product, only it
| | 02:16 | will be for the special page that you
want to use the slider on, and that page
| | 02:22 | maybe will conditionally
load those scripts and that CSS.
| | 02:25 | Then we'll have a loop and
that loop will output those panels.
| | 02:30 | So that's how you would approach
using something like that you found on the
| | 02:34 | web with WordPress.
| | 02:36 | And we're going to be covering how to use
JavaScript in more detail in future movies.
| | 02:40 | But let's take a look on the web,
at another website. This is a WordPress
| | 02:45 | powered website, and it's using this exact
example that we just looked at on their homepage.
| | 02:52 | This is the Slick Auto-Playing
Featured Content slider, this is a WordPress
| | 02:56 | powered site, and this is
their implementation of it.
| | 02:58 | So if you find some nifty looking
effect on the web that's powered by
| | 03:03 | JavaScript, HTML, CSS, the answer is
yes, absolutely, it will work with WordPress.
| | Collapse this transcript |
| Using JavaScript in themes the right way| 00:00 | I would like to talk a little bit about
using JavaScript within a WordPress theme.
| | 00:05 | So when you use JavaScript, you link
out to JavaScript files from somewhere
| | 00:11 | within your website.
| | 00:13 | I have our whole theme folder
opened up as a project here in TextMate.
| | 00:17 | In the header.php file, we could link
out the scripts right from within here.
| | 00:23 | I could do something like this.
| | 00:25 | Script src = js/test.js, close
that script tag, and there we go.
| | 00:34 | We have some JavaScript that's going
to be loaded and activated on this page.
| | 00:39 | You might see it in the head section.
| | 00:40 | You might often see it in the footer.
| | 00:42 | It's often recommended that for speed
purposes scripts can be loaded just
| | 00:46 | before the closing body tag down
here so they don't interfere with the
| | 00:50 | loading of the page.
| | 00:51 | That's pretty common. So that's one way.
| | 00:53 | It's absolutely going to
work in your WordPress theme.
| | 00:55 | There is no reason why you can't do it that way.
| | 00:58 | But there is an important concept here,
and if you are working with JavaScript
| | 01:02 | these days, there is a really high
chance that you are working with one of the
| | 01:06 | popular JavaScript Libraries, which is
jQuery, MooTools, Prototype, Dojo, Yahoo!
| | 01:12 | User Interface, there is a bunch of these ones.
| | 01:14 | jQuery is really popular one.
| | 01:16 | So we are going to be loading up the
jQuery library first and then our custom script.
| | 01:21 | So it depends on that
library being loaded first.
| | 01:25 | So how do we do that?
| | 01:26 | Well, in the blank theme that we
started with there is this function.php file,
| | 01:31 | and we only made one little alternation
to it when we added our menus, but all
| | 01:36 | the rest of this code
came from that blank theme.
| | 01:38 | We haven't touched it very much.
| | 01:40 | I want to focus on this section right here.
| | 01:42 | There is a few things going on right here.
| | 01:44 | First thing is it does a test and it says,
if and then an exclamation point is_admin.
| | 01:50 | It's saying if it's not the admin area,
then do this code in between here.
| | 01:55 | And there's three functions that are running.
| | 01:56 | One of them says deregister_script,
wp_deregister_script jquery, and
| | 02:02 | wp_register_script jquery,
and then enqueue_script jquery.
| | 02:06 | So what its doing is it's saying that
jQuery has already been a registered
| | 02:10 | script, whatever that is, and then
so I want to deregister it and then
| | 02:14 | reregister it and then enqueue it.
| | 02:16 | So if we were to remove
these two lines right here--
| | 02:19 | Let me just comment them out.
| | 02:22 | This is still going to work.
| | 02:23 | It's still going to
enqueue JavaScript in our theme.
| | 02:26 | Now I want to save that, I want to
reload this homepage, and I want to take
| | 02:30 | a look at the source.
| | 02:31 | I'm in Safari here, so I'm going to
press Command+Option+U and look at the
| | 02:34 | source code for this.
| | 02:36 | And you can see right at this line here,
it's loading the JavaScript Library and
| | 02:42 | you'll notice the file path.
| | 02:44 | It's loading it from this
wp_includes folder right within our
| | 02:48 | JavaScript installation.
| | 02:49 | Now, if I close that out, come back
over here, and uncomment these two lines,
| | 02:55 | and in TextMate, I can highlight
multiple lines and comment or uncomment
| | 02:58 | things with Command+/.
| | 03:02 | Now it's deregistering and
reregistering with this URL.
| | 03:06 | Now, that URL points to a version of
jQuery that lives out on Google Servers.
| | 03:12 | Now, the reason you might want to do
that is because, chances are Google Servers
| | 03:15 | are a lot faster than yours, lot more
reliable than yours, and if another page
| | 03:19 | uses this, which is very common, it's
going to come out of your browser's cache
| | 03:23 | and still having to re-download it again.
| | 03:24 | It's just a faster way to
use a library like Google.
| | 03:27 | I'm going to save that.
| | 03:29 | Refresh the page and
let's peek at the source code.
| | 03:31 | Again, that gets rendered out and
instead of-- it's still loading jQuery right here,
| | 03:35 | but it's loading it from
that Google location instead.
| | 03:38 | So that's what's going on there.
| | 03:40 | But it's not doing it for the admin area,
which also has some JavaScript effects
| | 03:45 | in there, so we don't
want to affect the backend.
| | 03:48 | If we choose to use a more up-to-
date version of jQuery, let's say, than
| | 03:52 | WordPress ships with, then we won't
interfere with any of that backend stuff.
| | 03:57 | Now, you notice how that worked even
if these two lines were gone, that still
| | 04:01 | worked, because jQuery is one of
the scripts that comes with WordPress.
| | 04:05 | Now, there's a number of
other ones that come with it.
| | 04:07 | If we wanted to use Prototype,
we could just put the word prototype in there,
| | 04:12 | reload the page over here, view the
source. You can see that the Prototype
| | 04:19 | Library is being linked to it here.
| | 04:22 | It also ships with WordPress.
| | 04:24 | So what are all of your different
options, what are all the different scripts
| | 04:28 | that ship with WordPress?
| | 04:30 | There is this URL right here that comes
right from WordPress.org itself and it's
| | 04:34 | just a big list of all the
scripts that ship with WordPress.
| | 04:38 | So that's pretty cool.
| | 04:39 | Now, you aren't necessarily limited to
scripts that ship with WordPress, because
| | 04:44 | like you said, we wrote over the
jQuery Library that came with it.
| | 04:47 | We can register our own scripts if we want to.
| | 04:50 | And that's a different function.
| | 04:51 | It looks like this. wp_register_script.
| | 04:56 | And we have to give it a name.
| | 04:57 | We'll call it myscript.
| | 05:00 | And we've got to give it a location.
| | 05:01 | Now, we're going to put it in
our theme. We're going to say this
| | 05:05 | JavaScript is dependent on this theme.
| | 05:07 | We'll just call it test.js.
| | 05:08 | So we have a new JavaScript
file in our theme, test.js.
| | 05:13 | Now, we need to tell it the
location that script exists.
| | 05:17 | So we will go get_bloginfo, which
has a bunch of information on it about
| | 05:22 | our blog, including where our template
directory is, and we'll add to that /js/test.js
| | 05:34 | Now it's registered, so my script
has a value of where it lives and what
| | 05:38 | file it's referencing.
| | 05:39 | We need to enqueue it as well.
| | 05:40 | wp_enqueue, and we'll just say myscript.
| | 05:50 | So if we save that and we reload our
homepage over here and view source again,
| | 05:56 | we'll be able to see that we're also
additionally queuing up this script.
| | 06:01 | And you will see one little weird thing here.
| | 06:03 | It's appending on this
version number to the end of it.
| | 06:06 | That's the version of
WordPress that's currently running.
| | 06:08 | That automatically happens because
WordPress may, in an update, adjust the
| | 06:14 | version of the JavaScript file that
it ships with and it just wants to make
| | 06:18 | sure that it doesn't pull an old version out
of cache in case there is a dependency there.
| | 06:22 | So that's just why that happens.
| | 06:24 | It's not going to affect
your JavaScript file in any way.
| | 06:27 | So why is this all
happening in the functions.php file?
| | 06:31 | It's only just to keep it clean really.
| | 06:34 | We could put the same code into the
header.php file, assuming we do it
| | 06:39 | before the wp_head call.
| | 06:41 | So you see all that-- we keep viewing
source over here and taking a look at
| | 06:46 | this kind of big block of
code that gets pumped out here?
| | 06:50 | We keep having to view source to see
that, because in our header.php file,
| | 06:55 | it's just this one line.
| | 06:56 | It's just this wp_head.
| | 06:57 | So all the stuff that gets enqueued,
just gets spit out at this one little line
| | 07:03 | here and it keeps our header.php file clean.
| | 07:05 | You can see there is
already enough stuff in here.
| | 07:08 | So it's just kind of a way to
keep ourselves organized and clean.
| | 07:12 | It's the fact that we can
enqueue these scripts back here.
| | 07:16 | Now, the most important part that we
haven't mentioned yet about enqueuing
| | 07:21 | scripts is that it's just
the courteous thing to do.
| | 07:24 | It tells WordPress that
we are indeed using jQuery.
| | 07:28 | Now, if another script comes along
and also needs jQuery, WordPress already
| | 07:33 | knows that you have jQuery
registered and won't overwrite you.
| | 07:38 | It won't load another copy of jQuery,
which will almost certainly cause problems.
| | 07:43 | There is a popular plug-in
called WP-Pulse. It's great.
| | 07:47 | If you want to add Pulse to your site,
just load up this plug-in, put it in
| | 07:50 | there, and you can add a Pulse to
your sidebar in your widgetized area.
| | 07:54 | It also ships with jQuery and loads up jQuery.
| | 07:58 | Now, if we were to go into our
header.php file, just put a script tag right in
| | 08:03 | here, have that link out to jQuery
somewhere, WordPress doesn't know about that
| | 08:08 | and it's going to load up when we
use WP-Pulse another copy of jQuery.
| | 08:13 | We have two copies of jQuery being loaded.
| | 08:15 | There is going to be conflicts.
There is going to be problems.
| | 08:18 | And even if there isn't, it's loading
that copy twice and that's a waste of
| | 08:22 | bandwidth and all that.
| | 08:23 | So it's just the courteous, smart
thing to do to use wp and enqueue script to
| | 08:29 | load up your jQuery files, or
any JavaScript files really.
| | Collapse this transcript |
| Implementing something fun with JavaScript| 00:00 | We are now going to cover adding
some custom JavaScript to our theme.
| | 00:05 | So in order to do that, we are going
to have to have some custom JavaScript
| | 00:09 | files that we link out to of
our own creation in our theme.
| | 00:13 | So I'm going to open up our whole
project here. We have our whole theme opened
| | 00:17 | up as a TextMate project.
| | 00:18 | You can see we have this JavaScript folder.
| | 00:21 | It is just an empty folder sitting
there in our theme and that's where we are
| | 00:24 | going to put any JavaScript files
that are specific to this theme.
| | 00:28 | So I'm going to put a new one in
there,. We'll just call it widgetcorp.js.
| | 00:32 | So Widget Corp just being the name of
this website and it's a kind of symbolic
| | 00:36 | to us saying that this is a JavaScript
file that we intend to load on every page
| | 00:41 | of this site, whereas if we're going
to write a JavaScript file that was just
| | 00:44 | for the blog, say for example,
we would probably call it blog.js.
| | 00:48 | We are just inventing this name here.
| | 00:50 | And this is going to be where we can
write our own custom JavaScript that
| | 00:53 | we will do with this theme.
| | 00:55 | We need to load it though; we need to
make sure that this JavaScript file is called.
| | 00:59 | We can do that in our header.php file.
| | 01:01 | Now I know we have just covered
enqueuing scripts, which is a great way to go, and
| | 01:06 | we are enqueuing jQuery.
| | 01:07 | So let's take a peek at functions.php
quick to ensure that yes we are indeed
| | 01:13 | enqueuing the script of jQuery.
| | 01:15 | So in our header.php file that's going
to get enqueued right here at this line.
| | 01:21 | Now this JavaScript that we are going
to write is going to be dependent on
| | 01:24 | jQuery, so we need to
load our script after this.
| | 01:27 | Now if we were to just make a mistake
and load it up here, our JavaScript isn't
| | 01:32 | going to run correctly.
| | 01:33 | So do take note of where this wp-head
function is and load your custom scripts after it.
| | 01:39 | So we will say script and we're
just going to need a source and we will
| | 01:43 | close that script tag.
| | 01:44 | Now what's that source going to be?
| | 01:46 | It's in our template file, so we will
go ahead and steal this little function
| | 01:50 | right here where we linked
out to our custom store.css.
| | 01:54 | That's just giving us the URL of
where our template lives on our server.
| | 01:58 | We'll plunk that in here and
then say /js/widgetcorp.js.
| | 02:08 | So we will save that and we will reload
this homepage and we are going to take a
| | 02:12 | look at the source just to make
sure that that worked properly.
| | 02:15 | So here is jQuery being loaded and then
underneath that here this is where our
| | 02:19 | widgetcorp.js file is being loaded.
| | 02:22 | So that's going to work great for us.
| | 02:24 | We could test quick, we could do
something like-- let's see. A lot of
| | 02:28 | jQuery starts like this.
| | 02:30 | We'll wrap it in this, which
means when the DOM is ready.
| | 02:39 | We could do something dramatic like
we will target the body tag and make
| | 02:43 | its background red.
| | 02:47 | Just to prove to ourselves that
this JavaScript is working. And wow!
| | 02:51 | It's that ever red and working, so
we will remove that for now because it
| | 02:56 | definitely is working.
| | 02:57 | What we are going to be doing is
adding a span element to each one of these
| | 03:03 | anchor links in our navigation, because
in our style.css file we already have
| | 03:08 | some CSS written to take care of that.
| | 03:10 | So it gives it this special
background image and it gives it some absolute
| | 03:15 | positioning and you'll see what
it does in a minute styling-wise.
| | 03:19 | So if we target every single link,
which we can do with CSS selectors and
| | 03:23 | JavaScript, like in our navigation all
anchor links, like we could use this in
| | 03:28 | CSS to style that, just a CSS selector,
and say append, just put inside a span,
| | 03:36 | and we will say inside that
span is just a space character.
| | 03:43 | Now as soon as we do that, because we
have styling ready for it, it's going to
| | 03:46 | append these little spans. So each of
these little ribbon like things that
| | 03:50 | look like they're sitting underneath
this page are just because we have put
| | 03:53 | that extra span there.
| | 03:54 | So that's pretty neat.
| | 03:56 | Now each one of these ribbon things
here in the sidebar also have and those of
| | 04:00 | a class of date, so we can select multiple
things in jQuery by just going like this, date.
| | 04:05 | And we will reload that. Now
each one of those has that as well.
| | 04:08 | So it's a kind of a neat little effect.
| | 04:10 | What we are going to be going for here
though is kind of a grow-shrink effect as
| | 04:14 | you scroll over these and we are
going to do that and we are going to use a
| | 04:17 | plug-in to help us do it.
| | 04:19 | It's called the hoverFlow plugin, so
just google hoverFlow and it will come
| | 04:22 | right up and it solves a
little animation problem in jQuery.
| | 04:26 | So just to cover that really quickly,
this is what they're calling The Problem.
| | 04:29 | You see if I scroll over these and
then move my mouse away it queues up those
| | 04:33 | animations and they keep
going for ever and ever.
| | 04:36 | The alternative is to use the Stop command
but then they don't complete their animations.
| | 04:40 | This hoverFlow plugin allows nice,
smooth animations no matter what happens here.
| | 04:45 | So it's a free download.
| | 04:47 | I am going to click this button here and
download this hoverFlow plugin to our Desktop.
| | 04:51 | I'm going to minimize this stuff for
a minute and I'm going to put this
| | 04:56 | JavaScript file that we just
downloaded from them into the JavaScript folder
| | 05:01 | where our custom JavaScript file
is. So let me drag that in here.
| | 05:05 | Now we have access to that as well.
| | 05:08 | So in our header.php file as part
of our theme, we loaded up our custom
| | 05:12 | script but we are going to use this
plug-in now, so just before our own
| | 05:16 | script, we are going to load that.
| | 05:19 | It's called jquery.hoverflow.min.js
and I switch them around again. The whole
| | 05:29 | point was to load the plug-
in first, so we will do that.
| | 05:34 | Now we have access to this
hoverFlow function and it works like this.
| | 05:41 | Again, we are going to target all
anchor links in our navigation and when you
| | 05:48 | hover over it, this is the
effect and we run our function.
| | 05:54 | Now the e there represents the event that
happened, which is going to be a Mouse Enter event.
| | 05:59 | We are going to want something to happen
and what we want to happen is something
| | 06:04 | to this, which this refers to the
anchor link that we just rolled over.
| | 06:08 | We are going to do a number of things.
| | 06:09 | We are going to use hoverFlow.
We're going to give it the event type.
| | 06:13 | That's required for hoverFlow.
| | 06:16 | We are going to tell it that
we want to animate something.
| | 06:17 | So when we hover in, we
want to extend the width a bit.
| | 06:20 | So we are going to say we want to
extend the width to about 230 pixels, we want
| | 06:25 | you to take 200 milliseconds to run that
animation and while you're in there,
| | 06:30 | we want to make sure
that the overflow is visible.
| | 06:34 | Then we are going to find that span,
which is that little part that sticked out
| | 06:38 | with the shadow, so we're going to
find the span and we are going to use
| | 06:43 | hoverFlow on it as well.
| | 06:44 | We are going to make it shorter than it
normally is, so we are going to give a
| | 06:50 | width of 15 and want you to take 200
milliseconds to complete that as well.
| | 06:57 | Now the Hover function has a callback event.
| | 07:00 | So we can do something like this. function.
| | 07:02 | We will give it e again. That's the event.
| | 07:05 | So this is going to run when
your mouse out of something.
| | 07:08 | This is the code that we want to run
when our mouse enters an area and this is
| | 07:12 | the code that we want to run
when our mouse leaves the area.
| | 07:14 | So I am going to copy this code and
paste it in here and we want this to return
| | 07:18 | to what it was before, which is about
215 pixels. We want the span to return to
| | 07:23 | what it was before, which is about 20 pixels.
| | 07:25 | So if we save that and go back out
to the web, we should notice a nice
| | 07:36 | animation effect working on our header,
so that as we roll over this, this area grows,
| | 07:40 | the span gets shorter.
| | 07:42 | As we move out, things kind of return to normal.
| | 07:45 | So that's the effect that we are
going for, capable, and we wrote it all by
| | 07:49 | ourselves using our own custom JavaScript.
| | Collapse this transcript |
| Introducing plug-ins| 00:00 | I would like to talk a little
bit about WordPress plugins.
| | 00:03 | You might have heard of
this WordPress plugin thing.
| | 00:06 | These are files that you can add to
your WordPress site that extend the
| | 00:10 | functionality of WordPress in some way.
| | 00:13 | It might add forms to your site, or
change it graphically a little bit, or
| | 00:18 | just make WordPress do something that it
can't normally do out of the box, as they say.
| | 00:23 | So if you want to go browse around and
check out available plugins, you can go
| | 00:27 | to WordPress.org and go under the
Extend tab, into Plugins, and you'll be in
| | 00:33 | the Plugin Directory.
| | 00:34 | And you can see there is
over 10,000 plugins here.
| | 00:37 | They've been downloaded like 110 million times.
| | 00:40 | It's pretty crazy, but plugins are
very popular and they can do some really
| | 00:44 | cool stuff to extend WordPress.
| | 00:46 | You can check out the most popular ones,
having to do with spam blocking and SEO
| | 00:50 | and adding forms and things like that.
| | 00:53 | So how do you download and
install and use a plugin?
| | 00:56 | That's what we're going to take a look at.
| | 00:58 | It's actually really easy. You can
do it from the dashboard of your site.
| | 01:02 | Here in the sidebar of your site, there's a
whole area called plugins. We can click that.
| | 01:07 | WordPress comes by default with two
plugins. One of them is Akismet, which
| | 01:12 | has to do with blocking spam that comes
in with comments, which can be kind of
| | 01:15 | an epidemic problem, but Akismet does a great
job of blocking that spam, kind of transparently.
| | 01:21 | You don't have to do any work;
you just activate it and let it do its thing.
| | 01:24 | And this Hello Dolly plugin.
| | 01:26 | If we activate that, we can see this
quote being added up here, which is just a
| | 01:30 | Louis Armstrong quote from the song Hello Dolly.
| | 01:33 | It doesn't do anything.
| | 01:34 | It's just a really simple plugin that way.
| | 01:36 | Just for your Admin area.
Nobody visiting your site will see that.
| | 01:40 | Now, if you want to add a new plugin,
you can go to the Add New area of the
| | 01:45 | WordPress Admin and literally
search and add plugins through here.
| | 01:49 | You don't have to do it that way.
| | 01:50 | You can jump out to the web
and do it this way as well.
| | 01:53 | So let's add a plugin to our site.
| | 01:55 | We're going to add a breadcrumb to our site.
| | 01:58 | Let me just do a search here for a wp
breadcrumbs. This is going to pull up my
| | 02:02 | favorite breadcrumb
plugin called Breadcrumb NavXT.
| | 02:07 | What a breadcrumb is, it's a style of
navigation that lists like how deep you
| | 02:12 | are in the navigation of the site.
| | 02:14 | So imagine a site where you have an
About page for a university and within that
| | 02:19 | About page there is Faculty and Staff.
Ao you go down to Staff, and then you go
| | 02:24 | down to a person, and then you go down
to their contact info, and you're like deeper
| | 02:28 | and deeper into the hierarchy.
| | 02:29 | A breadcrumb navigation would have
links coming all the way back up, and you'll
| | 02:33 | see what I mean in just a second.
| | 02:34 | So I'm going to click the Download
button here and download this file.
| | 02:38 | It's going to download to our Desktop.
| | 02:40 | Here's all the files that a plugin is.
| | 02:43 | Now, to activate this plugin, here is
our root, htdocs folder, all the files
| | 02:49 | from our WordPress installation.
| | 02:51 | Here's our theme that we've been working with.
| | 02:53 | In the wp-content folder,
there is a folder called plugins.
| | 02:56 | Now, there is, inside there, here's
akismet, the folder for Akismet, and the
| | 03:00 | Hello Dolly plugin. These are the
two plugins that we've already seen.
| | 03:03 | I can drag this whole folder into the Plug
-ins, and then that's going to be there.
| | 03:07 | So I can come back to our Plugin screen
in our Admin. I'll click and go back here.
| | 03:13 | Now we're going to see three. Wee're
going to see Akismet and Hello Dolly that we
| | 03:16 | already saw, and then this Breadcrumb plugin.
| | 03:18 | Now, when you drag a plugin in there,
it's not active by default. I need to
| | 03:23 | choose to activate this plugin.
| | 03:24 | So I'm going to go ahead and click
Activate and my plugin is now activated.
| | 03:28 | And if I go back to my homepage,
you're not going to see any difference.
| | 03:31 | It doesn't do anything by default.
There is function that you need to add to
| | 03:35 | show breadcrumbs
where you want to show them.
| | 03:37 | I'm thinking on our site it's
most appropriate in the Store.
| | 03:42 | So now we've drilled down to the
Store and now we've drilled down to just
| | 03:45 | Sprockets in the Store, and now we've
drilled down to an individual product in the Store.
| | 03:50 | There's some stuff that's appropriate
for breadcrumbs going on here, because
| | 03:53 | we're kind of three levels deep now, so it
would be kind of neat to be able to backup.
| | 03:57 | We don't have any mechanism
to backup one step right now.
| | 04:01 | So now that we have this breadcrumb
installed, we can add a little code to our
| | 04:05 | theme to output those breadcrumbs.
| | 04:07 | So how do you do that?
| | 04:08 | Well, let's take a look
at the documentation here.
| | 04:11 | It links out to this author's site
and it says for Basic Usage, this is the
| | 04:17 | code that you put in your theme.
| | 04:18 | So let me go ahead and
copy that to my Clipboard.
| | 04:21 | Then I'm going to open our project,
and I have our whole project open here in
| | 04:25 | TextMate, and then I'm going
to open up the page-product.php.
| | 04:28 | This is the template file that's
controlling this page that we're looking at
| | 04:33 | here and we're hoping to put a little line
of breadcrumbs right up here, above the title.
| | 04:38 | So I'm going to go ahead and paste
that code that the author gave us.
| | 04:42 | And if we take a little quick glance at this
code, I'm just going to format it how I like it.
| | 04:47 | It's using this if function_
exists breadcrumb display.
| | 04:50 | Before it used breadcrumb display.
| | 04:53 | That's a little bit of that past-
proofing, future-proofing kind of thing.
| | 04:56 | If all of a sudden we were to
deactivate this plugin and it didn't have this,
| | 05:01 | it just had this, we're going to get
that nasty PHP error that we don't want,
| | 05:05 | so this is just protecting us
against that possibility.
| | 05:08 | So once that's in there and the plugin is
activated, I can go ahead and reload this page.
| | 05:13 | And there's our breadcrumbs, really nice
style breadcrumbs right on top of this.
| | 05:17 | We are being told that Mega
Sprocketizer is a sub-product of Sprockets.
| | 05:22 | We can back right up to Sprockets.
| | 05:24 | Oh no, my breadcrumbs went away though,
so maybe we should put this code on the
| | 05:27 | Category page as well.
| | 05:29 | No problem. We'll just copy and paste
that code, and reload here, and we get the
| | 05:38 | breadcrumb here as well.
| | 05:39 | So if we're on the Sprocketizer, we can
backup one level, the breadcrumbs stay
| | 05:42 | right where they are, so
it's really nice and easy.
| | 05:45 | We can backup all the way to the Store.
| | 05:47 | And then it's saying Blog at the
front here. I'm not sure if we need that.
| | 05:50 | Why don't we go into the settings for
this plugin, which should add a new option
| | 05:54 | to our Settings from the Admin area.
| | 05:57 | I'm going to click on Breadcrumb NavXT there.
| | 05:59 | And I'm going to say, it's going to
ask me if I want Home at all there.
| | 06:02 | I think that's fine, but
it's not our Blog at our Home.
| | 06:04 | It's literally our homepage,
so we'll say Home > Save Changes.
| | 06:08 | Now, there's a bunch of categories in
here for Settings, so make sure to explore
| | 06:12 | all that for your own site.
| | 06:13 | I'll reload and now it's going
to say Home instead of Store.
| | 06:16 | So that's what plugins are for,
extending what we're able to do with WordPress.
| | 06:21 | Kind of really easy to use,
hopefully, kind of way.
| | 06:24 | So explore the Plugin repository,
check out plugins, activate them on your
| | 06:29 | site, and have fun with that.
| | Collapse this transcript |
| Setting up security| 00:00 | One thing that's going to be very
important for us to talk about is
| | 00:03 | WordPress security.
| | 00:05 | We're working locally here so
WordPress security isn't a big deal, but
| | 00:08 | ultimately we're going to be moving
this site live, out to the web, out in
| | 00:12 | public, and security is a very big deal there.
| | 00:16 | Because bad guys, basically they
want into your site, they want to do
| | 00:20 | nefarious things to it, they want to
insert their links to it to help them out
| | 00:24 | with SEO in some terrible way, or
they want to redirect your site to their site,
| | 00:29 | all kinds of nasty things.
| | 00:31 | We're trying to fight against them
and make sure that they can't get access
| | 00:35 | to do those things.
| | 00:36 | So WordPress, unfortunately, because
it's basically the world's number one
| | 00:41 | publishing platform, is a big target.
| | 00:44 | Bad guys are always trying to break
into WordPress and find exploits for it.
| | 00:49 | It's a little bit akin to the Windows
versus Mac kind of thing, in that Windows
| | 00:53 | is such a bigger target that bad guys
are always trying to work on viruses for
| | 00:58 | Windows, because there are so many
more Windows computers out there.
| | 01:01 | There's a lot of WordPress sites out
there, so they have all the incentive they
| | 01:05 | need to be working in hacks for that.
| | 01:08 | So some of the most simple things you
can deal with, and that are absolutely
| | 01:12 | some of the most important things as
well, is just picking strong passwords.
| | 01:16 | Ultimately you're going to have FTP
access to your site. Make sure that the
| | 01:20 | password to FTP is very strong.
| | 01:22 | That your database password is very
strong and that literally your user, if we
| | 01:28 | go under here, into our Dashboard,
into our Admin area, into our User area,
| | 01:33 | our password for our login to
WordPress is very strong as well.
| | 01:37 | Now, maybe a year ago or so, mid-2009,
there was an exploit found in WordPress
| | 01:44 | that would be able to create a new
admin user and that would have access to do
| | 01:51 | everything to your account. Change
things in the database of course, because
| | 01:54 | they have access to back here, which
is where we do that, and your theme as
| | 01:58 | well, because literally you can edit
your theme from the Appearance Editor and
| | 02:03 | change theme files as well.
| | 02:04 | So if somebody gets access to the
backend here of the site, they can
| | 02:08 | really trash it in a way.
| | 02:10 | So that's no good. Make
sure your passwords are strong.
| | 02:13 | Now, another important consideration
is when we're going to be moving this
| | 02:17 | site live to the web through an FTP Editor,
all those files have certain file permissions.
| | 02:24 | Like who is allowed to edit it, and
the numbers that we're shooting fo --
| | 02:29 | now, if you're an FTP client and you
like right-click on a file and Get Info,
| | 02:35 | those files-- and the files I'm talking
about here are the core WordPress files
| | 02:39 | in our htdocs folder here.
| | 02:42 | Files have a permission of 644 and
folders have a permission of 755.
| | 02:48 | Those are the numbers that you're
shooting for to keep things locked down.
| | 02:52 | Now, there's a number of security
precautions that we can take directly in this file,
| | 02:56 | this wp-config file.
| | 02:58 | I'm going to double-click that
to open it in our code editor.
| | 03:01 | Now, you remember at the top of this file,
we had to edit it to add the database
| | 03:07 | user, the database
password and the database name.
| | 03:11 | Now, we didn't do anything else in here
and WordPress recommends that for one
| | 03:15 | thing, we set up these authentication
keys. This is just an easy quick step.
| | 03:20 | It gives you this URL that you can put
into your browser and it's going to give
| | 03:24 | you code to replace this with.
| | 03:26 | I have that open here.
| | 03:27 | We can just copy and paste that code and
put it in there as an extra security measure.
| | 03:34 | The thing below that is
this thing called table_prefix.
| | 03:38 | You can see its value is wp_.
| | 03:40 | I'm going to go ahead and open up the
database that we're using to run our
| | 03:45 | WordPress site locally.
| | 03:46 | It's this free software,
Sequel Pro. I have it open here.
| | 03:50 | I'm going to go ahead and connect to
our local MySQL Server and choose the
| | 03:55 | WordPress database that we set
up when we installed WordPress.
| | 03:58 | Now it's all populated with the
tables for all of our WordPress data.
| | 04:03 | You can see that each one of
these tables starts with wp_.
| | 04:08 | So we could literally come in here and change
that table_prefix on each one of these tables.
| | 04:14 | If we do that, it's going to basically
break our WordPress site, until we come
| | 04:18 | in here and change it to what we
changed the table_prefix to be.
| | 04:23 | Now, the reason you would do that is
that a bad guy might try and get access to
| | 04:27 | your site and if they do get access,
run a bunch of scripts to insert or
| | 04:32 | delete stuff from your database, and
that script probably depends on this
| | 04:38 | default table_prefix.
| | 04:39 | So if you change yours, their scripts
will break and you'll be safe, so it's
| | 04:43 | kind of a security measure that way.
| | 04:45 | Now, one of the most important
things in regards to security is not only
| | 04:50 | prevention but being able to roll back to a
non-hacked site in case your site is hacked up.
| | 04:56 | So I'm talking about backups.
| | 04:59 | Now, when you're talking about
backups in WordPress, we're talking about
| | 05:02 | two different things.
| | 05:03 | We're talking about the files, your
theme, all that stuff that we've been
| | 05:08 | working on, basically our theme file
here and anything else that we've edited in
| | 05:12 | the WordPress-land, but we're
talking about the database as well.
| | 05:16 | So we need to back up both of those things.
| | 05:19 | You can do it manually.
| | 05:20 | You can login through an FTP site
and just grab all these files and maybe
| | 05:24 | drag them to your Desktop and burn
them to a CD and mail it to your mom or
| | 05:28 | anything like that.
| | 05:29 | You can also do it manually.
| | 05:31 | Now, to do it manually for the database,
there's a great plug-in called the WP-DBManager.
| | 05:39 | So if you go to wordpress.org, into
their Plugin Directory, and look around for
| | 05:44 | the WP-DBManager, it's at this URL,
go ahead and download that, install it to
| | 05:49 | your site, and activate
it from the Plugins menu.
| | 05:53 | There're a few steps that you have to
take, but it allows you to do on-demand
| | 05:58 | backup of your database and you can
literally even have it email you your
| | 06:02 | database, like on a daily basis.
| | 06:04 | So if all of a sudden you found out
your site was hacked, there was a database
| | 06:08 | problem, you would have a copy of your
WordPress database from before the hack,
| | 06:13 | so that's a great plugin for that.
| | 06:15 | Now, another one that I really
like is called WordPress File Monitor.
| | 06:19 | It looks at all the different files
from your installation, literally all of
| | 06:25 | these files, and it will
watch and see if they ever change.
| | 06:30 | If any file changes, you can have it notify you.
| | 06:34 | So again, you just activate it as a
plug-in and we'll add a new setting.
| | 06:40 | Go under Settings there and you can give
it an email address, where it will send
| | 06:43 | those notifications to you.
| | 06:46 | If you have specific files that you
don't want to be notified about, you can
| | 06:50 | put their paths here.
| | 06:51 | Examples being if you upload new files
or cache folders. You wouldn't want to
| | 06:56 | be notified of those things
changing, but anything else.
| | 06:59 | So a bad guy gets into your site,
changes the file, you get an email that's
| | 07:03 | like wow, a file change, I wasn't in
there doing anything, so you'd know that
| | 07:07 | something is happening right away.
| | 07:10 | Now, there's one more thing that
deals with both database backups and file
| | 07:14 | backups combined into one.
| | 07:16 | The makers of WordPress is a company
called Automattic and they have another
| | 07:20 | product here called VaultPress.
| | 07:22 | Now, it's an online service.
| | 07:24 | It's not free, but it's
not too expensive either.
| | 07:27 | I think it's $15 a month or $40 a month.
| | 07:29 | But it's a plug-in you install on your
WordPress site and it backs up to their
| | 07:34 | servers securely your database and all
the files from your site, so combined.
| | 07:40 | It does all of that, and then it looks
through all those files for potential
| | 07:44 | security problems and tells you about it.
| | 07:46 | So it's a backup solution, an all-in-one
backup solution, a cloud-based backup solution.
| | 07:52 | So your data is safe up there.
And a security monitoring tool.
| | 07:58 | So if your site is important enough to
have all this stuff, definitely consider
| | 08:03 | VaultPress as a tool and definitely
take security seriously on your site.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | So we've come a long way, folks.
| | 00:02 | we went from complete scratch to a
finished working WordPress theme.
| | 00:07 | So if you have access to the exercise
files for this theme, you're going to
| | 00:10 | get this theme and the blank theme and the
base HTML and CSS template and the Photoshop file.
| | 00:18 | Feel free to do whatever you
would like with any of those files.
| | 00:22 | If they're going to help you, if you
can recycle and use some of that in your
| | 00:25 | own project, definitely go ahead and do that.
| | 00:28 | If you have any questions about
using those files, go check out the video
| | 00:31 | "Using the Exercise Files."
| | 00:34 | Now, just because you watched this
whole series on building a WordPress
| | 00:37 | theme, it doesn't mean you're not going to
have any more questions. I'm sure that you will.
| | 00:42 | And I want to cover a few resources
that you can go to with those questions.
| | 00:46 | I think the number one
place is wordpress.org itself.
| | 00:50 | It has this thing called the Codex,
their documentation for WordPress, and there
| | 00:55 | is just lots of information in here.
| | 00:58 | Every single WordPress function is documented.
| | 01:01 | All the way from really the basics,
getting started in installation, all the way
| | 01:05 | through lots of advanced topics.
| | 01:07 | So if you have a specific question on
a way WordPress works, check out the
| | 01:11 | wordpress.org page first.
| | 01:14 | Now, if you're more of a book person,
WordPress doesn't have an official book
| | 01:18 | per se, but there is a
number of books available.
| | 01:20 | I wrote one of those books.
| | 01:22 | It's called "Digging into WordPress,"
which you can find at digwp.com/book, and
| | 01:27 | buy it as a PDF or a print version from there.
| | 01:30 | There are a number of sites that I
think are really nice sites that I subscribe to,
| | 01:35 | are my favorite sites about keeping
up-to-date about WordPress and tips and
| | 01:39 | tricks about WordPress.
| | 01:40 | One of those is wpengineer.com,
one is Justin Tadlock's site, one is
| | 01:47 | yoast.com, and wpcandy.com, some of
my favorite sites to subscribe to for
| | 01:53 | WordPress news and information.
| | 01:56 | That wraps it up, folks.
| | 01:58 | I very much enjoyed our journey of
building a WordPress site together and wish
| | 02:02 | you all the best of luck
in your WordPress journey.
| | Collapse this transcript |
|
|
