TWD 24

WordPressDay 1

1

About Me

2

Jonathon Leathers - WordPress Developer

TWD 4 Student (2013)

weCreate Design (2014 - now)

Vancouver WordPress Meetup Organizer (2017 - now)

WordCamp Vancouver Lead Organizer (2018 & 2019)

TWD Instructor (2018 - now)

What does this represent?

3

CMS Usage Statistics

4

Source: https://w3techs.com/technologies/overview/content_management/all

Module Website

5

https://wp.bcitwebdeveloper.ca/

Also linked from here:https://bcitwebdeveloper.ca/staff/

Describe the difference between a static website, a dynamic website, and a content management system.

Compare basic aspects of the most used content management systems.

Describe the layers of a CMS like WordPress.

6

Morning Objectives

What is the difference between a “Static site” and a “Dynamic site”?

7

Static Site vs. Dynamic Site

When a web page is requested, the server, where the page is stored, returns the HTML document.

On a static web page that is all that happens.

The document has no capacity to return information that is not pre-formatted.

8

Static Site

Each web page is an actual written page of code.

9

Static: One-to-One Relationship

Even with template files (PHP), every single page still has to be created.

10

Templates

11

Dynamic Site

On a dynamic web page, the content can change using server-side scripting (PHP) or client-side scripting (JavaScript).

Example: Outputting the current date and time using PHP or JavaScript makes the web page dynamic (barely) because the content changes.

12

Dynamic Site with a Database

On a dynamic web page connected to a database, the user can make requests for data contained in the database on the server.

That data will be assembled on the fly according to what is requested.

Templates + Content in Database + Browser = Dynamically created pages.

13

Dynamic Site with a Database

Of the websites you’ve made so far…

...which are static?

...which are dynamic?

14

Static Site vs. Dynamic Site

15

Dynamic Site to CMS

A Content Management System is a type of Dynamic Site.

Static Websites

Dynamic Websites

CMSs

Content Management System (CMS)

16

Server-side software that is designed to simplify the creation and maintenance of websites.

Manage online content, generate web pages, and allow users to upload and change content without requiring technical expertise.

Content Management System (CMS)

17

User-friendly, browser based publishing tool to easily create dynamic websites instead of static ones.

Technical Web Designer - https://bcitwebdeveloper.ca/ CSS Tricks - https://www.css-tricks.com/Statistics Canada - https://www.statcan.gc.ca/The Economist - https://www.economist.com/49th Parallel Roasters - https://49thcoffee.com/

18

Benefits of a CMS

The content can be changed without changing the style or appearance.

The style or appearance can be changed without changing the content.

Easy to update and easy to manage.

19

Exercise - CMS Research

We will break into small groups and each group will be assigned a CMS.

In your group, spend 9 minutes researching the answers to the six questions on the next slide.

One member from each group will share their answers with the class.

20

For your CMS, lookup the following...

Open source or proprietary software?

Paid service or free to use?

Hosting included or self-hosting required?

Pre-built templates/themes to use/purchase?

What templating language is used?

Market share increasing or decreasing?

Room 1 -- WordPress

Room 2 -- Shopify

Room 3 -- Joomla

Room 4 -- Squarespace

Room 5 -- Drupal

Room 6 -- Magento

21

WordPress Drupal Joomla Magento Shopify Squarespace

Open source?

Free or paid?

Hosted or self-hosted?

Pre-built themes?

Templating language

Market share(↑ or ↓)

22

CMS Components

What are the basic components of a CMS?

Content is stored in a database.

It can be reused, repurposed, and published whenever needed.

23

CMS - Database

Administration area to input, upload and edit content as needed.

24

CMS - Admin Area

Admin area is accessible from any browser with internet access.

No client software installation required.

25

CMS - Login

26

CMS - Layers

The files, information, bits, bytes, images, and data actually lives here.

Stored on hard drives and usually hosted on a web server.

27

