SlideShare una empresa de Scribd logo
1 de 33
KEEPYOUR CODE
ORGANIZED!
Templates, functions.php and custom plugins
http://jeremyclarke.org • @jeremyclarke
Download these slides:
http://slideshare.net/jeremyclarke
Creative Commons Share Alike
http://creativecommons.org/licenses/by-sa/3.0/
WHO IS JEREMY CLARKE?
• Communications Studies at Concordia
University.
• HTML+CSS since 2003
• Montreal WordPress Organizer
• Code & Design for GlobalVoices
GUIDING PRINCIPLES
• DRY: Don’t repeat yourself.
• Build APIs and use them.
• Code for the general case, use configuration for the specifics.
• Assume every feature will be disabled some day.
OUTLINE
• Themes and template hierarchy
• Functions.php is for theme programming
• Custom plugins are for site programming
• Build APIs for yourself
• Other vital practices
WHAT’S ATHEME?
• A directory full of files.
• Style.css (metadata+style) and editor-
style.css (forTinyMCE style)
• Templates for site sections and
template parts for components.
• functions.php for complex or site wide
code.
TEMPLATE HIERARCHY
• index.php is default for all screens.
• If a more specific template exists (search.php) it is used.
• Very specific templates are possible to micro-manage
sections.
• Using fewer templates is a virtue.
TEMPLATE HIERARCHY
Full hypertext hierarchy: http://wphierarchy.com
TEMPLATE DUPLICATION
• archive.php > category.php + tag.php + date.php
• category.php > category-2.php + category-3.php
• Template specificity duplicates HTML/PHP and adds
work and bugs later if you change things. (DRY!)
• Avoid specific templates whenever possible.
• Use conditionals ( is_*) or display functions to manage
the differences instead.
USING CONDITIONALS
• Specific templates contain much redundant HTML:
author.php category.php
• is_*() conditionals remove the need for duplication!
archive.php
http://codex.wordpress.org/Conditional_Tags
FUNCTIONS.PHP
• Intended to store functions used in the theme.
• Can contain any plugin code (PHP) you want loaded
along with the theme.
• De-activated along with its theme.
• Updated and changes lost when theme is updated.
• Child themes allow a second functions.php outside
main one.
FUNCTIONS.PHP USES
• PHP functions that encapsulate HTML re-used in
multiple templates (DRY!)
• Use of core or plugin APIs to activate features the
theme depends on (featured images, taxonomies).
• Hooks to alter core or plugin output to suit the theme
(excerpt length, unregister plugin widget).
• Custom configuration for this particular site (esp. child
theme functions.php).
PARENT AND CHILDTHEMES
• Child theme needs only a style.css file. Can include()
parent CSS so that only overrides are needed.
• Other templates imported from parent unless present
in child theme.
• Child theme’s functions.php loaded before and in
addition to parent’s functions.php.
• Updating parent won’t break changes in child theme
files.
http://codex.wordpress.org/Child_Themes
CUSTOM PLUGINS
• I.e. site-specific rather than
generally-useful plugins.
• Only need one file with
special header format.
• Persist regardless of active
theme.
• Can be disabled without
switching theme. Example custom plugin that filters the
excerpt length
CUSTOM PLUGIN USES
• Features needed by the site, regardless of active
theme (widgets, shortcodes, CPT)
• Features you might want to disable while keeping the
same theme.
• Any complex feature that would overwhelm
functions.php
• functions.php code if you use a 3rd party theme and
can’t use a child theme.
“MU-PLUGINS”:WTF
• “mu” is backronym for “must-use”.
• Any plugin in /wp-content/mu-plugins/ will always be
loaded and can’t be disabled by users.
• mu-plugin files are loaded before any other plugins.
• Plugins cannot be inside a folder. Most plugins do not
function well as mu-plugins.
• Use for server-scope configuration or fixes needed for
all themes & plugins.
• Also to modify other plugins by running code first.
LEARNTHE WORDPRESS API
• Actions/filters already exist throughout WordPress.
• “hook” in to run your code at a specific time (actions) or alter
output of internal functions (filters).
• Constants (WP_SITEURL) also used as a simple API for key
configuration, works in wp-config.php
• Learn the patterns used by WP and replicate them in your
code.
http://codex.wordpress.org/Plugin_API
WRITEYOUR OWN API
• Code theme features outside your templates with sensible
default behavior (on/off by default).
• Use action/filter hooks or constants to enable and configure
the feature in functions.php
• Faster to code because no user interface is needed.
• Allows configuration to be stored as code in version control,
rather than database.
• Makes your plugins and themes much more re-usable.
CONSTANT-BASED API
Add check for constant in your theme/plugin code
Define the constant in wp-config.php or functions.php
to alter the default behavior.
FILTER-BASED API
Plugin determines default value, but filters it so theme
can override if necessary.
In functions.php filter the value for the needs of this
particular site.
ACTION-BASED API
Add action hooks to key positions in your templates
or plugin output.
Use functions.php (child theme) or plugin to output
site-specific content in that location.
QUESTIONSTO ASKYOURSELF
• Where could this code or feature be stored?
• Which places are out of my control (3rd party themes
+plugins)
• What if I want to change themes?
• What if I want to disable the feature?
• Will the configuration be stored in database or version
control?
OTHER BEST PRACTICES
USEVERSION CONTROL (GIT)
• Version control is not optional.
• At minimum track your plugins and themes.
http://git-scm.com/book
OBJECT ORIENTATION
• Learn to write “OO”/object-oriented PHP if you aren’t
already.
• Encapsulate features as objects.
• Use wrapper functions that can be used in
functions.php to activate object-based features for a
theme.
DOCUMENTYOUR CODE
• Every function needs a
PHPDoc definition, non-
obvious PHP logic should
have inline comments.
• Writing comments forces you
to organize.
• Use an IDE (like NetBeans)
that exposes documentation
for text prediction.
http://codex.wordpress.org/
Inline_Documentation
CSS PREPROCESSORS
• Sass gives CSS the programmability of PHP with
equivalents of variables and functions.
• Gives access to libraries of useful CSS like Compass,
Foundation and others.
• Very powerful but adds steps and complexity to your dev
process.
http://sass-lang.com/
See also: My DRY CSS philosophy for organizing normal CSS:
http://simianuprising.com/2012/03/07/video-of-my-dry-css-talk/
WIDGETIZE EVERYTHING
• Never hard-code content in a theme.
• All promo text or non-permanent features should be in
widget areas (sidebars).
• Allows users to alter content without editing theme.
• Add widget areas all over site in case you need
something there.
• Register custom widgets to display complex content
rather than using template tags.
http://codex.wordpress.org/Widgets_API
USE SHORTCODES
• Avoid custom page templates by using shortcodes
instead.
• Easy to code especially as wrappers for existing
display functions.
http://codex.wordpress.org/Shortcode_API
WP_PARSE_ARGS()
• Allows one function argument to contain infinite values/
overrides.
• Used throughout WP core to great effect.
http://codex.wordpress.org/Function_Reference/wp_parse_args
BEFORE / AFTER / ECHO
• Another useful pattern from WP core. Make it part of all
display functions.
• ‘before’ and ‘after’ allow wrapper HTML that is hidden if there
is no output.
• ‘echo’ allows output to be returned instead of printed to
screen (vital for shortcodes).
USE ALLTHE APIS
• Settings API: Quickly build standard WP option screens.
Complicated but worthwhile.
• Theme Customization API:Allow users to quickly
preview setting changes to your theme.
• Custom Metadata Manager (plugin): Register post
editor metaboxes with a few lines of code.
http://codex.wordpress.org/Settings_API
https://codex.wordpress.org/Theme_Customization_API
http://wordpress.org/plugins/custom-metadata/
POP QUIZ:
WHERE DOES IT GO?
• Sidebar registration
• Widget registration
• Shortcode registration
• Custom post type registration
• Image slider gallery PHP/JS
• Featured image size registration
KEEPYOUR CODE
ORGANIZED!
Templates, functions.php and custom plugins
http://jeremyclarke.org • @jeremyclarke
Download these slides:
http://slideshare.net/jeremyclarke
Creative Commons Share Alike
http://creativecommons.org/licenses/by-sa/3.0/

