Your SlideShare is downloading. ×
Under the hood of WordPress
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Under the hood of WordPress


Published on

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

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

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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. WordPressPart 1: the basicsby 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 3added functions, for example 2acontactform, social media icons, 2bread 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. WordPressPart 2: architectureby 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 andadjustments - 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. WordPressPart 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/whena hooked action/filter will beexecuted
  • 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, exampleadd_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
  • 26. WordPressPart 4: custom post typesby Peter Luit
  • 27. WordPress - custom post types, example example within Platform Pro 3 boxes at the homepage of
  • 28. WordPress - custom post types, at 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. WordPressPart 5: multisites and permalinksby Peter Luit
  • 33. WordPress - multisites network one website via subdirectories via subdomains subsite1 - own look&feel - own menu - own content
  • 34. WordPress - multisites network, settings wp-config.php adjust .htaccess make/adjust subsite1 httpd config adjust (server dependend) permalinks adjust wp-content/blogs.dir make
  • 35. WordPress - multisites network, settings wp-config.php adjust subsite1 define(WP_ALLOW_MULTISITE, true); -- plaats dit net voor /* Thats 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, ); 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 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 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 subsite1
  • 39. WordPress - multisites network, serversettings wp-content subsite1 make directory ‘blogs-dir’ in wp-content with chmod (755)
  • 40. WordPressPart 6: pluginsby 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.
  • 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: Description: An example plugin showing how easy it is to extend the PageLines settings. Version: 0.1 Author: PageLines Author URI: */
  • 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. WordPressPart 7: CSS, the basicsby 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: Description: Child theme for the Suffussion theme Author: Peter Luit Author URI: Template: suffusion Tags: buddypress Version: 1.0 */ @import url("../suffusion/style.css"); @import url("../suffusion/skins/light-theme-orange/skin.css");
  • 48. WordPress - CSS, basicsCSS HTML resultbody { 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>