Intro to WordPress
Ebonie Butler
@metalandcoffee_
Angela Andrews
@scooterphoenix
We'll be doing Pair Programming!
Partner up with someone and share a laptop
and lets learn together.
Windows Users
Let's boot into the bios
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
Your Development Environment
- Local By Flywheel
- Google Chrome
- Code Editor with Syntax Highlighting
Mac users: Add Home to Toolbar
What is Local by Flywheel
- Local WordPress Hosting Platform
- Easy install and setup
- Flexible environments. NGINX or Apache
Installing Local by Flywheel on Windows
Installing Local by Flywheel on Mac
What is WordPress
- Free and Open Source Content Management System (CMS)
- Easy and powerful
- The backbone of over 60 million websites
Some Popular
WordPress Sites
- Beyonce
- Disney
- New York Times
- Mozilla
- Mercedes Benz
- Tech Crunch
- So many more...
Let's check out our new local site!
Front End Tour
Tour of Backend Admin
3 areas
- Admin Bar / Tool Bar
- Main Navigation Menu
- Main Content Window
Left Head Menu Walkthrough
- Settings
- Appearance
- Customizer
- Pages & Posts
- Comments
- Media
- Plugins
- Users
- Tools
Exercise Time!
- Change site title and tagline.
- Adjust time zone
- Change image sizes
- Install & activate plugin Which Template Am I
- Add 3 new pages - Home, About, Blog
- Create navigation menu
- Add/remove widgets from sidebar area
- Add 3 new posts and add image to each post
- Create 3 post categories and assign to posts
Time to talk about WordPress themes!
What is a theme?
WordPress Themes are files that work together to create the design and functionality of a WordPress site.
Accessing themes in the WP-admin dashboard
WordPress comes with 3 themes pre-installed: Twenty Fifteen, Twenty Sixteen and Twenty Seventeen. The current activated theme by default is Twenty Seventeen.
How to shop for themes
- Searching with the "Add New" button
- Browsing the WordPress Themes Directory
- Searching for other theme resources on the web
(i.e. Theme Forest, Elegant Themes)
How to install themes
- Install from the "Add Themes" page in dashboard
- Download zip file and install via "Upload Theme" link
-
Add Theme files directly to /wp-content/themes folder
Exercise Time!
- Explore different themes
- Activate the TwentyFifteen Theme
- See what's changed on your front-end 🎉🎊
A closer look at themes...
File and Folder Structure
wp-admin and wp-includes folders contain core code that should never be touched.
Website customizations reside in the wp-content folder
Where do theme files live?
-
wp-content
-
themes
-
twentyfifteen
-
twentyseventeen
-
twentysixteen
-
-
The Theme Files
Not all theme directories look the same!
BUT at the very least, a theme must have a:
- style.css (for presentation)
- index.php (for structure)
- functions.php
Resource: WordPress Template Hierarchy
I found a theme but what if...
- I don't like the background color
- The font size is too big
- I don't like the sidebar
Let's build a child theme then!
What is a child theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.
With a child theme...
- you can override (not overwrite) styles that you want to change.
- you can even add new functionality that doesn't exist in the parent theme (i.e. a new template for a page or register a new navigation menu)
At the very least, a child theme must have a:
- style.css (for presentation)
- functions.php
Child themes live in the theme directory as well!
Let's get started!
Open your editor
Navigate to folder where your website lives.
- Check site path on Flywheel dashboard
- Go back to editor.
- Navigate to that folder from within the editor and open it so that it appears on the sidebar.
Step 1: Create folder in themes directory
- In the editor sidebar, navigate to themes directory.
- Right-click on the themes folder and select "New Folder"
- Naming convention for a child theme is:
[parent-theme]-child
Step 2: Create style.css file in child theme directory
- In the editor sidebar, right-click on the folder you just created and select "New File"
- Once the new file is open - on the toolbar, click "File" -> "Save"
- Name to new file style.css
Step 3: Add stylesheet header to style.css
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
*/
That's it! Let's activate our new theme and check out the front end!
Wait - that doesn't look right. What's wrong?
We didn't import the parent theme's style.css yet!
Step 4: Create a new file called functions.php and enqueue the parent & child styles
<?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' );
Step 5: Check out the front end!
Not working? Where to look!
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!
NOW WE CAN MAKE IT OUR OWN.
Designing in the browser
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!
Step 1: Identify what you don't like and play around.
- Enable mouse inspector to select elements by clicking on them.
- View Styles & Computed tab to see what styles are applied.
-
Having trouble finding something? Move up or down the HTML DOM tree to find what you're looking for.
Step 2: Once satisfied, copy your changes over to your style.css file!
Let's walk through...
- Add underline to sidebar widget titles
- Make author thumbnails circular
- Change color of website footer
- Make images on posts zoom in on hover
Exercise Time!
Create a dark version of the twentyfifteen theme using your child theme!
Check out this resource for great color palettes!
See codeland.ebonie.me example.
That's the end :)
Codeland WP Workshop
By Ebonie Butler
Codeland WP Workshop
- 781