How to build a WordPress theme from HTML5 template? Step by step.

30 Simple Steps To Do:

  1. Setup development environment like XAMPP or WAMP from http://www.apachefriends.org/en/xampp.html localhost
  2. Create a database in phpMyAdmin for the new install. database-php-admin
  3. Install WordPress from  http://codex.wordpress.org/Installing_WordPress. wordpress.org
  4. Create theme folder in /xampp/htdocs/WP-installation/wp-content/themes/name-of-your-theme.
  5. Create style.css, index.php, header.php, sidebar.php and footer.php in “name-of-your-theme” folder.
  6. Now type localhost/name-of-your-database and start to follow wordpress installation wizard, when finished,  Activate your theme from wp-admin/themes and your website of blog should be empty white page. For now…   themes-wp
  7. Copy-paste the content from original template to these files in step 5. I recommend to use Eclipse for editor you can download from http://www.eclipse.org/downloads.
  8. Still your website will be white (empty).
  9. Paste html code from your original template to the index.php and you should see the content. Still rough, but he is there.
  10. In style.css you need to enter       /*     Theme Name: ‘  ‘      , Author: ‘  ‘     */
  11. You need to fix all static image paths in the style.css file. image-location
  12. Now organize images in name-of-your-theme/images, if doesn’t exist in the theme, create it.
  13. Fix styles path, in the head html tag and it should look something like these:
    <link rel=”stylesheet” type=”text/css” media=”all”  href=”<?php bloginfo( ‘stylesheet_url’ ; ?> />
  14. Add other styles/js if there are any.
  15. Now, you have all images, text, styles, etc, but all these elements are static. You have to write some code and make theme editable and dynamic.
  16. Change all static information in header.php <head> tag:
    •site title
    •description
    •others
  17. Move content from index.php to home.php or front-page.php if you want to create a landing page.
  18. Edit index.php
  19. Get content from header.php and footer.php and place the code in index.php. index-page
  20. Now you have landing page with content from “Home” and if we go to some inner page, you will see the content from inner pages
  21. Delete static content.
  22. Edit index.php, remove all content and add this :                   php
  23. Create a Blog.php file, which will be used for Blog Templates and use WP_Query to display all posts.
  24. Define sidebar, in functions.php. define-sidebar
  25. Add sidebar to a page.                             dynamic-sidebar
  26. Define menu. Call it a few times or use register_nav_menus for several menus. register-menu
  27. Add the menu to a block in the markup, theme_location is sufficient. register-menu-1
  28. Call comment_form() or comments_template(…): comments
  29. Once you’re ready with the theme, you could:
    -Add some complex plugins for more functionality
    -Integrate some APIs to social networks or remote services
    -Work on the next theme of yours
  30. Cheers :)                   beertoast
About these ads

6 thoughts on “How to build a WordPress theme from HTML5 template? Step by step.

  1. I feel that is one of the such a lot vital information for me.

    And i am happy reading your article. However want to statement on some common things, The website taste is ideal, the articles is really great
    : D. Just right activity, cheers

  2. Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there! Appreciate it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s