Más contenido relacionado

La actualidad más candente

Submitting to the WordPress Theme Directory
Submitting to the WordPress Theme DirectorySubmitting to the WordPress Theme Directory
Submitting to the WordPress Theme DirectoryAnthony Hortin
 
Rapid application development for WordPress using AWF
Rapid application development for WordPress using AWFRapid application development for WordPress using AWF
Rapid application development for WordPress using AWFTim Plummer
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structurekeithdevon
 
Add-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his DutyAdd-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his Dutyreedmaniac
 
AEM Asset and Tag API
AEM Asset and Tag APIAEM Asset and Tag API
AEM Asset and Tag APILokesh BS
 
State of play for Joomla - Nov 2014
State of play for Joomla - Nov 2014State of play for Joomla - Nov 2014
State of play for Joomla - Nov 2014Tim Plummer
 
WordPress - fixing sites with problems
WordPress - fixing sites with problemsWordPress - fixing sites with problems
WordPress - fixing sites with problemsVictoria Pickering
 
11 Live Node.js CMS Frameworks
11 Live Node.js CMS Frameworks11 Live Node.js CMS Frameworks
11 Live Node.js CMS FrameworksiScripts
 
Search Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginnersSearch Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginnersUp2 Technology
 
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsWordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsJoe Querin
 
