Intro to WordPress
Installation Happy Hour

Kristi Smythe | @kdezigns99 | #GDIA2WP

WordPress Installation

What are the Options?

  1. Free DesktopServer: Local [on your computer] WP site creation prior to public launch on host server
  2. Hosting Control Panel: on yourLiveSite.com
  3. Manual WP Install: via FTP to your yourLiveSite.com

WP Local Install
DesktopServer

Download, Extract and Install DesktopServer

Launch DesktopServer

DesktopServer launch interface

Install WordPress in DesktopServer

DesktopServer WordPress installation

Setup Your Site in DesktopServer

DesktopServer WordPress installation

Setup Your Site in DesktopServer

DesktopServer WordPress site settings

WordPress Installation

On your Hosted Domain


Login to your Hosting Control Panel

In your Control Panel Interface

Find and Click the W app icon -> then click 'Install'

Enter Your Installation Settings:

In Directory: remove wp (blank for Home install)

Enter your username (replace admin)

Click Install

Note: Control Panels vary so we'll help you now

WP Manual Installation

  1. In your Control Panel: Open DB -> MyPHPAdmin
  2. Create your wp_databasename and user
  3. Download and extract WP 3.9.2
  4. Set up wp-config.php
  5. Upload the WP 3.9.2 files via FTP
  6. Run the Install Script

How to Install WP via FTP

Intro to WordPress
Workshop

Kristi Smythe | @kdezigns99 | #GDIA2WP

Welcome!

Girl Develop It is here to empower and assist women interested in getting into and advancing in the tech industry through affordable and accessible programs.

Some "rules"

  • We are here for you!
  • Every question is important.
  • Help each other.
  • Have fun!

Sponsors!

Upcoming Events

WordCamp Ann Arbor
1-Day Conference

October 4 @ The Michigan League

All Day | 911 N. University Ave

2014.annarbor.wordcamp.org | Tickets - $12

Upcoming Events

$: echo "hello, command line"
#an introduction

Tuesday 9/9 @ Atomic Object

6:30pm   |   206 S. Fifth Ave #200

Upcoming Events

Lightening Talks
JavaScript

Wednesday 9/17 @ The Forge by Pillar

6:30pm   |   1327 Jones Dr.

Upcoming Events

Getting Sassy With CSS
A Sass Workshop

Tues. 9/23 & Thur. 9/25 @ Nutshell

6:00pm   |   212 S. 5th Ave

Community Events

  • A2 Ruby Brigade - Component Based Architecture
    Tuesday 8/26 @ Atomic Object
  • WordPress A2 - Lessons Learned Launching a Premium Plugin
    Wednesday 8/27 @ Room 2001 LSA Building
  • GDG A3 - Android TV
    Thursday 8/28 @ Arbormoon
  • Craftsman Guild - Docker
    Tuesday 9/2 @ Atomic Object
  • AACS - Patentability of Software
    Wednesday 9/3 @ Atomic Object
  • Mobile Monday - Wearable Platforms
    Wednesday 9/3 @ SPARK
  • SEM.js - Assemble.io
    Monday 9/8 @ Nutshell
  • GDI Detroit - Intro to OOCSS
    Wednesday 9/10 @ AO Detroit
  • Duo Tech Talks - Modern Security Eng. Organizations
    Friday 9/12 @ Duo Security
  • A2 New Tech - Monthly Meetup
    Tuesday 9/16 @ Law School, South Hall, Room 1225
  • Plus soooo many more we couldn't fit here...

Intro to WordPress
Session 1

Kristi Smythe | @kdezigns99 | #GDIA2WP

What we're building today:

Your first AWESOME WordPress Website!

Why WordPress?

  • Speed: Build a site quickly with little or no budget
  • Collaborate: Multiple users on one WordPress site
  • Engage: Comments, Social Media Links & "Feeds"
  • Monetize: with Advertising, Affiliate Marketing, or an eCommerce Store (with Plugins for WP)

About Me - Kristi Smythe

Certified eCommerce Specialist since 2004

Multi-Channel Marketing, SEO, Google Analytics

Custom WordPress and Shopping Cart
Development and Support

Sales and Lead Gen Optimization

Cloud Hosting with Private Git or Subversion Repos

Lifelong Learning Enthusiast!

Meet the team!

What is your name?

What is your 140-character bio?

What is the topic or name of your
[new WordPress] site?

Let's Dive In!

Your WordPress Dashboard

Login with your uname and pw

Update WordPress to the latest version

Check the top nav bar for more updates

Select 'Updates' to access updates interface

Run all of your Updates

Next step: Security Checkup!

WordPress Security - Important!

Avoid Dashboard login from Public WiFi!

Check for and run WordPress updates regularly

In Dashboard -> Open Users

If uname is admin - create a new user, delete admin

Does your password qualify as 'Strong'?

[Pro Tip:] SSL Certificate protects
user login info during transmission

