Under the hood of WordPress


Published on

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

No notes for slide

Under the hood of WordPress

  1. 1. WordPress: ‘under the hood’by Peter Luit@peterluit
  2. 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. 3. WordPressPart 1: the basicsby Peter Luit
  4. 4. Website - pages meant for ‘static’ content pages
  5. 5. Weblog - articles (posts, blogs) meant for ‘dynamic’ content newest posts (timeline) oldest
  6. 6. WordPress - posts/pages WordPress knows both types of content newest posts (timeline) pages oldest
  7. 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. 8. WordPress - sidebars, extra areas 1 2 3 * depending on theme 2a possibilities 2b * newest * posts (timeline) pages * * * * oldest *
  9. 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. 10. WordPress - header/footer 1 2 3 2a 2b newest posts (timeline) pages oldest header en footer size/position
  11. 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. 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. 13. WordPressPart 2: architectureby Peter Luit
  14. 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. 15. WordPress - Menu menu item empty (#) URL page(s) post(s) categorie(s) tag(s)
  16. 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. 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. 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. 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. 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. 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. 22. WordPressPart 3: hooks(*)door Peter Luit* also look at part 6: plugins
  23. 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. 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. 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. 26. WordPressPart 4: custom post typesby Peter Luit
  27. 27. WordPress - custom post types, example example within Platform Pro 3 boxes at the homepage of luit.nl
  28. 28. WordPress - custom post types, at luit.nl features boxes carousel
  29. 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. 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. 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. 32. WordPressPart 5: multisites and permalinksby Peter Luit
  33. 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. 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. 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 /* 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, 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. 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. 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. 38. WordPress - multisites network, permalinks http://www.naam.nl http://www.naam.nl http://www.name.nl/ http://www.naam.nl subsite1
  39. 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. 40. WordPressPart 6: pluginsby Peter Luit
  41. 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. 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. 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. 44. WordPressPart 7: CSS, the basicsby Peter Luit
  45. 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. 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. 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. 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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.