Under the hood of WordPress

WordPress: ‘under the hood’

by Peter Luit@peterluit

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

WordPress

Part 1: the basics

by Peter Luit

Website - pages

page

s

meant for ‘static’ content

Weblog - articles (posts, blogs)

newest

oldest

post

s (ti

mel

ine)

meant for ‘dynamic’ content

WordPress - posts/pages

newest

oldestpa

ges

post

s (ti

mel

ine)

WordPress knows both types of content

WordPress - menu structure (starting with 3.0)

1 2 3

2a

2b

- external links- posts- pages- categories(*)- tags(*)

* categories and tags only applicable for posts

newest

oldestpa

ges

post

s (ti

mel

ine)

WordPress - sidebars, extra areas

**

1 2 3

2a

2b

*

**

*

*

* depending on themepossibilities

newest

oldestpa

ges

post

s (ti

mel

ine)

WordPress - widgets

1 2 3

2a

2b

- widgets are independent areas in the sidebars- a widgets can display results of a plugin or contain static text

newest

oldestpa

ges

post

s (ti

mel

ine)

WordPress - header/footer

1 2 3

2a

2b

header en footer size/position

newest

oldestpa

ges

post

s (ti

mel

ine)

newest

oldest

page

s

post

s (ti

mel

ine)

WordPress - plug-ins

WP core

pluginplugin

plugin

plugin

1 2 3

2a

2b

added functions, for examplecontactform, social media icons,read article counter etc.

plugin

theme

WordPress - themes

WP core

pluginplugin

plugin

plugin

plugin

1 2 3

2a

2b

- themes determine the totel user interface- free and premium (mostly paid) versions- very big differences in possibilities

newest

oldest

page

s

post

s (ti

mel

ine)

WordPress

Part 2: architecture

by Peter Luit

WordPress - Architecture

pagina’s

timeline (blogs)

title

body

media

title

body

media

category tags comments(*)

comments(*)

content metadata

content metadata

‘fixed’

‘timeline’

* optional

WordPress - Menu

menu item

empty (#)

URL

page(s)

post(s)

categorie(s)

tag(s)

WordPress - Choosing a theme

very basic

- no or very limitedadjustments- fixed layout- limited sidebars- mostly free

basic

- adjustments possible- variable layout- most often for free- internal CSS edittingpossible- export of settings file

advanced

- may adjustments and export of settings- in most cases paid themes- framwork for developing child themes- CSS/PHP knowledge required

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)

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

WordPress - parentthemes and childthemes

WP core

parenttheme

plugin pluginplugin plugin plugin

childtheme1 2 3

2a

2b

- child theme uses base settings from the parent theme- updating parent theme does not influence settings in child theme

newest

oldest

page

s

post

s (ti

mel

ine)

WordPress - parentthemes and childthemes

parenttheme

childtheme

base CSS

aanvullende CSS

base PHP

aanvullende PHP

‘gets base from parent’@import url("../theme/style.css");

css knowledge required

design(*) functionality

examples:- functions.php- header.php- footer.phpetc.

php knowledge required

* for CSS see part 7

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......

WordPress

Part 3: hooks(*)

door Peter Luit* also look at part 6: plugins

WordPress - hooks (actions and filters)

WP core

parenttheme

plugins

childtheme

hooks

1 2 3

2a

2b

- ‘before’ and ‘after’ are the primary ‘locations’ of an event where/when a hooked action/filter will be executed

newest

oldest

page

s

post

s (ti

mel

ine)

WordPress - hooks, the basics

add_action where name of function

function name {

}

before/after header

before/after siderbar(s) #

before after page #

before/after footer

where

- differs per theme- php knowledge required- place this in functions.php in childtheme

what to do

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 whichslidedeck data must be used

- place the code above in functions.php in child theme

WordPress

Part 4: custom post types

by Peter Luit

WordPress - custom post types, example

example within Platform Pro3 boxes at the homepage of luit.nl

WordPress - custom post types, at luit.nl

features

boxes

carousel

WordPress - custom post types

posts

pages

events

WP standard example

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

WordPress - custom post types, technology

add_action ‘init’ name

function name {

}

- place this in functions.php in child theme* like ‘add’, ‘edit’, ‘search’, ‘view’ ......

labels

display

register

WP functions(*), including the displayname

what will the user see?

