76
SARA QUINN / THE POYNTER INSTITUTE FOR MEDIA STUDIES Getting started with WordPress Wednesday, August 15, 2012

Quinn beginning wordpress_2012

Embed Size (px)

DESCRIPTION

Sara Quinn's notes on starting a wordpress site; presented at Poynter's Teachapalooza 2012.

Citation preview

Page 1: Quinn beginning wordpress_2012

SARA QUINN / THE POYNTER INSTITUTE FOR MEDIA STUDIES

Getting startedwith WordPress

Wednesday, August 15, 2012

Page 2: Quinn beginning wordpress_2012

Wordpress is not just a place to post updates.

Wednesday, August 15, 2012

Page 3: Quinn beginning wordpress_2012

… and pictures of your cat.

Wednesday, August 15, 2012

Page 4: Quinn beginning wordpress_2012

It can be an amazing content managment system.

Wednesday, August 15, 2012

Page 5: Quinn beginning wordpress_2012

You can develop it into a complex website.

Wednesday, August 15, 2012

Page 6: Quinn beginning wordpress_2012

And it’s one of the most well-documented pieces of software around.

Wednesday, August 15, 2012

Page 7: Quinn beginning wordpress_2012

There are tons of well-known sites powered by Wordpress.

h"p://en.wordpress.com/notable‐users/

Wednesday, August 15, 2012

Page 8: Quinn beginning wordpress_2012

And it takes just about 30 seconds to start up.

Wednesday, August 15, 2012

Page 9: Quinn beginning wordpress_2012

It’s theme-based.

Wednesday, August 15, 2012

Page 10: Quinn beginning wordpress_2012

You can change your design whenever you want.

Wednesday, August 15, 2012

Page 11: Quinn beginning wordpress_2012

You can change your design whenever you want.

And your content stays.

Wednesday, August 15, 2012

Page 12: Quinn beginning wordpress_2012

There are lots of themes to choose from.

Wednesday, August 15, 2012

Page 13: Quinn beginning wordpress_2012

Choosing your theme

http://wordpress.org/extend/themes/tag-filter/

Wednesday, August 15, 2012

Page 14: Quinn beginning wordpress_2012

Choosing your theme

http://themeforest.net/

Wednesday, August 15, 2012

Page 15: Quinn beginning wordpress_2012

Self-hosted:Not self-hosted:

Wednesday, August 15, 2012

Page 16: Quinn beginning wordpress_2012

Self-hosted:WordPress.org Offers lots of design options, customization.

You set this up on your own server.

You pay for the domain and hosting.

Not self-hosted:WordPress.com

Wednesday, August 15, 2012

Page 17: Quinn beginning wordpress_2012

Not self-hosted:WordPress.com A free blogging service.

Less control over design and customization.

But it’s FREE! Easy to use and back-endadministration is very similar to Wordpress.org.

Wednesday, August 15, 2012

Page 18: Quinn beginning wordpress_2012

Sign up!WordPress.com

http://wordpress.com/#my-blogs

Wednesday, August 15, 2012

Page 19: Quinn beginning wordpress_2012

Go to the dashboard

Wednesday, August 15, 2012

Page 20: Quinn beginning wordpress_2012

The back-end of your site.Where you publish content, manage commentsand change your settings.

Wednesday, August 15, 2012

Page 21: Quinn beginning wordpress_2012

Wednesday, August 15, 2012

Page 22: Quinn beginning wordpress_2012

This is where you set up everythingthat the outside world sees on your blog.

Wednesday, August 15, 2012

Page 23: Quinn beginning wordpress_2012

Take a quick peek at your blogby clicking on the title of your blog.

Wednesday, August 15, 2012

Page 24: Quinn beginning wordpress_2012

You will see a default template that youcan use or decide to alter.

Wednesday, August 15, 2012

Page 25: Quinn beginning wordpress_2012

Choosing your theme

Wednesday, August 15, 2012

Page 26: Quinn beginning wordpress_2012

Here’s where you turn away from WordPress!Get out a notebook.

Wednesday, August 15, 2012

Page 27: Quinn beginning wordpress_2012

I suggest you determine what you need to put on your site, before youactually select a theme.

Do you need a calendar?

Do you want a Twitter feed?

Do you want a list of your most recent posts in the right rail?

Wednesday, August 15, 2012

Page 28: Quinn beginning wordpress_2012

Will students be posting assignments?

What sort of commenting do you want?

Will you want a slide carousel?

Use video?

Display your Twitter Feed?

Portfolio samples of your own work?

Wednesday, August 15, 2012

Page 29: Quinn beginning wordpress_2012

Wednesday, August 15, 2012

Page 30: Quinn beginning wordpress_2012

Choosing your theme

Wednesday, August 15, 2012

Page 31: Quinn beginning wordpress_2012

Choosing your theme

Wednesday, August 15, 2012

Page 32: Quinn beginning wordpress_2012

You can preview your site with different themes.

