WordPress Themes 101 - HighEdWeb New England 2013
•
1 like•5,150 views
A brief primer on the WordPress theme system
Recommended
More Related Content
What's hot
What's hot (20)
Similar to WordPress Themes 101 - HighEdWeb New England 2013
Similar to WordPress Themes 101 - HighEdWeb New England 2013 (20)
More from Curtiss Grymala
Recently uploaded
Recently uploaded (20)
WordPress Themes 101 - HighEdWeb New England 2013
- 3. 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. EXAMPLES Hybrid Core is a framework. - http://themehybrid.com/hybrid-core • No theme structure • Full package goes inside parent theme Genesis “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 theme TwentyTwelve 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
- 6. REQUIRED FILES CSS 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
- 7. 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. 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()
- 10. THE WORDPRESS TEMPLATE HIERARCHY WordPress automatically searches for appropriate theme template file
- 12. 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. 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. 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
- 16. 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. 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.
- 19. 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. QUESTIONS? COMMENTS? Twitter: @cgrymala Website(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.com SpeakerRate: http://spkr8.com/s/10608 http://about.me/cgrymala