WordPress Theme Development


Published on

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

Published in: Education, Technology, Business

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