Wordpress Theme from HTML CSS Design Part 1

Published by Ralph Korvin 9 years ago

wordpress tutorial

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

How to create WordPress Theme : Slicing PSD
How to Create WordPress Theme : Coding HTML & CSS
WordPress Theme from HTML CSS Design Part 1
WordPress Theme from HTML CSS Design Part 2
Create WordPress Theme Part 3

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.

style.css
index.php
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.

Theme Name: Razor

Theme URI: http://www.coderiddles.com/

Description: 'Theme created for demonstration of Wordpress Theme from HTML DEsign Development'

Author: Ronak Prajapati [Razor]

Author URI: http://www.coderiddles.com

Version: 1.0

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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

Theme Name: Razor

Theme URI: http://www.coderiddles.com/

Description: 'Theme created for demonstration of Wordpress Theme from HTML Design Development'

Author: Ronak Prajapati [Razor]

Author URI: http://www.coderiddles.com

Version: 1.0

/* RESET */

html, body, div, span, object, h1,h2,h3,h4,h5,h6, a, address, code, img, small, strong, dl, dt, dd, ol, ul, fieldlist, form,label

{

margin:0;

border:0;

padding:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body

{

line-height: 1.5;

font-family: tahoma, arial;

}

ol,ul

{

list-style:none;

}

/* End Reset */

{

font-size:24px;

}

{

font-size:12px;

}

{

color:#06639e;

font-size:12px;

text-decoration:none;

}

a:hover

{

text-decoration:underline;

}

input

{

background-color:#cccccc;

border-radius:4px;

color:#1d1d1d;

padding:4px;

border:1px solid gray;

}

input:focus, input:hover

{

background-color:#1d1d1d;

color:#cccccc;

}

/* main style */

body

{

margin-bottom:-12px;

}

.clear

{

clear:both;

}

.wrap

{

width:960px;

margin:auto;

}

#header

{

background-color:#818181;

}

#header h1

{

background-image:url(images/logo.png);

width:320px;

height:88px;

text-indent:-9999px;

margin-top:10px;

float:left;

margin-bottom:10px;

}

#header h1 a

{

width:320px;

height:88px;

display:block;

}

#searchheader

{

float:right;

width:300px;

margin-top:40px;

text-align:right;

}

#navigation

{

background-color:#1d1d1d;

}

#navigation ul li

{

display:inline;

}

#navigation ul li a

{

padding:5px;

margin:6px;

display:inline-block;

color:white;

}

#navigation ul li a:hover

{

color:orange;

}

#main

{

background-image:url(images/bg.jpg) repeat-x;

}

#main #primary

{

width:700px;

float:left;

}

#main #sidebar

{

width:220px;

float:right;

}

h2.page_title

{

margin:20px 0;

}

.post-item h3 a

{

font-size:18px;

}

.post-item .info

{

float:left;

width:460px;

}

.post-item .info p

{

font-size:11px;

margin:2px;

}

.post-item .dateinfo

{

float:right;

width:220px;

text-align:right;

}

.post-item .dateinfo p

{

font-size:11px;

margin:2px;

}

.post-item .featured_image

{

width:670px;

border:4px solid white;

box-shadow:0 0 4px gray;

}

.post-item

{

background-color:#dfdfdf;

margin:20px 0;

padding:10px;

border-radius:5px;

box-shadow:0 0 3px gray;

}

.read_more

{

float:right;

}

#sidebar .widget-box

{

margin:20px 0;

background-color:silver;

}

#sidebar .widget-box h3

{

background-color:#1d1d1d;

color:#dfdfdf;

font-size:14px;

padding:5px 10px;

}

#sidebar .widget-box ul li

{

padding:3px 10px;

}

#sidebar .widget-box ul li:hover

{

background-color:#e1e1e1;

color:#1d1d1d;

}

#footer

{

background-color:#e1e1e1;

color:#1d1d1d;

}

#footer p

{

text-align:center;

padding:10px;

}

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:

Wordpress Theme from HTML CSS Design Part 1

WordPress Theme from HTML Design

Video: WordPress Theme from HTML Design

Advertisement

Categories

Facebook Fan Page

Latest Series

Archives

Wordpress Theme from HTML CSS Design Part 1

WordPress Theme from HTML Design

Video: WordPress Theme from HTML Design

You may also like:

Advertisement

Categories

Facebook Fan Page

Latest Series

Archives