How to convert HTML/CSS page to WordPress Theme

Thanks! Share it with your friends!

Close

Simple tutorial for converting HTML/CSS static page to a WordPress Theme using HTML5blank theme.

Download blank theme at: http://html5blank.com

Learn about me: http://christopherylam.com

Comments

Chris Lam says:

Thanks for the comment Juan! I originally created this content for a course
I teach, but let me know if there’s any other topics regarding WordPress
design/development you’d want covered.

Chris Lam says:

Ben, check out http://codex.wordpress.org/Using_Javascript

There are several ways to implement JavaScript, but it sounds like you
would call the JS from your head.php and then add your Js folder onto your
server. 

BEAbbott says:

Thank you for this video! Like many others, I too have searched the web on
this topic and reading the articles trying to figure out what they are
doing is awful! You make it simple, it worked and I love it. Thank you! One
question I do have though is I noticed your urls used /images/logo.png are
you using a plugin to change your urls or is that a custom job?

Ravi Kumar Natarajan says:
Twenty-Something Nerd says:

I don’t know how this has less than 10,000 views, this video is incredibly
informative.

Javier Lopez says:

I’m very familiar with building static websites but I had never dabbled in
WP too much. I was able to follow your instructions very well and 40
minutes later I have my home page up and running on WP! Consider this my
“Hello World” 🙂 Thanks a million.

yan zhao says:

Thanks Chris, great tutorial. The body and footer section both three
columns, what’s the reason for you to create two sections make the middle
and right columns inside the right? sorry I am new to this.
thanks

Laurence Edgar says:

Chris can you help me with this. I purchased a PLR Package, I have altered
it a little with an HTML Editor It looks OK within the editor. But when i
copy and paste it into a browser It shows up Black and White, no color, and
no Images? Where abouts in WordPress do i upload the sales page? Thank You
Pastor Laurence upperroom.c@ntlworld.com

tânia teixeira. says:

I don’t have the editor option.
What can I do?

Jonathan Carroll says:

I am working locally with this, not live on the server. Going to tweak it
on my machine first then migrate it to the clients host through ftp. As far
as the js that was in my clients markup, I just downloaded the folder via
ftp to the local folder I have installed wordpress in on my computer and
added the inline script almost exactly where they were in the original html
document and it seemed to work fine. I think the only thing that didn’t
work out so far is the margins needing a bit of tweaking but the video
explained that might be the case and I think that is a small price to pay
when everything else was almost as simple as it can get. Thx for this
video. Has helped me alot. 

Geraldine Priester says:

Is it responsive?

P8860 says:

Great Tutorial.. I have no idea why it’s so hard to find a good
comprehensive tutorial on word press. You did an excellent job. Please
continue to make more video’s on this. Like adding plugins ect. You have a
really good niche for this.

Andrew Rosalynson says:

Great tutorial, i finally got to convert my website! Thanks Chris

Daniel RIgby says:

How would link multiple style sheets for individual pages? 

Alexandre Rocha says:

Great tutorial!
I’ll search how to create more than one page.php template so i can
customize it more specifically and then avoid to put all that divs code
inside wysiwyg. I don’y want the client to delete anything by mistake. ;)

David Hellweg says:

Thanks for the great video! One issue i’m having is when I activate the
blank theme there is no content. By no content I mean all white no text,
nothing, even when I go to the admin. I had to delete the blank theme off
my server to get the admin back because I couldn’t even access the admin to
deactivate the blank theme. 

nutTty ryan says:

This is so fantastic, thank you so much

Jeremiah Garza says:

+Chris Lam It’s funny because you were actually my professor at UNT. And
i’m glad I found this video because it was really helpful. I do have a
question, though. Do you think WordPress would be good for a one page
scrollable website?

I found a free template online that I edited, but I’ve been wanting to take
advantage of WordPress’ CMS and eventually add a blog to it. It’ll be
easier to add the blog if WordPress was set up.

Deepa Thalikar says:

Very very helpful tutorial! Thanks a lot, Chris!

Daniel W. says:

This guide is a good tutorial. 99% of tutorials I’ve seen online to do this
are HORRIBLE: confusing, inaccurate and quite often just wrong. But what
I’m wondering, and what I’m having a hard time finding, is how to do this,
convert existing HTML/CSS design to a WordPress theme…. AND ADD A BLOG TO
IT. Blogging is is a huge part of WordPress yet I can find hardly any
tutorials about adding a blog to the page. It sounds like it should be easy
but the fact is we’ve tweeked the PHP files so much that it’s now difficult
to figure out where the blog related PHP includes go. 

Andrew Rosalynson says:

Another tip… Instead of scrolling through the WP code, hold CTRL and
press F; you can then search for that specific piece of code :)

Pixxies Design says:

Thank you! This tutorial is so simple to follow. Managed to migrate my
whole site in under 3 hours. Thanks again.

marioveljacadotcom says:

Hi there! Can you please tell me how to get hold of several cssheets. In my
case I have four diferent creative style sheets I got to work with. Should
I put them in the same and just rename it on the places”” I “call” them to.
Thank You. M

הדיילי סטטוס says:

great guide thank you so much!

Robert Brownlee says:

If I pick a responsive theme to start with, can I make a child theme using
this method that will work with the original theme?

Andrew Rosalynson says:

If you have a lot of images, it’s easier to change all in the
css to and then drop your images into the directory via ftp.
Saves replacing every link 🙂 

Comments are disabled for this post.