CMS - Layers -- Data

The CMS software (files).

PHP + the templating language.

28

CMS - Layers -- Application

The data / content of the website is presented through pre-defined templates, CSS files, HTML, and JavaScript.

29

CMS - Layers -- Presentation

If there is no content the pages collapse, like a balloon without the air…

30

31

What is WordPress?

• A CMS that uses PHP and MySQL.

• A simple and easy to use publishing platform for the

web.

• A tool to create anything from a basic blog to an

advanced website.

• Endless possibilities.

32

What is WordPress?

WordPress is whatever you want it to be!

33

WordPress

You can download and use WordPress for free to publish whatever you want with it for free, contribute back to it for free, and even redistribute it for free.

All of this is made possible by the General Public License (GPL) that WordPress is published under - WordPress will remain free for as long as you use it.

34

WordPress - Open Source

Open Source CMSs: WordPress, Drupal, Joomla, etc.

Proprietary CMSs: Shopify, SharePoint, Sitecore, etc.

WordPress was created by Matt Mullenweg in 2003. https://ma.tt/

“The freedom to build.The freedom to change.The freedom to share.”

- WordPress.org

35

WordPress - History

Image by: Matt Mullenweg

36

WordPress - History

Learn the history of WordPress and how it became so popular here:

https://wp.bcitwebdeveloper.ca/instructor/wordpress-infographic/

Over one-third of websites use WordPress.

Over 60% of websites using a CMS use WordPress.

37

WordPress - Usage

38

WordPress - .ORG vs .COM

www.wordpress.org | www.wordpress.com

A good write up about the difference:

https://wpisnotwp.com/

39

WordPress.com - SaaS

A Software as a Service built on top of WordPress -- your own website for free or for a fee.

No need to download WordPress - everything is taken care of for you: hosting, server, database, spam filters, backups, upgrades, etc.

You are restricted by the platform and its rules.

40

WordPress.org - Self Hosted

The same application (WordPress) used on WordPress.com but it's hosted on your own web server.

Web developers / users download the WordPress core files, install them, and run them on THEIR server.

Complete control over the functionality and the look of the website.

41

WordPress - Advantages

Faster development…

Fully customizable…

Thousands of themes and plugins to choose from…

Easy to create and manage dynamic content…

SEO friendly…

It's free (to use)…

42

WordPress - Disadvantages

Open to hackers without proper security…

Thousands of themes and plugins to choose from…

The learning curve can be steep…

43

WordPress - Companies

Used by some really heavy hitters from blogs to news organizations: Time, Variety, Flickr, The Walt Disney Company, Global News, universities (UBC, BCIT), celebrities, musicians, technology firms, Fortune 500 companies.

WP Showcase Page:https://wordpress.org/showcase/

44

WordPress Development

Which of the following do you need to know as a WordPress developer?

• HTML• CSS• JavaScript• PHP• MySQL

45

WordPress Development

HTML, CSS, JavaScript → Yes!

PHP → Be able to use functions, conditional statements, loops, arrays. PHP is the base but WordPress has several built-in functions.

MySQL → None until you get into advanced WordPress development.

Describe the difference between a static website, a dynamic website, and a content management system.

Compare basic aspects of the most used content management systems.

Describe the layers of a CMS like WordPress.

46

Morning Objectives

Install a WordPress website on a local server.

Configure and customize a WordPress website using the Twenty Twenty WordPress theme.

Add content to a WordPress website.

47

Afternoon Objectives

48

Installing WordPress

WordPress can be installed on a “local” server or on a “live” server.

49

Installing WordPress

LOCAL SERVERA server on your computer that mimics a web server. Includes Apache or NGINX, MySQL, PHP.

Examples:MAMPWAMPVagrantLocal by Flywheel

LIVE SERVERA server on the web. Most hosting providers offer WP hosting these days.

Recommendations:PHP 7.3 or greater, MySQL 5.6 or greaterHTTPS support

