SlideShare une entreprise Scribd logo
1  sur  26
Télécharger pour lire hors ligne
WordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 Workshop
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
WordPress Themes 101 - PSUWeb13 Workshop
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()
WordPress Themes 101 - PSUWeb13 Workshop
THE WORDPRESS TEMPLATE HIERARCHY
WordPress automatically searches for appropriate theme template file
WordPress Themes 101 - PSUWeb13 Workshop
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
WordPress Themes 101 - PSUWeb13 Workshop
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.
WordPress Themes 101 - PSUWeb13 Workshop
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
WordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 Workshop
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

Contenu connexe

Tendances

Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreSuzanne Dergacheva
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
 
Creating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - WebinarCreating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - WebinarSuzanne Dergacheva
 
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech DayCreating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech DaySuzanne Dergacheva
 
Drupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First StepsDrupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First StepsLuís Carneiro
 
How to get your theme in WordPress
How to get your theme in WordPressHow to get your theme in WordPress
How to get your theme in WordPressNisha Singh
 
10 Steps Not To Forget After Installing Drupal
10 Steps Not To Forget After Installing Drupal 10 Steps Not To Forget After Installing Drupal
10 Steps Not To Forget After Installing Drupal Cory Gilliam
 
YAG - Yet Another Gallery / T3CON11
YAG - Yet Another Gallery / T3CON11YAG - Yet Another Gallery / T3CON11
YAG - Yet Another Gallery / T3CON11Daniel Lienert
 
Turbo charged WordPress theme development - WordCamp Edinburgh 2012
Turbo charged WordPress theme development - WordCamp Edinburgh 2012Turbo charged WordPress theme development - WordCamp Edinburgh 2012
Turbo charged WordPress theme development - WordCamp Edinburgh 2012Jonny Allbut
 
YAG - Yet Another Gallery
YAG - Yet Another GalleryYAG - Yet Another Gallery
YAG - Yet Another GalleryDaniel Lienert
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technicalAlex Walker
 
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinCreating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinSuzanne Dergacheva
 
Crash Course in Theme Surgery
Crash Course in Theme SurgeryCrash Course in Theme Surgery
Crash Course in Theme SurgeryRational Frank
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgThemeHorse
 
Anatomy and Architecture of a WordPress Theme
Anatomy and Architecture of a WordPress ThemeAnatomy and Architecture of a WordPress Theme
Anatomy and Architecture of a WordPress ThemeJulie Kuehl
 
Wordpress beyond blogging
Wordpress beyond bloggingWordpress beyond blogging
Wordpress beyond bloggingJulien Minguely
 
Things I Wish I Had Known Before Developing a WordPress Theme
Things I Wish I Had Known Before Developing a WordPress ThemeThings I Wish I Had Known Before Developing a WordPress Theme
Things I Wish I Had Known Before Developing a WordPress ThemeKonstantin Kovshenin
 
WordPress Template hierarchy
WordPress Template hierarchyWordPress Template hierarchy
WordPress Template hierarchyJason Yingling
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 

Tendances (20)

Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
Creating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - WebinarCreating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - Webinar
 
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech DayCreating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
 
Drupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First StepsDrupal Camp Porto - Developing with Drupal: First Steps
Drupal Camp Porto - Developing with Drupal: First Steps
 
How to get your theme in WordPress
How to get your theme in WordPressHow to get your theme in WordPress
How to get your theme in WordPress
 
10 Steps Not To Forget After Installing Drupal
10 Steps Not To Forget After Installing Drupal 10 Steps Not To Forget After Installing Drupal
10 Steps Not To Forget After Installing Drupal
 
YAG - Yet Another Gallery / T3CON11
YAG - Yet Another Gallery / T3CON11YAG - Yet Another Gallery / T3CON11
YAG - Yet Another Gallery / T3CON11
 
Turbo charged WordPress theme development - WordCamp Edinburgh 2012
Turbo charged WordPress theme development - WordCamp Edinburgh 2012Turbo charged WordPress theme development - WordCamp Edinburgh 2012
Turbo charged WordPress theme development - WordCamp Edinburgh 2012
 
