Web Development with

Presented by:

Overview

• What is WordPress

• How it Works

• Updating WordPress

• Modifying Your Website

— Admin Overview

— Adding Users

— Posts-vs-Pages

— Editing Posts and Pages

— Formatting Text

— Adding Posts

— Writing Titles

— Adding Photos and PDFs

Overview of WordPress

What Is WordPress?

A free publishing platform that allows you to easily create content for the web.

WordPressWebsiteContent

WordPress powers over 20% of the Web

Why?• Free (but….. you need a server to host your website)

• Easy to use

• Open Source

• Don’t need to know code

• Control your own content

• SEO friendly

• Easy to get help

Difference Between WordPress.Com and WordPress.Org

WordPress.Com Vs WordPress.Com

Picture Credit: https://blog.rooof.com

Questions?

Web Design Trends• Clean, Minimal and Simple

• Flat Design

• Responsive Design

• User Experience

• Content is King

Live DemoWatch Me Build a Website

Live Demo List• The Dashboard

• Settings

• Post & Pages

• Posting Content

• Text, Links, Images, gallery and video

• Embedding Codes

• Widgets (Sidebar)

• Themes

• Plugins

!

• WordPress is an open source, free blogging tool and content management system (CMS) powered by PHP and MySQL

• Installed in your hosting space

• You can update your site from any computerthat has internet access

The number of Websites

(as of Feb 2014) using WordPress. That is almost 20% of ALL websites!

How Your Website WorksThe Internet• The Internet is made up of inter-connected servers, fancy computers,

that act like file cabinets. • Domain names are labels used to tell Internet browsers which hosting

space on the servers, or the location of your website, to look at. • Each hosting space contains files, folders and documents.

These files make up a website.

=

How Your Website WorksViewing Your Site

• A URL (domain name) is typed into an address bar of an internet browser.

• Code is retrieved from a hosting space, translated by the server, paired with information from a database.

• Displayed on an internet browser

code

server+

database

Ways to Modify Your Site

Create users

Edit Menus

Add Posts

Edit text

Add Pages

Place Images

Upload Files

Embed Videos

Let’s Get Started

http://www.yourdomain.com/wp-admin

Admin Anatomy

Admin Anatomy

Main Menu

• Only present when on an admin page• Allows you to navigate from one admin page to

another• Most of what you want to do lives here

Admin Anatomy

Shortcut Menu

• Present when you’re logged in• Displays on every page• Allows you to navigate quickly to do common tasks• Allows you to navigate from public to admin sides of site

Clicking on your site name will take you to the home page of your website

Admin Anatomy

Page Header

• Changes based on which page you’re on• Allows you to change page settings• Displays notifications about updates and uncompleted tasks• Shares the page you’re on

For example we’re currently on the “Dashboard” page

Admin Anatomy

Page Body

• Displays editing options on each page or section• Contains additional navigational elements• Each page has different editing options

Blue buttons are action buttons allowing you to permanently save or publish

Action Panel

Efficiently Yours

Each screen is modifiable

• Check the fields you would like to see in your editing screen

• Uncheck the fields you would like to ignore

Adding Users

Types of WordPress users

• Administrator - Somebody who has access to all the administration features

• Editor - Somebody who can publish posts, manage posts as well as manage other people's posts, etc

• Author - Somebody who can publish and manage their own posts

• Contributor - Somebody who can write and manage their posts but not publish posts

• Subscriber - Somebody who can read comments/comment/receive newsletters, etc

Add a User

Add a user

Choose a user level

Investigate Screen Options

PAGE

Posts -vs- Pages

is displayed on pages or posts for the public to view

POST

Text

Image

File

Link

Video

Information on your site

Posts -vs- Pages

Posts

• Timely information

• Modular format can be displayed on multiple pages

• Divided into categories

• Can not display a page within a post

• Longer URL

• Think blog entry orFacebook status update

Pages

• Static information

• Confined format can only be displayed on a page

• Divided by parent pages

• Can display one or multiple posts

• Short URL

• Think Word Document or PowerPoint slide

Pages

• Most places on navigation link to a page

• To edit posts on a page you edit the posts

• Organized by parent pagesPAGE

