Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
THEME DEVELOPMENT an introduction to the basics of theming with WordPress
About me• Name: Thad Allender• Web: ThadAllender.com & GraphPaperPress.com• Twitter: @thadallender• Email: thadallender@gm...
Poll•Blogger?•Designer?•Developer?
Anatomy of a WordPress theme• WordPress Themes are files that work together to create the design and functionality of a W...
Anatomy of a WordPress theme• Themes live in /wp-content/themes/• Themes include stylesheets, template & functions files, ...
Anatomy of a WordPress theme• style.css – The main stylesheet. This must be included with your theme.• index.php – The...
/* style.cssTheme Name: Twenty TenTheme URI: http://wordpress.org/Description: The theme description.A...
index.php<?php get_header(); ?><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>! <h1><a href="<?php...
Page Structure• Made up of three basic building blocks: a header, the content, and a footer. Sidebars add additional func...
header.php• Called with: get_header()• Includes everything that comes before and including the <body>, meta info, scripts...
index.php• Typically displays content from the loop (title, content, etc.)• Calls get_header(), get_sidebar(), get_footer
footer.php• Called with: get_footer()• Can include credits, copyright info, wp_footer hook.
sidebar.php• Called with get_sidebar()• Adds contextual site info. Typically includes widgets.
Template Hierarchy• The order in which WordPress template files are chosen• http://codex.wordpress.org/Template_Hierarchy
Template Hierarchy
Home Page Display1.home.php2.index.php
Single Post Display1.single-{post_type}.php - If the post_type were videos, WordPress would look for single-videos.php.2....
Page Display1.custom template - Where custom template is the Page Template assigned to the Page.2.page-{slug}.php - If th...
Category Display1.category-{slug}.php - If the categorys slug were news, WordPress would look for category-news.php2.cate...
Tag Display1.tag-{slug}.php - If the tags slug were sometag, WordPress would look for tag-sometag.php2.tag-{id}.php - If ...
Custom Post Type Display1.has_archive => true2.archive-{$post_type}.php3.archive.php4.index.php
Author Display1.author-{nicename}.php - If the authors nice name were rami, WordPress would look for author-rami.php.2.au...
Date Display1.date.php2.archive.php3.index.php
Search Display1.search.php2.index.php
404 (Not Found) Display1.404.php2.index.php
Attachment Display1.MIME_type.php - it can be any MIME type (image.php, video.php, audio.php, application.php or any othe...
Development Environment
Development Environment• Mamp (Mac) or Wamp (PC)• For running WordPress locally (Apache, PHP, MySQL)• http://www.mamp.info...
Version Control• Simplifies collaborative development, comparing, releasing• SVN - http://subversion.tigris.org/• GIT - ht...
The Loop• Displays each of your posts• http://codex.wordpress.org/The_Loop
The Loop<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>....add template tags here....<?php endwhile; e...
Query Posts• query_posts(‘cat=1&showposts=5’)• http://codex.wordpress.org/Function_Reference/query_posts
query_posts()• Use it to control which posts show up in The Loop.• Display only a single post on your homepage (a single P...
query_posts()<?phpquery_posts(posts_per_page=5);if ( have_posts() ) : while ( have_posts() ) : the_post();..endwhile; else...
query_posts()The query_posts function is intended to be used tomodify the main page Loop only. It is not intendedas a mean...
Get Posts• get_posts(‘cat=1&numberposts=3’)• http://codex.wordpress.org/Template_Tags/get_posts
<ul> get_posts()<?phpglobal $post;$myposts = get_posts(posts_per_page=5&offset=1&category=1);foreach(...
Template Tags• Used to display dynamic information about your site• http://codex.wordpress.org/Template_Tags
Include Tags Template include tags are used within one template file (for example index.php) to execute the HTML and PHP fo...
Include Tags• get_header() - includes header.php or header-{name}.php• get_footer() - includes footer.php or footer-{name}...
Body Class• body_class()• http://codex.wordpress.org/Function_Reference/body_class
body_class() Helps theme authors style more effectively with CSS by applying different classes to the ...
Post Class• post_class()• http://codex.wordpress.org/Function_Reference/post_class
post_class()<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>><article id="post-1167" class="post-1167 post typ...
Get Template Part• get_template_part()• http://codex.wordpress.org/Function_Reference/ get_template_part
get_template_part()• get_template_part( loop, index );• Looks for a file named ‘loop-index.php’ in the current theme• If n...
Post Formats• has_post_format()• http://codex.wordpress.org/Post_Formats
Post Formats
while ( the_loop() ): if ( has_post_format( gallery ) ) : // big block of HTML to format a gallery post elseif ( has_...
get_template_part() and get_post_format()while ( the_loop() ): get_template_part( format, get_post_format() );endwh...
get_template_part() and get_post_format()If the current post has post format ‘Link’, then welook for a file named ‘fo...
Enqueue Javascripts• wp_enqueue_script()• http://codex.wordpress.org/Function_Reference/ wp_enqueue_script
wp_enqueue_script()<?phpfunction my_init_method() { wp_deregister_script( jquery ); wp_register_script( jquery, http...
add_theme_support()• http://codex.wordpress.org/Function_Reference/ add_theme_support
Conditional Tags Used in Template files to change what content is displayed and how that content is displayed on a particu...
Conditional Tags if (is_home) { echo ‘This is home!’; } else { echo ‘No home!’; }
Confused? Comment your code• <!-- END #container -->• // PHP comment goes here
Child Themes• Inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, ...
Child themes: style.css/*Theme Name: TwentyTen ChildTemplate: twentytenVersion: 1.0Author: Thad Allender*/@import url("../...
Child themes: functions.phpThe functions.php of a child theme does not overrideits counterpart from the parent. Instead, i...
Child Themes: Including filesTEMPLATEPATH - returns the path to the template files of a themeSTYLESHEETPATH - returns the ...
Child themes: File Overrides•All other template files override their namesakes from the parent.•Example: twentyten-child/s...
Child Themes: ApproachesBecause a child theme’s functions.php is loaded first, you can make the userfunctions of your them...
Child Themes: HooksEnables you to add, remove or change code in supporting parentthemeshttp://themeshaper.com/action-hooks...
Theme Testing
Theme Testing Tools• wp-config.php: define(WP_DEBUG, true);• http://wordpress.org/extend/plugins/theme-check/• http://word...
Questions?
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Designing WordPress - Heart&Sole2011
Next
Upcoming SlideShare
Designing WordPress - Heart&Sole2011
Next
Download to read offline and view in fullscreen.
Dec. 14, 2010
51,781 views

Share

Intro to WordPress theme development

Download to read offline

Dec. 14, 2010
51,781 views

An introduction to WordPress theme development by Thad Allender from GraphPaperPress.com. Slides from WordPress December 2010 Meetup at Fathom Creative in Washington, D.C.

Recommended

Related Books

Free with a 30 day trial from Scribd

See all
How I Built This: The Unexpected Paths to Success from the World's Most Inspiring Entrepreneurs Guy Raz
(4.5/5)
Free
Ask for More: 10 Questions to Negotiate Anything Alexandra Carter
(4/5)
Free
Bezonomics: How Amazon Is Changing Our Lives and What the World's Best Companies Are Learning from It Brian Dumaine
(4.5/5)
Free
No Filter: The Inside Story of Instagram Sarah Frier
(4.5/5)
Free
The Ministry of Common Sense: How to Eliminate Bureaucratic Red Tape, Bad Excuses, and Corporate BS Martin Lindstrom
(4/5)
Free
The Catalyst: How to Change Anyone's Mind Jonah Berger
(4.5/5)
Free
The Fix: Overcome the Invisible Barriers That Are Holding Women Back at Work Michelle P. King
(5/5)
Free

Related Audiobooks

Free with a 30 day trial from Scribd

See all
We Should All Be Millionaires: Change Your Thinking, Build Bank, and Claim Your Independence Rachel Rodgers
(5/5)
Free
Business Networking for Introverts: How to Build Relationships the Authentic Way Karlo Krznarić
(4.5/5)
Free
Power, for All: How It Really Works and Why It's Everyone's Business Julie Battilana
(4/5)
Free
Subtract: The Untapped Science of Less Leidy Klotz
(4/5)
Free
Winning: The Unforgiving Race to Greatness Tim S. Grover
(5/5)
Free
Own the Arena: Getting Ahead, Making a Difference, and Succeeding as the Only One Katrina M. Adams
(5/5)
Free
Just Work: How to Root Out Bias, Prejudice, and Bullying to Build a Kick-Ass Culture of Inclusivity Kimberly Scott
(3.5/5)
Free
The One Week Marketing Plan: The Set It & Forget It Approach for Quickly Growing Your Business Mark Satterfield
(5/5)
Free
Hot Seat: What I Learned Leading a Great American Company Jeff Immelt
(4.5/5)
Free
Pressure Makes Diamonds: Becoming the Woman I Pretended to Be Valerie Graves
(5/5)
Free
Everybody Has a Podcast (Except You): A How-To Guide from the First Family of Podcasting Justin McElroy
(5/5)
Free
Invent and Wander: The Collected Writings of Jeff Bezos, With an Introduction by Walter Isaacson Walter Isaacson
(4.5/5)
Free
How to Lead: Wisdom from the World's Greatest CEOs, Founders, and Game Changers David M. Rubenstein
(4.5/5)
Free
Create: Tools from Seriously Talented People to Unleash Your Creative Life Marc Silber
(4.5/5)
Free
Humanocracy: Creating Organizations as Amazing as the People Inside Them Gary Hamel
(4.5/5)
Free
Blue-Collar Cash: Love Your Work, Secure Your Future, and Find Happiness for Life Ken Rusk
(4.5/5)
Free
Show More

Intro to WordPress theme development

  1. THEME DEVELOPMENT an introduction to the basics of theming with WordPress
  2. About me• Name: Thad Allender• Web: ThadAllender.com & GraphPaperPress.com• Twitter: @thadallender• Email: [email protected]
  3. Poll•Blogger?•Designer?•Developer?
  4. Anatomy of a WordPress theme• WordPress Themes are files that work together to create the design and functionality of a WordPress site• http://codex.wordpress.org/Theme_Development
  5. Anatomy of a WordPress theme• Themes live in /wp-content/themes/• Themes include stylesheets, template & functions files, images, javascripts
  6. Anatomy of a WordPress theme• style.css – The main stylesheet. This must be included with your theme.• index.php – The main template. If your theme provides its own templates, index.php must be present.• comments.php – The comments template. If not present, wp-comments.php is used.• single.php – The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.• page.php – The page template. Used when a page is queried.• category.php – The category template. Used when a category is queried.• author.php – The author template. Used when an author is queried.• date.php – The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.• archive.php – The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.• search.php – The search template. Used when a search is performed.• 404.php – The 404 Not Found template. Used when WordPress cannot find a post that matches the query.
  7. /* style.cssTheme Name: Twenty TenTheme URI: http://wordpress.org/Description: The theme description.Author: the WordPress teamVersion: 1.3-alphaTags: black, two-columns, fixed-width, custom-header*/
  8. index.php<?php get_header(); ?><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>! <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent linkto <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>! <?php the_content(); ?><?php endwhile; else: ?>! <p><?php _e(Sorry, no posts matched your criteria.); ?></p><?php endif; ?><?php get_footer(); ?>
  9. Page Structure• Made up of three basic building blocks: a header, the content, and a footer. Sidebars add additional functionality.
  10. header.php• Called with: get_header()• Includes everything that comes before and including the <body>, meta info, scripts, styles, wp_head, site name, navigation.
  11. index.php• Typically displays content from the loop (title, content, etc.)• Calls get_header(), get_sidebar(), get_footer
  12. footer.php• Called with: get_footer()• Can include credits, copyright info, wp_footer hook.
  13. sidebar.php• Called with get_sidebar()• Adds contextual site info. Typically includes widgets.
  14. Template Hierarchy• The order in which WordPress template files are chosen• http://codex.wordpress.org/Template_Hierarchy
  15. Template Hierarchy
  16. Home Page Display1.home.php2.index.php
  17. Single Post Display1.single-{post_type}.php - If the post_type were videos, WordPress would look for single-videos.php.2.single.php3.index.php
  18. Page Display1.custom template - Where custom template is the Page Template assigned to the Page.2.page-{slug}.php - If the page slug is recent-news, WordPress will look to use page-recent-news.php3.page-{id}.php - If the page ID is 6, WordPress will look to use page-6.php4.page.php5.index.php
  19. Category Display1.category-{slug}.php - If the categorys slug were news, WordPress would look for category-news.php2.category-{id}.php - If the categorys ID were 6, WordPress would look for category-6.php3.category.php4.archive.php5.index.php
  20. Tag Display1.tag-{slug}.php - If the tags slug were sometag, WordPress would look for tag-sometag.php2.tag-{id}.php - If the tags ID were 6, WordPress would look for tag-6.php3.tag.php4.archive.php5.index.php
  21. Custom Post Type Display1.has_archive => true2.archive-{$post_type}.php3.archive.php4.index.php
  22. Author Display1.author-{nicename}.php - If the authors nice name were rami, WordPress would look for author-rami.php.2.author-{id}.php - If the authors ID were 6, WordPress would look for author-6.php.3.author.php4.archive.php5.index.php
  23. Date Display1.date.php2.archive.php3.index.php
  24. Search Display1.search.php2.index.php
  25. 404 (Not Found) Display1.404.php2.index.php
  26. Attachment Display1.MIME_type.php - it can be any MIME type (image.php, video.php, audio.php, application.php or any other).2.attachment.php3.single.php4.index.php
  27. Development Environment
  28. Development Environment• Mamp (Mac) or Wamp (PC)• For running WordPress locally (Apache, PHP, MySQL)• http://www.mamp.info/en/index.html• http://www.wampserver.com/en/• http://codex.wordpress.org/ Installing_WordPress_Locally_on_Your_Mac_With_MAMP
  29. Version Control• Simplifies collaborative development, comparing, releasing• SVN - http://subversion.tigris.org/• GIT - http://git-scm.com/
  30. The Loop• Displays each of your posts• http://codex.wordpress.org/The_Loop
  31. The Loop<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>....add template tags here....<?php endwhile; else: ?><p><?php _e(Sorry, no posts matched your criteria.); ?></p><?php endif; ?>
  32. Query Posts• query_posts(‘cat=1&showposts=5’)• http://codex.wordpress.org/Function_Reference/query_posts
  33. query_posts()• Use it to control which posts show up in The Loop.• Display only a single post on your homepage (a single Page can be done via Settings -> Reading).• Show all posts from a particular time period.• Show the latest post (only) on the front page.• Change how posts are ordered.• Show posts from only one category.• Exclude one or more categories.
  34. query_posts()<?phpquery_posts(posts_per_page=5);if ( have_posts() ) : while ( have_posts() ) : the_post();..endwhile; else:..endif;wp_reset_query();?>
  35. query_posts()The query_posts function is intended to be used tomodify the main page Loop only. It is not intendedas a means to create secondary Loops on the page. Ifyou want to create separate Loops outside of themain one, you should use get_posts() instead.
  36. Get Posts• get_posts(‘cat=1&numberposts=3’)• http://codex.wordpress.org/Template_Tags/get_posts
  37. <ul> get_posts()<?phpglobal $post;$myposts = get_posts(posts_per_page=5&offset=1&category=1);foreach($myposts as $post) : setup_postdata($post);?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul>
  38. Template Tags• Used to display dynamic information about your site• http://codex.wordpress.org/Template_Tags
  39. Include Tags Template include tags are used within one template file (for example index.php) to execute the HTML and PHP found in another template file (for example header.php).• get_header()• http://codex.wordpress.org/Include_Tags
  40. Include Tags• get_header() - includes header.php or header-{name}.php• get_footer() - includes footer.php or footer-{name}.php• get_sidebar() - includes sidebar.php or sidebar-{name}.php• get_template_part() - includes {slug}.php or {slug}-{name}.php• get_search_form() - includes searchform.php• comments_template() - includes comments.php or wp-includes/ theme-compat/comments.php
  41. Body Class• body_class()• http://codex.wordpress.org/Function_Reference/body_class
  42. body_class() Helps theme authors style more effectively with CSS by applying different classes to the body element• <body <?php body_class(); ?>• <body class="archive category category-daily-photo">
  43. Post Class• post_class()• http://codex.wordpress.org/Function_Reference/post_class
  44. post_class()<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>><article id="post-1167" class="post-1167 post type-posthentry category-daily-photo tag-dc tag-georgetown tag-washington">
  45. Get Template Part• get_template_part()• http://codex.wordpress.org/Function_Reference/ get_template_part
  46. get_template_part()• get_template_part( loop, index );• Looks for a file named ‘loop-index.php’ in the current theme• If not found, looks for ‘loop.php’• If this is a child theme, and neither of those templates exist, looks in the parent theme.• Each of the major templates (‘archive.php’, ‘author.php’, ‘category.php’, etc) makes a call similar to this, looking for a loop template specific to the appropriate view.
  47. Post Formats• has_post_format()• http://codex.wordpress.org/Post_Formats
  48. Post Formats
  49. while ( the_loop() ): if ( has_post_format( gallery ) ) : // big block of HTML to format a gallery post elseif ( has_post_format( video ) ) : // big block of similar HTML to format a video post elseif ( has_post_format( image ) ) : // big block of similar HTML to format an image post elseif ( has_post_format( aside ) ) : // big block of similar HTML to format an aside else : // big block of similar HTML to format other posts endif;endwhile;
  50. get_template_part() and get_post_format()while ( the_loop() ): get_template_part( format, get_post_format() );endwhile;
  51. get_template_part() and get_post_format()If the current post has post format ‘Link’, then welook for a file named ‘format-link.php’. If the currentpost has format ‘Aside’, we look for ‘format-aside.php’, if it’s a Quote, ‘format-quote.php’,regular posts look for ‘format-standard.php’, andfailing all else, we use plain old ‘format.php’.
  52. Enqueue Javascripts• wp_enqueue_script()• http://codex.wordpress.org/Function_Reference/ wp_enqueue_script
  53. wp_enqueue_script()<?phpfunction my_init_method() { wp_deregister_script( jquery ); wp_register_script( jquery, http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js); wp_enqueue_script( jquery );}add_action(init, my_init_method);?>
  54. add_theme_support()• http://codex.wordpress.org/Function_Reference/ add_theme_support
  55. Conditional Tags Used in Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches• http://codex.wordpress.org/Conditional_Tags
  56. Conditional Tags if (is_home) { echo ‘This is home!’; } else { echo ‘No home!’; }
  57. Confused? Comment your code• <!-- END #container -->• // PHP comment goes here
  58. Child Themes• Inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme• http://codex.wordpress.org/Child_Themes
  59. Child themes: style.css/*Theme Name: TwentyTen ChildTemplate: twentytenVersion: 1.0Author: Thad Allender*/@import url("../twentyten/style.css");
  60. Child themes: functions.phpThe functions.php of a child theme does not overrideits counterpart from the parent. Instead, it is loaded inaddition to the parent’s functions.php. (Specifically,it is loaded right before the parent’s file.)
  61. Child Themes: Including filesTEMPLATEPATH - returns the path to the template files of a themeSTYLESHEETPATH - returns the path to the template files of the child themerequire_once( STYLESHEETPATH . /path/to/file/in/child/theme.php );
  62. Child themes: File Overrides•All other template files override their namesakes from the parent.•Example: twentyten-child/single.php overrides twentyten/single.php•This holds true to all templates in the WordPress hierarchy and new templates introduced using get_template_part()
  63. Child Themes: ApproachesBecause a child theme’s functions.php is loaded first, you can make the userfunctions of your theme pluggable—that is, replaceable by a child theme—bydeclaring them conditionally in the parent.if (!function_exists(my_index_loop)) { function my_index_loop() { // Do something. }}In that way, a child theme can replace a PHP function of the parent by simplydeclaring it again.
  64. Child Themes: HooksEnables you to add, remove or change code in supporting parentthemeshttp://themeshaper.com/action-hooks-wordpress-child-themes/
  65. Theme Testing
  66. Theme Testing Tools• wp-config.php: define(WP_DEBUG, true);• http://wordpress.org/extend/plugins/theme-check/• http://wordpress.org/extend/plugins/log-deprecated-notices/• http://codex.wordpress.org/ Theme_Development#Theme_Testing_Process• Unit test your theme: http://codex.wordpress.org/Theme_Unit_Test
  67. Questions?

  • SyedZahidAbbasNaqvi

    Oct. 15, 2020

  • cmmishra9

    May. 24, 2019

  • kossa

    Jan. 28, 2019

  • salmancreation

    Aug. 16, 2017

  • girlyPerez

    Aug. 9, 2017

  • GeoffreyMARIN

    Apr. 19, 2016

  • LeonardUsayi

    Oct. 29, 2015

  • comunitech

    Jun. 23, 2013

  • umairulh

    Feb. 11, 2013

  • herinxi

    Jan. 24, 2013

  • angiemeeker

    Oct. 16, 2012

  • BBGterrore

    Sep. 21, 2012

  • pilichph

    Apr. 3, 2011

  • localpolitechs

    Dec. 25, 2010

  • rochellefp

    Dec. 15, 2010

  • Mamaduka

    Dec. 15, 2010

An introduction to WordPress theme development by Thad Allender from GraphPaperPress.com. Slides from WordPress December 2010 Meetup at Fathom Creative in Washington, D.C.

Views

Total views

51,781

On Slideshare

0

From embeds

0

Number of embeds

25

Actions

Downloads

415

Shares

0

Comments

0

Likes

16

×