Convert HTML to Wordpress Theme - Part 1

Part 1 - A look at how to convert a static html template to a full Wordpress theme.

Files can be downloaded at
http://www.techguystaging.com/program_files/escalate_files.zip

UPDATE:
If you want a more in depth series on building Wordpress themes, check out my new Wordpress Theme Development with Bootstrap series - https://www.youtube.com/watch?v=2Zt8va_6HRk

---

Closed Caption:

hey guys in today's video I'm going to
show you how to convert a static HTML
template into a wordpress theme and the
temple we're going to be using is from
free CSS templates . org
it's called escalate and it's very
simple clean template we just basically
have a logo area and navigation bar
we have a main post area with these are
just static HTML post with a title a
metadata info and an image in the text
so obviously will be converting this to
wordpress and we'll have a our sidebar
widget area as well
and then the footer is just a simple
text layer alright so i have a default
WordPress installation on my localhost
and this is where we'll be developing
this is where we can actually see the
results of the theme
ok so you can use any text editor you
want i'm going to be using sublime text
2 i'm going to create a new project so
that we don't have to keep going to
Windows Explorer
so let's see if you're using sublime
text 2 you want to do had folded a
project and this is in my see
and go to my htdocs folder which is in
my dropbox and wordpress
ok so this is just making it so i can
connect to my to the wordpress to this
site right here
alright so what we need to do is inside
of WP / con timing
- content in the themes directory you
want to create a new theme
ok so when is a new folder and this is
called what escalate
alright so now we have our Escalade
theme ok we need to add a couple crucial
files to this to this directory so the
first thing we're going to do is create
a style sheet so we're going to save
this inside the escalade folder has
style . CSS
ok
and we also need a folder called header
dot PHP
ok we also need a file called for . PHP
we need a file called index dot PHP
and let's see
new file the page dr. HP we need
let's see functions . PhD this is real
store all functions and page dot PHP is
basically a single pages
let's see we also need a file called
single dot PHP and this is for the
single blog post
when you click on the title of the read
more button and it takes you to that
post
that's single.php and i think that's it
we also need a sidebar ok so don't let
all the files overwhelm you i'm going to
go through each one side x dot PHP and
that should do it for now
alright so the first thing we need to do
is we need to write a few crucial
comments and style . CSS wordpress uses
this for the theme name and just took to
connect to the theme and we can go to
wordpress.org
and they should have a snippet so let me
just search for style . CSS snippet
I don't know if that's going to work
let's see directory code snippet
let's see
school of the documentation what exactly
sure where it is
see theme development
yep here it is all right so I'm just
going to copy this
and put that in here and you don't need
to have all of these
let's see we want a theme mean so the
theme name is escalate you want to put
your theme you are I so this would
basically just be your website
alright so the author
author URL for the same one
description this is a simple and clean
wordpress theme
license will keep as general public
keep that tags you can have tags don't
need that the text domain we're going to
put the name of the theme file which is
this late
okay we'll get rid of this
all right so that should do it
and now all of our main.css will go in
this file as well so let's save that now
we need to get the this HTML theme files
or template files so I'm actually going
to open a new window so we can look at
those that code as well so new window
this little smaller and i'm going to add
folded to project and i just want that
HTML
folder so this is the actual HTML files
let me just open up we basically only
have the index file and this in the CSS
file now what we need to do is is grab
the header code and let's see once just
going to take a second to look at this
and figure out what we need to take out
and put in the header file
we want the top of the document down to
let's see where this rapper ends
right here so that's the rapper and so
probably
header rapper ok so we want that the
menu we want and the header.php file see
page was that end
right there
ok Paige Figi top content
see where that ends there
so you can probably grab from the
content
all right
yeah so let's grab from this content all
the way up
i will copy that piece that into the
header dot PHP file and i'm just going
to get rid of the comments here
all right
so Heather goes there all the way down
to the content div so let's save that
and we're going to be adding dynamic
code in here so that we can that
actually make it a wordpress theme
I'll let's see now we want the footer
content so we don't want the post that's
going to go
that's going to be in the main index PHP
file let me have us actually have a
sidebar
this is where the content ends
so we're actually going to grab from the
ending content div all the way down
copy that and put that in the footer ok
and we're going to have a separate
sidebar file so we'll grab from here let
me just see where this ends right here
ok so just
grab all this
cut that
and this is where we want the sidebar
arm to be included
so what we want to do is say PHP get
sidebar
ok
right so we'll save that now let's grab
all the CSS
ok I'm just going to grab all of it copy
and place that in two right here
just get rid of this
all right
so our CSS file is complete
so we want to add some code to our
header all right
we want I see want to get rid of the the
static meta tags and we can keep the
Conte on content type the title we can
actually use the blog info API so PHP
blog info and this is title
ok so the what this will do is bring in
the dynamic title of whatever page were
viewing and as far as the case this
looks like we have been using some fonts
from google and then the style.css we
don't want to have that for the for the
a trip we're going to do PHP login info
stylesheet URL
yeah
ah i see that should be
that's good and under that we want to
add PHP WP underscore head and this will
bring in any other head content that
needs to be there
alright so let's see so that I mean the
goal is just to take out the static
content and put in the correct word
press PHP code
so for the template the Somme logo or
the title
we want to be this here ok which is that
that I guess the site name and then we
have the slogan underneath so we're
going to replace the static content so
we want to say PHP login phone you can
look all these api's up this blog info
on the wordpress documentation so this
is going to be the name
so basically just the name of the site
that we can we can change that inside of
the wordpress admin area
same thing with the actually we should
probably do that
before i forget what what it actually is
so in the back end
let's go to settings general in the site
title going to change too
escalate and then i'm going to just grab
that
grab
this i'm going to take the link out
I don't think we can do that
so let me just get this link out
all right
so see that
now we want to replace the slogan here
with
I get will keep the paragraph tags and
then inside here let me just copy this
and this is going to be description
all right so that will grab that from
the wordpress step and the last thing we
need to do right now is replaced the
navigation
alright so we want i'm going to delete
this unordered list but to get the
dynamic navigation we want to do PHP WP
underscore nav underscore menu and that
will bring in the menu so I'll get rid
of the static one and will create I
don't will create these exact pages but
we'll create our pages after
okay so that looks pretty good
alright so i'm going to save that and
let's see what we can add to the footer
we have a call to our sidebar
ah let's see the footer here we could
put a widget here but I'm just gonna
just going to leave the text as it is
because we're not really going to change
this so far is basically done for now
ok so header footer now we want to deal
with the index dot PHP and that's
basically the home page so we need to
create well first of all we want to call
in the header
ah yes so we'll say PHP
get help the index PHP is basically the
gateway to the home page so we want the
header and then we also want footer
now we're not going to see get sidebar
because we have that inside the floor
file right here
alright so the header/footer save that
and let's just say test right here and I
want to actually install the template
and see if we can get it up and running
so you can see our results and see it as
we go along
so what we need to do I going to open up
my wordpress folder which is C
okay so this is my wordpress site and
we're going to go to content themes and
what you
yeah so we actually don't need to look
at that right now so let's go to
appearance themes
and here we are we have our Escalade
file we can include an image of the
template which will do after I guess but
let's go ahead and activate this
all right so it's activated let's visit
the front end and see what we got all
right so that looks pretty good
we have the dynamic site name we have
the slogan which is coming from here in
the settings and just to make sure let's
just changes to will say escalates
all right so that changes that and also
change the page title
put it back
alright so we have one page here called
sample page
not sure what will happen all right so
our page dot PHP file isn't set up yet
so we're just getting a blank screen
so what we want to do now is set up the
index.php file which for right now only
has this line test
aside from the header and footer so
let's go to our header
I'm sorry index ok so here is what we
want to we want the main blogroll the
all the feet i guess and let's see we
want to style it a certain way
well first we'll just put the diet the
code in this so that we can make it
dynamic
alright so the post they run on a loop
so we have to create a while loop
alright so we'll say while have posts
which is a function
the post and the the syntax here is just
it's a little weird to me but it's
what's required i guess i'll have to
deal with it
some of the stuff i'm not really sure
why it is the way it is
let's see while host
think that's right
and then we want to end that you can see
PHP in while
all we want to have another parenthesis
here
alright so that's the while loop so
everything we put in here is going to
iterate over each post
so we're going to do is create stay
article
well actually shoot this template is
XHTML i'm actually going to change this
to just HTML
alright so now we're using html5 that's
fine
I actually get rid of this -
just teach me
alright so now we'll be able to use
html5 tags
so back to the index page
let's say article ID
we want each post to have its own ID so
we say ID post and then we want to the
ID so we can say PHP the ID
ok I think that's right so that will
attach this post - whatever the number
whatever the ID so that way we can
actually sit
we cannot single out certain posts if we
want to from within the feed and then
after that we need to say
PHP post class
ok so that'll be with the classes that
it needs
ok so let's put in our ending article
tag
ok so now what we want is we want the
title
well actually now is where will we can
grab the the code from the original HTML
template so let me get that
let's take a look at that
alright so
see we stopped
we stopped the header at
did we stop it
page believes
no content all right content so let's
see under content
let's grab this
div class post
just make sure
yeah so just grab this first post
you know what let's not even use the
article
yeah let's not even use the article tag
i don't know i usually put that in there
for my themes but i'm just going to this
is going to be just copied so arm that
in
I don't want to add anything to the
template i just want to show you how to
convert an existing template
alright so the title I if we leave it is
that if we leave it the way it is now
it's just going to show the static
information let's actually see that
let's save that and take a look
ok so there's just one post so it's
showing us the static content
so let's go ahead and change this
what
so for the title
we want
HP
I think it's just the title
ok so if we save that and look the title
should change
ok so changes to our posts we have one
post
we have the hello world post ok so the
title is now dynamic
so what else do we want to change here
we want to change
let's actually
huh
so it looks like the actual text starts
from here and ends here
so we want to replace that will say PHP
the contents
I inside we want the text for the read
more link which will just call read more
ok I think that's so it's
I'm sorry I'm in the wrong
I'm in the original HTML let me just
copy that and put that back
alright so
alright so this whole line is the post
all right let's try that
this text should now be replaced with
our actual post
ok is that all that's in there really
Wow
it's actually track grab some sample
content
this is just the alarm of some site you
can just grab just gobbledygook
just to make it look like a real post
ok update
alright so there's our texts
now for the image so for the image we
want to replace let's see what is that
starts right here
ah
the class entry
Pam just going to replace the image here
with some dynamic code we're going to
say
PHP the post thumbnail and we want the
full image
so that should
we didn't upload the image yet but i
just want to
alright so let's go to the post and i
believe
I believe if we upload the image just
into the post then it will it will show
there
all right let me just try to upload
that's from the
just want to open the
theme folder
themes
escalate
oh we didn't we didn't bring over the
image all right so these are the images
i'm actually going to upload these two
images so i'm going to click Add media
select files desktop HTML images and
we'll get this first picture
and I'm gonna
down here for sighs I'm going to see
full-size i'm going to insert into post
and i will enter it let's just see what
happens here
all right
actually you know what I don't
that's not where all that's doing is
showing the picture and the actual post
I want the featured image which isn't
available because we need to add it to
our functions file
so let me just update that ok now let's
go to our functions . PHP file and we
want to add the supports and this should
be post thumbnails and we need our PHP
tags here
alright so let's save that and then we
reload the edit post page
I guess we don't get there
huh
we might have to enable it up here
mission tag slug comments
huh
not sure why that is not
showing up for us
I mean that should do it
functions are PHP let's make sure
post thumbnails all I don't have my
quotes any quotes around this
sorry about that so now if we load now
we have our featured image
so let's select that
j
set featured image
and update hopefully this works
all right perfect
and we are running out of time here so
i'm going to stop the video here and
start the next one
I so next what we'll do is make this
this meta bari here dynamic