Hoe zit WordPress in elkaar, eenvoudige uitkeg van de basis van de WordPress architectuur tot en met hooks (actions, filters), parent- en child themes, CSS en plugins.

1. WordPress: ‘onder de motorkap’
door Peter Luit

2. Voor wie bedoeld
• gewone gebruikers van WordPress websites, die
• het admin gedeelte globaal kennen om pagina’s en artikelen te maken
• media elementen kunnen plaatsen bij een pagina of artikel
• kunnen omgaan met categorieën en tags binnen berichten
• weten wat plugins aan functies kunnen toevoegen
• weten wat een thema is
• globaal de menustructuur kennen

3. WordPress
Deel 1: de basis
door Peter Luit

4. Website - pagina’s
bestemd voor ‘statische’ informatie
- naast elkaar
pagina’s

5. Weblog - artikelen (posts, blogs)
bestemd voor ‘dynamische’ informatie
- onder elkaar
nieuwste
tijdlijn artikelen
oudste

6. WordPress - artikelen/pagina’s
WordPress kent beide typen content
nieuwste
tijdlijn artikelen
pagina’s
oudste

7. WordPress - menustructuur (vanaf 3.0)
1 2 3 - externe links
2a
2b
- artikelen
- pagina’s
- categoriën(*)
nieuwste - tags(*)
tijdlijn artikelen
pagina’s
oudste
* categoriën en tags alleen van toepassingen op artikelen

8. WordPress - sidebars, extra gebieden
1 2 3
* mogelijkheden
2a afhankelijk per thema
2b
*
nieuwste *
tijdlijn artikelen
pagina’s
* *
* *
oudste
*

9. WordPress - widgets
1 2 3
2a
2b
nieuwste
tijdlijn artikelen
pagina’s
oudste
- widgets zijn afzonderlijke stukjes in sidebars
- een widget kan de resultaten weergeven van bijvoorbeeld een plugin

10. WordPress - header/footer
1 2 3
2a
2b
nieuwste
tijdlijn artikelen
pagina’s
oudste
header en footer grootte/positie

11. WordPress - plug-ins
1 2 3
toegevoegde functies, bijvoorbeeld 2a
contactformulier, social media icons, 2b
teller aantal keren gelezen artikel
nieuwste
tijdlijn artikelen
pagina’s
plugin
plugin plugin
plugin
plugin
oudste
WP core

12. WordPress - themes
1 2 3
2a
theme 2b
nieuwste
tijdlijn artikelen
pagina’s
plugin
plugin plugin
plugin
plugin
oudste
WP core
- themes zijn bepalend voor de gehele user interface
- gratis en betaalde versies
- extreem grote verschillen in functionaliteit

13. WordPress
Deel 2: architectuur
door Peter Luit

14. WordPress - Architectuur
‘vast’ content metadata
pagina’s
titel commentaren(*)
body
media
‘tijdlijn’ content metadata
tijdlijn (blogs)
titel categorie tags commentaren(*)
body
media
* optioneel

