![Page 1: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/1.jpg)
WordPress Theme Frameworks
WordCamp NL 2010Remkus de Vries | @DeFries
![Page 2: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/2.jpg)
Remkus de Vries@DeFries
ForSite Media http://www.forsitemedia.nlWordPress Dimensie http://wpdimensie.nlModerator / Admin http://nl.wordpress.org
![Page 3: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/3.jpg)
Waarom ontwerpen met Theme Frameworks?
![Page 4: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/4.jpg)
Waarom ontwerpen met Theme Frameworks?
Matt Mullenweg:“Child themes are the only way you
should build your WordPress site on top of a framework”
![Page 5: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/5.jpg)
Wat is een WordPress Theme Framework?
Vorm en functionaliteit zouden met betrekking tot
Webdesign gescheiden moeten zijn
Waarom?
![Page 6: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/6.jpg)
Waarom een WordPress Theme Framework?
• WordPress ontwikkelt zich door– Veiligheid verbeterd– Functionaliteiten worden toegevoegd
• SEO verbeteringen door te voeren
• Stabiliteit van het design
![Page 7: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/7.jpg)
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
![Page 8: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/8.jpg)
Child Themes to the rescue!
Een Child Theme is een theme wat zorgt voor:•de kleuren•de indeling, de layout•lettertypes•extra functionaliteiten
![Page 9: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/9.jpg)
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
![Page 10: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/10.jpg)
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
*/
![Page 11: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/11.jpg)
van Genesis Framework
![Page 12: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/12.jpg)
naar Genesis Child Theme
![Page 13: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/13.jpg)
naar Genesis Child Theme
![Page 14: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/14.jpg)
naar Genesis Child Theme
![Page 15: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/15.jpg)
Of van Hybrid..
![Page 16: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/16.jpg)
naar een Hybrid Child Theme
![Page 17: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/17.jpg)
naar een Hybrid Child Theme
![Page 18: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/18.jpg)
Of van Thematic…
![Page 19: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/19.jpg)
naar een Thematic Child Theme
![Page 20: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/20.jpg)
naar een Thematic Child Theme
![Page 21: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/21.jpg)
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
![Page 22: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/22.jpg)
Wat heb ik nodig om een Child Theme te maken?
• Functions.php die werkt met actions, hooks en filters
• CSS
![Page 23: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/23.jpg)
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
![Page 24: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/24.jpg)
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).
![Page 25: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/25.jpg)
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;}}
![Page 26: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/26.jpg)
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
![Page 27: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/27.jpg)
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
![Page 28: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/28.jpg)
do_action(‘answer_questions’, $questions);
Ofwel, vragen? roept u maar
![Page 29: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/29.jpg)
Bedankt!
Presentatie komt beschikbaar op http://wordcampnl.org/2010 , de volledige uitleg op http://www.forsitemedia.nl/blog
![Page 30: Presentatie WordPress Theme Frameworks WordCamp NL 2010](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5483e36ab07959420c8b4a32/html5/thumbnails/30.jpg)
Remkus de Vries@DeFries
ForSite Media http://www.forsitemedia.nlWordPress Dimensie http://wpdimensie.nlModerator / Admin http://nl.wordpress.org