WordPress Security -> wp-login

Let's install our first Plugin

The default WP login page is wp-login.php

We're going to install a Plugin to alter this

In Dashboard -> Open Plugins

Click 'Add New' at the top

Enter 'rename wp-login' in the Search box -> Search Plugins

click 'Install Now'...[installing]...then 'Activate Plugin'

WordPress Security -> Permalinks

Activation automagic opens Settings -> Permalinks

First change: from 'Default' to 'Post name'

Under Optional -> Rename wp-login.php

Enter something unique

'Save Changes'

Check out your new Dashboard url!

Now Let's Explore
Customize Themes

Open Appearance -> Themes

Twenty Fourteen is the Active Theme

(no worries, we'll find more great free Themes later!)

You can Activate one of the other pre-loaded Themes

Click your Customize Button

Theme 'Customize' Interface

Expand Site Title and Tagline - enter your info

Experiment with Colors, Header Image etc.

We'll skip 'Static Front Page' and revisit this later

New feature: Widgets are in the Customize menu!

Widgets are drag-and-drop

Click Save to make the changes

It's Demo time!

Dashboard & View Site

@Left side of your Dashboard top Nav Bar

Click your site Name

Then right-click 'View Site' in the dropdown

Select 'Open in new Tab'

Personal preference - [2 tab toggle] or [in same tab]

ON! 2 Posts and Pages!

What's the Dif??

Let's start with Pages

Pages: content = quick and easy access for visitors

'Static' page - term refers to Navigation

Pages: can contain interactive content and media

Let's Create our First Page!

We'll start with our About page

Select Pages -> Add New

Enter 'About' in the Page Title

Add some text about you, your company, or site

Link: Lorem Placeholder Text Tool for Us Web Devs


Now Let's Experiment with

Visual v Text, Save Draft, Preview, Publish,

and other Page options while we're here

Copy your About content into Notepad or Text edit. We're going to use this again.

Let's Setup Our Main Nav

Open Appearance -> Menus

Enter 'Main Navigation' in Menu Name

Click 'Create Menu'

Check √'Automatically add new...'

Check √ 'Top primary menu'

Now Click 'Save Menu'

More info on creating Menus in your Dashboard

Now Let's Create a Few Posts!

Posts Navigation: Based on Categories

Order of Appearance: Is by posting date

1st Post:

Copy 'About' content into a new 'About' Post

2nd Post:

Create another post with Lorem title and content

Posts->Add New->Enter title->Paste Content-> Publish

View your site

Clean up and Design Time!

GoTo: Posts->All Posts->Hover Title->Select Edit


Create some Categories!

Assign your Posts to Categories


Add Tags: Based on topic

Add Featured Image: It's Demo/Assist time!

Edit Your About Post:
change the title/content to repurpose this post

Edit Your Lorem placeholder:
leave as is or change and repurpose

Create more Posts and Pages!

Q&A

#Posts and #Pages
What's the difference?

What do you like best about WP so far?

Assistance Time & Extra Credit!

Hop into Appearance->Themes->Add New
Install 2-4 new Themes -> you like =D

Activate one of them

View what you're creating in different Themes!

Session 1: Resource Links

How to Install WP with DesktopServer

How to Install WP via FTP

Lorem Placeholder Text Tool

WordPress Security Tips from A2 Hosting

How to Create Navigation in Appearance -> Menus

Session 2: Sneek Peek

Theme Customization!

Tuning the Look and Feel

Widgets!

What they do and where

Plugins!

Discover awesomeness to power up your site

Play with Some CODE!

Yes! We're going to dive under the hood!

How to Publish with DesktopServer

Using the DesktopServer Plugin and your Hosting Control Panel

You're awesome!

Go Girl, Develop It!

See you Wednesday for Session 2!

Thanks to Pillar Technology!!

Intro to WordPress
Session 2

Kristi Smythe | @kdezigns99 | #GDIA2WP

Clarification and Review

DesktopServer WordPress Local

Clarification and Review

Launch Desktop Server

Mac users: Enter your mac pw if needed

Clarification and Review

Explore Sites Index Page

Clarification and Review

Hosted Server WordPress Public

Clarification and Review

Your improved security login path

Remember! Bookmark! Add to your notes!

Example:

mySite.dev/newWord [.dev in Desktop Server]

mySite.com/newWord [Public Hosting Server]

Login to Your Dashboard

Exploring the Settings Menu
  • General: Title, tagline, site address, date format
  • 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!

Dashboard and Settings Menu

At the top: Expand 'Screen Options'

Optional Settings:

  • Require users to register before posting a comment
  • Require comments to be approved by admin
  • Reduce "Large size" images to 960 (faster load)

Practice time!

Sidebar Content Organization

Appearance > Widgets
  • Remove a widget
  • Add more Widgets
  • Expand and customize a Widget
  • Drag and Drop Widget order

Content Organization

Page or a Post?
  • A Restaurant review
  • About us
  • Your travel journal
  • A news announcement
  • Terms and Conditions
  • Our Services
  • One of your portfolio pieces
  • Mission statement

Pages: Content Editor

Create Interesting Pages!
  • Visual and Text tabs: Toggle between WYSIWYG and code view
  • Add Media Upload pictures and other files
  • Button Bar Use formatting and display options
  • (In Visual: Find your Toolbar Toggle)

  • Embeds Paste links to popular media services and they will automatically display on the page

The Pages Interface

Demo & Practice time!
Open Pages > Add New

Expand 'Screen Options'

Note:

In the Options Menu:

You have display options for all pages

Remove the check next to comments - Easy!

Create some new pages!

The Pages Interface

Demo & Practice time!
  • Permalink: Edit your page name in the URL
  • Revisions: View and restore previous versions of the page
  • Custom Fields: Additional fields (display requires theme support)
  • Discussion: Turn comments on or off for this page
  • Comments: Displays current page comments
  • Slug: Manage the name of the page slug

The Pages Interface

Edit and Quick Edit
Hover and select Edit

Expand 'Screen Options'

Hover and select Quick Edit

Expand 'Screen Options'

Compare and Experiment

Pages: Options Interface

Edit and Quick Edit
  • Publish Change publish status and visibility settings and view revisions
  • Page Attributes: Assign a page "parent", choose template and sort order
  • Featured Image: Assign an image to page (requires theme support)

Pages: Content Editor

More great options!
  • Excerpt Determine an excerpt for a post (display requires theme support)
  • Send Trackbacks: More information on trackbacks
  • Format: Choose between several post formats (display requires theme support)
  • Categories and Tags: Assign categories and tags to allow posts to be organized by subject

Organizing Content

*** Useful Tip ***

Use the bulk editor on the Page or Post list interface to simultaneously edit multiple pages or posts
Example: removing comments

Menu Organization

Appearance > Menus (make sure you Save!)
  • Add Pages: Add existing pages, custom links or category pages
  • Order Pages: Drag and drop in the desired order. Indent to make 'children' of other pages
  • Links: Create a menu item with an external or resource link
  • Categories: Add a Post Category to your main navigation
  • Manage Locations Tab: Organize menus to theme locations

Comments

Quick access to:
View, Approve, Delete and Mark as Spam.

Media Menu

Media > Library
contains all of the media files you've uploaded

Add, Edit, Delete in the Media Menu

Users

What are User Roles?

Users editing privileges.

  • Administrator: access to all administration features
  • Editor: publish and manage posts including posts from other users
  • Author: publish and manage own posts
  • Contributor: write and manage own posts, publish requires approval
  • Subscriber: can only manage their profile

The Power of Plugins

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

WordPress includes 2 plugins:

  • Akismet: Protects your site from comment and trackback spam. *Note: requires an Akismet key and monthly subscription fee.
  • Hello Dolly: Adds a random lyric from "Hello Dolly" to the upper right-hand corner of admin screen.

Plugin Management

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

Find and Add Plugins

  • Plugins > Add New
  • In the Search Box: Enter a feature you want to add to your site

    Try a Plugin by clicking 'Install Now'

  • Search the WordPress Plugin Directory
  • Download and install via the 'Upload' link

Plugin Use Tip

Shortcodes

Shortcodes can be used to add content to your page or post

Example: Contact Form 7 generates a unique shortcode similar to [contact-form-7 id="105"] that you'll copy and paste into your Contact page.

Plugin Quality Check

** Tips ***
  • Ratings* And read the plugin reviews
  • Maintenance* Check to see if the plugin has recent updates
  • Support* Does the developer regularly answer support questions?

Plugins Install and Activate

Practice time!

Example search ideas:

sidebar login     social media sharing     SEO     forms     photo galleries     ecommerce     discussion forums

Publishing Your Site

on a Hosted Server

How to instructions for DesktopServer Premium

Free Alternative:

  1. Install WordPress on your hosted domain
  2. Export your Local WordPress Site MySQL Database
  3. Import the .sql into your hosted WP Database
  4. FTP your wp-content directory to hosted domain

We can help you with these steps

Questions?

And

One-on-one help time!

Flag us over if you want assistance or have questions about what we've covered in class

Wrap Up^

Continue Your WordPress Adventure!

Check out Theme Frameworks
  • Genesis: empowers you to quickly and easily build and design incredible websites with WordPress.
  • Thesis: Web design you can customize from the comfort of your WordPress dashboard
  • WooThemes Canvas: A WordPress theme with tools to change almost every element of your layout and style

Wrap Up^

Local WordPress Resources

Wrap Up^

WordCamp Ann Arbor

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

Join us! at WordCamp Ann Arbor
on October 4, 2014.

Tickets are $12 for the full day!

Twitter: @WordPressA2

Intro to WordPress
Workshop

Kristi Smythe | @kdezigns99 | #GDIA2WP