1. #eduguruSummit WORDPRESS THEMES 101 SOME SIMPLE STARTER TIPS FOR WORDPRESS THEMES dotEduGuru Summit 2013

2. #eduguruSummit DIFFERENT TYPES OF THEMES FRAMEWORKS, PARENTS AND CHILD THEMES

3. #eduguruSummit 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 functionality http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes

4. #eduguruSummit EXAMPLES Hybrid Core is a framework. - http://themehybrid.com/hybrid-corehttp://themehybrid.com/hybrid-core No theme structure Full package goes inside parent theme Genesis “Framework” is a parent theme - http://www.studiopress.com/featureshttp://www.studiopress.com/features Has a theme structure Can be used on its own Does not go inside of another theme TwentyTwelve is a parent theme - http://wordpress.org/extend/themes/twentytwelvehttp://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/http://my.studiopress.com/themes/education/ Cannot be used without Genesis (parent theme) installed

5. #eduguruSummit STARTING A THEME BASIC ELEMENTS OF ALL THEMES

6. #eduguruSummit REQUIRED FILES CSS Stylesheet (style.css)* Implements the CSS for the theme Not included by default enqueue it in functions.php or use ”/> in Provides base information about the theme Theme name, URI, version, license, etc. (http://codex.wordpress.org/Theme_Development#Theme_Stylesheet)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

7. #eduguruSummit TYPICAL THEME FILES Theme Functions (functions.php) Central location for function, variable, constant defintions used in theme Included automatically by theme engine before after_setup_theme action Default 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 structure Comments Template (comments.php) List of comments and comment form; use comments_template() to include Search (search.php) Search results template; automatically used on search results page

8. #eduguruSummit MOAR THEME FILES Automatic 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()

9. #eduguruSummit TEMPLATE HIERARCHY HOW WORDPRESS DECIDES WHAT FILE TO USE

10. #eduguruSummit THE WORDPRESS TEMPLATE HIERARCHY WordPress automatically searches for appropriate theme template file

11. #eduguruSummit THE LOOP THE MAIN CONTENT AREA OF YOUR THEME

12. #eduguruSummit WHAT IS “THE LOOP”? The Loop outputs the main content area Loops through all matching content objects if ( have_posts() ) : while ( have_posts() ) : the_post(); // Output all of your content endwhile; 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

13. #eduguruSummit OTHER “LOOP” FUNCTIONS Inside 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

14. #eduguruSummit MOAR LOOP TIPS If you need to use the same query loop more than once: Use rewind_posts() to reset the loop to be used again You 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

15. #eduguruSummit ON ONE CONDITION USING CONDITIONAL FUNCTIONS IN YOUR THEME

16. #eduguruSummit USING CONDITIONAL FUNCTIONS Identify 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.)

17. #eduguruSummit TESTING CONDITIONS Not 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.

18. #eduguruSummit PUTTING THINGS TOGETHER USING THIS KNOWLEDGE TO BUILD A THEME

19. #eduguruSummit 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

20. #eduguruSummit QUESTIONS? COMMENTS? Twitter: @cgrymala Website(s): http://umw.edu/ (Multi-Network Setup)http://umw.edu/ http://ten-321.com/ http://svn.ten-321.com/http://svn.ten-321.com/ (SVN Repo) Email: cgrymala@umw.educgrymala@umw.edu curtiss@ten-321.com SpeakerRate: http://spkr8.com/s/10608http://spkr8.com/s/10608 http://about.me/cgrymala