YAG - Yet Another Gallery
YAG - Yet Another GalleryYAG - Yet Another Gallery
YAG - Yet Another Gallery
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
 
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinCreating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
 
A Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 MinutesA Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 Minutes
 
Crash Course in Theme Surgery
Crash Course in Theme SurgeryCrash Course in Theme Surgery
Crash Course in Theme Surgery
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
 
Anatomy and Architecture of a WordPress Theme
Anatomy and Architecture of a WordPress ThemeAnatomy and Architecture of a WordPress Theme
Anatomy and Architecture of a WordPress Theme
 
Wordpress beyond blogging
Wordpress beyond bloggingWordpress beyond blogging
Wordpress beyond blogging
 
Things I Wish I Had Known Before Developing a WordPress Theme
Things I Wish I Had Known Before Developing a WordPress ThemeThings I Wish I Had Known Before Developing a WordPress Theme
Things I Wish I Had Known Before Developing a WordPress Theme
 
WordPress Template hierarchy
WordPress Template hierarchyWordPress Template hierarchy
WordPress Template hierarchy
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 

En vedette

Sanntidsdata i ArcGIS - Esri norsk BK 2014
Sanntidsdata i ArcGIS -  Esri norsk BK 2014Sanntidsdata i ArcGIS -  Esri norsk BK 2014
Sanntidsdata i ArcGIS - Esri norsk BK 2014Geodata AS
 
Третій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівель
Третій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівельТретій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівель
Третій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівельZakupki.Prom.ua
 
เล่ม 2 สมการเคมี
เล่ม 2 สมการเคมีเล่ม 2 สมการเคมี
เล่ม 2 สมการเคมีPreeyapat Lengrabam
 
Sociala Medier i Statens Tjänst Informationsföreningen 20100121
Sociala Medier i Statens Tjänst Informationsföreningen 20100121Sociala Medier i Statens Tjänst Informationsföreningen 20100121
Sociala Medier i Statens Tjänst Informationsföreningen 20100121Jacob Lapidus
 
Mercado Inmobiliario de Barcelona T1 & T2 2013
Mercado Inmobiliario de Barcelona T1 & T2 2013Mercado Inmobiliario de Barcelona T1 & T2 2013
Mercado Inmobiliario de Barcelona T1 & T2 2013Lucas Fox
 
รายงานประจำปี คณะศึกษาศาสตร์ Draft#1
รายงานประจำปี คณะศึกษาศาสตร์ Draft#1รายงานประจำปี คณะศึกษาศาสตร์ Draft#1
รายงานประจำปี คณะศึกษาศาสตร์ Draft#1jompon rattana
 
Презентація "Надихаю дихати"
Презентація "Надихаю дихати"Презентація "Надихаю дихати"
Презентація "Надихаю дихати"Andrii Bas
 
Наглядный индекс развития сетевых технологий
Наглядный индекс развития сетевых технологийНаглядный индекс развития сетевых технологий
Наглядный индекс развития сетевых технологийCisco Russia
 
The Lean Investor: Lots of Little Bets (Boston, Dec 2014)
The Lean Investor: Lots of Little Bets (Boston, Dec 2014)The Lean Investor: Lots of Little Bets (Boston, Dec 2014)
The Lean Investor: Lots of Little Bets (Boston, Dec 2014)Dave McClure
 
Welcome to Ahmadiyyat, The True Islam
Welcome to Ahmadiyyat,  The True Islam Welcome to Ahmadiyyat,  The True Islam
Welcome to Ahmadiyyat, The True Islam muzaffertahir9
 

En vedette (20)

E-Waste
E-WasteE-Waste
E-Waste
 
Boost
BoostBoost
Boost
 
Sanntidsdata i ArcGIS - Esri norsk BK 2014
Sanntidsdata i ArcGIS -  Esri norsk BK 2014Sanntidsdata i ArcGIS -  Esri norsk BK 2014
Sanntidsdata i ArcGIS - Esri norsk BK 2014
 
