Under the hood contains a base of knowledge of some more advanced technologies of WordPress

1. WordPress: ‘under the hood’
by Peter Luit
@peterluit

2. Meant for.....
• WordPress users, who
• know the admin part and how to make pages en posts
• know how to place media elements in pages and postst
• know how to handle categories and tags
• know the concept of plug ins
• know the concept of themes
• know to use the menu system

3. WordPress
Part 1: the basics
by Peter Luit

4. Website - pages
meant for ‘static’ content
pages

5. Weblog - articles (posts, blogs)
meant for ‘dynamic’ content
newest
posts (timeline)
oldest

6. WordPress - posts/pages
WordPress knows both types of content
newest
posts (timeline)
pages
oldest

7. WordPress - menu structure (starting with 3.0)
1 2 3
- external links
2a - posts
2b - pages
- categories(*)
- tags(*)
newest
posts (timeline)
pages
oldest
* categories and tags only applicable for posts

8. WordPress - sidebars, extra areas
1 2 3
* depending on theme
2a possibilities
2b
*
newest *
posts (timeline)
pages
* *
* *
oldest
*

9. WordPress - widgets
1 2 3
2a
2b
newest
posts (timeline)
pages
oldest
- widgets are independent areas in the sidebars
- a widgets can display results of a plugin or contain static text

10. WordPress - header/footer
1 2 3
2a
2b
newest
posts (timeline)
pages
oldest
header en footer size/position

11. WordPress - plug-ins
1 2 3
added functions, for example 2a
contactform, social media icons, 2b
read article counter etc.
newest
posts (timeline)
plugin
pages
plugin plugin
plugin
plugin
oldest
WP core

12. WordPress - themes
1 2 3
2a
theme 2b
newest
posts (timeline)
plugin
pages
plugin plugin
plugin
plugin
oldest
WP core
- themes determine the totel user interface
- free and premium (mostly paid) versions
- very big differences in possibilities

13. WordPress
Part 2: architecture
by Peter Luit

14. WordPress - Architecture
‘fixed’ content metadata
pagina’s
title comments(*)
body
media
‘timeline’ content metadata
timeline (blogs)
title category tags comments(*)
body
media
* optional