More: https://wordpress.org/about/requirements

50

Installing WordPress - Steps (local server)

1. Download and extract the core files from WordPress.org.

2. Copy the whole WordPress installation folder to the “htdocs” or “www” folder then rename it.

3. Create a database by accessing phpMyAdmin through MAMP or WAMP.

51

Installing WordPress - Steps (local server)

4. Rename wp-config-sample.php to wp-config.php and add the database name, username, and password to connect the files and database.

5. Open the site in a browser to begin the installation process.

52

Installing WordPress - Video (local server)

Download the video tutorial showing how to install WordPress locally from the Program Files FTP server.

11-WordPress-Development / Video-Tutorials

Local Environment - MAMP vs. WAMP

WAMPWindows only

Current version: 3.2

Older versions: http://www.filehorse.com/download-wampserver-32/old-versions/

MAMPWindows and Mac

Current Windows version: 4.1.1Current Mac version: 5.7

Older versions: https://www.mamp.info/en/downloads/older-versions/

53

MAMP and WAMP offer a “root” super user to access phpMyAdmin with full control.

On a remote or “live” server you access phpMyAdmin through cPanel with a different user that has restricted control.

54

Local Environment - Super User

They are visible because we've logged in as “root”. Do NOT delete these databases!

information_schema - virtual database, contains details about the databases.

mysql - stores user account and privilege details.

performance_schema - monitors server events.

55

Local Environment - Default Databases

56

Exercise - Installing WordPress (locally)

Let’s install WordPress!

57

Step 1 - Download WordPress

Download & extract the core files from WordPress.org.

58

Step 2 - Copy the Folder

Copy the whole WordPress installation folder to the “htdocs” or “www” folder then rename it.

Note: If on Windows, make sure you copy and rename the nested folder.

59

WordPress Core Files

DO NOT EDIT CORE FILES... EVER!!

wp-admin folder

wp-includes folder

Most of the root files

Only edit these files & folders

60

WordPress Files to Edit

Only edit files in the themes and plugins that you have custom developed.

These are found inside of the wp-content folder and then inside themes or plugins.

61

Step 3 - Create a Database

Create a database by accessing phpMyAdmin through MAMP or WAMP.

Access phpMyAdmin at:

Windows: http://localhost/phpMyAdmin

Mac: http://localhost:8888/phpMyAdmin

62

Step 3 - Create a Database (cont’d)

MAMP

Username: 'root'

Password: 'root'

Create a database with collation set to utf8mb4_unicode_ci.

WAMP

Username: 'root'

Password: ''

Create a database with collation set to utf8mb4_unicode_ci.

Character set defines the available characters.

Collation sets the rules for sorting the character set.

The character set and collation can be set independently at the database, table, or column level.

63

Character Set & Collation

Character Set

The character set is the first part before the underscore. For example:

utf8mb4_unicode_ciutf8_general_cilatin1_swedish_ci

64

Character Set

utf8 only supports 1-3 byte characters and excludes many characters including emoji and non-latin characters.

utf8mb4 supports 1-4 byte characters and was added in MySQL 5.5.3.

65

Character Set & Collation

TL;DR…

• Use utf8mb4_unicode_ci when creating databases locally.

66

67

Step 4 - Edit wp-config.php

Rename wp-config-sample.php to wp-config.php. Add the database name, username, and password.

68

Step 4 - Edit wp-config.php (cont’d)

MAMP WAMP

69

Step 5 - Install in the Browser

Open the site in a browser to begin the installation process.

Access local site:

Windows: http://localhost/FOLDER_NAME

Mac: http://localhost:8888/FOLDER_NAME

70

Step 5 - Install in the Browser (cont’d)

Select the language, then fill in the details.

Note: If you are asked to input database details, then you have not created the wp-config.php file.

71

Login to WordPress Admin

Add /wp-admin to the end of any WordPress site URL to access the admin dashboard.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/admin-panel

