FRAMEWORKS, PARENTS & CHILDREN
• Parent Theme
• A base theme that sets up functionality
• Can be extended
• Must be writte...
EXAMPLES
Hybrid Core is a framework. - http://themehybrid.com/hybrid-core
• No theme structure
• Full package goes inside ...
REQUIRED FILES
CSS Stylesheet (style.css)*
• Implements the CSS for the theme
• Not included by default
• enqueue it in fu...
TYPICAL THEME FILES
Theme Functions (functions.php)
• Central location for function, variable, constant defintions used in...
MOAR THEME FILES
Automatic Template Files (page.php, 404.php, single.php)
• Used automatically based on type of page being...
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() ...
OTHER “LOOP” FUNCTIONS
Inside the loop, various functions are available
• the_title() – echoes the title of the current po...
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 ag...
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...
STEP 3: DEVELOP
• Begin developing basic layout
• Separate layout elements from
content elements
• Replace content element...
LET’S DO THIS THING
Examine Theme Design – http://2013.highedweb.org/
Identify Theme Elements
Create required files
style....
QUESTIONS? COMMENTS?
Twitter: @cgrymala
Website(s): http://umw.edu/ (Multi-Network Setup)
http://ten-321.com/
http://svn.t...
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Upcoming SlideShare
Loading in …5
×

Writing a WordPress Theme - HighEdWeb 2013 #WRK2

7,287 views

Published on

A basic introduction to creating a new WordPress theme

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,287
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Writing a WordPress Theme - HighEdWeb 2013 #WRK2

  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 functionality http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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()
  6. 6. THE WORDPRESS TEMPLATE HIERARCHY WordPress 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 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
  8. 8. 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
  9. 9. 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
  10. 10. STEP 1: DESIGN • Identify goals • Wireframe and design • Layout priorities • Final template design • Initial HTML layout
  11. 11. STEP 2: DIVIDE AND CONQUER • Identify layout elements • Identify content elements • Identify visual decoration • Determine common elements • Identify alternative layouts
  12. 12. 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, etc.) • Develop custom functionality
  13. 13. LET’S DO THIS THING Examine Theme Design – http://2013.highedweb.org/ Identify Theme Elements Create required files style.css - http://j.mp/153SWWv index.php – wp_head() & wp_footer() - http://j.mp/153Tagt functions.php (not required, but recommended)
  14. 14. 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

×