Ahmedabad Training Institute

ahmedabad-training-institute-logo

 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

WeCreativez WhatsApp Support
Ahmedabad Training Institute team is here to answer your questions. Ask us anything!
? Hi, how can I help?