72

Installing WordPress - Tips

Always download and extract a new core file pack from wordpress.org.

The database name/user/password is NOT the same as your WordPress site username and password.

Do NOT use 'admin' as a WordPress username.

Use longer and safe passwords.

Edit the php.ini file to set the maximum upload size:

post_max_size = … M

upload_max_filesize = … M

WAMP - WAMP icon / PHP / php.ini

MAMP on Win - MAMP / conf / phpx.x.x / php.ini

MAMP on Mac - Application / MAMP / conf / phpx.x.x / php.ini

73

Local Environment - Upload Sizes

74

Exercise - Configuring WordPress

Spend the next hour watching the tutorials and completing the tasks on the next five slides.

Note: All future WordPress websites will be configured similarly so take notes for yourself of the changes that you make.

75

General Settings

Use the tutorial below to do the following:• Change or remove the Tagline• Change the Timezone

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/general-settings

76

Writing & Reading Settings

Use the tutorial below to do the following:• Change the homepage to display a static page• Set the blog index to a separate page• Note: You will need to create two Pages first.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/writing-and-reading-settings

77

Discussion Settings

Use the tutorial below to do the following:• Customize the settings for how users can leave

comments based on your own preferences

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/discussion-settings

78

Media & Permalink Settings

Use the tutorial below to do the following:• Change the Permalinks structure to Post name

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/permalink-settings

79

Privacy Settings

Watch the tutorial below to see how the Privacy Policy page and features work in WordPress.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/privacy-settings-gdpr

80

Configuring WordPress

By now you should have gone through all of the WordPress admin pages under Settings and configured your WordPress site.

You can stop here until class resumes.

81

WordPress Content Types

Working in WordPress, you have two main types of content by default: posts and pages.

Posts and pages are used for very different things and it’s important to understand the similarities and the differences.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training/the-three-main-content-types-of-wordpresshttps://www.linkedin.com/learning/wordpress-5-essential-training/posts-vs-pages

82

WordPress Content Types - Posts

A Post is an article, a photo, a video, or anything you publish that shows up in a stream, usually in reverse chronological order.

A magazine, a newspaper, a blog, or any type of publication online uses Posts.

Example: https://www.smashingmagazine.com/articles/

83

WordPress Content Types - Posts

Organized by publishing date and can be sorted by author. Each post must be placed in one Category and can have Tags.

Categories are overall defining descriptions of your content.

Tags are optional, and can further help you relate the content to other pieces of content on your site.

84

WordPress Content Types - Pages

Unlike a Post, a Page does NOT…

• Have a published date or author displayed by default,

• Show up in a stream,• Have Tags or Categories.

85

WordPress Content Types - Pages

Pages are generally shown as individual elements but they can be organized by parent / child relationships.

Pages often have custom templates for unique pages like a Home page.

Example: https://www.smashingmagazine.com/about/

86

Posts vs. Pages

Posts are used for time-based materials. On a news website a Post would be a news article.

Posts are generally things that need to be organized.

Would the user want to see other content related to it? If yes, it is likely a post.

Comments are on by default.

Pages are used for timeless and static materials. On a news website a Page would be the Contact or About page.

Mostly macro level information about the overall site / people behind the site.

Should it go to the menu? If yes, likely a page.

Comments are off by default.

87

WordPress Content Types - Media

Media is any file uploaded through the WordPress admin area. For example: images, videos, PDFs. These files can be reused throughout the WordPress website on any number of Posts and Pages.

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/the-media-library

88

Block Editor Interface

Older tutorials and some WordPress websites may still be using the “Classic Editor” which is a simple WYSIWYG editor.

Current tutorials and our WordPress websites will use the newer “Block Editor” or Gutenberg editor.

89

Block Editor Interface

Classic Editor Block Editor

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training/create-content

90

Exercise - Adding Content

