SlideShare a Scribd company logo
1 of 17
Download to read offline
The Seven Deadly
 Theming Sins
    George Stephanis
       @daljo628
George Who?

• Core Contributor
       (Recent Rockstar for 3.4)

• Code Monkey (yes, my actual title)
    at (*) Speck Products

• Zero talent for design
Bundling Plugins

• Upgrading is Important!
 •     Security fixes,

 •     new features,

 •     playing nice with new versions of WP


• Not Breaking Things is awesome!
  PHP Fatal error: Call to undefined function plugin_foo() in plugin.php on line 123
  PHP Fatal error: Cannot redeclare plugin_foo() (previously declared in plugin.php:123) in plugin.php on line 123
Bundling Plugins
• If you must ...
• // in functions.php:
  if( ! function_exists( 'plugin_foo' ) ) {
      require( TEMPLATEPATH . 'inc/plugin.php' );
      // or STYLESHEETPATH -- more on this later!
  }


• Advantage:
  Doesn’t break if they install
  the plugin traditionally
Bundling Plugins
• A Be er Way:
• TGM Plugin Activation
  h p://tgmpluginactivation.com/
  h p://github.com/thomasgriffin/TGM-Plugin-Activation
Bundling Plugins
• Ideal (graceful degradation):
•   if( function_exists( 'plugin_foo' ) ) {
        // Use the plugin only if it exists
        plugin_foo();
    } else {
        // and provide a fallback if it doesn’t!
        $page_title = wp_title();
    }


• Advantage:
    Gives the user the prerogative
    whether to use the plugin or not.
timthumb.php
• Serving images via PHP is a waste of
  server resources (even if cached)

• TimThumb is another potential
  a ack vector, especially old versions.

• Old TimThumbs can still be exploited
  even if the theme is inactive.
timthumb.php
•   add_theme_support( 'post-thumbnails' );
    // add_image_size( $name, $width, $height, $crop = false );
    add_image_size( 'homepage-thumb', 220, 180 );
    add_image_size( 'homepage-thumb-cropped', 220, 180, true );


•   if( has_post_thumbnail() ) {
        the_post_thumbnail( 'homepage-thumb' );
    }
    // Or, with $id being the attachment_id ...
    echo wp_get_attachment_image( $id, 'homepage-thumb' );


•   Then, regenerate the resized versions of all your existing images:
    h p://wordpress.org/extend/plugins/regenerate-thumbnails/
    h p://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/
    h p://wordpress.org/extend/plugins/simple-image-sizes/
Ignore Child Themes
• What is a child theme?
    A child theme is a convenient way of changing a
    theme without modifying its code directly.

•   This maintains upgradeability (don’t. hack. core.)

•   How does it work?

• IMPORTANT: Only include what you
    need to override!
Ignore Child Themes
•   /* in child theme styles.css --
    Theme Name:     Code Monkey
    Theme URI:      http://stephanis.info
    Description:    Code Monkey child theme for Twentytwelve
    Author:         George Stephanis
    Author URI:     http://stephanis.info
    Template:       twentytwelve
    Version:        3.5.0
    */
    add.your {styles:here;}


•   // in child theme functions.php --
    add_action( 'wp_enqueue_scripts', 'codemonkey_scripts_styles' );
    function codemonkey_scripts_styles(){
    	       // Snag the parent theme's CSS and shove it in
    	       wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );	
    	       // Enqueue the fonts we want
    	       wp_enqueue_style( 'Oswald-font', get_stylesheet_directory_uri() . '/fonts/Oswald.css' );
    }
Hardcode CSS/JS
•   The right way to add CSS and JS files to
    your pages is to enqueue them through WP!

•   Why?

•   This allows you greater freedom to turn
    them on and off as needed.

•   It also gives child themes the power to
    override parent theme styles, add new
    styles, and shi things around.
Hardcode CSS/JS

