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" |
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: |
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) - create folder child-notes-blog |
||
- 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 |
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 |