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 coding, please refer to Richard's WordPress "Advanced" 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
 

The Missing Manual Chapter 3 - Installing WordPress (on my own web host) using an autoinstaller

Title / file Txt file / link Description Video
install WordPress the easy way
requirements   choose a web host
- PHP 5.2.4 or greater
- MySQL 5.0 or greater
 
web host registration   - www.biz.nf
- sign up for account
 
web host setup   - control panel login for biz.nf
- domain manager > subdomains > create a free subdomain
--- e.g. richardricardo.co.nf
--- open web browser to check
- ftp manager > check ftp user name, change password
--- use WinSCP ftp client to transfer local file to server
- file manager to check files
 
install WordPress with an Autoinstaller   - Zacky installer
--- choose WordPress
--- choose a theme (say any business theme)
--- choose extensions / plugin (say any only)
--- choose subdomain richardricardo.co.nf
--- root directory of subdomain
--- website title: richard ricardo movie club
--- admin email address: ?
--- admin username: ?
--- admin password: ?
--- install and wait...
 
configure WordPress   - access the front end at http://richardricardo.co.nf
- edit the WordPress site, login to control panel at http://richardricardo.co.nf/wp-admin/
- use the admin username and admin password you created
 
so what happened ?   - go to - control panel for biz.nf again
--- database manager - a MySQL database is created for WordPress, check out phpMyAdmin if you want
--- use WinSCP ftp client to see changes in files (.php)
--- file manager - also can see changes in files (.php)
 
 

 

The Missing Manual Chapter 3 - Installing WordPress (on my own web host) by hand

Title / file Txt file / link Description Video
install WordPress - the famous "5 minute install"
maybe later   skip this for now  
 


The Missing Manual Chapter 4 - Creating Posts

html, css etc file / title Txt file / link Description Video
install WordPress - the easy way
web host registration   - https://byet.host/
---- (new domain name, slightly different screen, please use this link)

- https://byethost.com/
- sign up for account
- register main subdomain: (firstname, lastname initial)

video 06_001

video 06_001_2016

    - control panel login for byethost.com
- online file manager
- ftp accounts - check
--- use WinSCP to test
- MySQL Database
--- phpMyAdmin

video 06_002

video 06_003

video 06_004

create subdomain
(firstname lastname_initial)

install WordPress
  - sub domains
--- create subdomain, say... richardrilab1.byethost6.com

- Softaculus
--- WordPress > install
--- choose domain richardrilab1.byethost6.com
--- in directory (use wp subdirectory, or remove it to install on root)
--- site name > Panda Tea House
--- site description > Tea Kingdom
--- admin username > ?
--- admin password > ?
--- admin email > ?
--- select theme
--- install
- WordPress is installed at http://richardrilab1.byethost6.com/wp/
or
http://richardrilab1.byethost6.com/
- Admin URL
http://richardrilab1.byethost6.com/wp/wp-admin/
or
http://richardrilab1.byethost6.com/wp-admin/
- Softaculus > WordPress
--- top right menu bar > all installations
--- remove installation
--- backup, clone
video 06_005

video 06_006

video 06_007


create posts   - login to http://richardrilab1.byethost6.com/wp-admin/
- settings > general
--- change timezone
- dashboard
- appearance > themes
--- change to any theme
- posts > add new
--- add the following post titles (use dummy text for content)
----- Panda Tea House Opening
----- Bohea Tea Tasting
----- Jasmine Tea Sale
----- New Arrival - Longjing Tea
- posts > all posts
---- try delete a post
---- try edit a post (play with publish date)
---- visibility > === sticky post
---- play with filtering
- settings > reading
---- play with settings here
video 06_008

video 06_009

video 06_010
organizing your posts (categories)   - posts > categories (create the following structure)
---- News
---- Tea
--------- Black Tea
--------- Green Tea
- appearance > widgets
- primary sidebar > categories > show hierarchy
 
permalinks   - settings > permalinks  
 

 

The Missing Manual Chapter 5 - Choosing and Polishing Your Theme

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
installing a theme   - appearance > themes
---- add new theme
---- search for, install and activate "twenty twelve"
video 06_011
customizing the header   - appearance > header
---- check header image dimension (960 × 250 pixels for this theme)
---- create image, Adobe Fireworks (or Windows Paint, ctrl-e to change canvas size)
---- you need this image download
---- header image > upload
---- site title & tagline > turn off "display header text"
---- save and publish
---- you can play with "random header pictures", i will skip this (some plugins can do slide show)
----- to remove header, you need to delete the image from media library
video 06_012

