WordPress Day 1 1 About Me Jonathon Leathers - WordPress - - PowerPoint PPT Presentation
TWD 25 WordPress Day 1 1 About Me 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
1
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)
3
4
Source: https://w3techs.com/technologies/overview/content_management/all
5
Also linked on Slack and 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
What is the difference between a “Static site” and a “Dynamic site”?
7
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
Each web page is an actual written page of code.
9
Even with template files (PHP), every single page still has to be created.
10
11
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
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
Of the websites you’ve made so far… ...which are static? ...which are dynamic?
14
15
A Content Management System is a type of Dynamic Site.
Static Websites Dynamic Websites CMSs
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.
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
The content can be changed without changing the style
The style or appearance can be changed without changing the content. Easy to update and easy to manage.
19
will be assigned a CMS.
answers to the six questions on the next slide.
answers to the table that will be on screen.
20
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 -- Drupal Room 3 -- Joomla Room 4 -- Wix Room 5 -- Shopify Room 6 -- Squarespace
21
WordPress Drupal Joomla Wix Shopify Squarespace Open source? Free or paid? Hosted or self-hosted? Pre-built themes? Templating language Market share (↑ or ↓)
22
What are the basic components of a CMS?
Content is stored in a database. It can be reused, repurposed, and published whenever needed.
23
Administration area to input, upload and edit content as needed.
24
Admin area is accessible from any browser with internet access. No client software installation required.
25
26
The files, information, bits, bytes, images, and data actually lives here. Stored on hard drives and usually hosted on a web server.
27
The CMS software (files). PHP + the templating language.
28
The data / content of the website is presented through pre-defined templates, CSS files, HTML, and JavaScript.
29
If there is no content the pages collapse, like a balloon without the air…
30
31
web.
advanced website.
32
33
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
Open Source CMSs: WordPress, Drupal, Joomla, etc. Proprietary CMSs: Shopify, SharePoint, Sitecore, etc.
WordPress was created by Matt Mullenweg in
“The freedom to build. The freedom to change. The freedom to share.”
35
Image by: Matt Mullenweg
36
Learn the history of WordPress and how it became so popular in this infographic:
https://wp.bcitwebdeveloper.ca/instructor/wordpress-infographic/
Over one-third of websites use WordPress. Over 60% of websites using a CMS use WordPress.
37
38
www.wordpress.org | www.wordpress.com A good write up about the difference: https://wpisnotwp.com/
39
WordPress is an open source application that can be installed and used on a 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.
40
A Software as a Service that uses the WordPress application -- 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.
41
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
Open to hackers without proper security… Thousands of themes and plugins to choose from… The learning curve can be steep…
43
Used by some really heavy hitters from blogs to news
Company, Global News, universities (UBC, BCIT), celebrities, musicians, technology firms, Fortune 500 companies. WP Showcase Page: https://wordpress.org/showcase/
44
Which of the following do you need to know as a WordPress developer?
45
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
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
48
WordPress can be installed on a “local” server or on a “live” server.
49
LOCAL SERVER A server on your computer that mimics a web server. Includes Apache or NGINX, MySQL, PHP. Examples:
MAMP WAMP Vagrant Local by Flywheel
LIVE SERVER A server on the web. Most hosting providers offer WP hosting these days. Recommendations:
PHP 7.3 or greater, MySQL 5.6 or greater HTTPS support
More: https://wordpress.org/about/requirements
50
from WordPress.org.
the “htdocs” or “www” folder then rename it.
through MAMP or WAMP.
51
and add the database name, username, and password to connect the files and database.
process.
52
Download the video tutorial showing how to install WordPress locally from the Program Files FTP server. 10-WordPress-Development / Video-Tutorials
WAMP
Windows only Current version: 3.2 Older versions: http://www.filehorse.com/download- wampserver-32/old-versions/
MAMP
Windows and Mac Current Windows version: 4.2 Current Mac version: 5.7 Older versions: https://www.mamp.info/en/downl
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
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
56
57
Download & extract the core files from WordPress.org.
58
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
DO NOT EDIT CORE FILES... EVER!! wp-admin folder wp-includes folder Most of the root files
Only edit these files & folders
60
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
Create a database by accessing phpMyAdmin through MAMP or WAMP. Access phpMyAdmin at: Windows: http://localhost/phpMyAdmin Mac: http://localhost:8888/phpMyAdmin
62
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
The character set is the first part before the
utf8mb4_unicode_ci utf8_general_ci latin1_swedish_ci
64
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
TL;DR…
databases locally.
66
67
Rename wp-config-sample.php to wp-config.php. Add the database name, username, and password.
68
MAMP WAMP
69
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
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
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
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.
If WordPress won’t upload files… edit the php.ini file to increase 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
74
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
Use the tutorial below to do the following:
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/general-settings
76
Use the tutorial below to do the following:
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/writing-and-reading-settings
77
Use the tutorial below to do the following:
comments based on your own preferences
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/discussion-settings
78
Use the tutorial below to do the following:
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/permalink-settings
79
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
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
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-wordpress https://www.linkedin.com/learning/wordpress-5-essential-training/posts-vs-pages
82
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
Organized by publishing date and can be sorted by
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
Unlike a Post, a Page does NOT…
default,
85
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 are used for time-based
Post would be a news article. Posts are generally things that need to be organized. Would the user want to see
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
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
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
Classic Editor Block Editor
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training/create-content
90
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-wordpress https://www.linkedin.com/learning/wordpress-5-essential-training/gutenberg-the-wordpress-block-editor
91
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
Create the Libraries and Museums post.
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training/create-and-edit-links
93
Edit the Libraries and Museums post.
Tutorials:
https://www.linkedin.com/learning/wordpress-5-essential-training/create-and-manage-blocks https://www.linkedin.com/learning/wordpress-5-essential-training/block-toolbar-and-properties-panel-4 https://www.linkedin.com/learning/wordpress-5-essential-training/the-image-block-3
94
Edit the Libraries and Museums post.
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training/change-block-type-3
95
Create the Visual Art post.
Embed, YouTube Embed. Tutorials:
https://www.linkedin.com/learning/wordpress-5-essential-training/other-image-blocks-2 https://www.linkedin.com/learning/wordpress-5-essential-training/embed-blocks
96
Create the Vancouver Politics post.
https://wp.bcitwebdeveloper.ca/vancity-demo/vancouver-politics/
Paragraph, Heading, More, Media & Text, Separator, Pullquote, Group, Columns, List, Button. (See next slide)
97
WordPress 5.5 added the Block Directory, accessible from the Block Editor. You will not need to install custom blocks to complete this post but you can see an example here:
https://make.wordpress.org/plugins/files/2020/07/block-directory.gif
(See next slide)
98
Tutorials:
https://www.linkedin.com/learning/wordpress-5-essential-training/text-blocks-2 https://www.linkedin.com/learning/wordpress-5-essential-training/media-and-text-layout-block https://www.linkedin.com/learning/wordpress-5-essential-training/group-block https://www.linkedin.com/learning/wordpress-5-essential-training/columns-block https://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.
99
Complete the following tasks:
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training/publish-update-and-delete-posts-and-pages
100
Complete the following tasks:
three blog posts.
and Cultural. Apply these Categories to the relevant posts.
Tutorials:
https://www.linkedin.com/learning/wordpress-5-essential-training/add-categories-and-tags-2 https://www.linkedin.com/learning/wordpress-5-essential-training/sidebar-the-difference-between-categories-and-tags
101
Complete the following tasks:
created posts.
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/advanced-content-management
102
Complete the following tasks:
for each of the three created posts.
Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training/add-a-featured-image-2
103
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
104
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.
105
Complete the following tasks:
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-pages https://www.linkedin.com/learning/wordpress-4-essential-training/creating-page-hierarchies
106
Edit the Homepage you created to do the following:
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
107
Use the WordPress Customizer to do the following:
rainy.png image.
your site to something you choose. Tutorials: (see next slide)
108
Tutorials:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/site-identity https://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.
109
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.
110
Create a main Menu for the site navigation:
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
111
If using the interface found under Appearance → Menus… ...you must toggle open Screen Options and check all available checkboxes.
See next slide
112
Set the Display Location:
Menu.
Add a Custom Link:
in a new tab.
113
Create a social media menu for the site:
Links.
114
If using the Customizer...
115
If using the Menu interface...
116
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.
117
Complete the following tasks:
theme, add widgets relevant to the site. Tutorial:
https://www.linkedin.com/learning/wordpress-5-essential-training-site-administration/widgets
118
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.
119
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-work https://www.linkedin.com/learning/wordpress-5-essential-training/create-and-add-reusable-blocks https://www.linkedin.com/learning/wordpress-5-essential-training/edit-reusable-blocks https://www.linkedin.com/learning/wordpress-5-essential-training/create-templates-with-reusable-blocks