Ever wanted to build
your own WordPress theme?
Well in this video,
we'll show you how.
Building themes for
WordPress is fairly simple.
If you've ever wanted to
build a theme for your website
and not had to buy one or
use one of the default themes
that come with
WordPress, it's not
very hard to build
your own if you
know a little bit
about web development
and a little bit about coding.
So in this video,
we're going to explain
kind of the basics of how
to get a theme started.
And then in future videos,
we'll expand on that.
So let's get started.
So here on the
IdeaPro.com website,
we've created an
install of WordPress
on IdeaPro.com/example.
And here, we're using
the 2017 default theme
that comes with WordPress.
And in our back end here,
if you go to Appearances,
you see 2017 is the
activated theme.
Now if you'll notice, we
don't have any other themes
in our appearance here.
And the reason is is because
we remove anything of WordPress
that we're not using.
As soon as we
create a new theme,
we'll remove the 2017 theme,
just to keep everything
cleaned up on the back end.
So we're going to
go to our editor.
And under Example here,
IdeaPro.com, under the Example
folder, under WP Content,
we've got plugins
and we've got themes.
And here's the 2017 theme.
So we're going to close that.
On the Themes folder here, we're
going to create a new folder.
And we're going to call
this IdeaProExample.
And we'll put it
all in one word.
So now we have the
IdeaProExample folder.
And we have nothing in it.
So now we're going to put
something in this folder.
All right.
So I have default
HTML code here.
It says Default HTML 5 Code.
Now, what I'm going
to do with this code
is create the structure
of the files that
are needed for our WordPress.
So I'm going to leave this here.
I'm not going to save it.
I'm going to create a new page.
And I'm going to save
this new page under--
let me get to the right area
here-- examples [INAUDIBLE]
content, themes, IdeaProExample.
All right.
So we're going to
name this Header.php.
And now in this
Header.php file, we're
actually going to paste
everything from this body tag
up.
We're going to
paste that in there,
and we're going to save it.
Now we're going to
create a new file,
and we're going to paste this
bottom part into the new file.
And we're going to
save it as Footer.php.
Now, we have the header
here and the footer.
We can actually get rid of this.
We don't need it anymore.
So now we have a header and a
footer file in IdeaProExample.
The next thing we need
is we need an index file.
So we're going to save
this, call it Index.php.
And then we need
a functions file.
So we're going to call
this Functions.php.
And then we need
a Style.css file.
So we're going to save
this and call it Style.css.
And now we're ready to
get started on adding
some content to some of this.
So in the Header.php
file, some of the defaults
that we're going to put in is
we're going to put in WP_Title.
And what this does is it's the
default function for title.
And we're going to leave
just two single quotes here.
And we're going to leave
that just like that is.
And we're going to hit Save.
Now we're going to come
into the Index.php page.
And we're going to
put in get_header.
And then we're going to
come down a couple lines,
and we're going
to say get_footer.
And we're going to save that.
Now in the Header.php page,
right before this closing head
tag, we're going to put
in wp_head and save that.
And then on the footer page,
before the closing body tag,
we're going to put in wp_footer.
Now, we're going to save that.
So now what this head tag does
is any plugins or functions
that are called to add stuff
to the header of the site
will be added here.
Now, on the footer, this
wp_footer, any functions
or plugins that call an action
to put something in the footer,
this is what this
will bring in here.
This function here brings in any
of those plugins and functions.
So on the PHP Functions
page, we really don't even
need anything in there.
We'll put in a default
PHP open and closing tags.
And then on the Style.css page,
we're going to put in Open PHP.
We're going to put in a--
start a comment.
And we're going
to say Theme Name.
And this is going
to be Idea Pro--
oops-- IdeaProExample Theme.
And then we can put
in the theme URI.
URI.
And we are just going to put
in https://www.IdeaPro.com.
And then we can also put in the
author, which is going to be
[INAUDIBLE].
We can put in the author--
oops-- URI, which is
[? joshuaherbeson.com. ?] Keeps
putting in that
closing tag on there.
And then that's really
all that we need.
We can actually
add a description.
And this is just
an example theme.
So now we have the Header.php
file, the Index.php file,
a Functions.php, a
Style.css, and a Footer.php.
These are the basics
that are required
to get your theme in there.
So now we'll go to here,
and we'll click Appearances.
And now you see we have
IdeaProExample theme.
So right now, we have
this theme activated.
And if we refresh the
page, it's still--
this is the default theme.
Now if we go in and we
activate this theme,
now our default
theme is activated.
And if we go in here and we
refresh this page, it's blank.
And the reason why is
because we literally
have put nothing in our theme.
This Index.php page is blank.
The header is the body closing--
opening tag here.
And then the footer is
the closing body tag here.
So if we want to, we can go
into here and put in Welcome
To Our Page.
And we can save that.
And now that is going to show
up on here, welcome to our page.
Now, one of the most
annoying things for me
whenever I'm creating a
theme and doing development
is this bar right here.
So really quickly, one of the
first functions that I write, I
actually have it as a plugin
that we install because it
makes it super quick.
But one of the first
functions that I do
is I go into Functions.php.
Page, and I say Show Admin Bar.
And inside of
here, I type False.
Whoops.
I spell it right.
So we save that.
And now if we refresh this
page, that admin is gone.
So if we want to turn it back
on, we can comment it out.
Refresh.
And this bar shows up
if you're logged in.
It's really annoying to me.
It really messes up
the code, the design.
It changes the whole layout of
what I want to see the site as.
So that's one of the first
functions that I write.
So this is the default to
creating a WordPress theme.
The other thing that you can
do is, if you have a look
that you want--
let's say that we want it to
look like our main page Idea
Pro here--
I can do a screenshot of this.
And then I can go into here,
I can go to the desktop.
I can change this to screen--
whoops-- Screenshot.png.
And then I can add this to
our website here, IdeaPro.com,
Example, WordPress Content,
Themes, IdeaProExample.
And we'll move this
Screenshot.png over
to our IdeaProExample here.
And then in here, we'll
just upload the file,
and go into our themes
and click Appearance.
And now we have a
screenshot of what
we want the website to look at.
Usually, as the designer sends
us a layout, or I design it
and we have a layout done,
I'll take a screenshot.
That way, I can have--
it's just quick to
see it, and it's good
for, if the client logs
in, they can see it.
So that's how to create
a theme using WordPress.
And we'll get into more of
the details in future videos.
Hope this video helped you.
Like and subscribe, and
please comment any questions
that you may have.
