Content

You cannot learn programming by only looking at examples. Please refer to the recommended text books (WordPress - The Missing Manual, 2nd edition and Smashing WordPress - Beyond The Blog, 4th edition) for detailed explanations. For WordPress basics, please refer to Richard's WordPress page


Setting up programming environment:

Title / file Txt file / link Description Video
0. preparation
Preparation   - show file extensions in windows 8/8.1 video 00_001
    - install notepad++ video 00_002
    - create screen captures, save as PDF files video 00_003
 

Smashing WordPress Chapter 1 - Anatomy of a WordPress Install

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
manual install   the textbook explained very well, not repeating here  

move WordPress install to a different directory

(clone for backup / development)

  - first make a copy (clone) of our install (work)
- login to cpanel of your host
--- create subdomain richardrilab3.byethost6.com
--- Softaculus > WordPress
--- top right menu bar > all installations
--- clone richardrilab1.byethost6.com to richardrilab3.byethost6.com (make sure it is at root directory)
- now we can work on richardrilab3.byethost6.com (just in case we mess up things)

- change default editor for WinSCP
--- options > preferences > editors > add > external editor > browse
--- look for the exe file for notepad++
video 06_048
move WordPress install to a different directory
(keep index.php in root)
 

- move a root install to a subfolder "wpsystem"
- login to richardrilab3.byethost6.com/wp-admin/
- wordpress > dashboard > settings > permalinks > post names > save changes
- use cpanel of host > online file manager > go to "richardrilab3.byethost6.com\htdocs" > create directory "wpsystem"
- wordpress > dashboard > settings > general
---- wordpress address > http://richardrilab3.byethost6.com/wpsystem > save changes
---- site address (URL) > no change (remains the same)
- use ftp manager, move all files from richardrilab3.byethost6.com\htdocs to richardrilab3.byethost6.com\htdocs\wpsystem, except index.php and .htaccess files (select and drag)
- open index.php (right click > edit)
--- change "require( dirname( __FILE__ ) . '/wp-blog-header.php' );" to "require( dirname( __FILE__ ) . '/wpsystem/wp-blog-header.php' );"
- check http://richardrilab3.byethost6.com/
- check admin login: http://richardrilab3.byethost6.com/wpsystem/wp-admin/
- wordpress > dashboard > settings > permalinks ---- double check

video 06_049
move WordPress index.php to root
(if you did development in a sub directory)
  - cpanle of host > Softaculus > WordPress
--- top right menu bar > all installations > http://richardrilab3.byethost6.com/ > remove (delete wordpress install)
- clone again
--- clone richardrilab1.byethost6.com to richardrilab3.byethost6.com (make sure it is at a sub directory, say "wp")
- now we can work on richardrilab3.byethost6.com (just in case we mess up things)

- login to richardrilab3.byethost6.com/wp/wp-admin/
- wordpress > dashboard > settings > permalinks > post names > save changes
- wordpress > dashboard > settings > general
---- wordpress address > http://richardrilab3.byethost6.com/wp > no change (remains the same)
---- site address (URL) > http://richardrilab3.byethost6.com/
---- save changes

- use ftp manager, copy files (do NOT move) "index.php" and ".htaccess" from richardrilab3.byethost6.com\htdocs\wp to richardrilab3.byethost6.com\htdocs\ (right click > duplicate)
- open root directory's index.php only (right click > edit)
--- change "require( dirname( __FILE__ ) . '/wp-blog-header.php' );" to "require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );"
- check http://richardrilab3.byethost6.com/
- check admin login: http://richardrilab3.byethost6.com/wp/wp-admin/
- wordpress > dashboard > settings > permalinks ---- double check
video 06_050

video 06_051
Other move combinations?   Some documentation here...  
Lost wordpress password?   If you still have cpanel password, you can reset the password from phpmyadmin. Documentation here...  
 
WP Clone by WP Academy - good Plugin to clone WordPress sites without FTP   - install plugin on both wordpress sites
- dashboard > WP Clone
- create a backup of original site
- the "Backup" function will give you a URL that you can then copy and paste into the "Restore" dialog of a new WordPress site, which will clone the original site to the new site.
useful when you run out of disk inodes
 

 

Smashing WordPress Chapter 2 - WordPress Syntax

Title / file Txt file / link Description Video
 
