Make a WordPress theme with Bootstrap 3 – Tutorial #1
Articles,  Blog

Make a WordPress theme with Bootstrap 3 – Tutorial #1


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.

49 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *