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

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 :)