Presentatie WordPress Theme Frameworks WordCamp NL 2010

WordPress Theme Frameworks

WordCamp NL 2010Remkus de Vries | @DeFries

Remkus de Vries@DeFries

ForSite Media http://www.forsitemedia.nlWordPress Dimensie http://wpdimensie.nlModerator / Admin http://nl.wordpress.org

Waarom ontwerpen met Theme Frameworks?

Waarom ontwerpen met Theme Frameworks?

Matt Mullenweg:“Child themes are the only way you

should build your WordPress site on top of a framework”

Wat is een WordPress Theme Framework?

Vorm en functionaliteit zouden met betrekking tot

Webdesign gescheiden moeten zijn

Waarom?

Waarom een WordPress Theme Framework?

• WordPress ontwikkelt zich door– Veiligheid verbeterd– Functionaliteiten worden toegevoegd

• SEO verbeteringen door te voeren

• Stabiliteit van het design

Maar wat is een WordPress Theme Framework dan

eigenlijk?• Een Framework zorgt er voor dat je site

werkt– SEO– Layout opties– Plugins werken– Cross-browser werkende CSS (in basis)– Hooks en filters bieden ruimte voor extra

functionaliteiten– Best practice

• Child Theme zorgt voor design

Child Themes to the rescue!

Een Child Theme is een theme wat zorgt voor:•de kleuren•de indeling, de layout•lettertypes•extra functionaliteiten

Hoe maak ik een Child Theme

• Installeer je Theme Framework (activeren niet nodig)

• Maak een folder aan in /wp-content/themes/ met naam nieuwe theme

• Maak een style.css bestand aan in de map

• Eventueel ook een functions.php

Child Theme stylesheet

Dit heeft je style.css nodig om als Child Theme te werken:/*

Theme Name: WordPress DimensieTheme URL: http://wpdimensie.nlDescription: Theme for WordPress

Dimensie Author: Remkus de VriesAuthor URI: http://www.forsitemedia.nlVersion: 1.3Template: genesis

*/

van Genesis Framework

naar Genesis Child Theme

naar Genesis Child Theme

naar Genesis Child Theme

Of van Hybrid..

naar een Hybrid Child Theme

naar een Hybrid Child Theme

Of van Thematic…

naar een Thematic Child Theme

naar een Thematic Child Theme

WordPress Theme Frameworks

• Genesis van StudioPress– Brian Gardner, Nathan Rice–www.studiopress.com

• Hybrid van ThemeHybrid– Justin Tadlock–www.themehybrid.com

• Thematic– Ian Stewart, Chris Goßmann–www.themeshaper.com/thematic

Wat heb ik nodig om een Child Theme te maken?

• Functions.php die werkt met actions, hooks en filters

• CSS

Hooks, Actions & Filters

• Wat zijn Hooks?– voor gedefinieerde plekken vanuit je

Framework die je kunt benutten om acties aan te te voegen

• Wat zijn Actions?– dit kunnen in principe alle soorten functions

zijn die je in je Child Theme functions.php definieerd

• Wat zijn Filters– Framework gedefinieerde actions waarvan je

de output kunt manipuleren

Hooks

• genesis_beforeThis hook executes immediately after the opening tag in the document source.

• genesis_after_loopThis hook executes immediately after all loop blocks. Therefore, this hook falls outside the loop, and cannot execute functions that require loop template tags or variables.

• genesis_before_headerThis hook executes immediately before the header (outside the #header div).

Actions & Filters// Search Buttonadd_filter('genesis_search_button_text', 'custom_search_button_text');

function custom_search_button_text($text) {return esc_attr('Go');}

// Relocate the Breadcrumbs// Breadcrumbs after Headerremove_action('genesis_before_loop', 'genesis_do_breadcrumbs');add_action('genesis_before_content_sidebar_wrap', 'genesis_do_breadcrumbs');

//Changing the output on the Post Info to showing only the dateadd_filter('genesis_post_info', 'post_info_filter');function post_info_filter($post_info) {if (!is_page()) { $post_info = '[post_date] [post_edit]'; return $post_info;}}

CSS

• Per Framework afhankelijk1. Child Theme style.css statements

‘overschrijven’ statements uit de Frameworks

2. Child Theme style.css is volledig gedefinieert en heeft enkel aanpassingen nodig

– CSS specificity is je vriend

Resumerend

• Framework + Child Theme = veiliger• Code is cleaner en beter (goed voor SEO)• Plugin compatibility wordt beter me om

gegaan• Design is zo aangepast, code blijft

hetzelfde• Frameworks voegen nieuwe WordPress

functionaliteiten automatisch toe

do_action(‘answer_questions’, $questions);

Ofwel, vragen? roept u maar

Bedankt!

Presentatie komt beschikbaar op http://wordcampnl.org/2010 , de volledige uitleg op http://www.forsitemedia.nl/blog

Remkus de Vries@DeFries

ForSite Media http://www.forsitemedia.nlWordPress Dimensie http://wpdimensie.nlModerator / Admin http://nl.wordpress.org