Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordPress         Build a WordPress theme from HTML5 templateMario Peshevhttp://devwp.euDevriXhttp://devrix.com
Mario Peshev1.   WordPress engineer @ Placester2.   DevirX CTO3.   @no_fear_inc
Contents1.   What is WordPress and WP Themes?2.   Few words about WordPress theme     development process3.   Useful plugi...
WordPress1.   Super mega powerful!     • (surprise, surprise) 2.   More than 70 000 000 websites online3.   Tens of thous...
Theme Development1.       WordPress Themes:     •    files that work together to create the          design and functional...
Template Hierarchyhttp://codex.wordpress.org/images/1/18/Templa   te_Hierarchy.png
Theme Unit Test1.   http://codex.wordpress.org/Theme_Unit_     Test2.   Why they are important?3.   Why we have to use them?
What’s the best way of building                                 my theme?1.       Follow the flow from Theme Development  ...
Cheats1.   error_reporting(E_ALL);2.   ini_set(display_errors, yes);
Plugins1.   Theme Check2.   Debug Bar3.   Log Deprecated Notices4.   Debogger5.   Theme Mentor6.   Monster Widget7.   Deve...
Theme Check1.   “A simple and easy way to test your     theme for all the latest WordPress     standards and practices. A ...
Theme Mentor1.   Cousin of the Theme Check2.   http://wordpress.org/extend/plugins/theme-     mentor/3.   Open to contribu...
StartIntegrating HTML5 template into a WP theme                                 credits: designyoutrust.com
Warning
Important notices1.       A PSD is not:     •    a brochure     •    a calendar     •    a wallpaper / magazine cover / wh...
CMS Integrations1.   Every CMS has it’s own specifics and     expectations in terms of markup2.   It’s best to know the sy...
WordPressCmon, let’s integrate!
The Target
Step 01.       Make sure that:     •    Code is valid and understandable     •    Code is reusable     •    Template marku...
Step 11.       Setup development environment –         XAMPP, LAMP/WAMP/MAMP2.       Create a database for the new install...
Step 21.   Create style.css, index.php, header.php,     sidebar.php and footer.php files2.   Activate our theme and our we...
Step 31.   Copy-paste the content from original     template to these files2.   Still our website will be white (empty)3. ...
Step 4 - style.css   /*   Theme Name: Students Telerik Demo   Theme URI: http://example.com   Author: DevriX   Author...
Step 5 Fix all   static image paths in the style.css file Organize     images in images/ folder                         ...
Step 61.   Fix styles path2.   Something like this:3.   Add other styles/js if there are any
So far, so good1.       Now, we have all images, text, styles, etc,         but all these elements are static. We have to ...
Step 71.   Move content from index.php to     home.php or front-page.php if you want     to create a landing page2.   Edit...
Step 81.       Delete static content2.       Edit index.php:     •     remove all content and add3.       Create a Blog.ph...
Step 9 Use predefined   tags, such as:  the_title()  the_content()  the_permalink()  They work in a loop  A single p...
Step 10 Define sidebar                             30
Step 11 Add sidebar   to a page                                      31
Step 12 Define menu Call ita few times or use register_nav_menus  for several menus                                     ...
Step 13 Add the   menu to a block in the markup theme_location   is sufficient                  33
Step 14 Call comment_form()                   or comments_template(…):                                   34
Step 15 Enjoy!                        35
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 a...
Want to be a WP theme ninja? Check out Theme    Reviewers Team guides:  Theme Review  Theme Unit Test  WPTRT page  Th...
WordPress    курсове и уроци по програмиране , уеб дизайн – безплатно    BG Coder - онлайн състезателна система - online j...
Free Trainings @ Telerik Academy   Telerik Software Academy       academy.telerik.com   Telerik Academy @ Facebook    ...
Upcoming SlideShare
Loading in …5
×

of

WordPress Theme from HTML Template Slide 1

YouTube videos are no longer supported on SlideShare

View original on YouTube

WordPress Theme from HTML Template Slide 3 WordPress Theme from HTML Template Slide 4 WordPress Theme from HTML Template Slide 5 WordPress Theme from HTML Template Slide 6 WordPress Theme from HTML Template Slide 7 WordPress Theme from HTML Template Slide 8 WordPress Theme from HTML Template Slide 9 WordPress Theme from HTML Template Slide 10 WordPress Theme from HTML Template Slide 11 WordPress Theme from HTML Template Slide 12 WordPress Theme from HTML Template Slide 13 WordPress Theme from HTML Template Slide 14 WordPress Theme from HTML Template Slide 15 WordPress Theme from HTML Template Slide 16 WordPress Theme from HTML Template Slide 17 WordPress Theme from HTML Template Slide 18 WordPress Theme from HTML Template Slide 19 WordPress Theme from HTML Template Slide 20 WordPress Theme from HTML Template Slide 21 WordPress Theme from HTML Template Slide 22 WordPress Theme from HTML Template Slide 23 WordPress Theme from HTML Template Slide 24 WordPress Theme from HTML Template Slide 25 WordPress Theme from HTML Template Slide 26 WordPress Theme from HTML Template Slide 27 WordPress Theme from HTML Template Slide 28 WordPress Theme from HTML Template Slide 29 WordPress Theme from HTML Template Slide 30 WordPress Theme from HTML Template Slide 31 WordPress Theme from HTML Template Slide 32 WordPress Theme from HTML Template Slide 33 WordPress Theme from HTML Template Slide 34 WordPress Theme from HTML Template Slide 35 WordPress Theme from HTML Template Slide 36 WordPress Theme from HTML Template Slide 37 WordPress Theme from HTML Template Slide 38 WordPress Theme from HTML Template Slide 39 WordPress Theme from HTML Template Slide 40 WordPress Theme from HTML Template Slide 41
Upcoming SlideShare
Ajax and PHP
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

WordPress Theme from HTML Template

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • AlexThorne8

    May. 4, 2017

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

Views

Total views

5,552

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

75

Shares

0

Comments

0

Likes

1

×