Presentation is loading. Please wait.

Presentation is loading. Please wait.

A demonstration of WordPress to create a blog/website. Elio L. Arteaga, MFA.

Similar presentations


Presentation on theme: "A demonstration of WordPress to create a blog/website. Elio L. Arteaga, MFA."— Presentation transcript:

1 A demonstration of WordPress to create a blog/website. Elio L. Arteaga, MFA

2 Content Management System—Create blogs and websites. Easy way to organize content and separate it from style. Write new posts and pages, and manage media. Cloud-based, hosted by WordPress.com (totally free, but limited themes, does not allow JavaScript or Google AdSense ads) or… Self-hosted, enables your own URL and custom plug-ins, but requires a hosting service that provides PHP and MySQL, a file editor and an FTP client).

3 Set up a new account The front and back ends Editing your public profile Adjusting settings

4 Go to WordPress.com, click Sign Up Now. Create a blog address, username/password and give your email address.WordPress.com Check your email, and click the link to activate your new account.

5 Your new blog is now ready. WordPress sites consist of two parts: (1.) front end, and…

6 (2.) Back end. To access, add /wp-admin to the end of your blog’s URL in the browser’s address bar. Right-click on the blog title in the upper-left to open the front end in another tab.

7 Edit your Public Profile. Pull down My Account and choose Edit My Profile.

8 This information is all public; don’t enter your home phone number.

9 Settings: General – site title, tagline, admin email, time zone, etc.

10 Settings: Writing – default category, format, link.

11 Settings: Reading – default display, posts or pages

12 Settings: Discussion – To avoid comment spam, require comment authors to enter their names and email addresses and register and log in. Approve comments before showing, and blacklist any offenders.

13 Settings: Privacy – totally public, hidden to search engines only, or totally private.

14 Publicize your posts on Facebook, Twitter, etc. Drag Available Services down here to enable them. Choose button styles and labels. Settings: Sharing

15 Posts are displayed in reverse chronological order and contain news items, articles, etc.—timely info that can become stale. Posts are organized by date/time/category/tags/authors. Pages are static and freestanding. Can contain site info, contact info, FAQs, etc. Pages are organized by a parent/child relationship.

16 Adding new posts Typing and editing text Inserting special characters Adding links Adding images Adding categories Publishing/updating posts

17 In the sidebar, click Posts, and Add New. The URL for this post becomes http://____.wordpress.com/2011/04/28/this-is-my-first-post. Type your title and body-text content.

18 Currently, the post is a “Draft,” but that can be changed to “Pending Review” or it can be “Published” straight-away. In addition, you can choose what date it becomes visible on the internet.

19 Posts can be typed in a Visual editor or in HTML. They can even be typed in Microsoft Word, copied and pasted into a post using the Kitchen Sink and Paste as Text buttons (shown above).

20 You can add special characters and foreign characters by clicking Character Map, the omega icon, visible when Kitchen Sink is selected.

21 Add text links by selecting text in your post, and clicking Insert Link, the chain icon above the post body text. Be sure to add a title for improving search engine optimization. Open link in a new window if your link takes your visitors away from your site.

22 To add an image, look between the post title and the main body text of the post. You’ll see a group of icons next to Upload/Insert. They are images, video, audio, SWFs, polls and custom forms. Click Image. Click Select a File from your Computer.

23 Add details. Remember, alternate text is important for search engine optimization, as well as for visually-impaired individuals who use a text reader to audibly recite the alternate text of images on web pages. Click Insert into Post.

24 Change to the tab displaying the front-end, and refresh the browser.

25 Add categories to help organize your posts. At the bottom right of the post- editing page, click Add New Category, and enter the name of the category, in this case, Events. Next, uncheck “Uncategorized” and check “Events.”

26 Click Update, change to the tab displaying the front-end, and refresh the browser. The new category is visible at the bottom of the post.

27 Adding new pages Setting up your site’s landing page

28 Back in the Dashboard, under Pages, click Add New. Begin typing a title and body-text content, just as you would with a new post. The URL becomes http://________.wordpress.com/contact-us/ Click Publish.

29 Click Pages to display your list of pages, hover over Contact Us, and click Quick Edit. Next to template, choose “One column, no sidebar” to get rid of the sidebar on the static page. Also, uncheck Allow Comments to remove the comments box from static pages. These two only make sense if they were in posts, not pages.

30 Click Update. Go back inside the page editor, and uncheck Show sharing buttons… to remove them from this page. Likewise, they only make sense if they were in a post, not a page.

31 The Contact Us static page displays neither the sidebar, nor the comments box, nor the sharing buttons. Just right! Now, try removing those three items on the About page.

32 If you wish to make one of the static pages, rather than the posts page, the landing page (home page) of your site, first go back to the back-end. Make a new page called “Blog” and publish it. Don’t do anything else with it. Go to Settings: Reading (remember this?) Click Front Page Displays: A Static Page (Select Below). Front Page: About Posts Page: Blog.

