intro-to-wordpress

Set up your computer for today

Wifi Network: atomic-detroit-public

Password: atomicpublic

We recommend that you install Google Chrome, if you haven't already.

www.google.com/chrome

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

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

Meet Your Instructor

Laura Eagin

2002: Started working as a graphic designer. Print only, please and thank you.
2005: Customized my snazzy MySpace profile
2008: Was paid to update client websites. They had no idea I didn't know what I was doing.
2010: Went solo. Launched my 40th custom WordPress website. Felt like a surgeon.
Twitter: @chooLaura
E-mail: LauraEagin@gmail.com

Meet Your Instructors

Leeann Drees

Discovered WordPress as a user, blogging for a non-profit — my initial impression was not good!
A few years later, my web design & development mentor strongly encouraged me to take another look at WordPress. This time it won me over.
Today I use WordPress to create websites for small businesses, artists, & entrepreneurs. My clients ♥ it!
Twitter: @leeanndrees
E-mail: leeann.drees@gmail.com

Let's meet the class!

Tell us your name

What is your favorite Olympic Sport?

Source

WordPress

Slides

http://gdidetroit.com/wordpress/slides

WordPress

What is WordPress - Nuts & Bolts

Installing WordPress

The Dashboard

Publish our own Pages & Posts

Widgets, Menus, & Plugins

Themes

Questions

What is WordPress?

An open source blogging tool and content management system.
WordPress was created in 2003.
Powers 20% of the web & 66% of CMS sites.
Constantly being improved. Free.Source: W3techs.com

Why do we use WordPress?

Speed: Build a site quickly with little or no budget.
Collaborate: Multiple users on one WordPress site
Collect feedback: Internally or through public comments
Centralize: Treat it like a news center. Aggregate "feeds" in one location, social media too.

Examples

WordPress Showcase

WordPress.com

vs.

WordPress.org

WordPress.com

WordPress.com is "free*"
- Similar to Blogger, Tumblr, TypePad etc.
They host your files.
By default your domain name will be: YourName.WordPress.com
Customization options are extremely limited.
*Many premium features. $$

WordPress.com Add Ons

Self Hosted : WordPress.org

WordPress is free! Download at WordPress.org
To run this software, the files need to be hosted online.
You pay for domain and hosting
The sky's the limit with your self-hosted WP site!

We'll focus on wordpress.org in our class today.

Though, many features are available on both platforms.

Domain

You purchase your domain name.
Costs about $10-15/year
Domain name gives an address to your files.

Hosting

Web hosting. About $10-15/month

There are really a lot of good hosts to choose from.

Read reviews: http://www.whoishostingthis.com/compare/wordpress/

Some of our favorites are:

Domain name

+

Hosting

+

WordPress Installed on Hosting

Installing WordPress: The Easy Way

Most web hosting companies offer a simple, "one-click" WordPress installation.

Installing WordPress: Manually

- Download the latest version of WordPress
- Create a MySQL database
- Edit 4 lines in wp-config.php
- Upload the WP software via FTP
- Browse to your new site and run install.php

Detailed instructions: codex.wordpress.org/Installing_WordPress

Setting up MySQL Database

Edit wp-config-sample.php

                
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');

/** MySQL database username */
define('DB_USER', 'username_here');

/** MySQL database password */
define('DB_PASSWORD', 'password_here');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

save the file and rename it to wp-config.php

Last step

Browse to http://mysite.com/wp-admin/install.php

Detailed instructions: codex.wordpress.org/Installing_WordPress

What is FTP?

"File Transfer Protocol"
A tool to move files between my computer and server
Popular FTP Clients: FileZilla and Cyberduck
FTP must be set up first. Look for it in CPanel.

Let's try it!

If you have hosting, install WordPress on your hosting if you haven't yet. We'll help out if you get stuck!

If you don't have hosting, log in to your assigned temporary WordPress installation:

http://gdidetroit.com/wordpressfeb/YourFirstName/wp-admin

Username: Student

Password: Detroit

Finally, Log in to your Dashboard.

Hint: /wp-admin

Behind the scenes

How does WordPress actually work?

Databases are ugly.

WordPress is easy.

Databases simply store data and retrieve it easily.

WordPress gives you a nice GUI, a way to interact with your database content.

GUI = Graphical User Interface. Pronounced "gooey"

The WordPress Dashboard

The WordPress dashboard is the first screen you see when you log in to administration area of your site.

From the dashboard you can access pages, media, site settings, plugins... everything!

Link to my dashboard

Configure Basic Settings

The first thing to take care of is our configuring settings!

Configure Basic Settings

Settings / General

Settings / Reading

Settings / Permalinks

