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