15. WordPress - Menu
menu item
leeg (#)
URL
pagina(‘s)
post(s)
categorie(ën)
tag(s)

16. WordPress - Themes kiezen
heel eenvoudig basis geavanceerd
- geen of zeer beperkte - instellingen mogelijk - heel veel instellingen
instellingen mogelijk - variabele indeling mogelijk, vaak export
- vaste indeling - heel vaak gratis - vaak betaald
- beperkte sidebars - eigen CSS editeren binnen - geschikt voor
- doorgaans gratis theme mogelijk maken van child themes
- exporteren instellingen soms - kennis CSS wenselijk
mogelijk

17. WordPress - Themes kiezen (paar voorbeelden)
• Gratis: Twenty Eleven (standaard WordPress theme, relatief eenvoudig, maar
prima voor een eerste start)
• Gratis: Atahualpa (chaotische HTML code, maar wel uitgebreid, export
settings)
• Gratis: Suffusion (keurig theme, ‘blokjes’ gericht, moderne technieken)
• Betaald: PlatformPro (custom post types in de vormgeving, geschikt voor
child themes, CSS)
• Betaald: BizzFolio (zakelijke vormgeving, ook interne CSS mogelijkheden)
• Betaald: Genesis (echt bedoeld als ‘ontwikkeltool’ voor child themes)

18. WordPress - Frameworks
• In veel gevallen een verwarrende term voor:
• Een al dan niet uitgebreid parent theme, waarmee child themes gemaakt
kunnen worden, vaak zeer gestructureerde documentatie
• Genesis, Hybrid, Thematic etc.
• Maar ook Atahualpa zegt een framework te zijn.....
• Een aparte ontwikkel omgeving voor het maken van parent themes
(is dus zelf niet een theme!)
• Hybrid Core
• Artisteer

19. WordPress - parent- en childthemes
1 2 3
childtheme
2a
2b
nieuwste
parenttheme
tijdlijn artikelen
pagina’s
plugin plugin plugin plugin
plugin
oudste
WP core
- child themes gebruiken instellingen vanuit parent
- update van parent voorkomt overschrijven instellingen in child

20. WordPress - parent- en childthemes
vormgeving(*) functionaliteit
childtheme aanvullende CSS aanvullende PHP
‘haalt basis op uit parent’ bijvoorbeeld:
@import url("../theme/ - functions.php
style.css"); - header.php
- footer.php
css kennis nodig etc.
php kennis nodig
parenttheme basis CSS basis PHP
* zie voor CSS deel 7

21. WordPress - parent- en childthemes
• Child themes: maak ze niet te complex
• Het doel: Child themes bevatten eigen ‘settings’, die bouwen op de basis
van het parent theme
• Het Parent theme kan dan onafhankelijk van het Child theme worden ge-
update bij de komst van nieuwe versies
• Het Child theme kan dan zonder wijzigingen blijven bestaan
• Te complexe Child themes zouden ‘moeilijkheden’ kunnen gaan
ondervinden bij updates van hun Parent theme

22. WordPress
Deel 3: hooks(*)
door Peter Luit
* zie tevens hoofdstuk 6: plugins

23. WordPress - hooks (actions en filters)
1 2 3
2a
childtheme 2b
nieuwste
parenttheme
hooks
tijdlijn artikelen
pagina’s
plugins
WP core
oudste
- before en after zijn de primaire
eigenschappen van de lokatie of
gebeurtenis waar/wanneer een
hook (ingehaakte functie) uitgevoerd
wordt

24. WordPress - hooks, de basis
add_action waar naam nieuwe functie
function name {
wat je wilt doen
}
waar
voor/na header
voor/na siderbar(s) #
- per thema verschillend
- php kennis nodig voor/na pagina #
- plaats in functions.php in child theme
voor/na footer

25. WordPress - hooks, voorbeeld
add_action('suffusion_before_begin_content', 'my_custom_before_page');
function my_custom_before_page() {
if(is_page( 'mijn-home' )) {
slidedeck( 146, array( 'width' => '100%', 'height' => '225px' ) );
}
}
- suffusion_before_begin_content is een lokatie definitie in het theme Suffusion
- my_custom_before_page is de naam de te definiëren functie
- function is het begin van de nieuw te maken functie
- de functie zet een slidedeck slideshow (is een plugin) alleen op de pagina ‘mijn-home’
- slidedeck( 146, array( 'width' => '100%', 'height' => '225px' ) ); is het format waarin slidedeck
gegevens moeten worden ingevoerd
- te plaatsen in functions.php in child theme

26. WordPress
Deel 4: custom post types
door Peter Luit

27. WordPress - custom post types, voorbeeld
voorbeeld binnen het theme PlatformPro:
3 naast elkaar staande boxes op bijvoorbeeld de homepage

28. WordPress - custom post types, op luit.nl
features
boxes
carousel

29. WordPress - custom post types, de soorten
WP standaard voorbeelden
posts events
pages boekenlijst
vakantiebestemmingen
- moderne themes bouwen specifieke custom post types in (bijv. PlatformPro)
- er zijn diverse plug-ins om custom post types interactief te kunnen maken

30. WordPress - custom post types, de techniek
uitvoeren na opstarten wordpress
add_action ‘init’ naam
function name {
labels WP functies(*), inclusief de displaynaam
weergave wat gaat de gebruiker zien in Admin?
registreer vaststellen van de functie
}
- plaats in functions.php in child theme
* zoals ‘add’, ‘edit’, ‘search’, ‘view’ ......

31. WordPress - custom post types, de weergave
single.php basis om content weer te geven
maak een copy
bijv. single-event.php plaats in child theme
zoek naar:
<h1 class="entry-title"><?php the_title(); ?></h1>
verander in bijvoorbeeld:
<h1 class="entry-title">Event: <?php the_title(); ?></h1>

32. WordPress
Deel 5: multisites en permalinks
door Peter Luit

33. WordPress - multisites netwerk
één website via subdirectories via subdomeinen
http://www.naam.nl http://www.naam.nl
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl http://www.naam.nl
http://subsite1.naam.nl
subsite1
- eigen look&feel
- eigen menu
- eigen content

34. WordPress - multisites netwerk, instellingen
wp-config.php aanpassen
.htaccess aanmaken/aanpassen
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1
httpd config aanpassen (server afhankelijk)
permalinks aanpassen
wp-content/blogs.dir aanmaken

35. WordPress - multisites netwerk, instellingen
wp-config.php aanpassen
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1
define('WP_ALLOW_MULTISITE', true); -- plaats dit net voor /* That's all, stop editing! Happy blogging. */:
opnieuw inloggen, daarna de volgende regels onder de bovenstaande regel:
define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'www.naam.nl' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );
en dan .htaccess aanmaken of aanpassen

36. WordPress - multisites netwerk, instellingen
.htaccess
aanpassen, tevens
permalinks aanpassen
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
# uploaded files
RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]
# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^[_0-9a-zA-Z-]+/(.*.php)$ $1 [L]
RewriteRule . index.php [L]
opnieuw inloggen