manual   codex.wordpress.org  
core files   do NOT touch core files
- the only core file you shold touch is wp-config.php
- login to cpanel > file manager > navigate to the subdomain > htdocs > find wp-config.php at root
- wp-content folder: themes / plugins / files - this should be the only folder to edit (two only files to edit outside this folder = wp-config.php & .htaccess
 
themes   - locate wp-content/theme > twentyfourteen > style.css (holds basic style)
- locate template files in theme folder: index.php, sidebar.php, comments.php, header.php, footer.php, single.php (simple post), functions.php (plugin like features), page.php.
- technically theme can consists of only index.php and style.css
 
template tags   - WordPress is written in php, but it is a framework by itself.
- open index.php, check out some template tags (php functions that can handle parameters)
- find a complete listing of template tags (php functions) at http://codex.wordpress.org/Template_Tags
 
include tags  
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

passing multiple arguments - skip

 
functions with querystring style arguments  

- query-string style >

<?php wp_tag_cloud( 'smallest=8&largest=22' ); ?>

- function style (pass as array), see this example

 
data types   - strings > 'name'
- integers > 55900
- boolean > TRUE or FALSE
 
conditional tags  
if () {
} else {
}               
 
comment   //  
 


Smashing WordPress Chapter 3 - The Loop

html, css etc file / title Txt file / link Description Video
 
the loop   - a php query that talks to wordpress and makes it output the content requested
- residues in the theme's template files
 
   

- locate and open wp-content/theme > twentytwelve > index.php
----

<?php
if ( have_posts() ) :
  while ( have_posts() ) : the_post();
  endwhile;
else :
endif;
?>
 
WP_Query   - a class that handles all the loop stuff
- check out http://codex.wordpress.org/Function_Reference/WP_Query
 
 

 

Smashing WordPress Chapter 4 - Theme Essentials

Title / file Txt file / link Description Video
richardrilab3.byethost6.com
how to start?   - hacking the default theme
or
- build a theme from scratch
 
theme basics   - a theme is a folder with template files
- you need at least two template files: index.php and style.css
 
    need more templates? call them from index.php
- header.php > get_header()
- footer.php > get_footer()
- comments.php > comments_template()
- sidebar.php > get_sidebar()
 
a very simple theme example - blog01
step 0: backup / clone   - backup first
- clone richardrilab1.byethost6.com to richardrilab3.byethost6.com
- it is a good idea to clone or backup a site before coding
video 06_052

video 06_053
step 1: create a html file for a blog (& css file)   eg001.htm
style.css
video 06_054
step 2: simple test   - create a folder for richardrilab3 (in htdocs/wp-content/themes/), call it blog01 (use win_scp ftp software)
- copy style.css to the folder
- add the theme declaration in style.css (important)
- copy eg001.htm to blog01 folder, rename it to index.php
- activate theme > the content is still there, but the css layout is gone
video 06_055

video 06_056

video 06_057
step 3: create the template files   - extra (not in video), if you want to make coding easier:
- settings > reading
--- front page displays: Your latest posts
--- show posts on first page, easier to see results

- create the following empty files, then cut the eg001.htm code, put code into them, add wordpress tags:
--- header.php (txt file)
--- index.php (txt file)
--- sidebar.php (txt file)
--- footer.php (txt file)
--- style.css can be re-used
- ftp files to server if you have not done so
- done
 
a different theme example - blog02
step 1: create a html file for a blog (& css file)   - eg002.htm
- style.css
video 06_058
step 2: create the template files   - create a folder for richardrilab3 (in htdocs/wp-content/themes/), call it blog02 (use win_scp ftp software)
- copy style.css to the folder
- add the theme declaration in style.css (important)
- copy eg002.htm to blog02 folder, rename it to index.php
- activate theme > the content is still there, but the css layout is gone
video 06_059

video 06_060
step 3: create the template files  

- create the following empty files, then cut the eg002.htm code, put code into them, add wordpress tags:

--- header.php (txt file)
--- index.php (txt file), load the following template files
--- sidebar.php (txt file), related to functions.php, need to go wordpress admin dashboard to add widget to see the effect
--- functions.php (txt file)
--- footer.php (txt file)
--- content.php (txt file)
--- style.css can be re-used

--- single.php (txt file) - will load content-single.php first, then content.php
--- content-single.php (txt file) - copy content.php, make changes
--- page.php (txt file) - copy single.php, make changes
--- comments.php - skip
--- archive.php - skip, use index.php
--- 404.php - skip
--- search.php - skip, can add some code behind index.php (not done)

---- create a 300x225 pixels screenshot.png file, put in theme folder

video 06_061

video 06_062

video 06_063

video 06_064

video 06_065

video 06_066

video 06_067

video 06_068
hierarchy of template files   check out template hierarchy here  
 

 

Smashing WordPress Chapter 5 - Child Theme

Title / file Txt file / link Description Video
richardrilab3.byethost6.com
    - parent theme must be in wp-content/themes/ folder
- child theme in its own folder also in wp-content/themes/
 
Notes Blog
- child theme
 

- download notes blog theme from http://tdh.me/wordpress/notes/

- ftp the theme to the created folder (notes-blog)
- login to wp-admin, change theme to Notes Blog

- create folder child-notes-blog
- create file style.css
- change theme to Small Notes

 
    - every template in the child theme is ranked higher than its equivalent in the parent theme
- functions.php exception: parent theme's functions.php will be loaded (child theme's functions.php will be loaded first)
 
