Ebonie Butler
@metalandcoffee_
Angela Andrews
@scooterphoenix
We'll be doing Pair Programming!
Partner up with someone and share a laptop
and lets learn together.
While the screen is dark, during boot up, before the splash screen, press a function key to get to the bios
Dell: F2
HP: F10
Lenovo: F1 or F2
Sony: F2 or F3
Mac users: Add Home to Toolbar
3 areas
WordPress Themes are files that work together to create the design and functionality of a WordPress site.
WordPress comes with 3 themes pre-installed: Twenty Fifteen, Twenty Sixteen and Twenty Seventeen. The current activated theme by default is Twenty Seventeen.
Add Theme files directly to /wp-content/themes folder
wp-content
themes
twentyfifteen
twentyseventeen
twentysixteen
Resource: WordPress Template Hierarchy
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.
Child themes live in the theme directory as well!
The style.css file must provide details about the theme in the form of comments
/*
Theme Name: TwentyFifteen Child
Description: TwentyFifteen Child Theme
Author: Ebonie Butler
Template: twentyfifteen
Version: 1.0.0
*/
We didn't import the parent theme's style.css yet!
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
JavaScript Console in the browser
Chrome Mac shortcut: Command + Option + I
Chrome Windows shortcut: F12 or Control + Shift + I
PHP Errors...
Will appear on your frontend due to how Local by Flywheel's configuration!
The most efficient way to make and view small changes in real-time before committing to them in your CSS file.
Also, eliminates the need to constantly refresh the page after each change!
Open up Chrome dev tools and let's get started!
Having trouble finding something? Move up or down the HTML DOM tree to find what you're looking for.
Check out this resource for great color palettes!
See codeland.ebonie.me example.