37. WordPress - multisites netwerk, serversettings
httpd config
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1
onderstaande instellingen verschillen per server, zowel de lokatie als de naam
maar meestal zijn het de zogenaamde httpd config files in de server map
<Directory "/Library/WebServer/Documents/naamhoofddomein">
AllowOverride All
<IfModule mod_dav.c>
DAV Off
</IfModule>
Options All -Includes -ExecCGI +MultiViews -Indexes
</Directory>
webserver opnieuw starten

38. WordPress - multisites netwerk, permalinks
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1

39. WordPress - multisites netwerk, serversettings
wp-content
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1
maak directory ‘blogs-dir’ in wp-content aan met chmod beschrijfbaar (755)

40. WordPress
Deel 6: plugins
door Peter Luit

41. WordPress - plugins, de basis
actions filters
zijn de functies die op een
zijn de buffers die content
bepaald moment worden
‘bewaren’ totdat het naar de
uitgevoerd, aan de hand van
database of de browser wordt
een bepaalde gebeurtenis of
gestuurd
handeling
add_action ( 'publish_post', 'email_friends' ); add_filter ( 'hook_name', 'your_filter', [priority], [accepted_args] );
hook
into
core
- de basis van WordPress vele tientallen actions en filters,
waarmee plugins gebouwd kunnen worden, hooks zorgen
ervoor dat ze ‘ingehaakt worden in de core van WordPress
http://adambrown.info/p/wp_hooks/version/3.1

42. WordPress - plugins, de opzet
wordpress home
wp-content
plugins
mainfile.php
(css)
header van de basis van de plugin (voorbeeld) (js)
(php)
<?php
/*
Plugin Name: Platform - Nav Colors
Plugin URI: http://www.pagelines.com/
Description: An example plugin showing how easy it is to extend the
PageLines settings.
Version: 0.1
Author: PageLines
Author URI: http://www.pagelines.com
*/

43. WordPress - plugins, de kennis
- WordPress structuur (opzet van de kern, actions, filters, hooks)
- HTML (algemene basiskennis)
- PHP (scripttaal voor koppeling tussen databasetaken en HTML)
- SQL (maken van, schrijven en lezen uit tabellen)
- CSS (algemene vormgeving)
- JavaScript (clientzijde interactieve/animatie achtige functies)

44. WordPress
Deel 7: CSS, de basis
door Peter Luit

45. WordPress - CSS, de basis
1 2 3
childtheme
2a
2b
nieuwste
parenttheme
tijdlijn artikelen
pagina’s
plugin plugin plugin plugin
plugin
oudste
WP core
- child themes gebruiken instellingen vanuit parent
- update van parent voorkomt overschrijven instellingen in child

46. WordPress - CSS, de basis
- soms biedt parent theme de
parenttheme mogelijkheid CSS instellingen in een
‘eigen’ editor screen toe te passen
childtheme - child neemt basis over uit parent
CSS - zelf editeren in ‘style.css’ in childtheme
typografie - type, stijl, grootte, kleur, plaats
plaats van elementen - margin, padding etc.
muisacties - hover, visited etc.

47. WordPress - CSS, theorie
Basis in childtheme:
/*
Theme Name: Luit
Description: Child Theme gebaseerd op Suffusion, bewerkt door Peter Luit
Theme URI: http://www.naam.nl
Description: Child theme for the Suffussion theme
Author: Peter Luit
Author URI: http://www.luit.nl
Template: suffusion
Tags: buddypress
Version: 1.0
*/
@import url("../suffusion/style.css");
@import url("../suffusion/skins/light-theme-orange/skin.css");

48. WordPress - CSS, theorie
CSS HTML resultaat
body { margin-right geldt voor alles 15 pixels naar
margin-right: 15px;
na de HTML <body> tag rechts
}
.karakter { geldt alleen bij: weergave
font-weight: bold; <DIV class=‘karakter’>
} weergave
</DIV>
#extra { geldt alleen bij:
background-color: #FF0000; <DIV class=‘karakter’ ID=‘extra’> weergave
} weergave
</DIV>