WordPress Theme Development

Nilambar SharmaWordPress Developer

Co-founder WEN Themes

http://wenthemes.com

WordPress Theme Development 2

Bipin SinghWordPress Developer

ThemeGrillhttp://themegrill.com/

WordPress Theme Development

Santosh KunwarWordPress Developer

Co-founder eVision Themes

http://evisionthemes.com


What is WordPress theme?❏ Collections of files working together❏ Focus on frontend display, graphical

interface and design❏ Licensing is always GPL in

wordpress.org


Why WordPress theme?❏ To create unique look for your site❏ Ease for WordPress site owner. ( No

need to have knowledge PHP, CSS, HTML )


Why create WordPress theme?❏ WordPress is “Free as in Speech”❏ Allow users to change the look and

functionality easily❏ WordPress is Flexible, Easy to Use

and Learn❏ Contribution for WordPress

Community


Required❏ WordPress setup❏ Basic knowledge of PHP, HTML, CSS

and JavaScripts❏ Good text editor / IDE❏ Local Server (eg, XAMPP, WAMP) &

Browser (eg, Firefox)


Recommended❏ Account in stackoverflow❏ Passion to learn❏ Bookmark WordPress Codex and

support❏ Wall nearby to bang your head


Setting up a Development Environment

❏ Setting up Local Environment- XAMPP / WAMP / LAMP /MAMP

❏ Install WordPress❏ Enable WP_DEBUG in wp-config.php❏ Import Theme Unit Test Data❏ Install Theme Check and Developer

Plugin


Lets start Coding❏ Theme lies in /wp-content/themes/❏ Theme Development Options

- Starting from scratch- Taking reference of already

developed theme (Twenty Sixteen,Twenty Fifteen, etc)

- Using Starter theme ( eg : UnderscoreS - http://underscores.me/)


Theme Files❏ Required files

- style.css; index.php❏ Functions file

- functions.php❏ Template files

- header.php ; footer.php; archive.php; single.php; etc

❏ Other- Helper files


Template Hierarchy❏ WordPress determines which

template file(s) to use on individual pages

❏ For eg:- page.php : displays single page- single.php : displays single post- singular.php : fallback for page.php

and single.php (since WP 4.3)❏ Several other templates has different

priority❏ Ref: Template Hierarchy

https://developer.wordpress.org/files/2014/10/template-hierarchy.png


Template Tags❏ Special functions❏ Works

- Get database value- Get themes files

❏ Examples- get_header()- get_footer()- the_title() etc


The Loop❏ PHP code used by WordPress to

display posts.❏ Use template tags to display content<?php get_header(); if ( have_posts() ) : while ( have_posts() ) : the_post(); the_content(); endwhile; else : _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); endif; get_sidebar(); get_footer(); ?>


style.css❏ The main theme file❏ Not only CSS❏ Details about the Theme in the form

of comments- Theme Name- Author- Author URI- Description- Version

- License- License URI- Tags- Text Domain


index.php❏ The main template❏ Lowest fallback in template hierarchy❏ Basically displays blog listing using

Loop


functions.php❏ Loaded automatically during

WordPress initialization❏ Use to add unique features to your

WordPress theme.- Theme features like, Navigations,

Sidebars, Post Formats- Load Text Domain- Other features


Other files❏ header.php

- Header section of your web page- wp_head() must be there just

before closing <head> tag- Don’t link script and styles

❏ footer.php- Footer section of your web page- wp_footer() must be there just

before closing <body> tag


Other files (contd)❏ single.php

- Display single blog post❏ page.php

- Display single page❏ search.php

- Display search results❏ archive.php

- Display blog posts under certain archive like category, tag, date, etc.


Other files (contd)❏ comments.php

- Display comments, comment form, etc

❏ 404.php- Error page ( if requested page is

not found )❏ sidebar.php

- Display sidebar- Function `dynamic_sidebar` is used

to displayed registered sidebar


Hooks: Action and Filter❏ Triggers while WordPress run❏ Action:

- Add functionality❏ Filter:

- Modify functionality


Keep In Mind❏ Implement WordPress template tags

and hooks properly❏ Prefix your functions or classes with

theme name❏ Proper Input Sanitization and Output

Escaping❏ Always use WordPress functions if

available❏ Support WordPress-generated CSS

classes.❏ Make your theme Translation Ready


Releasing WordPress Themes in WordPress.org

❏ Required Theme Files- style.css- index.php- comments.php- screenshot.png

❏ Theme Review Guidelines❏ Should be 100% GPL❏ Testing


Other Helpful topics❏ Page templates❏ Post Meta❏ Conditional Tags❏ Custom Post Types❏ WordPress Database❏ Settings API / Customizer API❏ AJAX in WordPress theme❏ Custom Query

10/29/2015 WordPress Theme Development 25

❏ https://developer.wordpress.org/themes/getting-started/

❏ https://codex.wordpress.org/Theme_Development

Reference Links

https://developer.wordpress.org/themes/getting-started/

https://developer.wordpress.org/themes/getting-started/

https://codex.wordpress.org/Theme_Development

https://codex.wordpress.org/Theme_Development

10/29/2015 WordPress Theme Development 26

WordPress Theme Development

Software

Transcript of WordPress Theme Development