video 06_013

video 06_014

video 06_015
changing the background   - appearance > background
---- background image (play with it, width 2000px), you need this image download
---- 2000px, no repeat, center, fixed
---- colors > background color (only changes color around outer edges, not useful if there is background image)
 
theme customizer   - appearance > theme
---- same as above (appearance), but gives a preview of the site on right
 
customizing widgets   - appearance > widgets
---- move a widget (drag)
---- delete a widget (drag to left)
---- tag clouds widget > categories
---- can add widget by plug-ins (later)
 
mobile themes   - check your website on mobile phone
- make sure your theme is mobile-aware
 
 

 

The Missing Manual Chapter 6 - Jazzing Up Your Posts

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
making facier posts   - all posts > edit
---- visual tag > toolbar toogle (looks like keyboard)
---- text tag (html editor)
- want better post editor ? use plug-ins
video 06_016
putting pictures in a post   - all posts > edit
---- click the post where to add the picture
---- add media > upload files
video 06_017
adding pictures to the media library   - media > add new (can skip for now)
---- you need this image download
---- scale to 1500px width
---- try to crop
---- insert into post (size: large)
---- text tag to adjust size (to smaller only, not bigger)
video 06_018

video 06_019
featured images   skip for now  
showing part of a post   - insert more tag (visual or text)  
divide a post into multiple pages   - text tag
---- add html code <!--nextpage-->
 
 

 

The Missing Manual Chapter 7 - Adding Pages and Menus

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
creating pages   - pages > add new
---- page title: Tea Preparation
---- Traditional Methods of Preparing Tea:
---- Black Tea
---- Green Tea
---- Flowering Tea
---- Oolong Tea
- publish
- pages > all pages
---- edit "Tea Preparation" page, find the Permalink under title, view Page to check the link
---- the ID is at the end of the Premalink
---- trash "Sample Page"
video 06_020

video 06_021

video 06_022

video 06_023

video 06_024

video 06_025
pages widget   - appearance > widgets
---- drag "Pages" widget to where you want it
---- sort by "Page title"
 
ordering pages   - pages > add new
---- page title: Tea Culture
---- use dummy text
- pages > all pages
---- quick edit each page, change order, Tea Preparation = 0, Tea Culture = 1
- pages > add new (2 more pages)
---- page title: Black Tea
---- page title: Green Tea
---- make "Tea Preparation" page their parent
---- update "Tea Preparation" page, link to these two new pages (use Permalink of these pages)
 
custom menus   - appearance > menus
---- "create a new menu" at top of page
---- menu name: menu 2
---- create menu
---- play with pages/links/categories
---- links > http://en.wikipedia.org/wiki/Tea > Tea wiki (Link Text)
---- save menu
- appearance > menus > manage locations (top tab)
---- primary menu: menu 2
---- save changes
---- change to original setting
- appearance > menus > select all pages for menu 2 > add to menu
---- reorganize pages to show the parent structure
---- save menu
---- order: Tea Preparation / Tea Culture / Tea wiki
- appearance > menus > manage locations (top tab)
---- primary menu: menu 2
---- change to original setting
 
changing your home page   - settings > reading
---- front page displays: a static page > select Tea Culture (but posts are gone)
- pages > add new > title : Posts
---- publish
-- settings > reading
---- front page displays: a static page > select Tea Culture
---- post page: Posts (it is a place holder)
 
 

 

The Missing Manual Chapter 8 - Comments

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
allowing or forbidding comments   - NOT login as admin > post a comment on a post
- NOT login as admin > post a comment on a page
- login in as admin
- comments > approve

- try to leave a comment on a post (no need to approve)
video 06_026
turn off comments   - pages > all pages
- quick edit a page > allow comments (upper right, small text, check box)
- turn off comments for all pages

- posts> all posts
- quick edit a post > allow comments (upper right, small text, check box)
- explain bulk action
- top right corner > Screen Options > comments checked
- select all posts > bulk action > edit > apply > comments
video 06_027
slow lane > need to approve comment

fast lane > no need to approve
  - change default setting for posts
- settings > discussion
---- go through all options
---- uncheck - allow link notification from other blogs
---- uncheck - allow people to post comments to new articles
---- email me whenever
---- comment must be manually approved
video 06_028
sanitizing comments   - edit any comment
- comments > choose a comment > edit

- settings > discussion > comment moderation > fill the box with words you don't want to allow

- WP Content Filter plug-in
video 06_029
paged comments   - settings > discussion > break comments into pages  
make comments more personal   - The Gravatar Service - gravatar.com