Wednesday, August 15, 2012

Page 33: Quinn beginning wordpress_2012

You can preview your site with different themes.

Wednesday, August 15, 2012

Page 34: Quinn beginning wordpress_2012

Not all sites make use of the same widgets.Here, there’s no default calendar.

Wednesday, August 15, 2012

Page 35: Quinn beginning wordpress_2012

You’ll notice that your content jumps around,depending on the template you choose.

Wednesday, August 15, 2012

Page 36: Quinn beginning wordpress_2012

You’ll want to examine the type to determine how legible it is.

Wednesday, August 15, 2012

Page 37: Quinn beginning wordpress_2012

How’s the nav?

Wednesday, August 15, 2012

Page 38: Quinn beginning wordpress_2012

Can people easily find your pages?

Is there room for you to grow on the nav bar?

Do you need a dropdown menu?

Wednesday, August 15, 2012

Page 39: Quinn beginning wordpress_2012

Widgets: What are they?

Wednesday, August 15, 2012

Page 40: Quinn beginning wordpress_2012

Tools or content that you can add, arrange and remove from your blog.

Wednesday, August 15, 2012

Page 41: Quinn beginning wordpress_2012

Many themes that you might choose will already be “widgetized.”

In other words, they have code that sets up the areas that will accept widgets. (right rail, etc.)

Wednesday, August 15, 2012

Page 42: Quinn beginning wordpress_2012

Tools or content that you can add, arrange and remove from your blog.

Wednesday, August 15, 2012

Page 43: Quinn beginning wordpress_2012

Shop around for widgets that might be useful.

Wednesday, August 15, 2012

Page 44: Quinn beginning wordpress_2012

Many themes that you might choose will already be “widgetized.”

In other words, they have code that sets up the areas that will accept widgets. (right rail, etc.)

Wednesday, August 15, 2012

Page 45: Quinn beginning wordpress_2012

What are some sidebarwidgets that you mightwant to use?

Wednesday, August 15, 2012

Page 46: Quinn beginning wordpress_2012

Choosing your themeIt’s important to determine the features you want, in advance. “Measure twice, cut once.”

Wednesday, August 15, 2012

Page 47: Quinn beginning wordpress_2012

Choosing your themeThat way, you’ll cut the amount of customcoding you’ll have to do later.

Wednesday, August 15, 2012

Page 48: Quinn beginning wordpress_2012

So, if I choose this theme, and it doesn’t include areas that will accept widgets ... what to I have to do?

Wednesday, August 15, 2012

Page 49: Quinn beginning wordpress_2012

Let’s see what some of the code would look like if you wanted to add widget areas to your site.

Code alert!

Wednesday, August 15, 2012

Page 50: Quinn beginning wordpress_2012

Declare your widget-ized area.

The most common place for widgets is in the sidebar. So, in the sidebar.php file:

<!-- Static content could go above widgetized area. --> <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Widgets')) : ?> Content in here will ONLY show if there are no widgets active, or if the version of WordPress running doesn't support widgets. Otherwise, this area is where the widgets go, set via the Admin <?php endif; ?> <!-- Static content could go below widgetized area. -->

Wednesday, August 15, 2012

Page 51: Quinn beginning wordpress_2012

Activate your widget-ized area.This code would appear in yourfunctions.php file:

// activate widget area if (function_exists('register_sidebar')) { register_sidebar(array( 'name'=>'Sidebar Widgets', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>', )); }

Wednesday, August 15, 2012

Page 52: Quinn beginning wordpress_2012

What’s html?What’s css?

Wednesday, August 15, 2012

Page 53: Quinn beginning wordpress_2012

What’s html? structureWhat’s css?

Wednesday, August 15, 2012

Page 54: Quinn beginning wordpress_2012

What’s html? structureWhat’s css? style

Wednesday, August 15, 2012

Page 55: Quinn beginning wordpress_2012

Super duper functionality?There’s a beauty to WordPress, in thatthere are lots of WP developers.

And they take things pretty far.

Wednesday, August 15, 2012

Page 56: Quinn beginning wordpress_2012

Super duper functionality?Some themes integrate a photo-sharingservice such as Flickr; a statistical applicationlike Google Analytics or even a databaseinterface such as phpMyAdmin.

Wednesday, August 15, 2012

Page 57: Quinn beginning wordpress_2012

Super duper functionality?Some themes integrate a photo-sharingservice such as Flickr; a statistical applicationlike Google Analytics or even a databaseinterface such as phpMyAdmin.

There’s an easy new feature that allows you toadd sharing to Facebook, Tumblr, Twitter and more!

Wednesday, August 15, 2012

Page 58: Quinn beginning wordpress_2012

Where to find great themes?FREE! theme resources • WordPress.org Theme Library - http://digwp.com/u/20

• The Mighty Google - http://digwp.com/u/21

• Digging Into WordPress - can you guess the URL?

• Smashing Magazine - http://digwp.com/u/22

