wordpress themes 101 - highedweb new england 2013
DESCRIPTION
A brief primer on the WordPress theme systemTRANSCRIPT
![Page 1: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/1.jpg)
#ne18
WORDPR
ESS THEMES 1
01
SO
ME
SI M
PL
E S
TA
RT
ER
TI P
S F
OR
WO
RD
PR
ES
S T
HE
ME
S
![Page 2: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/2.jpg)
#ne18
DIFFERENT
TYPE
S OF
THEMES
F RA
ME
WO
RK
S,
P AR
EN
TS
AN
D C
HI L
D T
HE
ME
S
![Page 3: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/3.jpg)
#ne18
#ne18
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
![Page 4: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/4.jpg)
#ne18
#ne18
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
![Page 5: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/5.jpg)
#ne18
START
ING A
THEME
BA
SI C
EL E
ME
NT
S O
F AL L T
HE
ME
S
![Page 6: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/6.jpg)
#ne18
#ne18
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
![Page 7: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/7.jpg)
#ne18
#ne18
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
![Page 8: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/8.jpg)
#ne18
#ne18
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()
![Page 9: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/9.jpg)
#ne18
TEMPL
ATE H
IERARCHY
HO
W W
OR
DP
RE
SS
DE
CI D
ES
WH
AT
FI L
E T
O U
SE
![Page 10: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/10.jpg)
#ne18
#ne18
THE WORDPRESS TEMPLATE HIERARCHY
WordPress automatically searches for appropriate theme template file
![Page 11: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/11.jpg)
#ne18
THE LO
OP
TH
E M
AI N
CO
NT
EN
T A
RE
A O
F YO
UR
TH
EM
E
![Page 12: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/12.jpg)
#ne18
#ne18
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
![Page 13: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/13.jpg)
#ne18
#ne18
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
![Page 14: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/14.jpg)
#ne18
#ne18
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 hereendwhile; 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
![Page 15: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/15.jpg)
#ne18
ON ONE C
ONDITIO
N
US
I NG
CO
ND
I TI O
NA
L FU
NC
TI O
NS
IN
YO
UR
TH
EM
E
![Page 16: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/16.jpg)
#ne18
#ne18
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.)
![Page 17: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/17.jpg)
#ne18
#ne18
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.
![Page 18: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/18.jpg)
#ne18
PUTT
ING T
HINGS
TOGETH
ER
US
I NG
TH
I S K
NO
WL E
DG
E T
O B
UI L
D A
TH
EM
E
![Page 19: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/19.jpg)
#ne18
#ne18
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
![Page 20: WordPress Themes 101 - HighEdWeb New England 2013](https://reader036.vdocument.in/reader036/viewer/2022082808/555ab371d8b42a405b8b4f4a/html5/thumbnails/20.jpg)
#ne18
#ne18
QUESTIONS? COMMENTS?
Twitter: @cgrymala
Website(s): http://umw.edu/ (Multi-Network Setup)
http://ten-321.com/
http://svn.ten-321.com/ (SVN Repo)
Email: [email protected]
SpeakerRate: http://spkr8.com/s/10608
http://about.me/cgrymala