WordPress     Build a WordPress theme from HTML5 templateMario PeshevCTO @ DevrixTMS @ OnTheGo
About me ThemeForest author Open Source trainer   and consultant at DevriX Technical Marketing   Specialist at OnTheGoS...
OnTheGoSystems                 3
WordPress Super mega powerful!   (surprise, surprise)  Over 70 000 000 websites   online Tens of thousands of themes ...
Integrating HTML5template into a WP theme
Start We want to integrate our HTML sliced   design into WordPress The end results   are:   Same look and feel (design)...
Warning!           7
Super important A PSD is   not:   A brochure   A calendar   A wallpaper / magazine cover / whatever Site design shoul...
CMS integration Every CMS has it’sown specifics and expectations in terms of markup It’s best to know the system in dept...
WordPressLet’s integrate!
Our target Some random free HTML5 template                                            11
Step 0 Make sure that:   Code is valid and understandable   Code is reusable   Template markup seems WP-compatible No...
Step 1 Download the HTML template Browse all required resources:   HTML   CSS   JS   Flash   Fonts                 ...
Step 2 Setup development environment – XAMPP, LAMP/WAMP/MAMP Create a database   for the new install Install WordPress ...
Step 3 Add the required files there:   style.css   index.php These are the two mandatory files for a WordPress theme  ...
Step 4 Add an appropriate heading to style.css:                                                 16
Step 5 Migrate your   template CSS to style.css If there are more than 1 stylesheet files, there are 2 options:   Inclu...
Step 6 Add header.php, footer.php and sidebar.php Separate the common partsof the site and move them to header, footer o...
Step 7 Fix all static   image paths in the style.css file Organize images in images/ folder                             ...
Step 8 Add the style.css file to the header of the site: Fill in the index.php code for all                             ...
Step 9 Clear out all static                 page content from your markup (the demo texts – title and static content) Us...
Step 10 Use predefined tags, such as:   the_title()   the_content()   the_permalink()   They work in a loop   A sing...
Step 11 Move index.php to home.php or front.php if you want a landing page Replicate index.php, but:   Add sidebar sect...
Step 12 Define sidebar                             25
Step 13 Add sidebar   to a page                                      26
Step 14 Define menu Call it a few times or use   register_nav_menus for several menus                                   ...
Step 15 Add the menu to a block in the markup theme_location is sufficient                                              ...
Step 16 Call comment_form() or comments_template(…):                                     29
Step 17 Enjoy!                        30
What’s next? Once you’re ready   with the theme, you could:  Add some complex plugins for more   functionality  Integra...
Recommended Plugins Types and Views WPML WooCommerce BuddyPress S2Member Contact Form 7 / Gravity   Forms Free and ...
Want to be a WP theme ninja? Check out Theme Reviewers Team guides:   Theme Review   Theme Unit Test   WPTRT page   T...
WordPress                  Questions?http://me.peshev.net/    http://html5course.telerik.com
Build a WordPress theme from HTML5 template @ Telerik
Upcoming SlideShare
Loading in...5
×

Build a WordPress theme from HTML5 template @ Telerik

9,737

Published on

How to build a WordPress theme out of HTML5 template, integrate dynamic components such as menus, sidebars and comment areas and use widget blocks for static sliced content.
at Telerik Academy, 19 Jun 2012

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,737
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
160
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Build a WordPress theme from HTML5 template @ Telerik

  1. 1. WordPress Build a WordPress theme from HTML5 templateMario PeshevCTO @ DevrixTMS @ OnTheGo
  2. 2. About me ThemeForest author Open Source trainer and consultant at DevriX Technical Marketing Specialist at OnTheGoSystems Building custom themes, plugins, extending premium solutions based on the WP platform; WPTRT member Java/PHP/Python background 2
  3. 3. OnTheGoSystems 3
  4. 4. WordPress Super mega powerful!  (surprise, surprise)  Over 70 000 000 websites online Tens of thousands of themes and plugins (both free and premium) Ready foreCommerce, Groupon, Q&A, forum, social network, ticketing system and more 4
  5. 5. Integrating HTML5template into a WP theme
  6. 6. Start We want to integrate our HTML sliced design into WordPress The end results are:  Same look and feel (design)  Dynamic functionality  Working menus, areas, blocks, comments and other CMS-related elements 6
  7. 7. Warning! 7
  8. 8. Super important A PSD is not:  A brochure  A calendar  A wallpaper / magazine cover / whatever Site design should work with:  Different content (thousands of pages)  Different resolutions/browsers/operating systems/platforms 8
  9. 9. CMS integration Every CMS has it’sown specifics and expectations in terms of markup It’s best to know the system in depth in order to draw the appropriate design and slice it properly 9
  10. 10. WordPressLet’s integrate!
  11. 11. Our target Some random free HTML5 template 11
  12. 12. Step 0 Make sure that:  Code is valid and understandable  Code is reusable  Template markup seems WP-compatible Note: some super basic PHP knowledge is required 12
  13. 13. Step 1 Download the HTML template Browse all required resources:  HTML  CSS  JS  Flash  Fonts 13
  14. 14. Step 2 Setup development environment – XAMPP, LAMP/WAMP/MAMP Create a database for the new install Install WordPress (hint: famous 5-min install or my video) Create a new folder in wp-content/themes 14
  15. 15. Step 3 Add the required files there:  style.css  index.php These are the two mandatory files for a WordPress theme 15
  16. 16. Step 4 Add an appropriate heading to style.css: 16
  17. 17. Step 5 Migrate your template CSS to style.css If there are more than 1 stylesheet files, there are 2 options:  Include them in header with normal <style> tag  Use wp_enqueue_style in functions file 17
  18. 18. Step 6 Add header.php, footer.php and sidebar.php Separate the common partsof the site and move them to header, footer or sidebar pages There are other template files as well 18
  19. 19. Step 7 Fix all static image paths in the style.css file Organize images in images/ folder 20
  20. 20. Step 8 Add the style.css file to the header of the site: Fill in the index.php code for all pages (everything left besides header/footer code 21
  21. 21. Step 9 Clear out all static page content from your markup (the demo texts – title and static content) Use this snippet instead: 22
  22. 22. Step 10 Use predefined tags, such as:  the_title()  the_content()  the_permalink()  They work in a loop  A single post view is like an array with 1 element 23
  23. 23. Step 11 Move index.php to home.php or front.php if you want a landing page Replicate index.php, but:  Add sidebar section  Correct small dynamic details such as dates  Use date(‘Y’), date(‘M’), date(‘d’) for y/m/d 24
  24. 24. Step 12 Define sidebar 25
  25. 25. Step 13 Add sidebar to a page 26
  26. 26. Step 14 Define menu Call it a few times or use register_nav_menus for several menus 27
  27. 27. Step 15 Add the menu to a block in the markup theme_location is sufficient 28
  28. 28. Step 16 Call comment_form() or comments_template(…): 29
  29. 29. Step 17 Enjoy!  30
  30. 30. What’s next? 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 31
  31. 31. Recommended Plugins Types and Views WPML WooCommerce BuddyPress S2Member Contact Form 7 / Gravity Forms Free and Paid 32
  32. 32. Want to be a WP theme ninja? Check out Theme Reviewers Team guides:  Theme Review  Theme Unit Test  WPTRT page  Theme-Check plugin Become a Pro and submit on ThemeForest and WPORG Get popular and we’ll provide a free WPML author license for you. 33
  33. 33. WordPress Questions?http://me.peshev.net/ http://html5course.telerik.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×