Learn to Use WordPress in a Day

LEARN TO USE WORDPRESS IN A DAY!Build rundogrun.co from scratch

© Daniel Sweet, Robert Lilly & Daniel Portis-Cathers 2015 All Rights Reserved

Saturday, October 3, 15

4a


ADMIN AREA - TOOLBAR, POSTS, MEDIA, APPEARANCE, PLUGINS1. Toolbar - Here you can access the front page of your site, view

comments if there are any and create new posts, media or users. You can also change your profile and log out.

2. Dashboard - this is ONE PAGE in the admin area. I rarely use this page - although you can set it up to perform a variety of

functions or show links to commonly used sections of the back-end/admin area. [Try opening and closing modules by clicking

their title bars, also drag modules around to rearrange them].3. Two tabs in the upper right corner

a. Screen Options allow us to toggle areas of the interface. You’ll see this on every admin page. If you don’t see something that you think should be showing up, check Screen Options to find out if that module is activated. Screen options change depending on the

page.

b. Help provides instructions for using different modules on the current Admin page. It also gives a link to the codex and

wordpress.org support forums.

4. Remaining menu items

a. Posts (clicking on the menu title always takes you to the first submenu item)b. Media - This is where images and other media can be stored. Your hosting plan will determine what size of files you can upload.

Usually, you will host everything but images somewhere else (using services like youtube or Vimeo for video, or Amazon S3 for audio).

c. Appearance - This is where you can really go to town with changing appearance. More later!d. Plugins - This is the heart and soul of where you individualize functionality on your site.

4b

4c4d

32

1


1b


ADMIN AREA - ACTIVATE TOOLBAR ON FRONT END

1. Users - This is where you, as site administrator, can add or delete users and edit your profile. As part of a multi-site you do not, by

default, have as much administrative power as you will on your own sites.a. [Hover over “Users” and click on “Your Profile” in the submenu]. (You should see Profile page). You can fill out personal info

here as well as some settings that effect how WP works for you. We will only address the item labeled “Toolbar”.b. [Click the checkbox next to “Show Toolbar when viewing site”]

c. [Scroll to bottom of page and click on “Update Profile”]d. [Switch Tabs] to see the Front End of your site and refresh the page. To refresh try pressing F5. (Otherwise, try command/ctrl

R). You should see a black Toolbar at the top of your site. Now [switch back to Tab #1 (the back end)]2. Tools - Not much to see here unless you want to import or export.

1d

1a

© Daniel Sweet, Robert Lilly & Daniel Portis-Cathers 2015 All Rights ReservedSaturday, October 3, 15


CREATE - PAGES

1. [Click on Pages menu]

2. Delete “Sample Page” and create our own pages. [Hover over “Sample Page” and click “Trash”]. 3. [Add a new page by clicking “Add New”] next to the word “Pages” at the top.

a. [Give it a title - “Home”]b. [Click “Publish”] (the blue button) in the Publish module to the right.

4. Repeat this process for the following pages:a. About

b. Servicesc. Blog

d. Contact5. [Click on the “All Pages” menu option] on the left. Verify that you have five pages: About, Blog, Contact, Home, Services

1

2

3

3b

3a

5



SET - FRONT PAGE, BLOG, SEARCH ENGINE VISIBILITY

1. [Hover over the Settings menu] on the left. [Click on the “Reading” option].

2. Under “Front page displays” a. [click the radio button called “A static page”]

b. [select the “Front Page” dropdown and choose “Home”]c. [select the “Posts Page” dropdown and choose “Blog”]

3. Under “Search Engine Visibility” [click the box beside “Discourage search engines from indexing this site”]4. [Save Changes!]

5. [Switch Tabs] to see the Front End of your site and [refresh the page]. To refresh try pressing F5. (Otherwise, try command/ctrl R). Your front page should now have a big “Home” page title.

1

2b

4

2c

2a

3



SET - PERMALINKS

[Switch back to tab #1] - the back end or Admin area

1. [Click on Permalinks] in the menu on the left2. [Click the radio button called “Post name”] This makes the URL more human readable and search engine friendly. This selection is

used more frequently when there is not a big blog focus. Otherwise, use “Day and name”3. [Click “Save Changes”] (Blue button at bottom of page not visible in this image)

1

2



CREATE - MAIN MENU

1. [Hover over “Appearance”] and [click on “Customize”] to access the Customizer

2. [Click “Menus” ]3. [Click “+Add a Menu”]

4. [Type the word “Default” (or whatever you like) and click “Create Menu”] 5. [Select “Primary Menu”] under “Menu Locations”

6. [Save and Publish!]

5

6

1

2

3

4



CREATE - MENU ITEMS

1. [Click on “Default”]

2. [Click “+Add Items”]3. [Click “Page”]

4. [Drag remaining titles] in order: Home, About, Service, Blog, Contact to add to menu (don’t include the “Home” title with “Custom Link” as it is only used to create links to pages that are not part of your WordPress site)

5. [Save and Publish!]6. [Switch Tabs] to see the Front End of your site and refresh/reload the page. (To refresh press F5. Otherwise, try command/ctrl R).

2

3

4

5

1



CHANGE - TITLE OF HOME PAGE

1. [Click on “Pages” menu]

2. [Click on the word “Home”] (This will take you to your home page - w/no content)3. [Change the title from “Home” to “Welcome to Run Dog Run!”]

4. [Click the “Update” button] on the right5. [Switch back to the front end of your site and refresh page]. Both places that said “Home” (title and menu) should now say “Welcome

to Run Dog Run!”. But that’s not quite right...

5

1

2

3

4



CHANGE - NAVIGATION LABEL

1. Navigate to the Customizer/Menu/YourMenuName area (from the Admin menu [click “Appearance” > “Customize” > “Menus” >

“YourMenuName”] )2. [Click the menu title “Welcome to Run Dog Run!”] in the left sidebar

3. Under “Navigation Label” [highlight “Welcome to Run Dog Run!”] and [type “Home”]4. [Click “Save & Publish”] at the top of the page

5. [Click “X”] to close the customizer6. [Verify that your first menu item now reads “Home” by refreshing your page on the front end of your site]

2

3

4 5



ADD - TEXT TO HOME PAGE

1. Navigate to the Page Editor for “Welcome to Run Dog Run!” (from the Admin menu [click “Pages” > “Welcome to Run Dog Run!”])

2. [Click in the text area of the visual editor and type a couple paragraphs of text]3. [Click on the “Toolbar Toggle” button (or “Kitchen Sink”) to make second line of Toolbar buttons appear]

4. [Click “Update”]5. [Go to the front end of your site and refresh the page] to make sure text is appearing

1

4

3

2



ADD - A SUBHEADING

1. [Place your cursor at the end of your text, hit Return/Enter to start a new line and type “A tired dog is a happy dog.”]

2. [Click the text-formatting dropdown that says “Paragraph”] in the second row of the Toolbar3. [Select “Heading 3”]

4. [Click “Update”]5. [Go to the front end of your site and refresh the page] to see your changes

1

4

2

3



UPLOAD MEDIA TO MEDIA LIBRARY

1. [Place your cursor at the end of your subheading]

2. [Click the “Add Media” button] 3. [Select the “Upload Files” tab]

4. [Click “Select Files”] and navigate to your images OR simply [drag and drop your images into this window]

The size of file you can upload will depend on the plan you have with your current webhost. It is not dependent on WordPress settings. If you only have a 1MB upload limit, you can still upload a group of files that are each no more than 1MB.

1

4

2

3


1. [Click the photo you wish to add to your content]. Make sure that it is the only file selected.

2. [Type in a caption in the “Caption” box on the right].3. Under “Attachment Display Settings” beside “Link To” [choose “None”] from the dropdown window unless you want your picture to link

to either a full size image or another page (Attachment page) styled to feature your image. 4. [Click the blue “Insert Into Page” button].

5. [Visit the front end of your site and reload/refresh the page to make sure the image shows up].


ADD - IMAGE TO HOME PAGE

1

2

4

3



ADD - IMAGE TO HOME PAGE (CONT.)

1 2

1. Your image may not be the correct size. If it isn’t, [click on the image that you placed into your page editor and resize it using one of

the handle bars] or [click on the pencil icon] to open the “Image Details” window where you can edit features of the image in greater detail.

2. [Click the “Update” button]3. [Switch back to the front end of your site and refresh page]. Verify that the photo shows up correctly.



ADD - BACKGROUND IMAGE TO HEADER

1. [Click on “Appearance”, then “Customize”].

2. [Click on the “Header Image” tab].3. [Click “Add new image”] By default, whatever image you choose will be applied to the header on small screens and to the sidebar on

wide screens. The recommended size image is 954px wide by 1300px high.4. [Select the image with black dogs on a dark grey background].

5. [Click the blue “Select and Crop” button].

1

2

3

4

5



ADD - BACKGROUND IMAGE TO HEADER

6. [Move the cropping outline to the desired location]

7. [Click the “Crop Image” button]8. [Click the “Save & Publish” button]

9. [Switch to the front end of your site and refresh page]. What do you notice? What’s not right?

6

8

9

7



STYLE - HEADER TEXT COLOR

1. If you are still in the customizer, [click the back arrow by “Customizing Header Image”]

2. [Select the “Colors” menu bar]3. [Open the “Header and Sidebar Text Color” selector]

4. [Choose the white box at the bottom of the selector]5. [Click “Save & Publish”]

6. [Move to the front end and refresh] to view the results

1

2

3

4

6

5



REMOVE - WIDGETS

1. If still in the customizer, [click the back arrow under the “X”] to get to main customizer window

2. [Click the “Widgets” menu bar] (second from the bottom)3. [Click on the “Widget Area” bar]. There are several widgets already installed. We’re going to delete all of them and add one of our own

4. Starting with the “Search” bar, the first widget at the top [open it by clicking anywhere in the bar] and [click “Remove”5. [Do the same for the next five widgets] so that they are all gone

6. [Click “Save & Publish”]7. [Go to the front end of your site and refresh] to see if all widgets are gone from the sidebar

1

2

34 6

5



ACTIVATE - JETPACK MODULES

1. [X out of the customizer]

2. [Click on “Plugins” in the main Admin window]3. [Click “Activate” under “Jetpack by WordPress.com] (Jetpack is automatically available in WordPress.com, but not in WordPress.org)

4. [Click on “Settings” under the Jetpack plugin]5. [Click the checkboxes beside four modules that we will activate: Contact Form, Extra Sidebar Widgets, Sharing, Tiled Galleries]

6. At the top of the page, [open the “Bulk Actions” dropdown, choose “Activate” and click “Apply”]No changes are visible at this point, but several functions are now being accessed. Let’s install that functionality where we want it.

1

3

4

5

6

2


http://WordPress.com

http://WordPress.com


INSTALL IN SIDEBAR - CONTACT INFO WIDGET

1. [Hover over the “Appearance” menu again and click the “Customize” submenu button]. You should be back in the Customizer

2. [Click “Widgets” > “Widget Area” > “Add a Widget”]3. The “Extra Sidebar Widgets” module we activated in Jetback gave us the “Contact Info” widget. [Click on it]

1 2b2c

3

2a



INSTALL IN SIDEBAR - CONTACT INFO WIDGET

1. [Hover over the “Appearance” menu again and click the “Customize” submenu button]. You should be back in the Customizer

2. [Click “Widgets” > “Widget Area” > “Add a Widget”]3. The “Extra Sidebar Widgets” module we activated in Jetback gave us the “Contact Info” widget. [Click on it]

4. Add your data to the info boxes. Make sure the “show map” checkbox is checked and [click the “Save & Publish” button]5. [Visit the front end of your site and reload the page] to see the results in the sidebar

4

5



INSTALL IN SIDEBAR - SHARING WIDGET

1. [Click the “+Add a Widget“ button] to add another widget to the sidebar. Widgets can go anywhere a theme developer chooses. We

are using the Twenty Fifteen theme, and the only place they appear is in the sidebar.2. Another widget we activated in Jetback gave us the “Social Media icons” widget. [Click on it]

3. [Fill in a couple of your social media usernames]4. [Close both widgets by clicking on their title bars] then [reorder them by dragging the Social Media Icons title bar above the Contact

Info title bar and drop it]. It should now appear above the Contact Info widget.5. [Click the “Save & Publish” button]

6. [Go to the front end and refresh the page] Check out our two widgets in the sidebar!

1

4

62

5

3



ADD CONTENT - TO CONTENT PAGE

1. [Click on “Pages” menu]

2. [Click on the “Contact” page link] (This will take you to your Contact page - with no content)3. [Type some text in the textarea, something like, “We’d love to hear from you! To set up a free consultation, fill out the contact form or

give us a call at 503-555-5555.”]4. [Click “Update”]

5. [Visit the front end and click the “Contact” menu button to go to the Contact page to view your new text]

4

3

1

2



CREATE - CONTACT FORM

1. [Place your cursor at the end of the text you’ve written into your Contact page].

2. [Click the “Add Contact Form” button] that now appears next to the “Add Media” button. This new button was installed when we activated the “Contact Form” module in Jetpack.

3. [Hover over the box labeled “Website” and click the “edit” link] on the right side]4. Under “Edit this new field”, [change the label name to “Phone”]

5. Next to “Field type”, [select “Text” from the dropdown menu]6. [Click the “Save this field” button]

7. Under the “Can I add more fields?” question, [click the blue “Click here” link] or [click the “Add a new field” link] near the bottom of the page.

1

4

3

2

57

6




8. [Label it “What service are you interested in?”]

9. For “Field type” [choose “dropdown”] from the dropdown menu10. [Create four options - “Distance Running”, “Ball Throwing”, “River Dog” and “Obstacle Course”]

11. After each of the first three [click “Add another option”]12. [Click the “Save this field” button]

13. If one of the main fields in the form needs to be moved up or down (like the “What service?” field), [hover over the label until the blue “move” link shows up]. At that point your cursor turns into a crossbar and you can [click and drag the box up or down].

14. Email notifications don’t need to be changed, but they can be. Jetpack utilizes the contact information entered into the Admin area by the author of the page or post.

15. [Click the blue “Add this form to my post”] button. You should be back in the Contact page editor.16. [Click the blue “Update” button].

14

11

15

13

16

10

12

9

8




17. [Go to the front end and click on the “Contact” menu button]. You should see a nice new shiny contact form!



CREATE - FIRST BLOG POST

1. [Go to the back end and click on “Posts” > “Add New”] Posts are different from pages. They automagically appear on the page that

we set for our blog. We created a page called “Blog” and chose it as the page where our blog posts would appear when we went to the “Settings” menu at the bottom of the Admin page. Posts appear in reverse chronological order inside one page - in this case,

called “Blog”. Then, when you click on a blog post, it opens up in its own page (called a “single post page”). We’ll see how that works later on.

2. [Add a title to your post]3. [Add some content to your post]

4. [Click the blue “Publish” button] and [go to the front end of your site, click on the “Blog” menu link and see that your post appears on that page].

4

3

21



ADD - CATEGORIES

1. [Click on the “Categories” tab on the right side of your Post Editor]

2. [Click “+Add New Category”]3. [Type “Events”] in the text box and [click the grey “Add New Category” button below it]

4. [Add another category titled “News”]5. [Assign this post to a category by clicking the checkbox next to “Events”]

6. [Uncheck “Uncategorized” and “News” if they are checked] Assign a post to only one category - like assigning it to a chapter in a book. It’s confusing for users if you assign it to multiple categories. Search engines also begin wondering where your focus is.

7. [Click the blue “Publish” button] We will assign our next post to the “News” category.

7

123

4

5 6



ADD - TAGS

Tags, like categories, are helpful search tools. The more meaningful tags you associate with a blog post, the better. Unlike with

categories, it is good to assign several tags to each of your posts - although too many can dilute your focus.1. [Click on the “Tags” tab on the right side of your Post Editor] to open the “Tags” module

2. [Add some tags in the tag textbox] You can do this by entering several comma-separated words or phrases and [clicking the “Add” button], or by typing words in one at a time.

3. [Click “Update”]. Once you’ve added tags, they are available in your “tag library” and can be accessed on other posts and pages.

3

12



ADD - FEATURED IMAGE

Featured images typically appear at the top of a post and are…featured.

1. [Click on the “Featured Image” tab on the right side of your Post Editor] to open the “Featured Image” module.2. [Click on the “Set featured image” link]. It opens up the Media Library.

3. [Select an image]4. [Click the blue “Set featured image” button]

5. [Click the blue “Update” button]

5

1 2

4

3



ADD - FEATURED IMAGE

6

6. [Go to the front end of your site and click on the “Blog” menu button]. Our first blog post!

Notice the meta data below: date, author, tags, comment. How do we get to comments on the front end?



ADD - COMMENTS

1. [Click on the title of your blog post]. This takes you to what is called a single post page. It is a page featuring just one post. In many

themes, it will look much the same as a multi-post page - with a couple of important differences: a. There is only one post - the featured post - and

b. Comments are enabled. 2. [Scroll to the bottom of the page]. Comments in this theme (Twenty Fifteen), as in most themes, are enabled by default on all single

post pages. 3. [Type in a comment in the textarea]

4. [Click “Post Comment”] Your comment should show up directly in the comments area on the page. When visitors make a comment, you will be given the opportunity to approve their comment before it is posted on your page for everyone to read.

5. [View the comment and leave a reply]

5

1

4

32



ADD - POST #2 (TITLE AND CONTENT)

[Go to the back end of your site]

1. [Click on “Posts” > “Add New”]2. [Type in a title]

3. [Type some content ]4. Just so we don’t forget, [click the blue “Publish” button]

5. [Go to the front end of your site and refresh your blog page]. Your new blog should appear above your previous blog. Remember, posts appear on a blog page in reverse chronological order.

4

1

2

3

5



ADD - POST #2 (WITH A GALLERY)

1. In your Post Editor [Click the “Add Media” button above the editor Toolbar]

1





2. [Click the “Create Gallery” link on the left side]

2





2. [Click the “Create Gallery” link on the left side]3. [Find images by typing the title of the image into the “Search” box]

3






4. [Add images to your gallery by selecting them]

4






4. [Add images to your gallery by selecting them]5. [De-select images by clicking the checkmarks in the upper right corner of each thumbnail]

5




6. [Add a caption in the “Attachment Details” “Caption” textarea]. (You will get different results when adding it in the “Gallery Settings”).

7. The “Alt Text” box below the “Caption” box is for entering a description of each photo. This is required for accessibility to users who are visually impaired and/or need screen readers in order to identify images as well as text. This is now mandated by law.

8. Descriptions occasionally, but rarely, are visible to visitors. It depends on the theme.9. [De-select an image by hovering over the checkmark in the upper right corner of a thumbnail and clicking when it becomes a minus]

10. [Click the blue “Create a new gallery” button]11. In “Gallery Settings” on the right beside “Link to” [select “Media File” from the dropdown]. The dimensions of the photos and their

order determines how Jetpack intelligently displays them in the “Tiled Mosaic” gallery option. [Click “Random” ckbx for extra fun]12. Beside “Type”, [select “Tiled Mosaic” from the dropdown]

13. [Click the blue “Insert Gallery” button]14. [Click the blue “Update” button]

6

10

89

11

12

13

14

7




[Go to the front end of your site and click on the “Blog” menu button to refresh the page]. If you checked the “Random” box in the “Gallery

Settings” after creating your gallery, you should see your gallery images re-arrange every time you reload the page!

We’re not done with our post yet. We still need to apply a category, tags and a featured image...



ADD - POST #2 CATEGORIES, TAGS & FEATURED IMAGE

[Go to the back end of your site to the same post we’ve been editing]

1. [Open the “Categories” module by clicking the “Categories” dropdown]2. [Uncheck “Uncategorized”], [check “News”] and [close the module] (just to give yourself a little more space).

3. [Open the “Tags” module by clicking the “Tags” dropdown]4. [Add some tags] and [click the “Add” button]

5. [Open the “Featured Image” module by clicking the “Featured Image” dropdown] and [Click “Set featured image”] 6. [Choose an image from the media library] and [click the blue “Set featured image” button] to place it in your post

7. [Click the blue “Update” button]

6

71

23

4

5



ADD - POST #2 CATEGORIES, TAGS & FEATURED IMAGE

[Go to the front end of your site and refresh your blog page] to view your post with: a featured image, a title and content, a gallery, a

category and tags (seen in the meta data at the foot of the post).



ADD - CONTENT TO SERVICES PAGE WITH LINK TO CONTACT PAGE

[Switch to the back end of your site (tab #1)]

1. [Click on the “Pages” menu tab] and [open the “Services” page for editing by clicking on the title or on the blue “edit” link]2. [Type 2 or 3 lines of content into the textarea - including this sentence, “Contact us for scheduling and more information.”]

3. [Highlight the last sentence and click the icon in the editor Toolbar that looks like a chain link]4. When the “Insert/edit link” window opens, [click the grey “Or link to existing content” part way down the window] to open a dropdown

displaying the pages and posts currently on your site5. [Select the “Contact” page text and click the blue “Add Link” button]. This now links the highlighted text to your Contact page.

6. [Click the blue “Update” button to save your work]. 7. [View your site’s front end and click on “Services” menu button to verify changes]. The text link you created should take you to the

Contact page.

6

1

2

3

4

5



ADD - SUBHEADINGS AND IMAGES ALIGNED RIGHT

1. In your Page Editor [place your cursor at the end of your text and press “Return/Enter” to move to a new line]

2. [Click the Toolbar Toggle icon to open the Kitchen Sink]3. [Select “Heading 3” from the text-formatting dropdown menu]

4. [Write “Ball Throw”]5. [Press “Return/Enter” to move to a new line]. The text-formatting dropdown should automatically change back to “Paragraph”.

6. [Create two or three lines of text]7. [Press “Return/Enter” to move to a new line]

8. [Repeat steps 3-7 three more times] so that you have several subheadings with paragraphs under each one.9. [Click the blue “Update” button to preserve your changes]

4-9




10. [Place your cursor just after the last letter of your first subheading (“Ball Throw”)] and [click the “Add Media” button]

11. [Select an image]12. In the “Alignment” dropdown under Attachment Display Settings [choose “Right”].

13. In the “Link To’” dropdown [choose “Media File”].14. For “Size” [choose “Thumbnail”]

15. [Click the blue “Insert into Page” button].16. [Repeat 10-15 for each subheading

17. [Click the blue “Update” button].

1

2

3

4-9

10

11

12131415

17




[Switch to the front end of your site and click the “Services” menu tab] to see your updated page. You should have a working link to the

Contact page and several nicely formatted paragraphs with subheadings and accompanying images that are right-aligned.



CONCLUSIONWe didn’t get to the About page, but we

covered all of the functions and layout necessary for you to accomplish that on

your own:1. A responsive/mobile friendly theme

2. Creation of new pages and posts3. A functional site menu

4. Text formatting techniques5. Static text to hyperlink transformation

6. Plugin and widget activation and placement

7. Gallery, image alignment and header background image

8. Contact form with dropdown9. Interactive map

10. Links to Social MediaStart studying some of the resources we’ve supplied for you. When you’re ready to set up a WordPress.org site of your own, take the

time to investigate the WordPress plugin repository and start trying out some of the free themes in the theme repository. The possibilities are endless - and it’s easy to get overwhelmed. So take it...you know...one step at a time.


Learn to Use WordPress in a Day

Small Business & Entrepreneurship

Transcript of Learn to Use WordPress in a Day