Theme Development: From an idea to getting approved to wordpress.org

1,917 views

Published on

Theme Design & Development from scratch to getting approved to wordpress.org

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,917
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Theme Development: From an idea to getting approved to wordpress.org

  1. 1. THEME DEVELOPMENT:FROM AN IDEA TO GETTING APPROVED TO WORDPRESS.ORG
  2. 2. It’s me SOVIT RANJITKAR Theme Designer/Developer
  3. 3. DESIGN & HTML/CSS DEVELOPMENT
  4. 4. 1.DESIGN
  5. 5. 1.1Grid System Follow
  6. 6. Popular Grid System Framework• 960.gs• 978.gs• goldengridsystem.com• ravelrumba.com/photoshop-grids/ OR• Make your own Grid System
  7. 7. 978 Grid System
  8. 8. 1.2Simple Clean & Beautiful
  9. 9. Simple can be harder than complex: You haveto work hard to get your thinking clean tomake it simple. But its worth it in the endbecause once you get there, you can movemountains. -Sir Steve Jobs
  10. 10. Simple Clean & Beautiful Technique• White Color/ White Space• Line Height/ Margin/ Padding• Use less Color• Do not use High Contrast Color
  11. 11. Popular Simple, Clean & Beautiful Premium WordPress Themes
  12. 12. Power of Simple, Clean & Beautiful WordPress Themes $1.3 Million from 4 June 2011 till Date
  13. 13. Popular Simple, Clean & Beautiful Free WordPress Themes
  14. 14. One more New Free Theme Attitude by Team Horse Coming Soon..
  15. 15. 1.3Perfect Typography
  16. 16. Popular Web Font Embedding Services• google.com/webfonts• typekit.com• webtype.com• fontdeck.com• fontslive.com
  17. 17. Make clear readable text
  18. 18. Do not use more font-family
  19. 19. 1.4Icons & UI Elements
  20. 20. Design is not just what it looks like and feelslike. Design is how it works. -Sir Steve Jobs
  21. 21. Free Icons
  22. 22. Free UI Elements
  23. 23. 2.HTML/CSS DEVELOPMENT
  24. 24. 2.1Framework
  25. 25. Popular Frameworks• Choose Best Responsive Framework• Genesis• _S (underscores)• Bootstrap
  26. 26. 2.2WordPress Compatible CSS
  27. 27. ExamplesHTMLCSS
  28. 28. ResultDEMO
  29. 29. Other Compatible CSSImages aligns / Responsive Video/ iFrame/image support
  30. 30. Some Compatible CSSHeading Tags support
  31. 31. Some Compatible CSSstrong/ sup, sub/ blockquote/ current menu items
  32. 32. HTML Elements Demo
  33. 33. 2.3Validation
  34. 34. W3C Validation ServiceHTMLvalidator.w3.org/CSSjigsaw.w3.org/css-validator/
  35. 35. 1.5Use Beautiful Images for Demo
  36. 36. Image Resource• pixabay.com• photodune.net• shutterstock.com• istockphoto.com
  37. 37. Inspiration/ Resourcecssmania.com smashingmagazine.comcssdesignawards.com speckyboy.comawwwards.com premiumpixels.comcssawards.net css-tricks.comcsswinner.com subtlepatterns.comthebestdesigns.com psd.tutsplus.comthenextweb.com webdesign.tutsplus.comwebdesignledger.com net.tutsplus.comwebdesignerdepot.com webdesignerwall.comdeviantart.com iconsweets.com
  38. 38. It’s me Sanjip Shah Theme Developer
  39. 39. THEME REVIEW GUIDELINES• http://blog.japh.com.au/2012/09/06/problems-with-themes-on-themeforest-are-problems-with- themes/ Figure: Theme Review Guidelines
  40. 40. THEME REVIEW GUIDELINES• http://codex.wordpress.org/Theme_Review Figure: Theme Review Guidelines
  41. 41. THEME REVIEW GUIDELINES• http://developer.wordpress.com/themes/ Figure: Theme Review Guidelines
  42. 42. Code Quality• Via wp-config.php: define(WP_DEBUG, true)• Plugin – Theme Check – Log Deprecated Notices – Debogger – Debug – Debug Bar
  43. 43. REQUIRED HOOKS AND NAVIGATION• wp_title()• wp_head() – (immediately before </head>• body_class() – (inside <body> tag)• $content_width• post_class()• wp_link_pages()• wp_footer() – (immediately before </body>)
  44. 44. Including Stylesheets and Scripts• For stylesheet • Use get_stylesheet_uri() for main style.css file • Use wp_enqueue_style() for other css files• For Script • Use wp_enqueue_script()
  45. 45. WordPress-Generated CSS Classes• Alignment Classes • .aligncenter • .alignleft • .alignright• Caption Related Classes • .wp-caption • .wp-caption-text • .gallery-caption• Post Classes • .sticky• Comment Classes • .bypostauthor
  46. 46. THEME TEMPLATE FILES• index.php• comments.php• screenshot.png • Recommended 4:3 W:H raito, size 600*450• style.css
  47. 47. SECURITY AND PRIVACY• All data should be validated and sanitized• Theme Options Page should be added via add_theme_page • edit_theme_options capability for add_theme_page()• Prefix all options, custom functions, custom variables
  48. 48. LICENSING• Themes are required to be 100% GPL-licensed, or use a GPL-compatible license.• This includes all PHP HTML, CSS, images, fonts, , icons, and everything else. All of the theme must be GPL-Compatible.• In style.css file add the following License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html
  49. 49. CREDIT LINK• Use Author uri or Theme uri as public facing credit link in the footer( only one ) Powered by WordPress Theme by Themehorse
  50. 50. Theme Unit Test Data• codex.wordpress.org/Theme_Unit_Test
  51. 51. THEME DOCUMENTATION• Recommended to include a readme.txt file.• Write about how to use the custom features of the theme.
  52. 52. My Suggestions• http://lists.wordpress.org/mailman/listinfo/the me-reviewers
  53. 53. ANY QUESTION? THANKYOU Sovit Ranjitkar/ Sanjip Shah Website: themehorse.com Twitter: @sovitranjitkar/ @sanjipshah/ @themehorseEmail: sovitranjitkar@gmail.com/ sanjiv.saha31@gmail.com

×