regster the function

execute this after WP startup

WordPress - custom post types, display content

single.php

maak een copy

bijv. single-event.php

<h1 class="entry-title"><?php the_title(); ?></h1>

<h1 class="entry-title">Event: <?php the_title(); ?></h1>

look for

replace with

place in child theme

base to display single content

WordPress

Part 5: multisites and permalinks

by Peter Luit

WordPress - multisites network

http://www.name.nl

one website

http://www.naam.nl

via subdirectories

http://www.naam.nl

via subdomains

http://www.naam.nlhttp://www.naam.nlhttp://www.name.nl/

subsite1

http://www.naam.nlhttp://www.naam.nlhttp://subsite1.name.nl

- own look&feel- own menu- own content

WordPress - multisites network, settings

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.name.nl/subsite1

wp-config.php

.htaccess

wp-content/blogs.dir

adjust

make/adjust

make

httpd config adjust (server dependend)

permalinks adjust

WordPress - multisites network, settings

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

wp-config.php

define('WP_ALLOW_MULTISITE', true); -- plaats dit net voor /* That's all, stop editing! Happy blogging. */:

adjust

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

WordPress - multisites network, settings

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.name.nl/subsite1

.htaccess adjust permalinks settings

RewriteEngine OnRewriteBase /RewriteRule ^index\.php$ - [L]

# uploaded filesRewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]

# add a trailing slash to /wp-adminRewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -dRewriteRule ^ - [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

WordPress - multisites network, serversettings

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.naam.nl/subsite1

httpd config

<Directory "/Library/WebServer/Documents/naamhoofddomein"> AllowOverride All <IfModule mod_dav.c> DAV Off </IfModule> Options All -Includes -ExecCGI +MultiViews -Indexes</Directory>

restart webserver

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

WordPress - multisites network, permalinks

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.name.nl/subsite1

WordPress - multisites network, serversettings

http://www.naam.nlhttp://www.naam.nl

http://www.naam.nlhttp://www.name.nl/subsite1

wp-content

make directory ‘blogs-dir’ in wp-content with chmod (755)

WordPress

Part 6: plugins

by Peter Luit

WordPress - plugins, the basics

are functions to be executed based on a certain condition or

place

actions

are buffers before content is written into the SQL database

or displayed in the browser

filters

hookintocore

http://adambrown.info/p/wp_hooks/version/3.1

- the core of WordPress consists of very many actionsand filters. Themes add actions and filters to this listdepending of the theme developer.

add_filter ( 'hook_name', 'your_filter', [priority], [accepted_args] );add_action ( 'publish_post', 'email_friends' );

WordPress - plugins, the setup

wordpress home

wp-content

plugins

mainfile.php(css)(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

*/

header of the base of a plugin php file

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)

WordPress

Part 7: CSS, the basics

by Peter Luit

WordPress - CSS, the basics

WP core

parenttheme

plugin pluginplugin plugin plugin

childtheme1 2 3

2a

2b

- child themes use basic settings from the parent theme- updating a parent will not overwrite settings in the child

newest

oldest

page

s

post

s (ti

mel

ine)

WordPress - CSS, the basics

childtheme

typography

places of elements

mouse actions

CSS

- type, style, size, color, place

- margin, padding etc.

- hover, visited etc.

parenttheme

- child take base CSS from parent

- edit CSS in your child theme

- some thems give the possibilityto do local CSS editting in a build-ineditor and export settings

WordPress - CSS, basics in child theme

/*Theme Name: LuitDescription: Child Theme based on Suffusion, edited by Peter LuitTheme URI: http://www.naam.nlDescription: Child theme for the Suffussion theme Author: Peter LuitAuthor URI: http://www.luit.nlTemplate: suffusionTags: buddypressVersion: 1.0*/@import url("../suffusion/style.css");@import url("../suffusion/skins/light-theme-orange/skin.css");

Baselines in childtheme:

WordPress - CSS, basics

body { margin-right: 15px;}

margin-right for everything afterHTML <body> tag

.karakter { font-weight: bold;}

geldt alleen bij:<DIV class=‘karakter’>

display</DIV>

#extra { background-color: #FF0000;}

geldt alleen bij:<DIV class=‘karakter’ ID=‘extra’>

display</DIV>

CSS HTML result

display

display

15 pixels to the right