Wednesday, August 15, 2012

Page 59: Quinn beginning wordpress_2012

Where to find great themes?Places to buy premium themes • ThemeForest - http://digwp.com/u/385

• WooThemes - http://digwp.com/u/386

• ElegantThemes - http://digwp.com/u/387

• UpThemes - http://digwp.com/u/561

Wednesday, August 15, 2012

Page 60: Quinn beginning wordpress_2012

What are Plugins?Pieces of software that extend thefunctionality of WordPress.

Usually written by those lovable WordPress fanatics.

Wednesday, August 15, 2012

Page 61: Quinn beginning wordpress_2012

What are some of the best plugins?Art Direction http://digwp.com/u/24

This allows you to insert extra code (typically CSS or JavaScript) into specific pages or posts.

Wednesday, August 15, 2012

Page 62: Quinn beginning wordpress_2012

Art Direction http://digwp.com/u/24

It gives you complete stylistic and functionalcontrol over every post and page of your site.

Wednesday, August 15, 2012

Page 63: Quinn beginning wordpress_2012

All in One SEO Pack http://digwp.com/u/29

It automatically generates an appropriate metadescription tag for each post and page, based on their content.

Wednesday, August 15, 2012

Page 64: Quinn beginning wordpress_2012

Creating child themes

Wednesday, August 15, 2012

Page 65: Quinn beginning wordpress_2012

A child theme is based on a theme that you choose.

ADVANTAGE: This allows you to override the style theme (color, typefaces, etc) without overriding the base theme (widgets, header style, elements, etc).

Wednesday, August 15, 2012

Page 66: Quinn beginning wordpress_2012

Creating a child theme is simple.

Just create a folder (named as you wish) in your wp-content/themes directory.

Within that folder, place a simple style.css file.

Wednesday, August 15, 2012

Page 67: Quinn beginning wordpress_2012

Here’s an example:Theme Name: My Cool Child Theme Theme URI: http://digwp.com/ Description: Child Theme for Digging Into WordPress Author: Chris Coyier Author URI: http://chriscoyier.net/ Template: DigWP Version: 2.0 */ @import url("../digWP/style.css");

Wednesday, August 15, 2012

Page 68: Quinn beginning wordpress_2012

Here’s an example:Theme Name: My Cool Child Theme Theme URI: http://digwp.com/ Description: Child Theme for Digging Into WordPress Author: Chris Coyier Author URI: http://chriscoyier.net/ Template: DigWP Version: 2.0 */ @import url("../digWP/style.css");

The most important line there is the “Template: DigWP” line, which references the folder of the parent theme. The last line imports the stylesheet from that parent theme.

That is optional, but very common, as the whole point is to start with the parent theme as a base and overwrite/add to it. Anything you write in the CSS file below this will overwrite anything from the parent theme.

For example, if the link color is red in the parent (i.e., a { color: red; }), but you declare it green (i.e., a { color: green; }), your declaration in the child theme will be applied even though it uses the exact same selector, because it is declared after the parent style. No need for any fancy !important rules or more specific selectors.

Wednesday, August 15, 2012

Page 69: Quinn beginning wordpress_2012

Styling your theme

Wednesday, August 15, 2012

Page 70: Quinn beginning wordpress_2012

In any WordPress theme, the style.css is required.

WordPress won’t even recognize a folder in your themes folder unless it includes this file.

Wednesday, August 15, 2012

Page 71: Quinn beginning wordpress_2012

To reset or not?

Wednesday, August 15, 2012

Page 72: Quinn beginning wordpress_2012

When you pick up code, you might get unpredictable defaults that you’ll want to reset.

For example: Firefox and Explorer have a different default padding amount around <body>. This can cause problems later.

Wednesday, August 15, 2012

Page 73: Quinn beginning wordpress_2012

We suggest that you put a reset at the beginning of your child theme code css.

You will probably be changing the typefaces and colors, etc. But this will catch a lot of little things that you might not be thinking of.

Wednesday, August 15, 2012

Page 74: Quinn beginning wordpress_2012

Popular CSS Resets:

• Eric Meyer’s Reset Reloaded From the man himself: http://digwp.com/u/142

• YUI (Yahoo User Interface) Reset CSS http://digwp.com/u/143

• Star Selector Reset Looks like this: * { margin: 0; padding: 0; }

Remember that you will put this at the top of your css file, so it will clear out the mess.

Wednesday, August 15, 2012

Page 75: Quinn beginning wordpress_2012

“When I am working on a problem, I never think about beauty. I only think about how to solve the problem. …”

– RICHARD BUCKMINSTER FULLER

Wednesday, August 15, 2012

Page 76: Quinn beginning wordpress_2012

“When I am working on a problem, I never think about beauty. I only think about how to solve the problem. But when I have finished, if the solution isn’t beautiful, I know it is wrong.”

– RICHARD BUCKMINSTER FULLER

Wednesday, August 15, 2012