WordPress Themes 101 - HighEdWeb New England 2013

5,363 views

Published on

A brief primer on the WordPress theme system

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,363
On SlideShare
0
From Embeds
0
Number of Embeds
436
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress Themes 101 - HighEdWeb New England 2013

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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()
  6. 6. THE WORDPRESS TEMPLATE HIERARCHYWordPress automatically searches for appropriate theme template file
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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.)
  11. 11. 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.
  12. 12. 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
  13. 13. 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

×