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

  • 1,443 views
Uploaded on

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

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

More in: Design
  • 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

Views

Total Views
1,443
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. THEME DEVELOPMENT:FROM AN IDEA TO GETTING APPROVED TO WORDPRESS.ORG
  • 2. It’s me SOVIT RANJITKAR Theme Designer/Developer
  • 3. DESIGN & HTML/CSS DEVELOPMENT
  • 4. 1.DESIGN
  • 5. 1.1Grid System Follow
  • 6. Popular Grid System Framework• 960.gs• 978.gs• goldengridsystem.com• ravelrumba.com/photoshop-grids/ OR• Make your own Grid System
  • 7. 978 Grid System
  • 8. 1.2Simple Clean & Beautiful
  • 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. Simple Clean & Beautiful Technique• White Color/ White Space• Line Height/ Margin/ Padding• Use less Color• Do not use High Contrast Color
  • 11. Popular Simple, Clean & Beautiful Premium WordPress Themes
  • 12. Power of Simple, Clean & Beautiful WordPress Themes $1.3 Million from 4 June 2011 till Date
  • 13. Popular Simple, Clean & Beautiful Free WordPress Themes
  • 14. One more New Free Theme Attitude by Team Horse Coming Soon..
  • 15. 1.3Perfect Typography
  • 16. Popular Web Font Embedding Services• google.com/webfonts• typekit.com• webtype.com• fontdeck.com• fontslive.com
  • 17. Make clear readable text
  • 18. Do not use more font-family
  • 19. 1.4Icons & UI Elements
  • 20. Design is not just what it looks like and feelslike. Design is how it works. -Sir Steve Jobs
  • 21. Free Icons
  • 22. Free UI Elements
  • 23. 2.HTML/CSS DEVELOPMENT
  • 24. 2.1Framework
  • 25. Popular Frameworks• Choose Best Responsive Framework• Genesis• _S (underscores)• Bootstrap
  • 26. 2.2WordPress Compatible CSS
  • 27. ExamplesHTMLCSS
  • 28. ResultDEMO
  • 29. Other Compatible CSSImages aligns / Responsive Video/ iFrame/image support
  • 30. Some Compatible CSSHeading Tags support
  • 31. Some Compatible CSSstrong/ sup, sub/ blockquote/ current menu items
  • 32. HTML Elements Demo
  • 33. 2.3Validation
  • 34. W3C Validation ServiceHTMLvalidator.w3.org/CSSjigsaw.w3.org/css-validator/
  • 35. 1.5Use Beautiful Images for Demo
  • 36. Image Resource• pixabay.com• photodune.net• shutterstock.com• istockphoto.com
  • 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. It’s me Sanjip Shah Theme Developer
  • 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. THEME REVIEW GUIDELINES• http://codex.wordpress.org/Theme_Review Figure: Theme Review Guidelines
  • 41. THEME REVIEW GUIDELINES• http://developer.wordpress.com/themes/ Figure: Theme Review Guidelines
  • 42. Code Quality• Via wp-config.php: define(WP_DEBUG, true)• Plugin – Theme Check – Log Deprecated Notices – Debogger – Debug – Debug Bar
  • 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. 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. 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. THEME TEMPLATE FILES• index.php• comments.php• screenshot.png • Recommended 4:3 W:H raito, size 600*450• style.css
  • 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. 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. 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. Theme Unit Test Data• codex.wordpress.org/Theme_Unit_Test
  • 51. THEME DOCUMENTATION• Recommended to include a readme.txt file.• Write about how to use the custom features of the theme.
  • 52. My Suggestions• http://lists.wordpress.org/mailman/listinfo/the me-reviewers
  • 53. ANY QUESTION? THANKYOU Sovit Ranjitkar/ Sanjip Shah Website: themehorse.com Twitter: @sovitranjitkar/ @sanjipshah/ @themehorseEmail: sovitranjitkar@gmail.com/ sanjiv.saha31@gmail.com