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. 51
Installing WordPress - Video (local server) Download the video tutorial showing how to install WordPress locally from the Program Files FTP server. 10-WordPress-Development / Video-Tutorials 52
Local Environment - MAMP vs. WAMP MAMP WAMP Windows and Mac Windows only Current Windows version: 4.2 Current version: 3.2 Current Mac version: 5.7 Older versions: Older versions: https://www.mamp.info/en/downl http://www.filehorse.com/download- oads/older-versions/ wampserver-32/old-versions/ 53
Local Environment - Super User 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 - Default Databases 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
Exercise - Installing WordPress (locally) Let’s install WordPress! 56
Step 1 - Download WordPress Download & extract the core files from WordPress.org. 57
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. 58
WordPress Core Files DO NOT EDIT CORE FILES... Only edit these files EVER!! & folders wp-admin folder wp-includes folder Most of the root files 59
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 . 60
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 61
Step 3 - Create a Database (cont’d) MAMP WAMP Username: 'root' Username: 'root' Password: 'root' Password: '' Create a database with Create a database with collation set to collation set to utf8mb4_unicode_ci . utf8mb4_unicode_ci . 62
Character Set & Collation 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 The character set is the first part before the underscore. For example: utf8mb4 _unicode_ci utf8 _general_ci latin1 _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
Step 4 - Edit wp-config.php Rename wp-config-sample.php to wp-config.php. Add the database name, username, and password. 67
Step 4 - Edit wp-config.php (cont’d) MAMP WAMP 68
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 69
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. 70
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 71
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. 72
Local Environment - Upload Sizes 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
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. 74
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 75
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 76
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 77
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 78
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 79
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. 80
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-wordpress https://www.linkedin.com/learning/wordpress-5-essential-training/posts-vs-pages 81
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/ 82
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. 83
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. 84
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/ 85
Posts vs. Pages Posts are used for time-based Pages are used for timeless and materials. On a news website a static materials. On a news website Post would be a news article. a Page would be the Contact or About page. Posts are generally things that need to be organized. Mostly macro level information about the overall site / people Would the user want to see behind the site. other content related to it? If yes, it is likely a post. Should it go to the menu? If yes, likely a page. Comments are on by default. Comments are off by default. 86
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 87
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. 88
Block Editor Interface Classic Editor Block Editor Tutorial: https://www.linkedin.com/learning/wordpress-5-essential-training/create-content 89
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-wordpress https://www.linkedin.com/learning/wordpress-5-essential-training/gutenberg-the-wordpress-block-editor 90
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/ 91
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 92
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-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 93
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 94
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-2 https://www.linkedin.com/learning/wordpress-5-essential-training/embed-blocks 95
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. (See next slide) 96
Add a Post - Vancouver Politics 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) 97
Add a Post - Vancouver Politics 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. 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-2 https://www.linkedin.com/learning/wordpress-5-essential-training/sidebar-the-difference-between-categories-and-tags 100
Recommend
More recommend
