• Like
WordPress Theme from HTML Template
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

WordPress Theme from HTML Template


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

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

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. WordPress Build a WordPress theme from HTML5 templateMario Peshevhttp://devwp.euDevriXhttp://devrix.com
  • 2. Mario Peshev1. WordPress engineer @ Placester2. DevirX CTO3. @no_fear_inc
  • 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. 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. 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. Template Hierarchyhttp://codex.wordpress.org/images/1/18/Templa te_Hierarchy.png
  • 7. Theme Unit Test1. http://codex.wordpress.org/Theme_Unit_ Test2. Why they are important?3. Why we have to use them?
  • 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. Cheats1. error_reporting(E_ALL);2. ini_set(display_errors, yes);
  • 10. Plugins1. Theme Check2. Debug Bar3. Log Deprecated Notices4. Debogger5. Theme Mentor6. Monster Widget7. Developer8. Regenerate Thumbnails9. WordPress Beta Tester
  • 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. Theme Mentor1. Cousin of the Theme Check2. http://wordpress.org/extend/plugins/theme- mentor/3. Open to contributions
  • 13. StartIntegrating HTML5 template into a WP theme credits: designyoutrust.com
  • 14. Warning
  • 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. 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. WordPressCmon, let’s integrate!
  • 18. The Target
  • 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. 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. 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. 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. 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. Step 5 Fix all static image paths in the style.css file Organize images in images/ folder 24
  • 25. Step 61. Fix styles path2. Something like this:3. Add other styles/js if there are any
  • 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. 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. 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. 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. Step 10 Define sidebar 30
  • 31. Step 11 Add sidebar to a page 31
  • 32. Step 12 Define menu Call ita few times or use register_nav_menus for several menus 32
  • 33. Step 13 Add the menu to a block in the markup theme_location is sufficient 33
  • 34. Step 14 Call comment_form() or comments_template(…): 34
  • 35. Step 15 Enjoy!  35
  • 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. Recommended Plugins Types and Views WPML WooCommerce BuddyPress S2Member Contact Form 7 / Gravity Forms Free and Paid 37
  • 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. 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. Free Trainings @ Telerik Academy Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com