- facebook and twitter comments - Jetpack plug-in
 
spam-fighting strategies   - forbid all comments
- moderation
- force commenters to login
- force commenters to login + allow third-party logins
- use Akismet or another spam-catching plug-in
 
 

 

The Missing Manual Chapter 9 - Plug-Ins

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
plug-in directory   /wp-content/plugins video 06_030
install plug-in   - plugins > add new
---- search for "Jetpack"
---- install "Jetpack by WordPress.com"
video 06_031
activate plug-in "Jetpack by WordPress.com"   - plugins > installed plugins
---- activate "Jetpack"
---- click on "Jetpack"
---- must signup with wordpress.com
---- activate
---- Jetpack > settings
video 06_032

image widget (jetpack)   - appearance > widgets
---- image widget > drag to right
---- fill in information
---- tea plant
---- image url: http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Organic_mountain_grown_tea_leaf.jpg/310px-Organic_mountain_grown_tea_leaf.jpg
---- when clicked: http://en.wikipedia.org/wiki/File:Organic_mountain_grown_tea_leaf.jpg
video 06_033

video 06_034
add a contact form   - create a new post
---- post > add new
---- title: Free Biluochun Tea
---- categories: news, tea, green tea
---- click "add contact form" (below title, next to add media)
---- add a new field > Mailing Address (text required)
---- change comment field (not required)
---- add a new field > Bags of Free Tea (drop down: 1234)
---- publish
- try to submit a form
---- Dashboard > feedback to check submitted forms (can export to as csv)
---- or you can receive from by email
- you can also add a contact form to a page (same: add contact form)
 
add a math equation   - with jetpack > use LaTex typesetting language
- choose any page
---- [latex]f(n) = n^5 + 4n^2 + 2 |_{n=17}[/latex]
 
add mobile support (WPtouch plug-in)   - if your theme is not a responsive theme, you can use a plug-in that adds mobile support.
--- WPtouch
--- activate it
 
backup a wordpress site   - web host provides it: byethost cpanel login > softaculus
---- Softaculus > WordPress
---- top right menu bar > all installations
---- remove installation
---- backup, clone
---- manual download using ftp software

- alternatively, use a plugin (backup database, and files)
---- "online backup for wordpress"
- plugins > add new > search for "online backup for wordpress" > install now
---- activate plugin
- dashboard > online backup
---- backup tab > check both database & filesystem
---- online / local / email (yes email)
---- shedule tab > to schedule backup
 
Akismet plug-in / spam filter   - plugins > all plugins > activate
---- sign up for an akismet API key (need a credit card)
---- skip for now
 
 

 

