Set up your computer for today

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


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

www.google.com/chrome

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!

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

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.
  • I started ellell & co. with Laura Eagin. We build sites for our clients using WordPress. We ♥ it and so do they!
  • Twitter: @leeanndrees
  • E-mail: leeann@ellell.co

Let's meet the class!

Tell us your name


Have you used WordPress before?


What was the first concert you attended?

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 25% 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
  • Collaboration: Multiple users on one WordPress site
  • Collecting feedback: Internally or through public comments
  • Centralization: Treat it like a news center for all your social media feeds.

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.
  • 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.

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

Some of our favorites are:

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.
one click install

Installing WordPress: Manually

We're not doing this in class today, but here are the basic steps should you ever need them:
  • 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


Detailed instructions: codex.wordpress.org/Installing_WordPress WordPress calls this the "Famous 5-minute Install," which might be a less than completely accurate. :)

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.


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.



GUI = Graphical User Interface. Pronounced "gooey"

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

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!

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

WPUniversity Cheat Sheet
Special thanks to WPUniversity!

How to publish a page

publishing a page in WordPress

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.


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

visual editor

The Text Editor: Pure HTML. Makes code nerds really happy!

text editor

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

publishing a page in WordPress

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!

high five cat

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

Standalone pages show the page content.

Pages vs. Posts. vs. Widgets

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

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

your theme determines your available menu locations;
you can also add a custom menu widget to widget areas


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



Image from Laura Eagin's WordCamp talk 13 WordPress Mistakes I've Made

Free Plugins

Some of our personal favorites:

Premium Plugins

Some of our personal favorites:

Themes

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


CSS + a few extra features

Anatomy of a website

Example of site content Example of site structure Example of site with CSS

Theme Files


More info: Anatomy of a Theme

So Many Themes

Free 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

Reviews of the theme

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

    Child Theme





    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.

    cute robot

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



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

    Come Back Soon!

    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!

    Confused? Let us help!

    leeann@ellell.co || @leeanndrees
    detroit@girldevelopit.com || @gdiDet