•   Scumbag Steve does:
    <link   rel="stylesheet"        href="http://example.com/wp-content/themes/twentytwelve/style.css" />
    <link   rel="stylesheet"        href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link   rel="stylesheet"        href="<?php echo get_stylesheet_uri(); ?>" />
    <link   rel="stylesheet"        href="<?php bloginfo( 'template_directory' ); ?>/style.css" />

•   <link rel='stylesheet' id='mytheme-style' href='http://example.com/wp-content/themes/twentytwelve/style.css?ver=3.5' 	type='text/css'
    media='all' />
    <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
    <script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/js/scripts.js?ver=3.5'></script>
    <script type='text/javascript' src='https://platform.twitter.com/widgets.js?ver=3.5'></script>
    // in functions.php:
    add_action( 'wp_enqueue_scripts', 'mytheme_stylesheets' );
    function mytheme_stylesheets() {
    	        wp_register_style( 'mytheme-style', get_stylesheet_uri() );
    	        wp_enqueue_style( 'mytheme-style' );
    	        wp_register_script( 'jquery-cycle', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ) );
    	        wp_enqueue_script( 'jquery-cycle' );
    	        wp_enqueue_script( 'twitter-widgets', 'https://platform.twitter.com/widgets.js' );
    }
CDN-Hosted JS
•   Using a CDN to serve your JS is dangerous, as you are then locked
    into that version of the library.

•   Newer versions of WordPress upgrade versions of jQuery, etc.

•   Many plugins (GravityForms, etc) will assume you’re using a newer
    version of the library, and may use newer methods that will break
    if you manually deregister a script and re-register an older version.

•   Internal versions of jQuery are neutered [jQuery.noConflict();] so
    as to not conflict with Prototype. Cloud Hosted versions do not
    offer such accomodations.

•   If you must use cloud-hosted versions, outsource the grunt work:
    h p://wordpress.org/extend/plugins/use-google-libraries/
i18n
•   Like it or not, people will want to use your
    work in a language other than your own.

•   Nearly half of the web is non-English.

•   Increase the audience that can use your
    theme dramatically.

•   Besides -- it’s EASY!
i18n
•   <label for="search">Search</label>
    <label for="search"><?php _e('Search') ?></label>

•   $response = 'I am a string.';
    $response = __('I am a string.');

•   <p>We deleted <?php echo $count; ?> emails!</p>
    <p><?php _e("We deleted $count emails!"); ?></p>
    <p><?php _e('We deleted '.$count.' emails!'); ?></p>
    <p><?php echo __('We deleted ').$count.__(' emails!'); ?></p>
    <p><?php printf( __('We deleted %d emails!'), $count ); ?></p>
    <p><?php printf( _n( 'We deleted %d email!', 'We deleted %d emails!', $count ), $count ); ?></p>



•   // In functions.php:
    load_theme_textdomain('mytheme');
Comic Sans


•   Just. Say. No.
• Also, Papyrus
What have we learned?
•   Don’t think only about what you need to do
    NOW, think about what others could want
    to do with your code LATER!

•   Future Proof!

•   Digital Durability!

•   Klaatu Berata Nicto!

•   Questions?

More Related Content

What's hot

Creating Customizable Widgets for Unpredictable Needs
Creating Customizable Widgets for Unpredictable NeedsCreating Customizable Widgets for Unpredictable Needs
Creating Customizable Widgets for Unpredictable NeedsAmanda Giles
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme EnlightenmentAmanda Giles
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structurekeithdevon
 
Shortcodes vs Widgets: Which one and how?
Shortcodes vs Widgets: Which one and how?Shortcodes vs Widgets: Which one and how?
Shortcodes vs Widgets: Which one and how?Amanda Giles
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1Yoav Farhi
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesrfair404
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress ThemesLaura Hartwig
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme developmentThad Allender
 
How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseDavid Yeiser
 
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...cehwitham
 
Wordpress Beyond Websites
Wordpress Beyond WebsitesWordpress Beyond Websites
Wordpress Beyond WebsitesScott Saunders
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentSitdhibong Laokok
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
How does get template part works in twenty ten theme
How does get template part works in twenty ten themeHow does get template part works in twenty ten theme
How does get template part works in twenty ten thememohd rozani abd ghani
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikMario Peshev
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkPtah Dunbar
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1Robert Nyman
 