The Missing Manual Chapter 10 - Picture Galleries, Video, and Music

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
embeds & short codes      
automatic embed   - choose any post: posts > all posts
---- Jasmine Tea Sale > edit > text (edit html code)
---- http://i1145.photobucket.com/albums/o508/NickSoutheast/IceTea.jpg
- wordpress must recognize this site (http://codex.wordpress.org/Embeds)
---- [embed width="123" height="456"]...[/embed] does not always work, just a request
video 06_035

video   - just copy the link (site must be recognized by wordpress)
---- https://www.youtube.com/watch?v=puldqGnW9P0
video 06_036
gallery of pictures   - choose post or page
---- say pages > all pages > green tea > edit
---- add media > upload files (edit if needed)> create gallery (left) > shift/ctrl click to select files > create a new gallery > change stuff > insert gallery
---- try to select the gallery again, and edit link for each picture/thumbnail, consider change url to link to another page
---- you will need file1 and file2
video 06_037
slideshow   - just like gallery > create a gallery > change the code
---- [gallery type="slideshow" ids="85,18,86"]
 
more video and audio   - skip for now  
 

 

The Missing Manual Chapter 11 - Collaborating with Multiple Authors

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
5 different user roles   - administrator - everything
- editor - all posts and pages
- author - their own posts (create new posts)
- contributor - create draft posts
- follower or subscriber - read posts and add comments
video 06_038
add new user   - dashboard
- users > add new
---- username: blackteasupervisor
---- email: blackteasupervisor@gmail.com
---- first name: jennifer
---- last name: yu
---- password: ********&**
---- role: author
---- add new user
- users > all users
---- edit
---- display name publicly as...
- now logout
- use richardrilab1.byethost6.com/wp-admin
---- login as 'blackteasupervisor'
- posts > add new
---- title: Keemun Tea Tasting
---- categories: news, tea, black tea
- check the posts page to see the post is posted by jennifer yu
video 06_039

video 06_040
post approval process  

- logout as 'blackteasupervisor'
- login as 'richardricardo'
- users > all users
- users > add new
---- username: blackteaclient
---- email: blackteaclient@gmail.com
---- first name: boar
---- last name: wong
---- password: ****&****
---- role: contributor
---- add new user

- logout as 'richardoricardo'
- login as 'blackteaclient'
- posts > add new
---- title: Yin Junmei Sale
---- submit for review
- check the posts page to see the post is NOT there (approval is needed)

- logout as 'blackteaclient'
- login as 'blackteasupervisor'
---- posts > all posts
---- pending tab
---- cannot do anyting

- logout as 'blackteasupervisor'
- login as 'richardricardo'
---- posts > all posts
---- pending tab
---- edit
---- categories: news, tea, black tea
---- publish
- check the posts page to see the post is posted by boar wong

 
everyone can register   - settings > general
---- check "anyone can register"
---- save changes
- logout as 'richardricardo'
---- now you see 'register' at /wp-admin/ login screen
 
creating a newtork of sites   - control panel login for byethost.com
- sub domains
--- create subdomain, say... richardrilab2.byethost6.com
- Softaculus
--- WordPress > install
--- choose domain richardrilab2.byethost6.com
--- in directory (remove wp to install on root)
--- site name > Panda Tea Company
--- site description > Tea Kingdom
--- check "Enable Multisite (WPMU)"
--- admin username > ?
--- admin password > ?
--- admin email > ?
--- select no theme
--- install
- WordPress is installed at
http://richardrilab2.byethost6.com/
- Admin URL
http://richardrilab2.byethost6.com/wp-admin/

- login to http://richardrilab2.byethost6.com/wp-admin/
- settings > general > timezone
- appearance > themes > cannot be done here > installing themes on multisite can only be done from the Network Admin section
 
    to be continued...  
       
 

 

Shopping Cart Plugins

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
3 popular free shopping car plugins to choose from   1. WP eCommerce
2. Cart66
3. WooCommerce

We are going to use 1. WPeCommerce.
 
install WP eCommerce plugin   - login to wordpress admin http://richardrilab1.byethost6.com/wp-admin/
- plugins > add new
---- search for wp ecommerce > install now (....) > activate plugin
---- check out "update your active theme" link (do not need to do anything)

WP eCommerce documentation (external site)

Videos from WP eCommerce website
- install plugin
- setup simple store
- add a product
- purchase a product

setup simple store   - wp admin dashboard
- settings > store
---- check out all the tabs

- general tab
---- basic country region > usa, tennessee
---- currency type > USA (US Dollar)
---- save changes

- admin tab (useful stuff below)
---- store admin email
---- customer purchase receipt

- taxes
---- enable tax > turn tax OFF
---- save changes

- shipping tab
---- enable shipping settings
---- shipping original city > clarksville, TN
---- shipping original zip code > 37044
---- save changes
---- shipping modules > flat rate > basic local: 0 for all > basic international: 0 for all > update > save changes
---- this amount will be added to product shipping cost

- payment tab
---- ChronoPay offers credit card payment > we are not using it now
---- Test Gateway > check > Manual Payment Test > key in some instructions > update > Save changes

- checkout tab
---- Enable "Same as billing address" checkbox

- marketing tab
---- keep everything as default

- import tab
---- keep everything as default

- presentation tab
---- very useful tab > go through everything > but do not change anything
video 06_041

video 06_042

video 06_043

video 06_044

video 06_045

video 06_046

video 06_047
add a product   - you may need these image files: file1 & file2
- products > add new
---- title: Biluochun Tea - 1lb (test)
---- description: dummy text
---- weight: 1 pounds
---- local shipping fee: $4
---- international shipping fee: $6
---- image gallery: upload file
---- product pricing: $150
---- sale price: $150
---- taxes: 12 (not needed if tax is disabled)
---- publish
 
make product page available   - appearance > menus
---- select products page (and sub pages) > add to menu > move it to below home (and move sub pages below products page) > save menu
 
purchase a product   - try to purchase a product as a normal user
 
check sales   - dashboard > store sales  
add another product   - try to add another product to test  
 

 

The Missing Manual Chapter 12 - Attracting a Crowd

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
skip for now      
 

 

The Missing Manual Chapter 13 - Editing Themes

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
skip for now      
 

 

The Missing Manual Chapter 14 - Advanced WordPress Site

Title / file Txt file / link Description Video
richardrilab1.byethost6.com
skip for now