33 Click Save Changes, and refresh the tab displaying the front-end. The About page is now the home page, and there are navigational links to Blog and Contact Us. Great work!

34 Comment moderation is necessary, otherwise spam will fill up your comment boxes. Earlier, in Discussion Settings, we indicated that comment authors must provide their name and email addresses, that they must register with WordPress and log in, and that the administrator must approve each comment before it becomes visible.

35 The number 1 indicates that there is one comment needing approval.

36 The yellow background on elioart’s comment indicates that it hasn’t been approved by the administrator yet. Hover over the comment. The options are: Approve Reply Quick Edit Edit History Spam and Trash Click Approve. Your visitors can now read this comment.

37 Selecting a theme Adding widgets Customizing menus Adding polls Changing background and header images

38 CSS separates a site’s content from its appearance. It’s easy to change the appearance of your site by choosing various themes and changing other characteristics.

39 Appearance: Themes

40 Not every theme contains the same features, for example, a two-column sidebar layout and a single-column layout in the same theme. To browse for features, click Feature Filters…

41 Select desired features and click Apply Filters. WordPress shows you all the themes that contain those features.

42 Same content, now previewing in the DePo Masthead theme. You may activate it, or just close the Preview window.

43 Widgets are fun little programs that can contain calendars, Twitter feeds, RSS feeds, etc.

44 Appearance: Widgets

45 Drag any widget into one of the widgetized areas on the right side of the Dashboard. They are automatically added. Just change to the tab containing the front-end display…

46 Refresh the browser, and there’s my calendar of events in the sidebar. They’re fun to experiment with, so have a good time!

47 WordPress makes it possible to customize the navigation menus in your site.

48 Right now, my menu displays Home (my About page), Blog and Contact Us, but it’s possible to better organize the menu so that your visitors can better appreciate the scope and scale of your site.

49 Appearance: Menus The first step is to name your new menu.

50 Next, select the new menu as your Primary Navigation. Then select the pages you want added to your new menu. Click Add to Menu.

51 Rearrange menu items in desired order.

52 The new site still lands on the About page, but now the menu reads “About” instead of “Home.”

53 Polls are a fun way to add interactivity to your WordPress site.

54 To begin, click Polls: Add New in the sidebar, then click Create One in the main editing area. If it asks to auto-create a PollDaddy account, click Yes.

55 Write your poll question and answers, and then pick a PollDaddy style.

56 Change the settings, if needed, but otherwise, just keep everything as is, and click Save Poll.

57 To add your new poll to the page, go back to Polls in the sidebar, hover over your new poll and choose Share-Embed. Copy to the clipboard the WordPress Shortcode for the poll.

58 Next, go back to Appearance: Widgets and drag a Text widget over to one of the widgetized areas. Enter a title, and paste the WordPress Shortcode copied from the previous page.

59 Your new poll now shows up in the right-hand sidebar.

60 WordPress enables you to customize the background color and image of your website.

61 Changing the background color is done through Appearance: Background. Type the hexadecimal code for a specific color, or click Select a Color to display a Color Picker.

62 Click Save Changes, change to the tab displaying the front-end site, then refresh the browser. The page background is now blue.

63 A repeating background tile is a good way to add a lot of decoration with just a little memory. The small file only needs to be downloaded once, but repeats over and over in the background. Save Changes, then refresh the front-end.

64 To make a top-edge border, pick a background tile image that repeats horizontally only, such as this foliage-border image. Set Repeat to Tile Horizontally, and pick the same background color that appears at the bottom of the tiles, in this case #b79d3e. Save Changes, then refresh the front-end.

65 You can customize the header that appears at the top of the page, or even create individual headers for each page. For this demo, I’ve created four custom headers using Adobe Illustrator, one plain and three with text.

66 Appearance: Header Upload Image eaheader to use as a custom header for all pages. Save Changes, then refresh the front-end.

67 Alternatively, you can design individual headers for each page of your site. First, go to Pages, hover over one of the pages and click Edit.

68 Click Set Featured Image (we’re in the About page, right now).

69 Upload file eaheader_about.jpg and click Use as Featured Image. Save all changes, then refresh the front-end.

70 Repeat this last step for Contact Us with the file eaheader_contact. Set the Blog page header by going to Appearance: Header and using the file eaheader_blog. Visit each page to see its custom header.

71 I’m hoping you can see all the creative possibilities for building web sites and blogs in WordPress.com. We covered: Setting Up an Account and Getting Up and Running Editing your Profile and Adjusting Settings Adding Posts and Pages Inserting Media, such as Images Inserting Links Adding Categories Setting the Front Page Managing Comments Selecting Themes Choosing Widgetrs Making Custom Menus Adding Polls Changing the Background Color and Headers


Download ppt "A demonstration of WordPress to create a blog/website. Elio L. Arteaga, MFA."

Similar presentations


Ads by Google