Set up your computer for today

Set up your computer for today

If you haven't yet, please navigate to https://bitnami.com/stack/wordpress/installer and install WordPress 4.4.2-1 on your laptop.

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

Follow along with the slides: tinyurl.com/GDIdetWP

Join Our Slack Group!

You can chat, ask questions, and keep up with fellow GDI members between classes.

Slack works with its own app, or in your web browser.

Sign up!

There's a channel called #introwordpress, where you're welcome to post questions, links, etc. related to class today.

Welcome!

Meet Your Instructor

Leeann Drees

Let's meet the class!

Tell us your name

Have you used WordPress before?

What's your favorite thing to do in the SPRINGTIME?!

WordPress

Slides

http://tinyurl.com/GDIdetWP

WordPress

What is WordPress?

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.
• Simplicity: No need to touch code unless you want to
• Collaborate: Multiple users on one WordPress site
• Collect feedback: Internally or through public comments
• Centralize: Treat it like a news center for all your social media feeds.

Examples

• Time Magazine
• Smashing Magazine
• Jay-Z
• Joy the Baker
• Spacehack
• Tilda.com
• Validation Center
• Burtek Enterprises

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.
• Your site will have ads, until you pay to remove them.
• Your blog will be part of a built-in network.
• *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 self-hosted, wordpress.org sites in our class today.

Many features are available on both platforms.

Hosting

Web hosting: A home for the files that make up your website.

About $10-15/month

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

Some of our favorites are:

• Bluehost
• Dreamhost
• Liquid Web
• A2Hosting

Domain

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

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 from WordPress.org
• Create a MySQL database on your hosting account
• Edit 4 lines in wp-config.php
• Upload the WP software to your hosting via FTP
• Browse to your new site and run install.php

Local WordPress Instances

Today we'll be working with local installations of WordPress.

Local installations live on your computer, not on the web.

Install WordPress Locally

If you haven't already, complete a local installation by visiting https://bitnami.com/stack/wordpress/installer and following the instructions to install the latest version of WordPress on your machine.

Video Instructions

STUCK? Raise your hand!

DONE? Take a break!

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.

Logging in

To administer your website, you'll always need to log in:

On the web: http://yourdomain.com/wp-admin

Locally:

• In Bitnami manager, click "Go to Application"
• Click "Access Bitnami WordPress Stack"
• Add /wp-admin to the end of the local URL in your browser

example: http://localhost:8080/wordpress/wp-admin

The WordPress Dashboard

Let's develop it!

Visit your WordPress installation's dashboard

Configure Basic Settings

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

Configure Basic Settings

Users / Your Profile

Settings / General

Settings / Reading

Settings / Permalinks

How to publish a page

Let's try it!

Create a new page

Give it a fun 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

Ok, let's publish!

Create More Pages

Let's practice our new skills + fill in our websites by adding a few more new pages!

Let's publish a post

Before we publish

Add tags

Choose a category

Choose a featured image

Assign a format?

Publish!

You're now a blogger

Give your neighbor a high five!

Create More Posts

Let's add some more posts so we'll have more content to work with.

Feel free to experiment with categories, tags, and post formats!

Pages

vs

Posts

vs

Widgets

Pages vs. Posts. vs. Widgets

Pages vs. Posts. vs. Widgets

To use a page or a post? That is the question!

• Pages typically serve as the backbone of your site.
  • Though you can edit them, they're generally static, standard info
  • Common pages:
    • About
    • Contact
    • Team
• Posts can be used lots of ways depending on the kind of site you're building, but are generally for more time-sensitive updates

Pages are Timeless; Posts are Timely

Widgets

Widgets are dynamic content areas.

Widgets

Widgets are often in the footer, sidebar.

Your theme determines where you can add widgets to your site.

Add & edit them: Appearance > Widgets

Drag, drop, save.

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

Add & Edit: Appearance > Menus

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!

Add & Edit: Dashboard > Plugins

We can also find more detailed plugin listings at wordpress.org/plugins

Free Plugins

Some of our personal favorites:

• Broken Link Checker
• Galleria
• Under Construction
• Password Protected
• Sucuri Security

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?

Theme Reviews and Support

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

Common Questions

Can I migrate my content?

There is a handy Import / Export feature in WordPress

Take your wordpress.com site to .org or vice versa

Bring your Blogger, Tumblr, Livejournal or other RSS feed in.

In the Dashboard, visit Tools > Export and Tools > Import

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.

What about comments?

By default pages and posts can receive viewer comments

It's easy to turn this feature off in Settings / Discussion.

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.

My WordPress Site is all set up! Now what?

1. Congratulations!

My WordPress Site is all set up! Now what?

2. Keep up on maintenance:

• It's important to update your installation of WordPress, your plugins, and your themes when new version are released.
• WordPress will prompt you to do this whenever you log in.
• Make a back-up first!

My WordPress Site is all set up! Now what?

3. Get involved in the WordPress Community:

• Attend WordPress Meetups and WordCamps!
• There are WordPress-centric blogs (naturally), podcasts, Twitter accounts, Facebook groups, and more — join, follow, & engage!
• Build a plugin or a theme.
• Make WordPress!

Resources

• The WordPress Codex is your new best friend. Bookmark it. Search it. Edit it. Love it.
• Codex: Getting Started with WordPress
• Codex: WordPress Lessons
• WordPress.tv
• WPUniversity
• Zoe Rooney's blog

There's much more out there! If you find something extra awesome, tweet it to me. :)

Upcoming Girl Develop It - Detroit Events!

• 2/27: Intro to UX (User Experience)
• 2/27: Intro to Search Engine Optimization
• 2/28: Code & Tea
• 3/5 & 3/6: Advanced WordPress with PHP

Watch our Meetup group for more great events!

Be sure to follow GDI on Twitter (@GDIdet) and Facebook for all the latest classes, events, and ways to get involved!

Questions?

We're here to help!

leeann@girldevelopit.com Twitter: @leeanndreesdetroit@girldevelopit.com Twitter: @gdiDet