Wordpress Introduction

Introductory video: What is Wordpress?

https://www.wp101.com/tutorials/what-is-wordpress/

As builders and designers of online content, it's necessary for us to know some basics about web development and web publishing, as noted in the Virtual Storefront Weeks 1-5 material. We discussed Wordpress briefly as a blogging platform and more importantly as a content management system for small websites.

Wordpress comes in two forms, which are differentiated online by .org vs .com domain names. Wordpress.org provides the downloadable source code for Wordpress (written in PHP), along with support documents and an open-source discussion community. This is the resource we'd use if we wanted to download and install Wordpress on our own computer or webserver.

Wordpress.com, on the other hand, offers free online hosting for small Wordpress sites, along with a host of other tools and resources to improve the Wordpress experience. After registering an email address, we can build our own Wordpress blog or website at mysitename.wordpress.com.

For this project, we'll use Wordpress.com's free online hosting.

Basic Portfolio Website - Abstract

In this project, you will build a very basic "portfolio-style" website using Wordpress. Usually, this type of site is used for 4 main purposes:

• to tell a little about yourself,

• to showcase anything you might be currently working on,

• to display and publish previous instances of your work,

• and to provide a method for contacting you.

Thus, your website will have a minimum of 4 pages:

Homepage (containing content of your choice, perhaps a welcome message or a showcase of your current work?)

About Me (containing a photo and short paragraph or table of information about yourself)

Portfolio (containing a photo gallery, document list, embedded YouTube channel, or some other type of original media by you)

Contact Me (containing a web form or other information by which to contact you)

The specific name of each page can be adjusted or changed to suit your style, but content requirements will stay the same. Feel free to contact with any questions about this.

Project Procedure

This procedure is not intended as a step-by-step guide. It is provided as-is. You are expected to extrapolate upon your knowledge to complete some steps. You may of course feel free to ask via email, D2L, or office hours any questions you may have.

IMPORTANT: If you cannot access the Wordpress Dashboard (Step 4, and Figure 1), you should contact me as soon as possible and plan to visit office hours for assistance.

At wordpress.com, click the "Get Started" button. Use your MSU email address as you complete the forms. Select the Free options (domain and hosting plan). You should call your site something simple and descriptive, like "yourname.wordpress.com" - yourname in this case being a placeholder for your own name. Remember that you may use this website in the future during a job search or interview process - having a simple URL is advantageous.

IMPORTANT: At the end of the Get Started process, you should see a screen with your site design and a message welcoming you to Wordpress.

STOP. DO NOTHING. Close the current window.

Check your email and confirm your email address with Wordpress.

In a new window or tab, go to http://yoursitename.wordpress.com/wp-admin, where

yoursitename is the URL you chose in step 1.

In another new window or tab, you can visit http://yoursitename.wordpress.com to see what

your new website currently looks like. As we mentioned, Wordpress is originally a blogging platform that is useful as a CMS. Your new "blog" should by default have a blog feature (of course), and you should have picked one of Wordpress' own default themes during the registration process - usually these tend to have a very basic look. You can feel free to select a different Wordpress theme (Dashboard > Appearance > Themes), or you may design your own if you feel comfortable doing so.

The most important part of Wordpress for you, the site owner, is the Wordpress Dashboard, which allows you to build and control your new site and the features on it. You can always visit yoursitename.wordpress.com/wp-admin to get to the Dashboard. In the Dashboard, along the lefthand side in grey are several management options (Figure 1).

Use the options under "Pages" in the Dashboard to create three (3) new pages. Note: based on the theme you chose, some pages may already exist. You can edit and modify these to fit your needs - or delete them and create your own from scratch.

Home - this will be the homepage of your website. You may feel free to feature whatever content you like here. Some ideas: a short write-up on a current project or hobby, a photo you took, a design project you're working on. Note: you are welcome to use Wordpress' blog feature on your home page as a way to showcase your work, in which case creating a new page called "Home" in this step is unnecessary. See Step 9 below for more information.

Portfolio - this page will feature any form of media of your choosing, preferably created by you. Some ideas: an image gallery, a YouTube playlist, a collection of poems or short stories you've written, a Pinterest-style "idea board"

Contact - on this page, please include one method of contacting you. This can be any written address: your mailing or email address, your Skype name, or even your phone number, or you may use Wordpress' Contact Form generator to include a web form on
the page. Providing only one method gives readers confidence their message will be received should they choose to contact you.

You'll note the new pages you've created now appear on your site's navigation bar, but may not appear in the order you desire. You'll also see them listed when you click "All pages" in your Dashboard. As you mouseover pages from this menu, you have the option to "Quick Edit" each page. You can use this feature to assign a numerical position in the menu order to each page (i.e. 1 through 4). After a quick refresh, your menu should now appear in the correct order. Note: for most sites, it is common practice to order the links according to the following guidelines:

Link to homepage is first

Link to "about me" or "about us" is second (for visibility)

Link to "contact" information is last

Note: If you skipped Step 7.1, Step 9 is not necessary and you may use the blog roll as your homepage. Otherwise: As your site begins to take shape, you may note that your navigation bar contains two separate "Home" links - one that goes to the page you created in Step 7, and the other that points to the built-in "blog" feature of your Wordpress site.

Since we've created our own homepage, we need to tell Wordpress that we won't be using its self-generated blog homepage:

From your Dashboard, select "Customize" from the "Appearance" menu. Your browser will enter what's known as Wordpress' "Snapshots" interface, which allows you to see and manipulate the way your site is displayed.

In the left-side drawer, select "Static Front Page." Here, you have the option to tell Wordpress that we'll be using a static page that we created as our homepage. Use the dropdown under "Front page" to select the "Home" page you created. Click "Save & Publish." You can now also click "X" to close the Snapshots interface.

A quick refresh should reveal that the changes took effect, and the "blog" version of the homepage disappears from our navigation bar.
Your site is now functional - it is time to customize the look, feel, and content you wish to convey. You may feel free to explore and use Wordpress' many free templates and themes. If you are a design-oriented person, you may wish to design your own theme. The final design and look of your site are related to your final grade, as indicated in the grading rubric below.

Social Media Integration: Social networks are among the most vital tools for Internet marketers. Using Wordpress, mini-applications called "widgets" can give your site added functionality in small doses, like importing a feed of your latest tweets or photos. In the Dashboard, use the menu under Appearance -> Widgets to add at least one social media widget to your website. The widget may be added to any page individually, or to the sidebar

of your site. The "Available Widgets" menu provides widgets for Instagram, Twitter, Flickr, Gravatar, BandPage, and Facebook Pages (not profiles, unfortunately). You may link to a social media feed that is not your own if you wish (like a favorite brand's Facebook page).
Figure 1 (left): Wordpress Dashboard