Use the remaining slides and related tutorials to add content to your WordPress website and organize that content.

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training/manage-content-in-wordpresshttps://www.linkedin.com/learning/wordpress-5-essential-training/gutenberg-the-wordpress-block-editor

91

Adding Content to WordPress

Download and extract the provided content for Day 1 from the Instructor website:https://wp.bcitwebdeveloper.ca/instructor/schedule/

Use this content to complete the following tasks and replicate the Vancouver Demo site:https://wp.bcitwebdeveloper.ca/vancity-demo/

92

Add a Post - Libraries and Museums

Create the Libraries and Museums post.• Copy and paste the text from the Word document.• Link the text Vancouver Public Library to http://www.vpl.ca/• Publish the post.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training/create-and-edit-links

93

Edit a Post - Libraries and Museums

Edit the Libraries and Museums post.• Create an image block and upload vancouver-library.jpg.• Place it between the first and second paragraph.• Use the ‘Medium’ image size and ‘Align left’ the block.• Update the post.

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training/create-and-manage-blockshttps://www.linkedin.com/learning/wordpress-5-essential-training/block-toolbar-and-properties-panel-4https://www.linkedin.com/learning/wordpress-5-essential-training/the-image-block-3

94

Edit a Post - Libraries and Museums

Edit the Libraries and Museums post.• Convert the last Paragraph block to a Quote block.• Move the Quote block before the final Paragraph block.• Update the post.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training/change-block-type-3

95

Add a Post - Visual Art

Create the Visual Art post.• Copy and paste the text from the Word document.• Add the following blocks: Cover Image, Gallery, Flickr

Embed, YouTube Embed.

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training/other-image-blocks-2https://www.linkedin.com/learning/wordpress-5-essential-training/embed-blocks

96

Add a Post - Vancouver Politics

Create the Vancouver Politics post.• Copy and paste the text from the Word document.• Replicate the demo site’s Vancouver Politics post:

https://wp.bcitwebdeveloper.ca/vancity-demo/vancouver-politics/• The following ten block types are used at least once:

Paragraph, Heading, More, Media & Text, Separator, Pullquote, Group, Columns, List, Button.

(Tutorials on next slide)

97

Add a Post - Vancouver Politics

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training/text-blocks-2https://www.linkedin.com/learning/wordpress-5-essential-training/media-and-text-layout-blockhttps://www.linkedin.com/learning/wordpress-5-essential-training/group-blockhttps://www.linkedin.com/learning/wordpress-5-essential-training/columns-blockhttps://www.linkedin.com/learning/wordpress-5-essential-training/the-more-block

Hint: WordPress adds classes to each block when the page renders on the front end.

98

Additional Post Changes

Complete the following tasks:• Edit Libraries and Museums to be a Sticky post

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training/publish-update-and-delete-posts-and-pages

99

Add Categories

Complete the following tasks:• Create a Category of Vancouver. Apply this Category to all

three blog posts.• Create two child categories of Vancouver: Architecture

and Cultural. Apply these Categories to the relevant posts.• Set Vancouver as the Default Category in the Settings.

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training/add-categories-and-tags-2https://www.linkedin.com/learning/wordpress-5-essential-training/sidebar-the-difference-between-categories-and-tags

100

Add Tags

Complete the following tasks:• Add at least two Tags of your choosing to each of the three

created posts.• Try using the Quick Edit

option to do this...

Tutorial: https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/advanced-content-management

101

Add Featured Images

Complete the following tasks:• Add a different Featured Image

for each of the three created posts.• Use the provided images or your own.• Note: See next slide.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training/add-a-featured-image-2

102

Add Featured Images

Note: To limit your confusion on earlier tasks, the Vancouver demo site does not currently have Featured Images set for its posts. If it did, they would look like this:

Blog Index Single Post

103

Posts Tasks Completed!

If you’ve made it this far then you have completed the tasks related to Posts. Congrats!