What's hot (20)

Creating Customizable Widgets for Unpredictable Needs
Creating Customizable Widgets for Unpredictable NeedsCreating Customizable Widgets for Unpredictable Needs
Creating Customizable Widgets for Unpredictable Needs
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
Shortcodes vs Widgets: Which one and how?
Shortcodes vs Widgets: Which one and how?Shortcodes vs Widgets: Which one and how?
Shortcodes vs Widgets: Which one and how?
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme development
 
How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public Release
 
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
 
Wordpress Beyond Websites
Wordpress Beyond WebsitesWordpress Beyond Websites
Wordpress Beyond Websites
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
How does get template part works in twenty ten theme
How does get template part works in twenty ten themeHow does get template part works in twenty ten theme
How does get template part works in twenty ten theme
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
 
@wcmtl
@wcmtl@wcmtl
@wcmtl
 
What is (not) WordPress
What is (not) WordPressWhat is (not) WordPress
What is (not) WordPress
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 

Viewers also liked

Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressdrywallbmb
 
Laying the proper foundation for plugin and theme development
Laying the proper foundation for plugin and theme developmentLaying the proper foundation for plugin and theme development
Laying the proper foundation for plugin and theme developmentTammy Hart
 
Improving Your Website's Usability for Happier Visitors & Stickier User Exper...
Improving Your Website's Usability for Happier Visitors & Stickier User Exper...Improving Your Website's Usability for Happier Visitors & Stickier User Exper...
Improving Your Website's Usability for Happier Visitors & Stickier User Exper...Adam Dunford
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSara Cannon
 

Viewers also liked (7)

Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPress
 
Laying the proper foundation for plugin and theme development
Laying the proper foundation for plugin and theme developmentLaying the proper foundation for plugin and theme development
Laying the proper foundation for plugin and theme development
 
Improving Your Website's Usability for Happier Visitors & Stickier User Exper...
Improving Your Website's Usability for Happier Visitors & Stickier User Exper...Improving Your Website's Usability for Happier Visitors & Stickier User Exper...
Improving Your Website's Usability for Happier Visitors & Stickier User Exper...
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
WCLV13 JavaScript
WCLV13 JavaScriptWCLV13 JavaScript
WCLV13 JavaScript
 
Oenology
OenologyOenology
Oenology
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
 

Similar to Seven deadly theming sins

The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017Amanda Giles
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress WebsitesKyle Cearley
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress themeHardeep Asrani
 
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14slobodanmanic
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4David Bisset
 
WordPress development paradigms, idiosyncrasies and other big words
WordPress development paradigms, idiosyncrasies and other big wordsWordPress development paradigms, idiosyncrasies and other big words
WordPress development paradigms, idiosyncrasies and other big wordsTomAuger
 
Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)
Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)
Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)Mike Schinkel
 
[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress DevelopmentAdam Tomat
 
WordPress Plugins and Security
WordPress Plugins and SecurityWordPress Plugins and Security
WordPress Plugins and SecurityThink Media Inc.
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Filippo Dino
 
Various Ways of Using WordPress
Various Ways of Using WordPressVarious Ways of Using WordPress
Various Ways of Using WordPressNick La
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerSteven Pignataro
 
Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Maurizio Pelizzone
 
Now That's What I Call WordPress Security 2010
Now That's What I Call WordPress Security 2010Now That's What I Call WordPress Security 2010
Now That's What I Call WordPress Security 2010Brad Williams
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityMichelle Davies (Hryvnak)
 
WordPress Customization and Security
WordPress Customization and SecurityWordPress Customization and Security
WordPress Customization and SecurityJoe Casabona
 
Getting started with WordPress development
Getting started with WordPress developmentGetting started with WordPress development
Getting started with WordPress developmentSteve Mortiboy
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3David Bisset
 

Similar to Seven deadly theming sins (20)

The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017The Way to Theme Enlightenment 2017
The Way to Theme Enlightenment 2017
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
 
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14WordPress Theme and Plugin Optimization - WordPress Arvika March '14
WordPress Theme and Plugin Optimization - WordPress Arvika March '14
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4WordPress Theme Workshop: Part 4
WordPress Theme Workshop: Part 4
 
WordPress development paradigms, idiosyncrasies and other big words
WordPress development paradigms, idiosyncrasies and other big wordsWordPress development paradigms, idiosyncrasies and other big words
WordPress development paradigms, idiosyncrasies and other big words
 
Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)
Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)
Hardcore URL Routing for WordPress - WordCamp Atlanta 2014 (PPT)
 
