This document discusses different approaches to WordPress theme development. It outlines starting from scratch, editing an existing theme, using a parent and child theme structure, working with theme frameworks, and using starter themes. It provides examples and advantages of each approach. The document recommends starter themes as they save time and ensure best practices. It also provides references for further reading on template hierarchies, prefixing code, and using starter themes and frameworks.

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. Sakin Shrestha
http://sakinshrestha.com
@sakinshrestha
WordPress Nepal

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

5. 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

7. W h a t m a k e s
a
Wo rd P re s s T h e m e ?

8. 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

9. 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

16. H o w d o e s a
Wo rd P re s s T h e m e w o r k ?

17. 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

18. 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

19. 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

21. S t a r t i n g f ro m S c r a t c h
• Time consuming
• Difficult approach

22. 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?

24. 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

25. 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

28. 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

29. Update Available

30. Oh no!!!! What happened?
all the edits are gone

31. • 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

32. 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

33. 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/

34. /*
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

35. /*
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

36. <?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

38. 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

39. 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

40. 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

43. <?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

44. <?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

45. <?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

48. 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

49. 5 . S t a r t e r T h e m e
A P P R O A C H E S

50. 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

51. 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

55. C o m p o n e n t s
• It’s a booster starter theme
• Forked from Underscores

56. C o m p o n e n t s
• library of shareable, reusable patterns
for WordPress themes

57. 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

58. 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

59. 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/

60. Thank You
http://sakinshrestha.com
@sakinshrestha
info@sakinshrestha.com