Intro to WordPress

About You

Why do you want to learn WordPress?

Your name and background
Anything in particular you are hoping to learn today?

Objectives

To become familiar with the WordPress dashboard, plugins, themes, widgets and more!

Ask Questions!

Using your own WordPress install today?

Are you able to add posts and pages and change the theme and navigation to your site?

What we'll cover today

What WordPress is
How to build out a site with pages and posts
Plugins - how to find, install, and activate them
Widgets and Menus
Themes - how to find, install, preview, and activate them
Customizing themes
How to keep your site secure
More advanced installs
Administrative backend functionality
Resources, questions, and if there's time, some one-on-one help

But first...

let's learn how the web works!

What is WordPress?

Official description from WordPress.org

WordPress is web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.

WordPress is Popular

26.4% of all the websites use WordPress.

WordPress is the #1 content management system in the world (59.4% marketshare).

WordPress is

Free, open source, web-based software

WordPress core software is built by hundreds of community volunteers. People all around the word contribute to WordPress by either submitting bugfixes, testing, designing or writing code for the software.

WordPress is

A content management system

WordPress allows site owners to manage their site content via an easy-to-use admin dashboard.

WordPress.org vs. WordPress.com

WordPress.org - Web software used to build a website on a hosting account with a domain name. Sites can be built and modified using themes, plugins or custom code

WordPress.com - A free blogging service that allows people to create a blog hosted on WordPress.com's servers. Hosting is free (although there are some for-pay add-ons), theme choices are limited, plugins can not be installed and code can not be modified

Hosting a Wordpress Install

If you're selling to clients, we recommend a "managed" wordpress install
Pros: Hassle-free. This includes security, speed, WordPress updates, daily backups, website uptime, and scalability. WPEngine is top-notch, GoDaddy also has this option.
Cons: More expensive (starts at $30/month, often limits you to wordpress only
For a simple blog, we recommend shared wordpress hosting (what we're using today)
More about managed wordpress hosting
More about shared hosting

Exercise: Get logged into WP Admin

A Tour of the Front End

WordPress comes with the default theme Twenty Seventeen activated

A sample post on the home page.
A sample page
A sample comment
A sample tag line "Just another WordPress site"
A set of sidebar widgets

A Tour of the Backend Admin

Located at: yourdomain.com/wp-admin/

The admin is divided into 3 areas:

The top menu bar
The left-hand menu used to navigate to most admin functionality
The main content window where most admin functionality is performed

A Tour of the Backend Admin

Located at: yourdomain.com/wp-admin/

Tip: You can change what's displayed on an admin page by clicking on the "screen options" tab in the upper right corner.

Another Tip: Open the front end of your site in one browser tab and the backend in another so you can easily switch between the two as you make changes to your site.

Pages and Posts

Pages: Regular static website pages with content
Posts: Entries (like blog posts) that have a date, categories and tags assigned to them. They can be listed in a particular order (chronologically, alphabetically, etc.) and fed to other sites or blog readers via an RSS feed

Pages and Posts

Let's look at some examples!

Using the Content Editor

Visual and Text tabs: Toggle between WYSIWYG and code view
Add Media: Upload pictures and other files
Button Bar: Use formatting and display options
Embeds: Paste links to popular media services and they will automatically display on the page

Posts

Excerpt: Use the Read More button (display requires theme support)
Categories and Tags: Assign categories and tags to allow posts to be organized by subject

Tip

Use the bulk editor on the page or post list to make edits to multiple pages or posts at a time (like removing comments).

Exercise Time!

Setting Up Your Site

The Settings menu

General: Title, tagline, site address, date format, etc.
Writing: Post-related settings
Reading: Set site home page, # of posts, rss settings and search engine visibility
Discussion: Manage comment settings
Media: Make default image sizes and other media settings
Permalinks: Define the structure of site URLs

Exercise Time!

Change the name of your site
Change the "Front page" of your site to the sample page
Create a page called "blog" and set as your "Posts page"
Require comments to be approved by an administrator before they are posted
Set your timezone to "Los Angeles"
Change the permalink set-up to "Post Name"
Remove the "WordPress News" from the dashboard

Changing Site Appearance

The Appearance menu

Themes: Manage the current theme in use and other installed themes
Widgets: You can add content to your site sidebars or other "widgetized" areas using widgets
Menus: Manage Custom menus
Header: Manage header text and image
Background: Manage background color and image
Editor: Dangerous way to edit theme and plugin flies. This is disabled if you "harden" WordPress

Managing Menus

Appearance > Menus

Easily create and manage navigation menus

Create menus: Enter a menu name and click "Create Menu"
Add pages: Add existing pages, custom links or category pages
Order Pages: Drag and drop your pages menu items in the desired order. Indent pages to make them children of other pages
Assign Menu to Theme location: When the menu is ready, assign it to a theme location and click "Save Menu."
Manage Locations Tab: Assign menus to theme locations

Exercise Time!

Remove a few widgets and add some of your own text to the sidebar using a text widget
add a link in the text widget using my super handy trick for those who don't know HTML
Add a picture to your header
Change the color of your header text
Change the color of your background
Have one menu item link to google.com
Create a dropdown Menu
Have one menu item link to a category

Managing Comments

The Comments menu

View, approve, delete and mark comments as spam.

Managing Media

The Media menu

View all files that have been uploaded to the site via the content editor. Add, edit and delete files.

Managing Users

The Users menu

Manage existing users: Edit all user data or delete users

Removing an admin user (do this if the username is "admin")

Add new users: Assign new users to site
Your Profile: Edit your own profile settings

Managing Users

User roles

Users can be given certain levels of editing privileges.

Administrator: access to all the administration features within a single site
Editor: ability to publish and manage posts including the posts of other users
Author: ability to publish and manage their own posts
Contributor: ability to write and manage their own posts but cannot publish them
Subscriber: ability to only manage their profile

10 minute break!

What are Plugins?

Official description from WordPress.org

Plugins can extend WordPress to do almost anything you can imagine.

Plugins are Powerful

Plugins are used to add functionality to WordPress. Examples include ecommerce, SEO, forms, photo galleries, social media sharing, forums and much more!

Plugins are Often Free

Right now there are over 43,850 free plugins in the official WordPress Plugin Directory.

Managing Plugins

WordPress comes with 2 plugins:

Akismet: Protects your blog from comment and trackback spam. This plugin requires an Akismet key
Hello Dolly: Adds a random lyric from "Hello Dolly" to the upper right-hand corner of admin screen.

Managing Plugins

Activate/Deactivate: Turns plugins "on" and "off"
Edit: Ability to edit plugin files NOT RECOMMENDED
Delete: Delete deactivated plugins

Finding Plugins

Searching under Plugins > Add New
Browsing the WordPress Plugin Directory

3 Ways to Install Plugins

Clicking "Install Now" from "Install Plugins" search results
Download a plugin zip file and install it via the "Upload" link
Unzip the plugin files and upload it via FTP to the
/wp-content/plugins folder

Plugin Shortcodes

Plugins often use shortcodes to add content to a page or post.

For example, the plugin Contact Form 7 uses the shortcode [contact-form-7 id="105"] (the ID is the ID of the form) which allows you to add a form on a page or post.

Plugins

Security tip - Vet plugins first

Ratings: Read the plugin reviews
Maintenance: Check to see if the plugin has regular updates
Support: See if the plugin developers regularly answer support questions

Free Plugins that are Popular

Contact Form 7: Used to make simple contact forms
WordPress SEO by Yoast: SEO plugin for WordPress
Nextgen Gallery: An image gallery plugin that also has available add-on plugins
WooCommerce: Ecommerce plugin
Sucuri Free: Malware scanning and 1-click hardening

Plugin Demo

How to add a slideshow to your website using the Meta Slider plugin

Exercise Time!

Create a new admin user and remove the old one (attribute any posts to the new user)
Search for plugins via Plugins > Add New and try some
Browse the WordPress Plugins Directory, download one and install it using the "upload" link
Leave a comment on your neighbor's site (if they are using a temporary install)

Themes

Themes determine how a site looks and they also can determine its functionality. There are themes that can turn a WordPress site into an online store, an art portfolio, project management system and more.

Themes are

Often Free

Right now there are over 3,821 free themes in the official WordPress Themes Directory.

Managing Themes

Appearance > Themes

WordPress currently comes with 3 themes: Twenty Seventeen, Twenty Sixteen and Twenty Fifteen

Under Appearance > Themes is a list of all installed themes. The theme in use is labeled "Active."

Themes

Appearance > Themes

"Live Preview" before you activate or customize a theme

Click "Customize" under the current theme or "Live Preview" under an available theme to see how a new or modified theme will look before you commit to it.

Finding New Themes

Searching with the "Add New" button
Browsing the WordPress Themes Directory

3 Ways to Install a Theme

Install using the "Add New" button
Download a theme zip file and install it via the "Upload Theme" button
Unzip the theme files and upload it via FTP to the
/wp-content/themes folder (this is the way to upload purchased themes)

Exercise Time!

Some tasks to get you familiar with installing, previewing and activating themes

Use the live theme previewer to see how Twenty Sixteen will look on your site and try activating it
Search for themes via the "Add New" button and give one a try
Browse the WordPress Themes Directory, download one and install it using the "Upload Theme" button

Tweaking your theme: 3 ways

First way: the Editor

The editor's changes will be overwritten if you update your theme. We want to be able to update safely.
It's easy to break this
You *really* don't want any clients messing around in here

Exercise Time!

Let's turn our background red

Be sure the Twenty Seventeen theme is activated
Navigate to Appearance > Editor in your WPAdmin sidebar
The first thing you should see is a style.css

At the bottom of this file add this and then click update file:


              .site-content-contain {
                background-color: red;
              }

Check out your site, the background should be red

Tweaking your theme part 2: Adding CSS

Second way: Customize CSS

This way is update-safe and adds additional CSS to your site (not replacing it).
Under the Appearance tab, click Customize > Additional CSS

Add some new code:


                  .site-content-contain {
                    background-color: blue;
                  }

We recommend this method for small tweaks

Tweaking your theme part 3: Creating a child theme

What is a "child theme"?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme
A powerful, more advanced tool: you can change far more than just how it looks
But creating a basic child theme is very approachable
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php)

Next Steps

Create your own themes using Child Themes

Getting started with Child Themes

Let's create our own from the default theme

Make a new folder on your computer called "twentyseventeen-child"

Open this folder in your editor

Create two new empty files: "style.css" and "functions.php"

Style.css

In your new style.css file:

Add this with your information:


            /*
              Theme Name: [Your Theme Name]
              Description: The custom theme [Your Theme Name] using the parent theme Twenty Seventeen.
              Author: [You]
              Author URI: [Your URL]
              Template: twentyseventeen
              Version: 1
            */

In the same file, add this code directly after:


            .site-content-contain {
              background-color: green;
            }

Save this file

functions.php

In your new functions.php file:

Add this with your information:


  function mychildtheme_enqueue_styles() {
    $parent_style = 'twentyseventeen-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 )
    );
  }
  add_action( 'wp_enqueue_scripts', 'mychildtheme_enqueue_styles' );

Save this file

Upload

zip up this folder

In your WP admin go to Appearance > Themes > Add theme > Upload and upload your zip

Activate your theme

Security

Being popular means you're a target

It is important to take security seriously when running a site that uses a CMS.

Security

During install

Make your database table prefix unique. Don't use "wp_" or "wordpress_"
Create a new database user, don't use the default
Make your database user password strong.
Do not use "admin" as a username. "admin" used to be the default WordPress username. Use a unique username and a very strong Password

Security

After install: WordPress hardening

Take some code-level and sysadmin steps to "harden" WordPress

Securing wp-includes
Securing wp-config.php
Disable File Editing
And more

Or use a security plugin like Sucuri that performs "1-click hardening"

Security

If you do get hacked

Use a malware removal service.

Sucuri.net Reasonably priced WordPress security experts
WPEngine.com WordPress hosting that includes malware cleanup if needed

Installing WordPress

What WordPress needs to run on a remote host

A hosting account running PHP version 5.6 or greater and MySQL version 5.6 or greater
Software from WordPress.org or an install feature through a hosting account control panel
A domain name (or temporary URL provided by your host)

Installing WordPress

Control Panel Install

Manual install

What Is Needed For a Control Panel Install

Web host needs to offer it
Access to your hosting control panel

Installing WordPress