O365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin Timmermann
O365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin TimmermannO365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin Timmermann
O365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin TimmermannNCCOMMS
 
Drupal Site Building for Developers
Drupal Site Building for DevelopersDrupal Site Building for Developers
Drupal Site Building for DevelopersIan Carnaghan
 
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Viktor Vogel
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
Introduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformIntroduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformAlfresco Software
 

La actualidad más candente (18)

Submitting to the WordPress Theme Directory
Submitting to the WordPress Theme DirectorySubmitting to the WordPress Theme Directory
Submitting to the WordPress Theme Directory
 
Rapid application development for WordPress using AWF
Rapid application development for WordPress using AWFRapid application development for WordPress using AWF
Rapid application development for WordPress using AWF
 
WordPress plugins
WordPress pluginsWordPress plugins
WordPress plugins
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
Add-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his DutyAdd-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his Duty
 
AEM Asset and Tag API
AEM Asset and Tag APIAEM Asset and Tag API
AEM Asset and Tag API
 
State of play for Joomla - Nov 2014
State of play for Joomla - Nov 2014State of play for Joomla - Nov 2014
State of play for Joomla - Nov 2014
 
WordPress - fixing sites with problems
WordPress - fixing sites with problemsWordPress - fixing sites with problems
WordPress - fixing sites with problems
 
11 Live Node.js CMS Frameworks
11 Live Node.js CMS Frameworks11 Live Node.js CMS Frameworks
11 Live Node.js CMS Frameworks
 
Search Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginnersSearch Engine Optimization - The eye-opening presentation for beginners
Search Engine Optimization - The eye-opening presentation for beginners
 
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsWordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
 
O365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin Timmermann
O365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin TimmermannO365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin Timmermann
O365Con18 - Using ARM Templates to Deploy Solutions on Azure - Kevin Timmermann
 
Drupal Site Building for Developers
Drupal Site Building for DevelopersDrupal Site Building for Developers
Drupal Site Building for Developers
 
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Introduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformIntroduction to Alfresco Surf Platform
Introduction to Alfresco Surf Platform
 
Welcome to the World of WordPress
Welcome to the World of WordPressWelcome to the World of WordPress
Welcome to the World of WordPress
 
Joomla! theming
Joomla! themingJoomla! theming
Joomla! theming
 

Similar a Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides

WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Pluginssuperann
 
The WordPress University
The WordPress UniversityThe WordPress University
The WordPress UniversityStephanie Leary
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme developmentNaeem Junejo
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 BoilerplateMichael Enslow
 
Add-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his DutyAdd-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his DutyLeslie Doherty
 
Wordpress beyond blogging
Wordpress beyond bloggingWordpress beyond blogging
Wordpress beyond bloggingJulien Minguely
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesAlfresco Software
 
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfOrtus Solutions, Corp
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012Joe Querin
 
Best Practices for Building WordPress Applications
Best Practices for Building WordPress ApplicationsBest Practices for Building WordPress Applications
Best Practices for Building WordPress ApplicationsTaylor Lovett
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPressMatthew Vaccaro
 
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
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Mack Hardy
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016David Brattoli
 
BP-7 Share Customization Best Practices
BP-7 Share Customization Best PracticesBP-7 Share Customization Best Practices
BP-7 Share Customization Best PracticesAlfresco Software
 
Pluggable patterns
Pluggable patternsPluggable patterns
Pluggable patternsCorey Oordt
 

Similar a Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides (20)

Miami2015
Miami2015Miami2015
Miami2015
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
The WordPress University
The WordPress UniversityThe WordPress University
The WordPress University
 
presentation
presentationpresentation
presentation
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme development
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Add-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his DutyAdd-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his Duty
 
presentation
presentationpresentation
presentation
 
