Tip:
Highlight text to annotate it
X
Hi, and welcome to this video tutorial.
I often get asked where to start when building WordPress themes.
And so I hope that this video is a place where you can do just that.
We’re going to start today by making the most basic of WordPress themes
and help you get started on the right path to understanding how WordPress themes work and are built.
So, what we’re going to do is, we’re going to introduce two files that are needed as a
minimum for any WordPress theme.
These two files are:
style.css
and index.php.
So WordPress will look
for a style.css
file for information about your theme; such as your theme’s name, a description of the theme, author details etc.
WordPress will also look for a index.php
because it uses this file as a default for
Okay, let’s get started.
The first thing that we need to do is create a folder
for our theme so we need to navigate within our WordPress installation to the wp content folder,
and then the themes folder.
So, next thing we’re going to do is create a folder called
, “My first theme”.
And let’s create two files;
the first will be called style.css.
And in style.css
we need to put what’s known as some header information.
This just lets WordPress identify the theme and
display it in the administration panel, so when we’re ready to
display it in the administration panel, so when we’re ready to activate it shortly it will have all the details
, but we’ll come back to the activation in a bit.
Okay, let’s start by adding theme name. Before we do
this, we have to tell our css file about the information that we’re
about to put in, is a comment, and we do this by wrapping it
in these common indicators. So that’s
/* star and */,
so the first thing that we need to do
is to give our theme a name. As we
called our theme folder, “My first theme”, let’s name
our theme the same.
If you have a
page on your site, or a whole site dedicated
to your theme, you might also want to add a theme URI,
which is just a link to the theme.
Next, let’s add a description.
Author details
a link to to yhe author’s page.
A version number
and we’ll call this version 0.1 because we’re just getting started.
Lastly we want to include our licensing
information and then any general comments,
but really we don’t need to worry about these just now.
Next, we need to open our index.php and all we’re going to
put in this file is “hello world”
and let’s save our file.
Believe it or not you’ve created your first theme. Don’t believe me?
Okay, let’s go into our WordPress
admin panel and we’re going to activate
our new theme.
So at the moment if we
go to our site, we should just have our standard WordPress theme running.
If you’re running WordPress 3.5
with a 2012 theme, then you are going to see the same
as we have here.
So we’re just going to log in
by going to /wp-admin
in the admin area and we’re going to put our
login details in, hit the log in button
and we’re going to navigate to appearance
and themes.
So we can see here,
we can see a current theme is 2012, and you can see here
available themes - “my new theme”-
and what we’re going to do with this
theme is we’re going to activate our theme.
So we can see the message here, our new theme is
activated.
So let’s
visit our site,
and there we can see “hello world”
our new theme has been activated.
So,
just to recap, what have we done in this video
tutorial?
We have created a folder to
house our theme under the
wp-content/themes folder.
We’ve created an index.php
and a style.css
Within our index.php file we’ve just put
a “hello world” text just to check that our
theme is working. And within
our style.css
we’ve put some
descriptive information about
our theme. So we can identify
the theme within the WordPress administration
section.
So, I hope you have enjoyed this WordPress
tutorial and enjoyed making your first WordPress theme.
If you have, give us a like, and leave
comment below. If you haven’t, leave a comment below and
let us know why. In our next tutorial we’ll be using
the same theme files we just created now, we’re
going to do a couple of things. We’re going to add a menu,
with some links to our pages, we’re going to be replacing our “hello world”
text with our post and page titles
and also bring it in for content as well.
So make sure you subscribe to our channel so you don’t miss out!
Catch ya next time.