Approaches To WordPress Theme Development

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

Sakin Shrestha
http://sakinshrestha.com
@sakinshrestha
WordPress Nepal

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

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

W h a t m a k e s

a

Wo rd P re s s T h e m e ?

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

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

H o w d o e s a

Wo rd P re s s T h e m e w o r k ?

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 ﬁles 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 ﬁles:  
index.php and style.css

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

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

S t a r t i n g f ro m S c r a t c h
• Time consuming

• Diﬃcult approach

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?

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

2 . E d i t i n g a n E x i s t i n g
T h e m e

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

Oh no!!!! What happened?

all the edits are gone

• 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

3 . P a re n t a n d C h i l d

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/

/* 
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, ﬁxed-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

/* 
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, ﬁxed-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


<?php 
/** 
* Child Theme functions and deﬁnitions 
* 
*/ 
 
/** 
* 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


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

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

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 diﬃcult to learn

• It’s a code library

• Can-do attitude theme

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

<?php 
/** 
* 
* WARNING: This file is part of the core Genesis Framework. DO NOT
edit this file under any circumstances. 
* 
*/

/* This file handles pages, but only exists for the sake of child theme
forward compatibility. 
genesis();

p a g e . p h p

<?php 
/** 
* 
* WARNING: This file is part of the core Genesis Framework. DO NOT
edit this file under any circumstances. 
* 
*/

/* This file handles single entries, but only exists for the sake of child
theme forward compatibility. 
genesis();

s i n g l e . p h p

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

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

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

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 diﬃcult to keep
track

C o m p o n e n t s
• It’s a booster starter theme

• Forked from Underscores

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

C o m p o n e n t s
• Five diﬀerent theme types

1.The Classic Blog

2.The Modern Blog

3.Portfolio

4.Magazine

5.Business

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

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. Preﬁx all the things

http://themereview.co/preﬁx-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/

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

Approaches To WordPress Theme Development

More Related Content

What's hot

Viewers also liked

Similar to Approaches To WordPress Theme Development

More from Catch Themes

Recently uploaded

Approaches To WordPress Theme Development