WPUniversity Cheat Sheet Handout Special thanks to WPUniversity!

How to publish a page

The Visual Editor: What you see is close to what you get.

The Text Editor: Makes code nerds really happy!

Let's try it!

Create a new page

Give it your name as the title

Write three paragraphs of text (or lorem ipsum?)

Add at least one image to your page

Preview it!

Take it up a level!

Turn some text into a link.

Style headings : H1, H2, H3

Italicize and bold some text.

Before we publish

Preview our page.

Add a featured image?

Page attributes: Parent, Template, Order

Check the "slug" or URL

Posts

Widgets

Pages vs. Posts. vs. Widgets

Some pages show lists of posts. Typically your Blog page, or sometimes your Home page

Pages vs. Posts. vs. Widgets

Standalone pages do not show a list of posts, but show the page content.

Widgets

Widgets are dynamic content areas.

Widgets

Widgets are often in the footer, sidebar.

Add & edit them: Sidebar / Appearance / Widgets

Drag, drop, save.

Let's try it

Add the "Recent Posts" widget to your sidebar

Edit that widget's settings as you'd like

Next up: we'll publish some posts.

Let's publish a post

Before we publish

Add tags

Choose a category

Choose a featured image

You're now a blogger

Give your neighbor a high five!

Menus

In order to navigate the site, we set up a menu.

We can make multiple menus.

Common menu locations: main menu, sidebar menu, footer menu

Dashboard / Menus

Let's try it.

Create two menus and add pages to each. Save.

Notice where the menus appear on your site.

Plugins

A piece of software that you add on to your site
Gives us advanced features
Helps us manage our site better
Many plugins are free.
You can even build your own plugin!

Let's go to the Dashboard / plugins

Free Plugins

Some of our personal favorites:

Premium Plugins

Some of our personal favorites:

Akismet*
BackupBuddy
WooCommerce
Gravity Forms*Free for personal use.

Themes

A theme is a set of files that style your site's content.

CSS + a few extra features

Anatomy of a website

Theme Files

So Many Themes

Free themes:

Default pre-loaded themes
Wordpress.org/themes

Commercial themes:

WooThemes
iThemes
The Theme Foundry
StudioPress
etc...

So Many Themes

Basic things to look for:

Basic theme structure and content areas
Is anything broken?
Is it responsive?
Did it load slowly?
Is it well supported?
What do others say about it?

Changing Themes

Install it.

"Live Preview" it.

Activate it

Find a theme you like!

We recommend searching wordpress.org themes, but the internet is your oyster.

Remember:

Basic theme structure and content areas
Is anything broken?
Is it responsive?
Did it load slowly?
Is it well supported?
What do others say about it?

No Theme is Perfect. Customize!

Two Ways:

Built-in theme options Child themes

Built In Theme Options

Child Themes

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme Child themes allow you to modify or add to the functionality of that parent theme safely. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes. Source & more info: codex.wordpress.org/Child_Themes

Parent Theme

Canvas by Woothemes

Child Theme

Another great example from the same parent theme.

How to Create a Child Theme

This is all you need: Inside your WordPress "themes" folder, create a new folder with the name of your child theme.

Child Themes

This new folder needs to hold one file: style.css This code goes at the beginning of style.css:

                
                /*
                 Theme Name:     Twenty Thirteen Child
                 Theme URI:      http://example.com/twenty-thirteen-child/
                 Description:    Twenty Thirteen Child Theme
                 Author:         John Doe
                 Author URI:     http://example.com
                 Template:       twentythirteen
                 Version:        1.0.0
                */

                @import url("../twentythirteen/style.css");

                /* Theme customization starts here */

This stylesheet is included after the parent theme's and its styles will therefore override them.

Common Questions

about WordPress

Can I move my Blog?

Can I import my old Blog?

Yes!Tools – Import/Export

Should I be concerned about my site's security?

Many WordPress attacks are carried out autonomously by malicious software bots.

Sure he looks cute...

What the bad robots do:

Brute Force Attacks – They try to log in.
WP Core Vulnerabilities – They know what's wrong with your version of WP.
Bad Plugins – They inject code into parts of your site.
They watch your files – Permissions, unsecure FTP.

Learn more: Hardening WordPress

What about comments?

By default pages and posts can receive viewer comments

It's easy to turn this feature off.

You choose how you'd like to manage comments:

Only members can post
Only approved comments are published
All comments are immediately published but can be deleted later.

Questions?

We're here to help!

lauraeagin@gmail.com Twitter: @choolauraleeann.drees@gmail.com Twitter: @leeanndrees

Intro to WordPress ~ Girl Develop It Detroit ~

Set up your computer for today

gdidetroit

Set up your computer for today

1 3 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();