Tip:
Highlight text to annotate it
X
So it's the first tutorial in WordPress Theme Development.
In this series, the title says it all.
We're going to be creating a WordPress theme.
So we're going to be turning the site that you
see in front of you into a fully compatible WordPress theme.
So I'm not actually going to show you
how to design the site.
It's all been built on Bootstrap 3.
So a lot of you asked for that.
It's all built on Bootstrap 3 and I'll just
be putting all of the source files in the description
below for you to download.
So I'll give you the download for the main site.
And it's just HTML and CSS form and JavaScript.
And I'll be showing you how to turn it into WordPress.
It's pretty much what you see in front of you.
It's similar-ish to the tech site
that I showed you how to build with Bootstrap 3.
Except I made quite a few modifications.
Well, I pretty much changed it all
to make it more WordPress friendly,
if you get what I mean.
So what we have here is the Jumbotron
is going to show the latest post.
And that is put up here automatically.
And then we've also got a list of posts
in there, all sorts of categories.
I think this lists 10 posts, but you
can change that in the WordPress settings.
And then, along the side here, it's
going to automatically fill out all
of the categories that have posts in them.
So if you have a category with no posts in it,
it's not going to show up here.
So I can sort through these categories.
And I can see this in Guides and Tutorials.
So it's showing me this one.
If I go into Uncategorized, it shows me this one.
So I can also, if I go into Guides and Tutorials,
I can also click on this, and that brings up
the article page.
And this is all done dynamically with WordPress.
So, along the side here, you can also
see the six latest posts to WordPress.
Again, done automatically.
And they are all listed on the side here.
What else is there to share?
So if I go to the home page-- this also
links directly there as well.
We've also got an About page up here,
which can be edited in WordPress in our Dashboard.
So if I go into here, Pages or Pages-- my site is a bit slow.
And I go About Us.
Here is the page.
And that can be edited in WordPress.
And the changes will be reflected out here.
So that's pretty much it for the site.
So what you're going to need to get started
is you're either going to need PHP hosting somewhere,
or you're going to need a local host.
So if you're using a local host, if you
want to just run this on your local computer,
I would suggest getting WampServer or XAMPP.
I prefer Wamp, it's just what I've always used.
Never used XAMPP before, but either one should be fine.
I'm not going to show you how to install it
because that would just take time.
But if you've ever installed a program in your life,
you should be able to do it fine.
If you're hosting it somewhere online-- so it's, I don't know,
go with any, DreamHost, HostGator,
any of those companies.
They often have auto installers to install WordPress.
So that makes it really easy to install.
And you just have to click a button and they'll do the work.
Though, if they don't give you that,
or if you're using a local host, you'll
need to head to wordpress.org.
And you'll need to download it here.
And then go download WordPress 3.7.1.
That's the current version.
This tutorial series is supported for this version.
It'll probably be backwards compatible as well.
Quite far.
And hopefully, you'll be forwards compatible,
if that's a thing.
So you just open this up, literally.
And you just need to extract this and put
in the root directory of your site.
And then you go to your site and it
will give you every easy install process.
If you want me to make a video on how to install WordPress,
I can do.
Just ask for it in the comments.
So this tutorial series assumes that you already
have WordPress installed.
You just want to make a theme for it.
So as I said, if you want a series on how
to install WordPress, by all means,
ask for it in the comments.
So what you're looking at right now
is FileZilla, which is my FTP client connected
to my server, which is hosted with DreamHost.
And this is basically the root directory
of where WordPress is installed.
So we got all these bunch of files here that do things.
And we've also got these three folders, Wp-includes,
Wp-content, and Wp-admin.
The one we're interested in is Content.
This is going to have our theme in it,
and then the folder Themes.
And inside here, I have four folders.
You should have two at the current version.
We've got 2012 and 2013, which come with WordPress.
Those are the default themes.
You've also got Bootstrap, which is the example on which I just
showed you being used.
With this is what we're going to be creating.
And I've also got this one.
It's called Blankslate.
Now normally what you'd do is you'd edit directly
into this Blankslate to make your life easier, supposedly.
But I find that this just complicates things
as you got to read through their code and understand it.
And I like to do coding.
My code practices are quite different to some other
people's.
So that is why I don't really like editing it directly.
But what I do use this for is-- let's have a look here.
We can go into Entry.php, view Edit, and here it is.
This is their code.
I like to look in here and I can pick out functions and stuff.
So I know what to use in mine.
So as long as I don't edit directly into this,
I still make quite good use of it.
So I'm just going to close Sublime.
By the way, I'm using Sublime Text 2 now.
A lot of you asked for it before.
I finally got it.
So heading back into here, what we're going to do
is we're going to create a directory.
And we're gonna call this "My Theme."
WordPress themes generally, well they
need to have no spaces in, as some browsers and servers
and things mess up with that.
So put no space in it just be safe.
Now in here, what we're going to do
is we're going to create a couple of files.
The first one is Style.css This is
going to contain some information about Wordpress,
about our theme, as well as our styling.
So we're going to create a new file
as well called Index.php, Header.php, and Footer.php.
So essentially what this is, Header
is going to contain everything.
Like the header of the page.
Everything that's going to be reused at the top.
And the footer going to be the complete opposite.
Just at the bottom.
And then this Index.php is going to put everything together.
And then starter CSS, as I explained,
can contain our styles and our WordPress information.
Now, it's important that you do not
put these in files inside folders.
WordPress won't understand it.
They've all got to be loose outside here.
So the first thing we're going to do
is open up our Style.css file.
So first what we need to do is add the information
for WordPress to read about our theme.
And this is done inside of CSS comments, which are like that.
And here, what we're going to put is Theme Name.
And take note of my capitalization and spacing.
And get rid of the semicolon.
And here I'm just gonna put BS3 Theme.
Like that.
Then Them URI, which is basically where can
your theme be downloaded from.
It doesn't really matter what you
put this as, if it's just for yourself.
I'm just going to put coders-guide.com.
Then we've got to put a description,
which, again, same styling.
And I'm just going to put My Bootstrap 3 responsive theme.
Next thing is a version, which is
going to be one, since this is the first version of it.
Author, I'm going to put Neil Rowe.
And then Author URI.
And then set this to just your website.
It doesn't really matter.
And I'm going to put coders-guide.com again.
Just like that.
So now save that.
And we can minimize this.
In Folders, I need to actually go in and press Yes every time
to upload the changes.
But I'll probably cut this out in the future.
All right, so what we want to do is head into our site.
And what I'm going to do is go into my Admin,
which can be accessed at the root directory /wp/admin.
And then what we can do is go to Appearance, Themes,
and then here you should see BS3 Theme or whatever
you called it.
That's my Blankslate from earlier.
And currently I've got installed Tutorial theme.
But I'm going to activate this one.
So just hit Activate.
And then visit the site.
And there's nothing there.
And that is what we want because there's nothing in our files.
So we are going to start working on that in the next tutorial,
but I'm going to end it off here.
It's already quite far into the story, into the time.
So thank you for watching.
Don't forget to comment, rate, and subscribe.
And I'll see you next video.