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

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 

Último (20)

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 

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/