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.

Approaches To WordPress Theme Development

3,397 views

Published on

Here I have shared my WordPress Theme Development and review experiences. In this process, I have used and learned about various approaches to WordPress theme development. Such as Starting from Scratch, Editing an Existing Theme, Parent and Child, Theme Framework and Starter Theme. I am sharing with you about TwentyEleven, Catch Box, Simple Catch, Genesis, Hybrid, Edin, Goran, Bones, Underscores, Components and other themes.

Published in: Technology
  • Be the first to comment

Approaches To WordPress Theme Development

  1. 1. W O R D C A M P M U M B A I , 2 0 1 6 | B Y: S A K I N S H R E S T H A
  2. 2. Sakin Shrestha http://sakinshrestha.com @sakinshrestha WordPress Nepal
  3. 3. Wo rd P re s s T h e m e D e v e l o p m e n t E x p e r i e n c e
  4. 4. Wo rd P re s s T h e m e R e v i e w E x p e r i e n c e
  5. 5. W h a t m a k e s a Wo rd P re s s T h e m e ?
  6. 6. H T M L C S S P H P J a v a S c r i p t A s s e t s
  7. 7. L e t ’s l o o k a t s o m e 
 
 Aw e s o m e Wo rd P re s s T h e m e s
  8. 8. H o w d o e s a Wo rd P re s s T h e m e w o r k ?
  9. 9. Wo rd P re s s T h e m e F i l e s • header.php, sidebar.php, functions.php, footer.php • Loop files like, singular.php, index.php, archive.php, category.php & more • Check out Template Hierarchy:
 https://developer.wordpress.org/themes/basics/template- hierarchy/
 https://yoast.com/wordpress-theme-anatomy/ • Needs at least 2 files: 
 index.php and style.css
  10. 10. A p p ro a c h e s To Wo rd P re s s T h e m e D e v e l o p m e n t
  11. 11. 1 . S t a r t i n g f ro m S c r a t c h A p p ro a c h e s t o Wo rd P re s s T h e m e D e v e l o p m e n t
  12. 12. S t a r t i n g f ro m S c r a t c h • Time consuming • Difficult approach
  13. 13. U s e f u l S t a r t i n g f ro m S c r a t c h • Preferred by Freelancers and Web Agencies • Not recommended for theme shops • Why reinvent the wheel?
  14. 14. 1 0 9 M I L L I O N PA G E V I E W S P E R M O N T H S TAT S
  15. 15. 2 . E d i t i n g a n E x i s t i n g T h e m e A p p ro a c h e s t o Wo rd P re s s T h e m e D e v e l o p m e n t
  16. 16. U s e f u l E d i t i n g E x i s t i n g T h e m e • Preferred by Freelancers and Newbies • Fast Turnaround • Fast Editing • Learn standard codes • Only need time to search for the best theme
  17. 17. Update Available
  18. 18. Oh no!!!! What happened? all the edits are gone
  19. 19. • C h a n g e t e x t d o m a i n i n s t y l e . c s s • A d d u n i q u e f o l d e r n a m e / t h e m e s l u g t o m a t c h w i t h t e x t d o m a i n B e c a re f u l w h i l e e d i t i n g a n e x i s t i n g t h e m e
  20. 20. 3 . P a re n t a n d C h i l d A p p ro a c h e s t o Wo rd P re s s T h e m e D e v e l o p m e n t
  21. 21. P a re n t a n d C h i l d T h e m e s • Similar to Editing existing theme but safer • Take any child theme ready theme • Child functions and files will overwrite Parent • Relatively easy, just create style.css and screenshot file
 for more create functions.php files • Refer:
 https://codex.wordpress.org/Child_Themes
 https://catchthemes.com/blog/create-child-theme- wordpress/
  22. 22. /*
 Theme Name: CatchBoxEleven
 Theme URI: http://example.com
 Author: You
 Author URI: http://example.com
 Description: This is an example of Child theme is Catch Box Theme was build as child theme of Twenty Eleven theme.
 Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right- sidebar, fixed-layout, responsive-layout
 Text Domain: catchboxeleven
 Template: twentyeleven
 */ /* =Loading Parent Theme CSS
 -------------------------------------------------------------- */
 @import url("../twentyeleven/style.css"); /* =Child Theme Custom CSS
 -------------------------------------------------------------- */ C a t c h B o x E l e v e n S t y l e . c s s C h i l d t h e m e o f Tw e n t y E l e v e n
  23. 23. /*
 Theme Name: CatchBoxEleven
 Theme URI: http://catchthemes.com/themes/catchboxeleven
 Author: Catch Themes
 Author URI: http://catchthemes.com
 Description: This is an example of Child theme is Catch Box Theme was build as child theme of Twenty Eleven theme. 
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout
 Text Domain: catchboxeleven
 Template: twentyeleven
 */ /* =Child Theme Custom CSS
 -------------------------------------------------------------- */ C a t c h B o x E l e v e n S t y l e . c s s C h i l d t h e m e o f Tw e n t y E l e v e n
  24. 24. <?php
 /**
 * Child Theme functions and definitions
 *
 */
 
 /**
 * Loading Parent theme stylesheet
 *
 */
 function catchboxeleven_enqueue_styles() {
 wp_enqueue_style( 'catchboxeleven-parent-style', get_template_directory_uri() . '/style.css' );
 }
 add_action( 'wp_enqueue_scripts', 'catchboxeleven_enqueue_styles' ); C a t c h B o x E l e v e n f u n c t i o n s . p h p C h i l d t h e m e o f Tw e n t y E l e v e n
  25. 25. U s e f u l C h i l d T h e m e • Your design/functions are similar to the parent theme • Secured and fast development • Always remember to select the best Parent
  26. 26. 4 . T h e m e F r a m e w o r k A P P R O A C H E S
  27. 27. F r a m e w o r k T h e m e s • Similar to Parent and Child theme • It’s more advanced and difficult to learn • It’s a code library • Can-do attitude theme
  28. 28. <?php
 /**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package GenesisTemplates
 * @author StudioPress
 * @license GPL-2.0+
 * @link http://my.studiopress.com/themes/genesis/
 */ //* Initialize Genesis
 genesis(); L e t ’s l o o k a t G e n e s i s i n d e x . p h p
  29. 29. <?php
 /**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package GenesisTemplates
 * @author StudioPress
 * @license GPL-2.0+
 * @link http://my.studiopress.com/themes/genesis/
 */ /* This file handles pages, but only exists for the sake of child theme forward compatibility.
 genesis(); L e t ’s l o o k a t G e n e s i s p a g e . p h p
  30. 30. <?php
 /**
 * Genesis Framework.
 *
 * WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package GenesisTemplates
 * @author StudioPress
 * @license GPL-2.0+
 * @link http://my.studiopress.com/themes/genesis/
 */ /* This file handles single entries, but only exists for the sake of child theme forward compatibility.
 genesis(); L e t ’s l o o k a t G e n e s i s s i n g l e . p h p
  31. 31. U s e f u l F r a m e w o r k T h e m e • Preferred by experienced developers and a few theme shops • Might have issues, if Framework theme releases major changes
  32. 32. 5 . S t a r t e r T h e m e A P P R O A C H E S
  33. 33. S t a r t e r T h e m e s • It’s an independent theme and not a Parent theme • Toolbox for theme development • Saves time "A 1000-Hour Head Start" • Ensures coding standards and best practices • Easy to learn
  34. 34. U s e f u l S t a r t e r T h e m e • For everyone • used and recommended by lot of theme shops, including us • Starter themes are evolving and it’s difficult to keep track
  35. 35. C o m p o n e n t s • It’s a booster starter theme • Forked from Underscores
  36. 36. C o m p o n e n t s • library of shareable, reusable patterns for WordPress themes
  37. 37. C o m p o n e n t s • Five different theme types 1.The Classic Blog 2.The Modern Blog 3.Portfolio 4.Magazine 5.Business
  38. 38. S e l e c t t h e A p p ro a c h w h i c h s u i t s y o u r n e e d S TA RT T O D AY
  39. 39. R e f e re n c e s 1. Theme Development: https://codex.wordpress.org/Theme_Development http://themeshaper.com/ http://catchthemes.com https://www.smashingmagazine.com/2013/03/a-guide-to-wordpress-theme-options/ http://build.codepoet.com/2013/01/31/theme-approaches/ 2. Template Hierarchy https://developer.wordpress.org/themes/basics/template-hierarchy/ 3. Prefix all the things http://themereview.co/prefix-all-the-things/ 4. Starter Themes: http://www.hongkiat.com/blog/starter-wordpress-themes/ http://underscores.me/ https://github.com/Automattic/_s http://components.underscores.me/ http://themble.com/bones/ https://github.com/eddiemachado/bones 5. Framework Themes http://my.studiopress.com/themes/genesis/ http://themehybrid.com/hybrid-core https://catchthemes.com/themes/catch-base-pro/ 6. Theme using REST API http://wordpress.tv/2015/12/09/rachel-baker-build-a-theme-with-the-rest-api/ http://jacklenox.com/2015/03/30/building-themes-with-the-wp-rest-api-wordcamp-london-march-2015/
  40. 40. Thank You http://sakinshrestha.com @sakinshrestha info@sakinshrestha.com

×