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

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

#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

#eduguruSummit EXAMPLES Hybrid Core is a framework. - No theme structure Full package goes inside parent theme Genesis “Framework” is a parent theme - Has a theme structure Can be used on its own Does not go inside of another theme TwentyTwelve is a parent theme - Although it has less of a framework built in, same concept as Genesis “Education” is a child theme - Cannot be used without Genesis (parent theme) installed

#eduguruSummit STARTING A THEME BASIC ELEMENTS OF ALL THEMES

#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. ( 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

#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

#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()

#eduguruSummit TEMPLATE HIERARCHY HOW WORDPRESS DECIDES WHAT FILE TO USE

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

#eduguruSummit THE LOOP THE MAIN CONTENT AREA OF YOUR THEME

#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

#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

#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

#eduguruSummit ON ONE CONDITION USING CONDITIONAL FUNCTIONS IN YOUR THEME

#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.)

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

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

#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() Install and test it Don’t be afraid to split things out; use get_template_part() to include additional theme pieces

#eduguruSummit QUESTIONS? COMMENTS? Website(s): (Multi-Network Setup) (SVN Repo) SpeakerRate: