47
Quick and Easy WordPress.com Presented by Ben Pollock

How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Embed Size (px)

Citation preview

Page 1: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Quick and Easy WordPress.comPresented by Ben Pollock

Page 2: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

What we’re talking about. Croquet.And what do you want in your site. Create a site map (it’s an outline).

Page 3: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Site maps are found on many websites. Often there’s link at the bottom of a site. The more you plan like this the better your site will be, sooner.

Page 4: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

But the roughest of rough sketches will be just fine for a site map, and planning.

Page 5: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Our second special guest, on ‘Setting Website Goals’: Moving

viewer actions, keeping their emotions in mind

Page 6: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

If you don’t have a WordPress.com account, something like this is what you’ll see. Click “Get Started.” This year, it guides you in 6 steps.

Page 7: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

In contrast, here is WordPress.org’s home page.

Page 8: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Let’s step to a browser and see the steps to open a WordPress.COM account -- “live.”

Page 9: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

So you move to the Dashboard. Control everything from here. Psst, a secret: it’s the URL then /wp-admin .

Page 10: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here is the Dashboard as seen on WordPress.org. From here you control everything. webaddress.com/wp-admin works here, too. The dashboard gets a new look every year but the components stay the same.

Page 11: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Start with a template, called a Theme in WordPress. For the demo, I’ve chosen the Twenty Sixteen theme. (It may not be the best theme for you; there’s lots of choices.) Now let’s make the theme unique.

Page 12: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

This is from the WordPress photo menu, but let’s make this unique. This is quick, but the Customizer is quicker. But seeing the steps is important.

Page 13: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Click Browse then choose a picture off your computer. Click Open then click Upload. It may take a half-minute to upload, depending on your connection and the density or resolution of your image.

Page 14: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

If you haven’t Photoshopped the image to fit the dimension listed, you can crop it yourself in the WordPress header editor. (Easiest to do this on a computer, not a tablet or a phone.)

Page 15: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here is what the World Wide Web will see. Your picture.WordPress has a starter blog post with filler words.

Page 16: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here is, or will be, the listing of static Pages you put on your website. The All Pages can look different from these grays. Take a breath -- I am -- this is the heart of the talk: Creation tips using this first Page.

Page 17: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The About page comes with filler words. Consider keeping the About page, with your data of course, and not rename it, either.

Page 18: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The previous was an edit Page window. This one is for a fresh Page. Note “Attributes” on the right sidebar. The Add New Post otherwise is similar. That second line of icons = Kitchen Sink

Page 19: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

This is the new Add Post window. The Kitchen Sink button, at far right, adds another line of options. On the left are menus of options of things you can do to your post. Note “Preview,” “Save Draft,” “Publish.”

Page 20: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Likewise, the “add” or “edit” builders for Posts and Pages are nearly the same in WordPress.org.

When it’s time, you can switch the site contents from .com to .org in short order, Tools -> Export

Page 21: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

It’s smart to to draft in NotePad, SimpleText, TextEdit etc. ... or MSWord.Select and Copy your original, then Paste in box. WordPress now cleans out the coding

in Word docs so there’s no @&$!%# surprises from hidden HTML. Last, press that bottom-right button, Insert. ... From here, you can type, spellcheck or revise, in the main window.

Page 22: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Earlier, I inserted my image for the header. The process is similar for inserting into the body of a page or post.

Click on the Add Media button where it says Upload/Insert, to get the new window.

Page 23: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Now, fill in some of the fields. Title is internal. Alternate Text can be read when the mouse hovers over the image. Captions are optional, but if you want one, put it in that box. Also, the caption is the perfect place for a credit/source. None, Left, Center, Right placement. “None” and “Center” will not tuck into the copy but be above. Size. All of these can be modified later, if it doesn’t look like you wanted.

Page 24: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

I chose “left” and the copy wraps around. Note the caption and spacing. The theme governs these, called “padding,” “border,” “margin.”

Page 25: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The hyperlinks, or “link,” maybe the best feature of reading other people’s stuff on the Web!To get this window, click on the Insert/Edit Link button. It looks like a chain link. Cancel? Broken link icon.

Page 26: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The URL must have the http:// or https://. The title now is filled in automatically with your highlighted word or phrase. Important: Always check “Open link in a new window/tab” so your readers don’t lose your site!

Page 27: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The theme governs the looks of your linked phrase, before and after it’s clicked. Bold &/or underline &/or color. In .org, designer can burrow into the code to change. But as long as it’s clear, big deal?

Page 28: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here’s the hyperlink destination. At the top, note this site forms a new tab, because you checked “Open in a New Window/Tab.” When your reader is done with the USCA, he can return to Croquet Fan easily.

Page 29: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Boldface and italics are easy. Select the word or phrase then hit that B or I button. The U underline button is on the Kitchen Sink line. It’s time to introduce html code. Brace yourselves.

Page 30: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Click “HTML” from “Visual.” Code side also called “Text.” Note angle irons, the slash. This is html format language. The code in <> is a command. The slash ends it. No <bold> <ital>? Strong = bold. Em = italics, short for “emphasis.”

Page 31: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

You may want to section off your piece with headlines. In html and WordPress, they go from 1 for the biggest down to 6. Like <em>, headlines look like <h2>What, there are rules?</h2>

Page 32: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

In any website, WordPress or not, only one Headline 1 <h1> per page or post. Search engines key on H1!Generally the next level of headline will be an H2, then H3 etc. But in different themes the H’s might vary – centered or left, italics or not, etc. Try out each, H2 – H6. This may be grounds to find another theme.

Page 33: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Other Pages are added, under the header. A “child-page,” Equipment, is under Rules. This top-horizontal area in WordPress is called a Menu. Widgets go in the sidebar or footer area. Usually!

Page 34: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

In the middle right, see Page Attributes. Click on the field below “Parent.” I chose the Page “Rules of the Game” to be the parent.

Page 35: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

This makes the “child-page,” Equipment, subordinate to Rules. You won’t see the Equipment button except when your cursor flows over Rules of the Game.

Page 36: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Creating posts -- the writing, plus inserting of images and links -- is the same as in pages. Note Categories. Category folders keep you organized ... and also help the reader find related material.

Page 37: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here are three categories. I’ll fill the first two, leaving the “Busy-ness” for the future. Because it is an empty category, it won’t be seen.

Page 38: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here are posts I’ve added so later you’ll see how this website’s going to look.

Page 39: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Here’s the Croquet Fan blog all set up.Wait, there’s more! Let’s make this look -- and be -- a website.

Page 40: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

For a traditional website, not a blog-first one, WordPress has a couple of intermediate steps.First, create a new static Page. Title it “Blog,” “News,” “Updates,” etc. to tell readers this is where to find blog-like newsy time-stamped items. Here, “Croquet News.”

The rest stays blank - no writing no pictures. Click Publish.

Page 41: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Head to Dashboard -> Settings -> Reading. The Front Page Displays indicates the WordPress default of blog comprising the opening page of your website, “Your Latest Posts.” That’s about to change.

Page 42: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The About page often works as a home or “landing” page. Many people revise the About into a welcome letter etc. But this demo will create a store site, to show how your business or nonprofit can have a helpful, professional looking website. Select “Croquet News,” that blank page, for “Posts page.”

Page 43: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

There it is. A home page for a website not a blog. Oh, the blog is up there in the horizontal Menu -- “Croquet News.”

Page 44: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

The reader clicks on the static Page “Croquet News,” and sees the latest dynamic Post. The blog can be accessed on the right, “Recent Posts.”

Page 45: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

This is how you play croquet, the WordPress.com way.

Page 46: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Our third special guest, discussing‘Working in WordPress.ORG’

Page 47: How-to WordPress 101 Fayetteville WordCamp 2016 bpollock

Quick and Easy WordPress.comPresented by Ben Pollock