15. WordPress - Menu
menu item
empty (#)
URL
page(s)
post(s)
categorie(s)
tag(s)

16. WordPress - Choosing a theme
very basic basic advanced
- no or very limited - adjustments possible - may adjustments and
adjustments - variable layout export of settings
- fixed layout - most often for free - in most cases paid
- limited sidebars - internal CSS editting themes
- mostly free possible - framwork for developing
- export of settings file child themes
- CSS/PHP knowledge
required

17. WordPress - Choosing a theme (examples)
• Free: Twenty Eleven (standard WordPress theme, sinple but fine for strating
projects)
• Free: Atahualpa (generates chaotic HTML code, but many possibilities)
• Free: Suffusion (modern ‘block’ oriented theme, many adjustments)
• Paid: PlatformPro (custom post types in design, suitable for child themes,
internal CSS settings possible)
• Paid: BizzFolio (business design, interbal CSS settings possible)
• Paid: Genesis (framework for developing advanced child themes)

18. WordPress - Frameworks
• In many cases a confusing name with two meanings
• A - possible very advanced - parent theme, from which child themes can
be made (mostly they supply very useful CSS documentation)
• Genesis, Hybrid, Thematic etc.
• Atahualpa also says to be a framework.....
• A seperate development tool for making parent themes
(is not a theme by itself!)
• Hybrid Core
• Artisteer

19. WordPress - parentthemes and childthemes
1 2 3
childtheme
2a
2b
newest
parenttheme
posts (timeline)
pages
plugin plugin plugin plugin
plugin
oldest
WP core
- child theme uses base settings from the parent theme
- updating parent theme does not influence settings in child theme

20. WordPress - parentthemes and childthemes
design(*) functionality
childtheme aanvullende CSS aanvullende PHP
examples:
‘gets base from parent’ - functions.php
@import url("../theme/ - header.php
style.css"); - footer.php
etc.
css knowledge required
php knowledge
required
parenttheme base CSS base PHP
* for CSS see part 7

21. WordPress - parent- en childthemes
• Child themes: don’t make too complex child themes
• The main purpose: Child themes contain relatively simple personal settings
based on changed settings/routines from the parent theme
• The parent theme can be updated with new versions, leaving the child
theme untouched
• Making a child theme (too?) complex might result in errors/warnings after
upgrading the parent theme
• don’t make a new parent theme with a child theme......

22. WordPress
Part 3: hooks(*)
door Peter Luit
* also look at part 6: plugins

23. WordPress - hooks (actions and filters)
1 2 3
2a
childtheme 2b
newest
parenttheme
hooks
posts (timeline)
pages
plugins
WP core
oldest
- ‘before’ and ‘after’ are the primary
‘locations’ of an event where/when
a hooked action/filter will be
executed

24. WordPress - hooks, the basics
add_action where name of function
function name {
what to do
}
where
before/after header
before/after siderbar(s) #
- differs per theme
- php knowledge required before after page #
- place this in functions.php in childtheme
before/after footer

25. WordPress - hooks, example
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 a location definition in the Suffusion theme
- my_custom_before_page is the name of the routine to be made
- function defines the beginning of the new routine
- this example puts slidedeck slideshow (is a plugin) only at page ‘mijn-home’
- slidedeck( 146, array( 'width' => '100%', 'height' => '225px' ) ); is the format in which
slidedeck data must be used
- place the code above in functions.php in child theme

26. WordPress
Part 4: custom post types
by Peter Luit

27. WordPress - custom post types, example
example within Platform Pro
3 boxes at the homepage of luit.nl

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

29. WordPress - custom post types
WP standard example
posts events
pages booklist
holiday destinations
- 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, technology
execute this after WP startup
add_action ‘init’ name
function name {
labels WP functions(*), including the displayname
display what will the user see?
register regster the function
}
- place this in functions.php in child theme
* like ‘add’, ‘edit’, ‘search’, ‘view’ ......

31. WordPress - custom post types, display content
single.php base to display single content
maak een copy
bijv. single-event.php place in child theme
look for
<h1 class="entry-title"><?php the_title(); ?></h1>
replace with
<h1 class="entry-title">Event: <?php the_title(); ?></h1>

32. WordPress
Part 5: multisites and permalinks
by Peter Luit

33. WordPress - multisites network
one website via subdirectories via subdomains
http://www.name.nl http://www.naam.nl
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl
http://www.name.nl/
http://www.naam.nl http://www.naam.nl
http://subsite1.name.nl
subsite1
- own look&feel
- own menu
- own content

34. WordPress - multisites network, settings
wp-config.php adjust
.htaccess make/adjust
http://www.naam.nl
http://www.naam.nl
http://www.name.nl/
http://www.naam.nl
subsite1
httpd config adjust (server dependend)
permalinks adjust
wp-content/blogs.dir make

35. WordPress - multisites network, settings
wp-config.php adjust
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. */:
login agian, add the following after the line you just inserted in config.php:
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 );
then adjust/make .htaccess in the root of your WordPress installation

36. WordPress - multisites network, settings
.htaccess adjust permalinks settings
http://www.naam.nl
http://www.naam.nl
http://www.name.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]
re-login

37. WordPress - multisites network, serversettings
httpd config
http://www.naam.nl
http://www.naam.nl
http://www.naam.nl/
http://www.naam.nl
subsite1
the settings below differ between various webservers, but in most cases,
look foor httpd config files in the server map.
You need access to this file! Ask your provider if you have access in your agreement
<Directory "/Library/WebServer/Documents/naamhoofddomein">
AllowOverride All
<IfModule mod_dav.c>
DAV Off
</IfModule>
Options All -Includes -ExecCGI +MultiViews -Indexes
</Directory>
restart webserver

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

39. WordPress - multisites network, serversettings
wp-content
http://www.naam.nl
http://www.naam.nl
http://www.name.nl/
http://www.naam.nl
subsite1
make directory ‘blogs-dir’ in wp-content with chmod (755)

40. WordPress
Part 6: plugins
by Peter Luit

41. WordPress - plugins, the basics
actions filters
are functions to be executed are buffers before content is
based on a certain condition or written into the SQL database
place or displayed in the browser
add_action ( 'publish_post', 'email_friends' ); add_filter ( 'hook_name', 'your_filter', [priority], [accepted_args] );
hook
into
core
- the core of WordPress consists of very many actions
and filters. Themes add actions and filters to this list
depending of the theme developer.
http://adambrown.info/p/wp_hooks/version/3.1

42. WordPress - plugins, the setup
wordpress home
wp-content
plugins
mainfile.php
(css)
header of the base of a plugin php file (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, required knowledge
- WordPress structure (the core, actions, filters, hooks)
- HTML (general base knowlegde)
- PHP (scripting language to connect SQL and HTML))
- SQL (making off, writing and reading from tables)
- CSS (fir making the look and feel)
- JavaScript/AJAX (clientsite interactive/animation like functions)

44. WordPress
Part 7: CSS, the basics
by Peter Luit

45. WordPress - CSS, the basics
1 2 3
childtheme
2a
2b
newest
parenttheme
posts (timeline)
pages
plugin plugin plugin plugin
plugin
oldest
WP core
- child themes use basic settings from the parent theme
- updating a parent will not overwrite settings in the child

46. WordPress - CSS, the basics
- some thems give the possibility
parenttheme to do local CSS editting in a build-in
editor and export settings
childtheme - child take base CSS from parent
CSS - edit CSS in your child theme
typography - type, style, size, color, place
places of elements - margin, padding etc.
mouse actions - hover, visited etc.

47. WordPress - CSS, basics in child theme
Baselines in childtheme:
/*
Theme Name: Luit
Description: Child Theme based on Suffusion, edited by 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, basics
CSS HTML result
body { margin-right for everything after 15 pixels to the
margin-right: 15px;
HTML <body> tag right
}
.karakter { geldt alleen bij: display
font-weight: bold; <DIV class=‘karakter’>
} display
</DIV>
#extra { geldt alleen bij:
background-color: #FF0000; <DIV class=‘karakter’ ID=‘extra’> display
} display
</DIV>