The remaining slides will cover creating Pages, using the Customizer, creating Menus and using Widgets.

If you need a break for the day, feel free to complete these tasks tomorrow afternoon.

104

Create Pages

Complete the following tasks:• Create three pages (Geography, Ecology, Climate). • Copy and paste the text from the Word document.• Make Geography the Parent page for

both Ecology and Climate.

Tutorials:(These show the old “Classic Editor” so your admin screen will look different.)https://www.linkedin.com/learning/wordpress-4-essential-training/when-to-use-pageshttps://www.linkedin.com/learning/wordpress-4-essential-training/creating-page-hierarchies

105

Edit Homepage

Edit the Homepage you created to do the following:• Set the title to Welcome to Vancouver• Copy and paste the text from the Word document.• Set the Page Template to Cover Template.• Set a Featured Image.

Tutorial:(This shows the old “Classic Editor” so your admin screen will look different.) https://www.linkedin.com/learning/wordpress-4-essential-training/using-page-templates

106

Use the Customizer

Use the WordPress Customizer to do the following:• Set the Site Icon (favicon) to the

rainy.png image.• Use the Colors and Cover Template

options to customize the design of your site to something you choose.

Tutorials: (see next slide)

107

Use the Customizer

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/site-identityhttps://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/site-visuals

Note: Menus and Widgets are covered next but feel free to test the other options available in the Customizer too.

108

WordPress Menus

In WordPress, Menus are used for creating lists of links for navigation.

These can be internal links like a header or footer navigation or external links like a list of social media icons.

109

Create a Main Menu

Create a main Menu for the site navigation:• Use either interface to create the menu:

• Appearance → Customize → Menus• Appearance → Menus

• Use the Word document or the screenshot in the following slide to see what should be added to the Menu.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/create-and-customize-menus

110

Create a Main Menu

If using the interface found under Appearance → Menus…

...you must toggle open Screen Options and check all available checkboxes.

See next slide

111

Create a Main Menu

Set the Display Location:• For our Twenty Twenty Theme, use Desktop Horizontal

Menu.

Add a Custom Link:• Set the URL to https://vancouver.ca/ and have the link open

in a new tab.

112

Create a Social Menu

Create a social media menu for the site:• Use either interface to create the menu (see next slides):

• Appearance → Customize → Menus• Appearance → Menus

• Create a new menu and set the location to Social Menu.• Use the Word document to copy the URLs into the Custom

Links.

113

Create a Social Menu (Customizer Interface)

If using the Customizer...

114

Create a Social Menu (Menu Interface)

If using the Menu interface...

115

WordPress Widgets

Widgets are small applications that show information, like links to most recent posts, recent comments, archives, calendars, etc.

There are WordPress base widgets and there are widgets that come with themes and plugins.

The widget area in Appearance → Widgets has some auto-save functionality.

116

Customize the Widget Areas

Complete the following tasks:• Use either interface to customize the widget areas:

• Appearance → Customize → Menus• Appearance → Menus

• In the two provided widget areas of the Twenty Twenty theme, add widgets relevant to the site.

Tutorial:https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/widgets

117

All Day 1 Tasks Completed!

That’s it for Day 1 of WordPress.

We will continue to work on this Vancouver site tomorrow when we cover Themes, Plugins, Users and how to migrate a WordPress site to a live server.

118

Going further...

If you’ve gone through everything from Day 1 and would like to learn a bit more about WordPress, try creating a Reusable Block or two.Maybe add a Call to Action at the bottom of each blog post.

Tutorials:https://www.linkedin.com/learning/wordpress-5-essential-training/reusable-blocks-and-how-they-workhttps://www.linkedin.com/learning/wordpress-5-essential-training/create-and-add-reusable-blockshttps://www.linkedin.com/learning/wordpress-5-essential-training/edit-reusable-blockshttps://www.linkedin.com/learning/wordpress-5-essential-training/create-templates-with-reusable-blocks