WordPress Themes 101 - PSUWeb13 Workshop

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

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

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

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

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

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

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

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

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

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

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.

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

STEP 1: DESIGN
• Identify goals
• Wireframe and design
• Layout priorities
• Final template design
• Initial HTML layout

STEP 2: DIVIDE AND CONQUER
• Identify layout elements
• Identify content elements
• Identify visual decoration
• Determine common elements
• Identify alternative layouts

STEP 3: DEVELOP
• Begin developing basic layout
• Separate layout elements from
content elements
• Replace content elements with
placeholders
• Create layout structure and style
• Develop content containers
(body, widgets, footer, header, et
c.)
• Develop custom functionality

QUESTIONS? COMMENTS?
Twitter: @cgrymala
Website(s): http://umw.edu/ (Multi-Network Setup)
http://ten-321.com/
http://svn.ten-321.com/ (SVN Repo)
http://wphighed.org/ (WP resources for Higher Ed)
Email: cgrymala@umw.edu
curtiss@ten-321.com
SpeakerRate: http://spkr8.com/s/10608
http://about.me/cgrymala

WordPress Themes 101 - PSUWeb13 Workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to WordPress Themes 101 - PSUWeb13 Workshop

Similar to WordPress Themes 101 - PSUWeb13 Workshop (20)

More from Curtiss Grymala

More from Curtiss Grymala (8)

Recently uploaded

Recently uploaded (20)

WordPress Themes 101 - PSUWeb13 Workshop