Blog

How to Convert HTML CSS template to WordPress Theme – WordPress Theme Integration Development

 Dear Friends,

WordPress is the leading CMS (Content Management System) on these days. More websites are developed in WordPress.

Designer provides html and css template to Web Developer / Website Developer.

Now The Developer needs to convert html css template in to WordPress Theme.

If you follow my steps, You will be able to develop wordpress theme easily.

Requirements:
(1) You should have twenty ten theme installed and activated in your wordpress
(2) you should have a html/css template

Steps:

(1) copy and manage supported files from html/css template to wordpress theme ex. images, js or extra css
(wordpress theme path may be like “wp-content\themes\twentyten”

(2) open 4 wordpress theme files:

style.css , header.php, index.php, footer.php

(3) copy html template css file code and paste into style.css of wordpress theme at the end of file

(4) Make Changes in header.php

=> first copy header code from html/css template and paste in end of header.php wordpress

=> remeber div should be copied where “role={something}” is mentioned

Means role=”banner” to div of heading text or logo of bottom code, remove site-description to end if in that code

=> role=”navigation” to main menu div of bottom html css code

=> remove all content above excluding start of body

(5) Make Changes in index.php

=> copy all content code excluding footer and paste in end of index.php wordpress

=> manage div id=”content”, Means if div with id=content is already in html css template, rename it in html code and also affect same to related css file

=> place sidebar to sidebar div of bottom code

=> put get_footer code in end of file

=> remove all above content excluding get_header

(6) Make Changes in footer.php

=> delete above code excluding wp_footer()

=> copy footer code from html/css template to footer.php before wp_footer()

(7) Make Changes in style.css

* comment following sections

=>/* =Layout  to starting of /* =Fonts

=>/* =Structure   to starting of /* =Global Elements

=> /* =Header to starting of /* =Menu

=> changes in menu

/* =Menu

#access {

remove background and width