Wordpress beyond blogging
Wordpress beyond bloggingWordpress beyond blogging
Wordpress beyond blogging
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best Practices
 
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdfITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
ITB_2023_Extend_your_contentbox_apps_with_custom_modules_Javier_Quintero.pdf
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Best Practices for Building WordPress Applications
Best Practices for Building WordPress ApplicationsBest Practices for Building WordPress Applications
Best Practices for Building WordPress Applications
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
Wordpress overview
Wordpress overviewWordpress overview
Wordpress overview
 
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
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
BP-7 Share Customization Best Practices
BP-7 Share Customization Best PracticesBP-7 Share Customization Best Practices
BP-7 Share Customization Best Practices
 
Pluggable patterns
Pluggable patternsPluggable patterns
Pluggable patterns
 

Más de Jer Clarke

globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...Jer Clarke
 
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupJer Clarke
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSJer Clarke
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealGlobal Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealJer Clarke
 
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Jer Clarke
 
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009Jer Clarke
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPressJer Clarke
 
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09Jer Clarke
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic PresentationJer Clarke
 
Global Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveGlobal Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveJer Clarke
 

Más de Jer Clarke (11)

globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...
 
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealGlobal Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
 
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
 
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPress
 
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic Presentation
 
Global Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveGlobal Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and Love
 

Último

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 