[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development
 
WordPress Plugins and Security
WordPress Plugins and SecurityWordPress Plugins and Security
WordPress Plugins and Security
 
Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998Wordless, stop writing WordPress themes like it's 1998
Wordless, stop writing WordPress themes like it's 1998
 
Various Ways of Using WordPress
Various Ways of Using WordPressVarious Ways of Using WordPress
Various Ways of Using WordPress
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
 
Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
 
Now That's What I Call WordPress Security 2010
Now That's What I Call WordPress Security 2010Now That's What I Call WordPress Security 2010
Now That's What I Call WordPress Security 2010
 
NEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & SecurityNEPA BlogCon 2013 - WordPress Customization & Security
NEPA BlogCon 2013 - WordPress Customization & Security
 
WordPress Customization and Security
WordPress Customization and SecurityWordPress Customization and Security
WordPress Customization and Security
 
Getting started with WordPress development
Getting started with WordPress developmentGetting started with WordPress development
Getting started with WordPress development
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
 

Recently uploaded

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
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
 
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
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
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
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
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
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 

Recently uploaded (20)

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
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
 
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
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
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
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
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
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
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
 

Seven deadly theming sins

  • 1. The Seven Deadly Theming Sins George Stephanis @daljo628
  • 2. George Who? • Core Contributor (Recent Rockstar for 3.4) • Code Monkey (yes, my actual title) at (*) Speck Products • Zero talent for design
  • 3. Bundling Plugins • Upgrading is Important! • Security fixes, • new features, • playing nice with new versions of WP • Not Breaking Things is awesome! PHP Fatal error: Call to undefined function plugin_foo() in plugin.php on line 123 PHP Fatal error: Cannot redeclare plugin_foo() (previously declared in plugin.php:123) in plugin.php on line 123
  • 4. Bundling Plugins • If you must ... • // in functions.php: if( ! function_exists( 'plugin_foo' ) ) { require( TEMPLATEPATH . 'inc/plugin.php' ); // or STYLESHEETPATH -- more on this later! } • Advantage: Doesn’t break if they install the plugin traditionally
  • 5. Bundling Plugins • A Be er Way: • TGM Plugin Activation h p://tgmpluginactivation.com/ h p://github.com/thomasgriffin/TGM-Plugin-Activation
  • 6. Bundling Plugins • Ideal (graceful degradation): • if( function_exists( 'plugin_foo' ) ) { // Use the plugin only if it exists plugin_foo(); } else { // and provide a fallback if it doesn’t! $page_title = wp_title(); } • Advantage: Gives the user the prerogative whether to use the plugin or not.
  • 7. timthumb.php • Serving images via PHP is a waste of server resources (even if cached) • TimThumb is another potential a ack vector, especially old versions. • Old TimThumbs can still be exploited even if the theme is inactive.
  • 8. timthumb.php • add_theme_support( 'post-thumbnails' ); // add_image_size( $name, $width, $height, $crop = false ); add_image_size( 'homepage-thumb', 220, 180 ); add_image_size( 'homepage-thumb-cropped', 220, 180, true ); • if( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-thumb' ); } // Or, with $id being the attachment_id ... echo wp_get_attachment_image( $id, 'homepage-thumb' ); • Then, regenerate the resized versions of all your existing images: h p://wordpress.org/extend/plugins/regenerate-thumbnails/ h p://wordpress.org/extend/plugins/ajax-thumbnail-rebuild/ h p://wordpress.org/extend/plugins/simple-image-sizes/
  • 9. Ignore Child Themes • What is a child theme? A child theme is a convenient way of changing a theme without modifying its code directly. • This maintains upgradeability (don’t. hack. core.) • How does it work? • IMPORTANT: Only include what you need to override!
  • 10. Ignore Child Themes • /* in child theme styles.css -- Theme Name: Code Monkey Theme URI: http://stephanis.info Description: Code Monkey child theme for Twentytwelve Author: George Stephanis Author URI: http://stephanis.info Template: twentytwelve Version: 3.5.0 */ add.your {styles:here;} • // in child theme functions.php -- add_action( 'wp_enqueue_scripts', 'codemonkey_scripts_styles' ); function codemonkey_scripts_styles(){ // Snag the parent theme's CSS and shove it in wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // Enqueue the fonts we want wp_enqueue_style( 'Oswald-font', get_stylesheet_directory_uri() . '/fonts/Oswald.css' ); }
  • 11. Hardcode CSS/JS • The right way to add CSS and JS files to your pages is to enqueue them through WP! • Why? • This allows you greater freedom to turn them on and off as needed. • It also gives child themes the power to override parent theme styles, add new styles, and shi things around.
  • 12. Hardcode CSS/JS • Scumbag Steve does: <link rel="stylesheet" href="http://example.com/wp-content/themes/twentytwelve/style.css" /> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" /> <link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/style.css" /> • <link rel='stylesheet' id='mytheme-style' href='http://example.com/wp-content/themes/twentytwelve/style.css?ver=3.5' type='text/css' media='all' /> <script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script> <script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/js/scripts.js?ver=3.5'></script> <script type='text/javascript' src='https://platform.twitter.com/widgets.js?ver=3.5'></script> // in functions.php: add_action( 'wp_enqueue_scripts', 'mytheme_stylesheets' ); function mytheme_stylesheets() { wp_register_style( 'mytheme-style', get_stylesheet_uri() ); wp_enqueue_style( 'mytheme-style' ); wp_register_script( 'jquery-cycle', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ) ); wp_enqueue_script( 'jquery-cycle' ); wp_enqueue_script( 'twitter-widgets', 'https://platform.twitter.com/widgets.js' ); }
  • 13. CDN-Hosted JS • Using a CDN to serve your JS is dangerous, as you are then locked into that version of the library. • Newer versions of WordPress upgrade versions of jQuery, etc. • Many plugins (GravityForms, etc) will assume you’re using a newer version of the library, and may use newer methods that will break if you manually deregister a script and re-register an older version. • Internal versions of jQuery are neutered [jQuery.noConflict();] so as to not conflict with Prototype. Cloud Hosted versions do not offer such accomodations. • If you must use cloud-hosted versions, outsource the grunt work: h p://wordpress.org/extend/plugins/use-google-libraries/
  • 14. i18n • Like it or not, people will want to use your work in a language other than your own. • Nearly half of the web is non-English. • Increase the audience that can use your theme dramatically. • Besides -- it’s EASY!
  • 15. i18n • <label for="search">Search</label> <label for="search"><?php _e('Search') ?></label> • $response = 'I am a string.'; $response = __('I am a string.'); • <p>We deleted <?php echo $count; ?> emails!</p> <p><?php _e("We deleted $count emails!"); ?></p> <p><?php _e('We deleted '.$count.' emails!'); ?></p> <p><?php echo __('We deleted ').$count.__(' emails!'); ?></p> <p><?php printf( __('We deleted %d emails!'), $count ); ?></p> <p><?php printf( _n( 'We deleted %d email!', 'We deleted %d emails!', $count ), $count ); ?></p> • // In functions.php: load_theme_textdomain('mytheme');
  • 16. Comic Sans • Just. Say. No. • Also, Papyrus
  • 17. What have we learned? • Don’t think only about what you need to do NOW, think about what others could want to do with your code LATER! • Future Proof! • Digital Durability! • Klaatu Berata Nicto! • Questions?