Build a WordPress theme from HTML5 template @ Telerik
Download as pptx, pdf10 likes11,793 views
This document provides a comprehensive guide on integrating an HTML5 template into a WordPress theme, outlining the necessary steps from downloading the template to finalizing the theme. Key steps include setting up the development environment, adding mandatory WordPress files, organizing templates, and implementing dynamic content functionality. It also offers recommendations for plugins and resources to enhance WordPress themes and encourages further learning for aspiring WordPress developers.
Build a WordPress theme from HTML5 template @ Telerik
- 1. WordPress Build a WordPress theme from HTML5 template Mario Peshev CTO @ Devrix TMS @ OnTheGo
- 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. OnTheGoSystems 3
- 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. Integrating HTML5 template into a WP theme
- 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. Warning! 7
- 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. 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
- 11. Our target Some random free HTML5 template 11
- 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. Step 1 Download the HTML template Browse all required resources: HTML CSS JS Flash Fonts 13
- 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. Step 3 Add the required files there: style.css index.php These are the two mandatory files for a WordPress theme 15
- 16. Step 4 Add an appropriate heading to style.css: 16
- 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. 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
- 20. Step 7 Fix all static image paths in the style.css file Organize images in images/ folder 20
- 21. 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
- 22. Step 9 Clear out all static page content from your markup (the demo texts – title and static content) Use this snippet instead: 22
- 23. 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
- 24. 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
- 25. Step 12 Define sidebar 25
- 26. Step 13 Add sidebar to a page 26
- 27. Step 14 Define menu Call it a few times or use register_nav_menus for several menus 27
- 28. Step 15 Add the menu to a block in the markup theme_location is sufficient 28
- 29. Step 16 Call comment_form() or comments_template(…): 29
- 30. Step 17 Enjoy! 30
- 31. 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
- 32. Recommended Plugins Types and Views WPML WooCommerce BuddyPress S2Member Contact Form 7 / Gravity Forms Free and Paid 32
- 33. 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
- 34. WordPress Questions? http://me.peshev.net/ http://html5course.telerik.com