Último (20)

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 

Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides

  • 1. KEEPYOUR CODE ORGANIZED! Templates, functions.php and custom plugins http://jeremyclarke.org • @jeremyclarke Download these slides: http://slideshare.net/jeremyclarke Creative Commons Share Alike http://creativecommons.org/licenses/by-sa/3.0/
  • 2. WHO IS JEREMY CLARKE? • Communications Studies at Concordia University. • HTML+CSS since 2003 • Montreal WordPress Organizer • Code & Design for GlobalVoices
  • 3. GUIDING PRINCIPLES • DRY: Don’t repeat yourself. • Build APIs and use them. • Code for the general case, use configuration for the specifics. • Assume every feature will be disabled some day.
  • 4. OUTLINE • Themes and template hierarchy • Functions.php is for theme programming • Custom plugins are for site programming • Build APIs for yourself • Other vital practices
  • 5. WHAT’S ATHEME? • A directory full of files. • Style.css (metadata+style) and editor- style.css (forTinyMCE style) • Templates for site sections and template parts for components. • functions.php for complex or site wide code.
  • 6. TEMPLATE HIERARCHY • index.php is default for all screens. • If a more specific template exists (search.php) it is used. • Very specific templates are possible to micro-manage sections. • Using fewer templates is a virtue.
  • 7. TEMPLATE HIERARCHY Full hypertext hierarchy: http://wphierarchy.com
  • 8. TEMPLATE DUPLICATION • archive.php > category.php + tag.php + date.php • category.php > category-2.php + category-3.php • Template specificity duplicates HTML/PHP and adds work and bugs later if you change things. (DRY!) • Avoid specific templates whenever possible. • Use conditionals ( is_*) or display functions to manage the differences instead.
  • 9. USING CONDITIONALS • Specific templates contain much redundant HTML: author.php category.php • is_*() conditionals remove the need for duplication! archive.php http://codex.wordpress.org/Conditional_Tags
  • 10. FUNCTIONS.PHP • Intended to store functions used in the theme. • Can contain any plugin code (PHP) you want loaded along with the theme. • De-activated along with its theme. • Updated and changes lost when theme is updated. • Child themes allow a second functions.php outside main one.
  • 11. FUNCTIONS.PHP USES • PHP functions that encapsulate HTML re-used in multiple templates (DRY!) • Use of core or plugin APIs to activate features the theme depends on (featured images, taxonomies). • Hooks to alter core or plugin output to suit the theme (excerpt length, unregister plugin widget). • Custom configuration for this particular site (esp. child theme functions.php).
  • 12. PARENT AND CHILDTHEMES • Child theme needs only a style.css file. Can include() parent CSS so that only overrides are needed. • Other templates imported from parent unless present in child theme. • Child theme’s functions.php loaded before and in addition to parent’s functions.php. • Updating parent won’t break changes in child theme files. http://codex.wordpress.org/Child_Themes
  • 13. CUSTOM PLUGINS • I.e. site-specific rather than generally-useful plugins. • Only need one file with special header format. • Persist regardless of active theme. • Can be disabled without switching theme. Example custom plugin that filters the excerpt length
  • 14. CUSTOM PLUGIN USES • Features needed by the site, regardless of active theme (widgets, shortcodes, CPT) • Features you might want to disable while keeping the same theme. • Any complex feature that would overwhelm functions.php • functions.php code if you use a 3rd party theme and can’t use a child theme.
  • 15. “MU-PLUGINS”:WTF • “mu” is backronym for “must-use”. • Any plugin in /wp-content/mu-plugins/ will always be loaded and can’t be disabled by users. • mu-plugin files are loaded before any other plugins. • Plugins cannot be inside a folder. Most plugins do not function well as mu-plugins. • Use for server-scope configuration or fixes needed for all themes & plugins. • Also to modify other plugins by running code first.
  • 16. LEARNTHE WORDPRESS API • Actions/filters already exist throughout WordPress. • “hook” in to run your code at a specific time (actions) or alter output of internal functions (filters). • Constants (WP_SITEURL) also used as a simple API for key configuration, works in wp-config.php • Learn the patterns used by WP and replicate them in your code. http://codex.wordpress.org/Plugin_API
  • 17. WRITEYOUR OWN API • Code theme features outside your templates with sensible default behavior (on/off by default). • Use action/filter hooks or constants to enable and configure the feature in functions.php • Faster to code because no user interface is needed. • Allows configuration to be stored as code in version control, rather than database. • Makes your plugins and themes much more re-usable.
  • 18. CONSTANT-BASED API Add check for constant in your theme/plugin code Define the constant in wp-config.php or functions.php to alter the default behavior.
  • 19. FILTER-BASED API Plugin determines default value, but filters it so theme can override if necessary. In functions.php filter the value for the needs of this particular site.
  • 20. ACTION-BASED API Add action hooks to key positions in your templates or plugin output. Use functions.php (child theme) or plugin to output site-specific content in that location.
  • 21. QUESTIONSTO ASKYOURSELF • Where could this code or feature be stored? • Which places are out of my control (3rd party themes +plugins) • What if I want to change themes? • What if I want to disable the feature? • Will the configuration be stored in database or version control?
  • 23. USEVERSION CONTROL (GIT) • Version control is not optional. • At minimum track your plugins and themes. http://git-scm.com/book
  • 24. OBJECT ORIENTATION • Learn to write “OO”/object-oriented PHP if you aren’t already. • Encapsulate features as objects. • Use wrapper functions that can be used in functions.php to activate object-based features for a theme.
  • 25. DOCUMENTYOUR CODE • Every function needs a PHPDoc definition, non- obvious PHP logic should have inline comments. • Writing comments forces you to organize. • Use an IDE (like NetBeans) that exposes documentation for text prediction. http://codex.wordpress.org/ Inline_Documentation
  • 26. CSS PREPROCESSORS • Sass gives CSS the programmability of PHP with equivalents of variables and functions. • Gives access to libraries of useful CSS like Compass, Foundation and others. • Very powerful but adds steps and complexity to your dev process. http://sass-lang.com/ See also: My DRY CSS philosophy for organizing normal CSS: http://simianuprising.com/2012/03/07/video-of-my-dry-css-talk/
  • 27. WIDGETIZE EVERYTHING • Never hard-code content in a theme. • All promo text or non-permanent features should be in widget areas (sidebars). • Allows users to alter content without editing theme. • Add widget areas all over site in case you need something there. • Register custom widgets to display complex content rather than using template tags. http://codex.wordpress.org/Widgets_API
  • 28. USE SHORTCODES • Avoid custom page templates by using shortcodes instead. • Easy to code especially as wrappers for existing display functions. http://codex.wordpress.org/Shortcode_API
  • 29. WP_PARSE_ARGS() • Allows one function argument to contain infinite values/ overrides. • Used throughout WP core to great effect. http://codex.wordpress.org/Function_Reference/wp_parse_args
  • 30. BEFORE / AFTER / ECHO • Another useful pattern from WP core. Make it part of all display functions. • ‘before’ and ‘after’ allow wrapper HTML that is hidden if there is no output. • ‘echo’ allows output to be returned instead of printed to screen (vital for shortcodes).
  • 31. USE ALLTHE APIS • Settings API: Quickly build standard WP option screens. Complicated but worthwhile. • Theme Customization API:Allow users to quickly preview setting changes to your theme. • Custom Metadata Manager (plugin): Register post editor metaboxes with a few lines of code. http://codex.wordpress.org/Settings_API https://codex.wordpress.org/Theme_Customization_API http://wordpress.org/plugins/custom-metadata/
  • 32. POP QUIZ: WHERE DOES IT GO? • Sidebar registration • Widget registration • Shortcode registration • Custom post type registration • Image slider gallery PHP/JS • Featured image size registration
  • 33. KEEPYOUR CODE ORGANIZED! Templates, functions.php and custom plugins http://jeremyclarke.org • @jeremyclarke Download these slides: http://slideshare.net/jeremyclarke Creative Commons Share Alike http://creativecommons.org/licenses/by-sa/3.0/