• Home • About• Contact• Services/Programs/Products• History• Location• Hours• Menu• Areas of Practice• Staff/Board• Sponsors

PAGE

PAGE

PAGE

Parent Pages

PAGE

PAGE

PAGE

Sub Pages

Page Example Links to other main pagesNavigation

• One large entry• No “read more” links• Listed on and highlighted in main navigation• Straight forward URL:

http://www.mayecreate.com/contact/

Page Specific Content

PAGE

Posts

• Grouped into categories and displayed on a page

PO

STP

OST

• Can be displayed on more than one page or in more than one category

PO

ST

• Staff or board members• Products• News and press releases• Blog entries• FAQ• Resources• Terminology• Job listings• Testimonials• Announcements• Events• Portfolio

Post Example

• Multiple short entries• Read more links

Post

• Not list in main navigation• Longer URL, usually with dates:

http://www.mayecreate.com/2010/02/trackbacks-and-pingbacks/

Page Specific Content

Still not sure about posts and pages?

That’s OK we can talk about it one-on-one.

Editing Pages/Posts

Quick Edit and Sorting Features

Editing a Page/Post

Visual vs HTML

Kitchen sink Preview changes

Change to draft

Revisions

Autosave!

Editing a Page/Post: Text Styles

• H1 is used for the title of the page and already applied for you

• Use the other styles in order of hierarchy to add organization and structure to your page

• H2, H3, H4, H5

• Search engines read the styles this way when reading your page, surprisingly people do too!

• Maintains consistency and professionalism

• Saves time!

Formatting Text

Applying Styles

Removing Styles

Pasting From Microsoft Word

Shift + Enter

Editing a Page/Post

• It won’t look the same from front to back

• Check early and check often

• If everything is bold, nothing is bold

• Don’t underline it looks like a link

• Shift+Enter

• Pasting from Microsoft Word

• Unformatting

Routine Checks Rules of Thumb Tricks

Adding a Post

How to get there (or anywhere really )

Look, Think, Click

Efficient Workspace Layouts, the art of drag and drop

Write a title that applies to your page or post so browsers and viewers can learn what’s on your page

Adding a Post: Writing Titles

Adding a Post: Writing Titles

Adding a Post: Writing Titles

Adding a Post

• Choose a category

– If you don’t it will choose the default

• Scheduling

– By scheduling posts to release in the future you can make your site appear regularly updated

– Lets Google know you’re actively adding to the site on a regular basis

• Read more link

Adding Links

• How to add a link

• Opening a link in a new window– PDF

– Other websites

• Photos can be used as links also

• What words to link– Stay away from “click here”

– Link words that represent the page you’re linking to

Adding a Post in Action

Write a title

Choosing a category

Publishing

Viewing on website

Add a link

Adding a Photo

• Can always make it smaller but making it bigger will make it blurry

• Add titles but don’t start with a number

• Add alt tags to describe the image

• Add captions to assist skimming, give meaning

• Use real photos when possible

• Can upload photos:

– In Media Library

– In the page or post (gallery)

Adding Photos and PDFs

Upload a photoName and add alt tags and captionsLinkingAlignmentSizingCroppingUploading PDFsModifying link target on PDFs

Questions?

Suggestions and Resources

Where To Get Themes

http://WordPress.org/themes

Where To Get Themes

http://themeforest.net/category/WordPress/nonprofit

Where To Get Plugins

http://WordPress.org/plugins

Where To Get Help • Google

• Youtube

• WordPress Support Forum http://WordPress.org/support

• WordPress Answers http://WordPress.stackexchange.com

• Boston WordPresshttp://www.meetup.com/boston-WordPress-meetup

• WordCampshttp://central.wordcamp.org

• Me

Suggestions• WordPress is easy.

• Creating content for your website is hard.

• Don’t spend too much time on WordPress until you have determined your website structure (sitemap) and have all your content ready (including graphics, photos and videos).

• Utilize WordPress (themes and plugins) to best communicate your website content to your target audience.

• Don’t let design (theme) dictate the content of your website.

Questions?

Thank YouEmail: anvith3@gmail.comFacebook: www.facebook.com/anvith3Website: www.webmastermotu.me