Третій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівель
Третій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівельТретій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівель
Третій Zakupki Forum - Практичні кейси юридичного супроводу публічних закупівель
 
เล่ม 2 สมการเคมี
เล่ม 2 สมการเคมีเล่ม 2 สมการเคมี
เล่ม 2 สมการเคมี
 
Taseer e aza
Taseer e azaTaseer e aza
Taseer e aza
 
AYMANALSUHET CV2017
AYMANALSUHET CV2017AYMANALSUHET CV2017
AYMANALSUHET CV2017
 
ayman3
ayman3ayman3
ayman3
 
Nota VLE
Nota VLENota VLE
Nota VLE
 
Hypersensitivity
HypersensitivityHypersensitivity
Hypersensitivity
 
Sociala Medier i Statens Tjänst Informationsföreningen 20100121
Sociala Medier i Statens Tjänst Informationsföreningen 20100121Sociala Medier i Statens Tjänst Informationsföreningen 20100121
Sociala Medier i Statens Tjänst Informationsföreningen 20100121
 
Storyboards
StoryboardsStoryboards
Storyboards
 
Mercado Inmobiliario de Barcelona T1 & T2 2013
Mercado Inmobiliario de Barcelona T1 & T2 2013Mercado Inmobiliario de Barcelona T1 & T2 2013
Mercado Inmobiliario de Barcelona T1 & T2 2013
 
รายงานประจำปี คณะศึกษาศาสตร์ Draft#1
รายงานประจำปี คณะศึกษาศาสตร์ Draft#1รายงานประจำปี คณะศึกษาศาสตร์ Draft#1
รายงานประจำปี คณะศึกษาศาสตร์ Draft#1
 
Презентація "Надихаю дихати"
Презентація "Надихаю дихати"Презентація "Надихаю дихати"
Презентація "Надихаю дихати"
 
Наглядный индекс развития сетевых технологий
Наглядный индекс развития сетевых технологийНаглядный индекс развития сетевых технологий
Наглядный индекс развития сетевых технологий
 
MDChronic
MDChronicMDChronic
MDChronic
 
The Lean Investor: Lots of Little Bets (Boston, Dec 2014)
The Lean Investor: Lots of Little Bets (Boston, Dec 2014)The Lean Investor: Lots of Little Bets (Boston, Dec 2014)
The Lean Investor: Lots of Little Bets (Boston, Dec 2014)
 
Welcome to Ahmadiyyat, The True Islam
Welcome to Ahmadiyyat,  The True Islam Welcome to Ahmadiyyat,  The True Islam
Welcome to Ahmadiyyat, The True Islam
 
ITB FNBE Overall exercise
ITB FNBE Overall exerciseITB FNBE Overall exercise
ITB FNBE Overall exercise
 

Similaire à WordPress Themes 101 - PSUWeb13 Workshop

The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017Amanda Giles
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme EnlightenmentAmanda Giles
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme developmentNaeem Junejo
 
Theming in WordPress - Where do I Start?
Theming in WordPress - Where do I Start?Theming in WordPress - Where do I Start?
Theming in WordPress - Where do I Start?Edmund Turbin
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme developmentThad Allender
 
What's New in WordPress 3.0 (for developers)
What's New in WordPress 3.0 (for developers)What's New in WordPress 3.0 (for developers)
What's New in WordPress 3.0 (for developers)Stephanie Leary
 
Basic word press development
Basic word press developmentBasic word press development
Basic word press developmentDavid Wolfpaw
 
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Kelly Dwan
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Acquia
 
WCLV - Introduction to child themes
WCLV - Introduction to child themesWCLV - Introduction to child themes
WCLV - Introduction to child themesvegasgeek
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Eugenio Minardi
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesopenchamp
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWPJoburg
 
The WordPress University
The WordPress UniversityThe WordPress University
The WordPress UniversityStephanie Leary
 
Adopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayAdopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayMarek Sotak
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxPlasterdog Web Design
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPressMatthew Vaccaro
 

Similaire à WordPress Themes 101 - PSUWeb13 Workshop (20)

The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme development
 
Theming in WordPress - Where do I Start?
Theming in WordPress - Where do I Start?Theming in WordPress - Where do I Start?
Theming in WordPress - Where do I Start?
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme development
 
What's New in WordPress 3.0 (for developers)
What's New in WordPress 3.0 (for developers)What's New in WordPress 3.0 (for developers)
What's New in WordPress 3.0 (for developers)
 
Basic word press development
Basic word press developmentBasic word press development
Basic word press development
 
Design todevelop
Design todevelopDesign todevelop
Design todevelop
 
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
 
WCLV - Introduction to child themes
WCLV - Introduction to child themesWCLV - Introduction to child themes
WCLV - Introduction to child themes
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
 
The WordPress University
The WordPress UniversityThe WordPress University
The WordPress University
 
Adopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayAdopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal way
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptx
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 

Plus de Curtiss Grymala

Writing a WordPress Plugin: #heweb12
Writing a WordPress Plugin: #heweb12Writing a WordPress Plugin: #heweb12
Writing a WordPress Plugin: #heweb12Curtiss Grymala
 
10 Minute WordPress Shortcode
10 Minute WordPress Shortcode10 Minute WordPress Shortcode
10 Minute WordPress ShortcodeCurtiss Grymala
 
Writing a WordPress Plugin
Writing a WordPress PluginWriting a WordPress Plugin
Writing a WordPress PluginCurtiss Grymala
 
WordPress Coding Standards
WordPress Coding StandardsWordPress Coding Standards
WordPress Coding StandardsCurtiss Grymala
 

Plus de Curtiss Grymala (8)

WordPress as a CMS
WordPress as a CMSWordPress as a CMS
WordPress as a CMS
 
WordPress in HigherEd
WordPress in HigherEdWordPress in HigherEd
WordPress in HigherEd
 
Umw WordPress Primer
Umw WordPress PrimerUmw WordPress Primer
Umw WordPress Primer
 
Writing a WordPress Plugin: #heweb12
Writing a WordPress Plugin: #heweb12Writing a WordPress Plugin: #heweb12
Writing a WordPress Plugin: #heweb12
 
10 Minute WordPress Shortcode
10 Minute WordPress Shortcode10 Minute WordPress Shortcode
10 Minute WordPress Shortcode
 
Writing a WordPress Plugin
Writing a WordPress PluginWriting a WordPress Plugin
Writing a WordPress Plugin
 
WordPress Coding Standards
WordPress Coding StandardsWordPress Coding Standards
WordPress Coding Standards
 
WordPress Multi-Network
WordPress Multi-NetworkWordPress Multi-Network
WordPress Multi-Network
 

Dernier

A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptxmary850239
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashasashalaycock03
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlDr. Bruce A. Johnson
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxCapitolTechU
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxraviapr7
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSyedNadeemGillANi
 

Dernier (20)

A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sasha
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting Bl
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Over the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptxOver the counter (OTC)- Sale, rational use.pptx
Over the counter (OTC)- Sale, rational use.pptx
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
 

WordPress Themes 101 - PSUWeb13 Workshop

  • 4. 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
  • 5. 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
  • 7. 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
  • 8. 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
  • 9. 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()
  • 11. THE WORDPRESS TEMPLATE HIERARCHY WordPress automatically searches for appropriate theme template file
  • 13. 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
  • 14. 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
  • 15. 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
  • 17. 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.)
  • 18. 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.
  • 20. 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
  • 23. STEP 1: DESIGN • Identify goals • Wireframe and design • Layout priorities • Final template design • Initial HTML layout
  • 24. STEP 2: DIVIDE AND CONQUER • Identify layout elements • Identify content elements • Identify visual decoration • Determine common elements • Identify alternative layouts
  • 25. 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
  • 26. 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