WordPressTheme
Development
-Bijaya Kumar Oli
bj.aspire@gmail.com
What is WordPress Theme?
 Collection of files that work
together to produce a graphical
interface.
 Functionality of web...
Theme Makes from
 HTML
 PHP
 CSS
 IMAGES
Some examples
of
WordPress Themes
Way of develop themes
1)From Scratch
2) Customizing themes
3) Build Child Theme
Minimum files require
 style.css
 index.php
1) From Scratch
Basic Layout of website
1)From Scratch
Basic files for theme development
 header.php (displays headers and navigation, contains HTML code)
 index.php (home )
...
Define Theme Description
D
Define theme description on
style.css
/*
Theme Name: Wordpress Sanothimi
URI: http://wordpress....
Make Functional
functions.php is the main function file
 Contains custom functionality for theme
 Can be procedural or O...
Basic functions defined by WordPress
Posts
the_title (outputs the title of the post)
the_excerpt (outputs the post excerpt...
Custom Page Templates
Method of define custom template
<?php
/*
Template Name: Product Page
*/
?>
1)From Scratch
Template Hierarchy
Category display
Template file used to render a Category Archive Index page
1) category-{slug}.php
2) c...
Customizing Themes
 Customize existing themes
 Customize style, layout, functions etc.
 Add page templates
 Add custom...
Starter Themes
Develop theme using starter themes.
(popular starter theme)
1) Underscores
http://underscores.me/
2) Bones
...
Example of Starter theme (underscore)
Example of Starter theme (bones)
How to create child theme?
1. Creating Your Child Theme’s Folder
2. Creating Your Child Theme’s style.css File
3. Activati...
style.css example of Child Theme
/*Theme Name: twentytwelve_chile
URI: http://twnty.tl
Description: Example child theme of...
Screen shot
of child theme
At backend
How child theme works?
Questions?
Thank You
Contact me :
bj.aspire@gmail.com
facebook.com/bijaya.oli
 WordPress Theme Development
 WordPress Theme Development
 WordPress Theme Development
 WordPress Theme Development
Upcoming SlideShare
Loading in...5
×

WordPress Theme Development

2,005

Published on

WordPress theme development from scratch, customize existing themes, make child theme.

Published in: Education, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,005
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

WordPress Theme Development

  1. 1. WordPressTheme Development -Bijaya Kumar Oli bj.aspire@gmail.com
  2. 2. What is WordPress Theme?  Collection of files that work together to produce a graphical interface.  Functionality of website without changing the basic WordPress software.
  3. 3. Theme Makes from  HTML  PHP  CSS  IMAGES
  4. 4. Some examples of WordPress Themes
  5. 5. Way of develop themes 1)From Scratch 2) Customizing themes 3) Build Child Theme
  6. 6. Minimum files require  style.css  index.php 1) From Scratch
  7. 7. Basic Layout of website 1)From Scratch
  8. 8. Basic files for theme development  header.php (displays headers and navigation, contains HTML code)  index.php (home )  footer.php (Contains instructions for global footer , closes HTML tags.)  page.php (individual pages)  single.php (individual posts)  sidebar.php (displays sidebars, which can be set up in functions.php)  functions.php  style.css 1)From Scratch
  9. 9. Define Theme Description D Define theme description on style.css /* Theme Name: Wordpress Sanothimi URI: http://wordpress.org/ Description: Clean Responsive thene. Author: Bijaya Oli Author URI: facebook.com/bijaya.oli Version: 1.0 Tags: black, blue, white, two-columns, License: License URI: General comments (optional). */ 1)From Scratch
  10. 10. Make Functional functions.php is the main function file  Contains custom functionality for theme  Can be procedural or Object Oriented  Can include plugin-like code - Create settings page in admin area - Apply filters - Perform actions etc 1)From Scratch
  11. 11. Basic functions defined by WordPress Posts the_title (outputs the title of the post) the_excerpt (outputs the post excerpt) the_content (outputs the full post content) the_category (outputs the post categories) the_author (outputs the post author) the_date (outputs the post date) the_post_thumbnail(outputs the post image); the_tags (outputs the post tags) See more on http://codex.wordpress.org/Function_Reference/ 1)From Scratch
  12. 12. Custom Page Templates Method of define custom template <?php /* Template Name: Product Page */ ?> 1)From Scratch
  13. 13. Template Hierarchy Category display Template file used to render a Category Archive Index page 1) category-{slug}.php 2) category-{id}.php 3) category.php 4) archive.php 5) index.php See more on http://codex.wordpress.org/Template_Hierarchy 1)From Scratch
  14. 14. Customizing Themes  Customize existing themes  Customize style, layout, functions etc.  Add page templates  Add custom post type, widgets
  15. 15. Starter Themes Develop theme using starter themes. (popular starter theme) 1) Underscores http://underscores.me/ 2) Bones http://themble.com/bones/
  16. 16. Example of Starter theme (underscore)
  17. 17. Example of Starter theme (bones)
  18. 18. How to create child theme? 1. Creating Your Child Theme’s Folder 2. Creating Your Child Theme’s style.css File 3. Activating Your Child Theme 4. Making Further Alterations and Additions
  19. 19. style.css example of Child Theme /*Theme Name: twentytwelve_chile URI: http://twnty.tl Description: Example child theme of twenty thirteen. Author: Bijaya Version: 1.0License: GNU General Public License v2.0License Template: twentytwelve */ @import url(../twentytwelve/style.css);
  20. 20. Screen shot of child theme At backend
  21. 21. How child theme works?
  22. 22. Questions?
  23. 23. Thank You Contact me : bj.aspire@gmail.com facebook.com/bijaya.oli

×