Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS A Day – also early release
- Carter – early release?
- Web Dev with Mr. Cronin – check email
9:40 Attendance
9:45 Themes and Creating Themes with WordPress
Child Themes are themes that inherit the functionality and styling of another theme, called the parent theme. Making child themes are the recommended way of modifying an existing theme. Basically if you want to modify a theme, you should make a child of it first.
There are thousands of WordPress themes Theme Forest some are free and some you pay for. Some make good child themes but not all of them.
When a child theme modifies another theme, that theme it modifieds is called the parent theme. WordPress ships with some built in themes. The most recent is twenty-twenty-one. The WordPress built in themes are well coded, reliable and compatible with most plug-ins. They also come with the most support because they have been well tested.
When you make a child theme from a parent, you can modify the CSS. If you make modifications through a child theme, updates to the parent theme will not affect the custom styles you create. However, if you make custom changes to the parent theme, updates made to the parent may affect your changes. That is why it is best practice to use a child theme when customizing your WordPress site.
Today we are going create and activate a Child Theme. We’ll have to do a bit of PHP coding. This will be the most complex part of today’s lesson. So we’ll do it together – it should go smoothly. We’ll be working with ATOM as our code editor.
Activity: Setting up for a Child Theme. First, let’s preview all of our WordPress files in ATOM to see what we are working with. Then we will:
- make a theme folder for our child theme
- make a style.css file and paste the following code in that file (found in the theme editor in your dashboard)
/*
Theme Name: Twenty Twenty Child
Theme URI: http://example.com/twenty-twenty-child/
Description: Twenty Twenty Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentytwenty
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwentychild
The following information is required:
Theme Name – needs to be unique to your theme
Template – the name of the parent theme directory. The parent theme in our example is the Twenty
Twenty One theme, so the Template will be twentytwentyone. You may be working with a different theme,
so adjust accordingly.
Add remaining information as applicable. The only required child theme file is style.css, but fu
nctions.php is necessary to enqueue styles correctly (below).
Theme customization starts here.....
*/You’ll notice from the code I supplied above that there are some prompts we want to fill out. I marked them in red. Specifically the theme name, theme uri, author and template names.
Our final step is to enqueue our stylesheet. Enqueue is a way to say that we are going to add our child’s theme stylesheet to our queue of available stylesheets so that when our site loads, it can also load our custom CSS. We’ll do this by modifying the PHP in the functions.php file.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentytwenty-style' for the Twenty Twenty theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}If you navigate to Appearance in your dashboard and refresh the page, you should see your Child Theme listed.
Let’s activate our Child Themes and make some changes.
- Adding Custom Font – Problems when adding to Parent vs Child (header.php)
- Custom 404 page w/responsive image (404.php)
- Add Name to Footer with Copyright (footer.php)
- Make blog post, set feature image make border rounded with a shadow (styles.css)
We can also update our screen grab for our new template. Name your screengrab or image screenshot.png and place in your child theme’s folder.
10:35 Mask Break
10:45 Wave Accessibility Overview
WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.
WCAG publishes and regularly updates a set of guidelines. Link to guidelines.
WAVE (web accessibility evaluation tool) provides a nice browser extension to evaluate web accessibility issues directly in your browser. Go ahead and install.
Activity: Evaluate Local Sites:
Questions to consider:
What types of errors are you observing most often?
How can these errors be fixed?
Run the site through website.grader and get a big picture view
11:30 WordPress – Practice – Let’s Start a Food Truck
I love food trucks. Pioneer Cafe are some friends of mine and they too love food trucks, so much so that they bought one themselves. They used to have a food truck and were very successful. So successful that they opened up their own restaurant.
I miss their food truck though. Let’s pretend the are running it again and let’s build a small sample WordPress site using some of their content.
Create a New WordPress Site (launch Local) Name it Pioneer Food Truck
Activity: Create a Quick WordPress Site for Pioneer Cafe’s New Food Truck
- Landing Page
- About Us Page
- Menu Page
- Blog Page – with at least one post about our next event or latest dish
- Calendar Page
The Client has very little money to spend. The Client is looking for:
- Top Menu Navigation (Home, About Us, Menu, Pioneer Blog)
- Add byline “Serving the Burlington & Lake Champlain Area”
- Use of Logo and provided images
- Experiment with colors or themes that better fit with Pioneer
- Contact information in the footer
- Link to social media accounts
- Add Social Media menu for Facebook(facebook.com/pioneerfoodtruck)
- and Instagram (@pioneerfoodvt)
- (you many use as much content from the site as you like) The goal is practice using WordPress
- Add a calendar page / configure and set up a calendar plugin (you will have to shop plugins)
- Add some fake dates /events for the food truck to show client how calendar works
- Media Files for downloading and importing into the media library
This Project is Due on Wednesday, January 12th.
12:15 Lunch
12:45 Wireframe Work Time & Code Sprint
1:10 Mask Break
1:20 Production Time and Guided Support
Vermont Engine Repair – Redesign with Framework
Wireframe desktop version Senior Portfolio
Pioneer Food truck Website using WordPress