0
dotEduGuru    Summit    2013
FRAMEWORKS, PARENTS & CHILDREN•    Parent Theme    • A base theme that sets up functionality    • Can be extended    • Mus...
EXAMPLESHybrid Core is a framework. - http://themehybrid.com/hybrid-core• No theme structure• Full package goes inside par...
REQUIRED FILESCSS Stylesheet (style.css)*• Implements the CSS for the theme• Not included by default   • enqueue it in fun...
TYPICAL THEME FILESTheme Functions (functions.php)• Central location for function, variable, constant defintions used in t...
MOAR THEME FILESAutomatic Template Files (page.php, 404.php, single.php)• Used automatically based on type of page being s...
THE WORDPRESS TEMPLATE HIERARCHYWordPress automatically searches for appropriate theme template file
WHAT IS “THE LOOP”?The Loop outputs the main content area• Loops through all matching content objectsif ( have_posts() ) :...
OTHER “LOOP” FUNCTIONSInside the loop, various functions are available•   the_title() – echoes the title of the current po...
MOAR LOOP TIPSIf you need to use the same query loop more than once:•   Use rewind_posts() to reset the loop to be used ag...
USING CONDITIONAL FUNCTIONSIdentify where you are:• is_home() – on the default home page (or the “posts” page if set in Se...
TESTING CONDITIONSNot just where you are, but what features are available:• has_post_thumbnail() – whether or not the “fea...
MAPPING IT OUT•    Choose what to build    • Full theme    • Child theme – only requires style.css; all others are optiona...
QUESTIONS? COMMENTS?Twitter: @cgrymalaWebsite(s):    http://umw.edu/ (Multi-Network Setup)               http://ten-321.co...
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
Upcoming SlideShare
Loading in...5
×

WordPress Themes 101 - dotEduGuru Summit 2013

1,251

Published on

Presentation given at the dotEduGuru Summit 2013. A brief primer explaining the WordPress themes API and how to begin developing your own theme.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,251
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "WordPress Themes 101 - dotEduGuru Summit 2013"

  1. 1. dotEduGuru Summit 2013
  2. 2. FRAMEWORKS, PARENTS & CHILDREN• Parent Theme • A base theme that sets up functionality • Can be extended • Must be written to allow overrides• Child Theme • Extends a parent theme • Can carry over or override elements from parent • Cannot be extended without plugins• Framework • Not a full theme; more of a plugin for a theme • Allows creation of parent and child themes with shared functionalityhttp://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes
  3. 3. EXAMPLESHybrid Core is a framework. - http://themehybrid.com/hybrid-core• No theme structure• Full package goes inside parent themeGenesis “Framework” is a parent theme -http://www.studiopress.com/features• Has a theme structure• Can be used on its own• Does not go inside of another themeTwentyTwelve is a parent theme -http://wordpress.org/extend/themes/twentytwelve• Although it has less of a framework built in, same concept as Genesis“Education” is a child theme - http://my.studiopress.com/themes/education/• Cannot be used without Genesis (parent theme) installed
  4. 4. REQUIRED FILESCSS Stylesheet (style.css)*• Implements the CSS for the theme• Not included by default • enqueue it in functions.php or • use <link href=“<?php bloginfo( „stylesheet_uri‟ ) ?>”/> in <head>• Provides base information about the theme • Theme name, URI, version, license, etc. (http://codex.wordpress.org/Theme_Development#Theme_Stylesheet)Index (index.php)• Implements the structure of the theme• Can be split out into multiple files• Acts as fallback for all pages*** - style.css is the only file required in a child theme; all others fallback to parent theme** - the Template Hierarchy governs which files are used for each page; index is the final fallback
  5. 5. TYPICAL THEME FILESTheme Functions (functions.php)• Central location for function, variable, constant defintions used in theme• Included automatically by theme engine before after_setup_theme actionDefault Sidebar (sidebar.php)• Outputs default sidebar (get_sidebar())Default WordPress Loop (loop.php)• Not included automatically by theme• Used to separate “the loop”*** from other structureComments Template (comments.php)• List of comments and comment form; use comments_template() to includeSearch (search.php)• Search results template; automatically used on search results page
  6. 6. MOAR THEME FILESAutomatic Template Files (page.php, 404.php, single.php)• Used automatically based on type of page being shown;• Overrides index.php (see the Template Hierarchy)Miscellaneous Files (sidebar-[slug].php, etc.)• Include with the get_template_part( „sidebar‟, „[slug]‟ ) function• Sidebar, header and footer files can be included with: • get_sidebar( ‘[slug]’ ) • get_header( ‘[slug]’ ) • get_footer( ‘[slug]’ )Header and Footer (header.php, footer.php)• Not included automatically• Call with get_header() & get_footer()
  7. 7. THE WORDPRESS TEMPLATE HIERARCHYWordPress automatically searches for appropriate theme template file
  8. 8. WHAT IS “THE LOOP”?The Loop outputs the main content area• Loops through all matching content objectsif ( have_posts() ) : while ( have_posts() ) : the_post();// Output all of your contentendwhile; endif;have_posts() and the_post()• Global methods of main query object ($wp_query)• have_posts() generates array of “post” objects• the_post() sets global variables related to current post object
  9. 9. OTHER “LOOP” FUNCTIONSInside the loop, various functions are available• the_title() – echoes the title of the current post• the_content() – echoes the body of the current post• the_post_thumbnail() – echoes the “featured image” for current post
  10. 10. MOAR LOOP TIPSIf you need to use the same query loop more than once:• Use rewind_posts() to reset the loop to be used againYou can start your own loop with a custom query: $myquery = new WP_Query( ‘[query parameters go here]’ ); if ( $myquery->have_posts() ) : while ( $myquery->have_posts() ) : $myquery->the_post(); // Your custom loop stuff here endwhile; endif;• Don’t alter the global $wp_query or use query_posts() unless you know what you’re doing• Use get_posts() or create your own loop, instead
  11. 11. USING CONDITIONAL FUNCTIONSIdentify where you are:• is_home() – on the default home page (or the “posts” page if set in Settings)• is_front_page() – on the static front page (set in Settings)• is_admin() / is_network_admin() – anywhere in the admin area (not on the login page)• is_single() / is_page() / is_attachment() / is_singular( $post_type ) –single content entry• is_post_type_archive() – a list of content entries from a specific content type• is_category() / is_tag() / is_tax() – a list of content entries with a specific taxonomy• is_404() – a non-existent page• is_search() – showing the list of search results• is_feed() – is a structured feed (RSS, Atom, etc.)
  12. 12. TESTING CONDITIONSNot just where you are, but what features are available:• has_post_thumbnail() – whether or not the “featured image” is set• has_excerpt() – whether a manual excerpt is set for the content• is_active_sidebar() – whether a widgetized area (“sidebar”) has any widgets• has_nav_menu() – whether a custom menu location has a menu assigned• is_multisite() – whether the site is part of a multisite network• is_plugin_active() – whether a specific plugin is active on the site• wp_script_is() & wp_style_is() – whether a script/stylesheet has been registered, enqueued, printed, etc.
  13. 13. MAPPING IT OUT• Choose what to build • Full theme • Child theme – only requires style.css; all others are optional • Theme based on framework – requirements differ based on framework• Fulfill requirements • style.css • wp_head() • wp_footer() • http://j.mp/140mlRU• Install and test it • Don‟t be afraid to split things out; use get_template_part() to include additional theme pieces
  14. 14. QUESTIONS? COMMENTS?Twitter: @cgrymalaWebsite(s): http://umw.edu/ (Multi-Network Setup) http://ten-321.com/ http://svn.ten-321.com/ (SVN Repo)Email: cgrymala@umw.edu curtiss@ten-321.comSpeakerRate: http://spkr8.com/s/10608 http://about.me/cgrymala
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×