WordPress Theme from HTML Template


Published on

WordPress Theme Development from HTML template, as a part of the CMS course in Telerik Academy, Apr '03

Published in: Technology, Business
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WordPress Theme from HTML Template

  1. 1. WordPress Build a WordPress theme from HTML5 templateMario Peshevhttp://devwp.euDevriXhttp://devrix.com
  2. 2. Mario Peshev1. WordPress engineer @ Placester2. DevirX CTO3. @no_fear_inc
  3. 3. Contents1. What is WordPress and WP Themes?2. Few words about WordPress theme development process3. Useful plugins and tactics4. Actual work5. Wrapping up
  4. 4. WordPress1. Super mega powerful! • (surprise, surprise) 2. More than 70 000 000 websites online3. Tens of thousands of themes and plugins (both free and premium)4. Ready for eCommerce, Groupon, Q&A, forum, social network, ticketing system and many more
  5. 5. Theme Development1. WordPress Themes: • files that work together to create the design and functionality of a WordPress site • each Theme may be different and offering many choices for site owners2. http://codex.wordpress.org/Theme_Develop ment
  6. 6. Template Hierarchyhttp://codex.wordpress.org/images/1/18/Templa te_Hierarchy.png
  7. 7. Theme Unit Test1. http://codex.wordpress.org/Theme_Unit_ Test2. Why they are important?3. Why we have to use them?
  8. 8. What’s the best way of building my theme?1. Follow the flow from Theme Development page: • DEBUG TRUE • Template File Checklist • Theme Unit Test • Validating a Website • Theme Review
  9. 9. Cheats1. error_reporting(E_ALL);2. ini_set(display_errors, yes);
  10. 10. Plugins1. Theme Check2. Debug Bar3. Log Deprecated Notices4. Debogger5. Theme Mentor6. Monster Widget7. Developer8. Regenerate Thumbnails9. WordPress Beta Tester
  11. 11. Theme Check1. “A simple and easy way to test your theme for all the latest WordPress standards and practices. A great theme development tool!”2. http://wordpress.org/extend/plugins/theme- check/
  12. 12. Theme Mentor1. Cousin of the Theme Check2. http://wordpress.org/extend/plugins/theme- mentor/3. Open to contributions
  13. 13. StartIntegrating HTML5 template into a WP theme credits: designyoutrust.com
  14. 14. Warning
  15. 15. Important notices1. A PSD is not: • a brochure • a calendar • a wallpaper / magazine cover / whatever2. Site design should work with: • different content (thousands of pages) • different resolutions / browsers / operating systems / platforms
  16. 16. CMS Integrations1. Every CMS has it’s own specifics and expectations in terms of markup2. It’s best to know the system in depth in order to draw the appropriate design and slice it properly
  17. 17. WordPressCmon, let’s integrate!
  18. 18. The Target
  19. 19. Step 01. Make sure that: • Code is valid and understandable • Code is reusable • Template markup seems WP-compatible2. Note: some PHP knowledge is required
  20. 20. Step 11. Setup development environment – XAMPP, LAMP/WAMP/MAMP2. Create a database for the new install3. Install WordPress • http://codex.wordpress.org/Installing_Wor dPress4. Create theme folder in WP- installation/wp-content/themes/name-of- our-theme
  21. 21. Step 21. Create style.css, index.php, header.php, sidebar.php and footer.php files2. Activate our theme and our website should be empty white page. For now...
  22. 22. Step 31. Copy-paste the content from original template to these files2. Still our website will be white (empty)3. Paste what was left in our original template to the index.php and we should see the content. Still rough, but he is there
  23. 23. Step 4 - style.css /* Theme Name: Students Telerik Demo Theme URI: http://example.com Author: DevriX Author URI: http://devrix.com/ Description: Version: 0.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
  24. 24. Step 5 Fix all static image paths in the style.css file Organize images in images/ folder 24
  25. 25. Step 61. Fix styles path2. Something like this:3. Add other styles/js if there are any
  26. 26. So far, so good1. Now, we have all images, text, styles, etc, but all these elements are static. We have to write some code and make theme editable and dynamic2. Change all static information in header.php <head> tag: • site title • description • others
  27. 27. Step 71. Move content from index.php to home.php or front-page.php if you want to create a landing page2. Edit index.php3. Get content from other page(not index page) and place the code in index.php4. Now we have landing page with content from "Home" and if we go to some inner page, we will see the content from inner pages
  28. 28. Step 81. Delete static content2. Edit index.php: • remove all content and add3. Create a Blog.php file, which will be used for Blog Templates and use WP_Query to display all posts
  29. 29. Step 9 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 29
  30. 30. Step 10 Define sidebar 30
  31. 31. Step 11 Add sidebar to a page 31
  32. 32. Step 12 Define menu Call ita few times or use register_nav_menus for several menus 32
  33. 33. Step 13 Add the menu to a block in the markup theme_location is sufficient 33
  34. 34. Step 14 Call comment_form() or comments_template(…): 34
  35. 35. Step 15 Enjoy!  35
  36. 36. 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 36
  37. 37. Recommended Plugins Types and Views WPML WooCommerce BuddyPress S2Member Contact Form 7 / Gravity Forms Free and Paid 37
  38. 38. 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 popularand we’ll provide a free WPML author license for you. 38
  39. 39. WordPress курсове и уроци по програмиране , уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране , книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  40. 40. Free Trainings @ Telerik Academy Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com