Register Now

Login

Lost Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Login

Register Now

Thank you for registering with WPTricks

2019's Best Selling WordPress Themes

How to convert HTML/CSS page to WordPress Theme

How to convert HTML/CSS page to WordPress Theme



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

Check out my tutorial on creating a dynamic footer in WordPress:

Download blank theme at:

Learn more at

Comments ( 45 )

  1. This theme have support for woocommerce? Thanks.

  2. 26:5530:45 ….geez 4 minutes to remove a search bar. By the way, usually you'll find it into sidebar.php file. ADVICE: try to edit this stuff with a Theme Editor plugin

  3. I'm interested in this theme because I want to drastically improve the performance (lighthouse report / GTMetrix) of my website. I realized that what stops me is the WP Bakery builder which created a shitload of CSS/JS and even by using autoptimize to improve the render it doesn't make it…so anyone can tell me if converting a website to this theme will help ? Thanks for your help

  4. Thanks Chris Lam, got on real fast with your tutorial, nice and clear and covered a lot of useful stuff 🙂

  5. What about the rogue 'edit this' and the site icon?

  6. this is great, everything makes so much more sense when making wordpress themes. Every tutorial I see covers things like CSS and HTML which is not what I need to know, just how it all ties into wordpress.

  7. Chris Lam, I pasted my CSS to style.css in the editor but it's not rendering, is there anything else that needs to be done?

  8. Hey Chris, Thanks for taking the time to make this video. Maybe some people didn't have the patience to stick with it, but I found it to be one of the most detailed and easy to follow tutorials I've seen in ages. It wasn't just hype, I actually learned something. Thanks Man!

  9. Can you upload this video in high resolution

  10. Hi this is an awesome tutorial, learning a lot!  However, I am stuck on this <nav> part.  I have put my <nav> tags in a left the 
    <nav><?php html5blank_nav(); ?></nav>

    I have ordered the page numbers however my <nav> is still not appearing.  When I going on inspect element it shows a list of 5 items generated by php as they should be but I still can't see them event though they are there.  

    Also the background colour edits going on my wrapper are not going through somehow either. These are not even there when I go on inspect element which is weird. 

    Any more troubleshooting ideas would be much appreciated!!

  11. i couldnt remove the <h1>home what file is it in?

  12. how to add multiple css file? ive read about the enqeu but what im asking is where to upload/add them to be called by enque?

  13. you are my life saver THNX SO MUCH

  14. Great tutorial, but there are too many ads throughout the video.

  15. Thnx so much for this. Its awesome. A good start for me! 🙂

  16. Thanks Chris, very clear and step by step how to. Just becouse I used it in my previous project, all the code you deleted with <nav role="navigation"> is for web accesibility and sometimes the client or law requires it mandatory.

  17. hey, I'm not able to change the background-image url….
    I am able to insert the pictures into the pages but not into the stylesheet…. any idea why?

  18. I gotta tell you Doc Lam, I have watched all kinds of videos on converting HTML to WP. Never could get it. Now I understand what is going on much better and as a result I can finally finish up my project. Now I wish I could start going to class up at UNT. Thanks for the help, Kind Sir!

  19. what would be the best way to add blogging capabilities?

  20. Very hepfull, thank's a lot. Go ahead

  21. Hay buddy actually i want to convert my html website to the wordpress. But can you please talk me that how i can convert and connect the other pages with the main page???

  22. Is it best to create a child theme of this html5blank? As with all themes if the client updates the theme it will squash your custom css code etc. Or does this html5blank theme never ask to be updated?

  23. Thanks. It was the easiest out of 3 tutorials I just saw on html to wordpress. This is 2016 and I am watching this tut now. Thanks a lot. Great help

  24. hello
    I will create a copy site of the site alphachallenge.ma with wordpress
    I need your help

  25. Is this really the best way? Seems like a major hastle. I'm only using wordpress so I can use yoast's seo plugin :/

  26. Really interesting video. Can't wait to try this.

  27. This is a great tutorial and I actually didn't mind all the gaps as they give me a chance to understand — rather than having to race to keep up and repeatedly scroll back to catch what I missed. My question is about wordpress. In this instance are you using wordpress.org, not wordpress.com. I'm trying to create a similar (relatively) static site which the client will update periodically, but the layout won't change much and there won't be a place for comments (blog). Just want to make sure I'm starting out in the right wordpress.

  28. this is exactly what I needed thank you! It was quite hard to find tutorials for wordpress for developers and not just people wanting to install ready-made themes.

  29. Thank You sooo much this is very usefull tutorial

  30. I add my styles.css to the style.css file on wordpress and change the header to look for style.css rather than main.css which is what it was called for the static site. But it isn't doing anything with any of those styles at all. Any ideas why the styles wouldn't work?

  31. Excellent, you helpet me a ton, and saved a real good amount of time.
    thanks =D

  32. Rolled on through and saw this, currently paused halfway through as I build my new template. I have to say, fantastic to have found this.

  33. Great Job Chris, I PAID for a tutorial on how to do exactly what you've done, except the hard way. By using googles designer tools to modify an existing template.(im a little upset now that i know there's a better way). Thank You. Cant wait to checkout your other videos. I am enthused once again, as i am a noob at these things(some html/css).
    Ive designed a html/css site just need too ad some functionality(JS) maybe some plugins. It would be great to be mentored, do you offer mentoring?
    OK blah blah blah… Thanks again for the inspiration.
    ps. know im late to the party, you should offer a full length course,(step by step) Id pay for it. Oh used some Flash elements, can they be used/imported?

    Lyfe

  34. Hi Chris, I have one questions…. Where can i get a css from the start of the video?

  35. pretty good tutorial, I am just a newb in wordpress, and this helps
    Thanks 🙂

  36. Hi Chris,
    How do I get the already existing pages from my static site working in the wordpress navigation?

  37. ¡Thank you so much! This was really useful. I was wondering if we could achieve the same result using one of the native themes that ship with WordPress, instead of downloading the blank HTML5 theme. Would that be a good idea or not?

  38. Hi Chris. Thanks for tutorial. It could have been 20 minutes if you were more concise and organized, but I'm not complaining because it was exactly what I was looking for. 😉

    Not understanding why you paste absolute URLs to images in the code. Why not relative paths? And not clear what the relative path would be or how you would find them.

    And the WP workflow is a little fuzzy to me. Do you recommend that developers build a static site locally and then paste HMTL sections and CSS code into the browser UI like you did? Seems awkward compared to a more standard code editor / Github / Terminal workflow. Will research.

    thanks for any tips.

  39. Very Helpful.. But your video is not quality…

  40. how can you convert html to wordpress and keep in on the same URL? Is that possible? Or would you have to convert it to a new URL with blank theme, modify the theme and then clone it back to the old URL?

Leave a reply