What Is Needed For a Manual Install

Access to your hosting control panel to create a database and database user
A SFTP Program. SFTP (or FTP) is the method used to upload and download files between a computer and a hosting account
A Web browser. Installation is performed step-by-step on a web browser

The Manual Install

A Quick tour

Detailed instructions are found here at http://codex.wordpress.org/Installing_WordPress

Access to your hosting control panel (cPanel) to create a database and database user

Create a database and database user

Be sure to check all of these boxes:

Download the latest WordPress version from wordpress.org

The files

The wpconfig.php file

Upload the WordPress files to the desired directory using an FTP (File Transfer Protocol) Program. FTP (or SFTP) is the method used to upload and download files between a computer and a hosting account

Installation is performed on your web browser by going to the URL where you uploaded the files.

WordPress Workflow

Developing locally

MAMP (Mac users)

WAMP (Windows users)

LAMP (Linux users)

Resources

Changing the URL of WordPress

When you have finished developing your site locally and are ready to move your site to the desired URL, you will want to read the following pages:
Moving WordPress

There is a lot of information about this. Here are a couple more good resources:

Migrating a WordPress Site From a Local Server to Production
Migrating WordPress Across Hosts, Servers and URLs

Resources

Changing the URL of WordPress

Another option for moving your WordPress site to another domain or host is to use the Backup Buddy plugin. This plugin is not free. You can also use it to easily backup and restore a WordPress site.

Resources

Attend a WordCamp

WordCamps are affordable, informal, community-organized WordPress conferences held all over the world. They are packed with workshops geared toward WordPress users, designers and developers.

central.wordcamp.org

Resources

wpbeginner: lots of great info for WordPress beginners!
Join the San Francisco WordPress Group: meetup.com/wordpress-sf/

Questions?

One-on-one help time

Feel free to pull me or a TA over to answer questions specific to your projects or regarding any issue not covered in class.

Intro to WordPress

About You

Why do you want to learn WordPress?

Objectives

Ask Questions!

Using your own WordPress install today?

What we'll cover today

But first...

let's learn how the web works!

What is WordPress?

Official description from WordPress.org

WordPress is Popular

WordPress is

Free, open source, web-based software

WordPress is

A content management system

WordPress.org vs. WordPress.com

Hosting a Wordpress Install

Exercise: Get logged into WP Admin

A Tour of the Front End

WordPress comes with the default theme Twenty Seventeen activated

A Tour of the Backend Admin

Located at: yourdomain.com/wp-admin/

A Tour of the Backend Admin

Located at: yourdomain.com/wp-admin/

Pages and Posts

Pages and Posts

Pages

Using the Content Editor

Posts

Tip

Exercise Time!

Create pages and posts for your site.

Setting Up Your Site

The Settings menu

Exercise Time!

Changing Site Appearance

The Appearance menu

Managing Menus

Appearance > Menus

Exercise Time!

Managing Comments

The Comments menu

Managing Media

The Media menu

Managing Users

The Users menu

Managing Users

User roles

10 minute break!

What are Plugins?

Official description from WordPress.org

Plugins are Powerful

Plugins are Often Free

Managing Plugins

Managing Plugins

Finding Plugins

3 Ways to Install Plugins

Plugin Shortcodes

Plugins

Security tip - Vet plugins first

Free Plugins that are Popular

Plugin Demo

Exercise Time!

Themes

Themes are

Often Free

Managing Themes

Appearance > Themes

Themes

Appearance > Themes

Finding New Themes

3 Ways to Install a Theme

Exercise Time!

Some tasks to get you familiar with installing, previewing and activating themes

Tweaking your theme: 3 ways

First way: the Editor

Exercise Time!

Let's turn our background red

Tweaking your theme part 2: Adding CSS