Wordpress Theme from HTML CSS Design Part 1

Blog | Css | Html | Photoshop | Theme | Wordpress

wordpress tutorial


This entry is part 3 of 5 in the series Create WordPress Theme

WordPress theme from HTML Design creation takes little long process, then html design for a website. So we will cover WordPress theme from HTML creation in multiple sessions. In our previous session we have discussed about how we can create html & css from Photoshop PSD. Next we will learn how we can code a WordPress theme from HTML & CSS. if you haven’t seen previous article, I recommend you read it first before you continue with this one.

WordPress Theme from HTML Design

Before you begin with coding WordPress theme from HTML make sure you have installed WordPress and configure a blog. If you don’t know how to configure a WordPress blog, please refer to WordPress Blog site setup article to create a WordPress blog in no time. First open your WordPress setup root folder and navigate to wp-content/themes directory. Create a directory & name it whatever you want your theme’s name. I call it razor and create following files in the directory.

  1. style.css
  2. index.php
  3. screenshot.jpg (theme’s thumbnail, you can take screenshot of HTML output we have seen in the last tutorial).

First of all open style.css file and paste following comments code on top of it.

This is just information about the me that used by the WordPress admin panel to identify themes. Now open a browser and login to your WordPress site’s admin panel. Then go to Appearance >> Themes and you will find your new theme with details. Activate the theme and navigate to your blog’s front site. You will see a blank page surely because we haven’t done any code in our WordPress theme. We just set up a new theme with blank output. Now let’s put some code in our newly created theme to build a WordPress Theme from HTML Design.

Open css file from last tutorial. Copy & paste code to our theme’s style.css file. So style.css file will look like below:

Next part is difficult to explain in article, So i created a screencast for you to understand.

Video: WordPress Theme from HTML Design


If you like this article about creating WordPress theme from HTML design & screencast, please hit like & leave a comment for us. If you have any issue please feel free to mention same in comment so we can serve you better. Visit & like our Facebook Fan Page to get constant update of our website.

Download Source Code Files

Series Navigation<< How to Create WordPress Theme : Coding HTML & CSSWordPress Theme from HTML CSS Design Part 2 >>

Bookmark Link using: bookmark at folkd