a different child theme example - blog02-1 (child of blog02)
step 1: create a html file for a blog (& css file)   - create folder blog02-1
- create file style.css
- change theme to blog02-1
- create file footer.php (txt file)
video 06_069
 

 

Smashing WordPress Chapter 6 - Advanced Theme Usage

Title / file Txt file / link Description Video
richardrilab3.byethost6.com
individual styling techniques
styling the posts, categories, body classes   - continue to use theme blog02-1 (child theme of blog02)
- check index.php and content.php of blog02 theme
- note

<article class="post" id="post-<?php the_ID();?>" <?php post_class();?>>

- view source of posts page of website
- locate <article> tags, post-x, category-news
- change style.css of blog02-1 theme (a category page, and a post)

video 06_070

video 06_071
custom headers and background images   - create functions.php (txt file) in theme blog02-1
- copy header.php from theme blog02
- update header. php (txt file) in theme blog02-1
- go to wp-admin > dashboard > appearance > header > header image > add new image
- save & publish

- update functions.php (txt file) in theme blog02-1
- go to wp-admin > dashboard > appearance > background > background image > change image > fixed
- save & publish
video 06_072

video 06_073

video 06_074
theme settings   - go to wp-admin > dashboard > appearance > background > customize > note the number of items there
- update functions.php (txt file) in theme blog02-1
- go to wp-admin > dashboard > appearance > background > customize >note "footer details" has been added
 
 

 

Smashing WordPress Chapter 7 - Plugins

Title / file Txt file / link Description Video
richardrilab3.byethost6.com
plugin?   - plugins - extend WordPress functionality with additional features
- documentation here
 
write your first plugin (wp-admin message)   put file/folder in plugin folder:
wp-content/plugins/
- my_first_plugin.php (txt file)
- check wp-admin top right corner
 
second plugin (a new taxonomy)   - my_second_plugin_taxonomy.php (txt file)
- check posts, simple tags is added
- add tag cloud widget
- update posts to see results
 
third plugin (simple widget to say hello)   my_third_plugin_widget.php (txt file)
- WP_Widget() class (wp-includes/widgets.php)
- This class must be extended for each widget and WP_Widget::widget(), WP_Widget::update() and WP_Widget::form() need to be over-ridden.
 
fourth plugin (simple settings menu)   smashingwidget.php (txt file)  
       
       
 

 

Smashing WordPress Chapter 8 - Plugins or functions.php?

Title / file Txt file / link Description Video
 
       
       
       
       
       
       
       
       
       
 

 

Smashing WordPress Chapter 9 - WordPress as a CMS

Title / file Txt file / link Description Video
 
       
       
       
       
       
       
 

 

Smashing WordPress Chapter 10 - Integrating the Social Web

Title / file Txt file / link Description Video
 
       
       
       
       
       
       
       
 

 

Smashing WordPress Chapter 11 - Design Trickery

Title / file Txt file / link Description Video
 
       
       
       
       
       
       
 

 

Smashing WordPress Chapter 12 - Media

Title / file Txt file / link Description Video
 
       
       
       
       
       
       
 

 

Smashing WordPress Chapter 13 - Extra Functionality

Title / file Txt file / link Description Video
 
       
       
       
       
       
       
 

 

Smashing WordPress Chapter 14 - Uncommon WordPress Usage

Title / file Txt file / link Description Video