Aspen Wordpress Startup Guide

Avery McClure, Carey Jackson, Ian Ross, Jared Sandner, Zach Davis

EH 301

Table of Contents

Introduction/ Overview Page 1

Creating a Free Account Page 2

Setting Up Your Site Page 4

Setting Up a Page Page 8

Creating a Post Page 13

Launching Your Site Page 15

Tips, Tricks, and Pitfalls Page 19

1

Intro/Overview: WordPress is a web-based service that allows users to create, format, and design their own web pages for various reasons. Technical Writing requires the creation of a WordPress page for students’ to display a portfolio of their work, alongside their resume, and other important documents. However, creating and setting up a WordPress page is not the simplest task, especially for students who manage multiple responsibilities. Thus, the need arises for a WordPress startup guide, as written, edited, and designed by students who have gone through the process themselves. By following along with the guide, users should be able to successfully create a free account, set up a functional and well-designed page to display their work, and launch their site free of charge for public viewing.

2

Creating a free account: Creating a free WordPress account is simple and relatively straightforward. The difficulty lies in avoiding the paywall that presents itself every possible chance. There will be several instances where users will be misled into believing that the only way to progress is to pay for their site. This is not true. While the domain name of a user’s site may be less impressive, the user will never have to pay for any of the following steps. Step 1. Go to https://wordpress.com/ and click ‘Start Your Website.’ You will be brought to an account creation page, shown below. Use an email you’re comfortable with and a password you can remember to create a new account, or use an existing apple or google account to register. You’ll be sent a confirmation email afterwards to whichever email is attached to the account you just created, which you should use to confirm your account.

3

Step 2. Give your site a domain name. This is the name that appears in the web browser bar at the top of the page. Because you’ll be creating a free site, your domain will look a little confusing with added numbers and letters. You’re given an option to remove those numbers by paying, though this is unnecessary given the purpose of the page.

Step 3. Select a plan. You’ll be directed to a page that suggests you should select a plan. This is the first presentation of the implied paywall. Keep in mind you will not have to pay using this guide. Simply click ‘Start With a Free Site’ towards the top of the screen.

You’ve successfully created your account and can move onto setting up your site.

4

Setting up your site: You can now begin the setup process. Wordpress will automatically take you through a tutorial on how to set up your site.

Step 1. Name your site. Click on the ‘Get Started’ button and it will take you to the settings page. On this page, you will be given the option to give your site a title, add a tagline, and a site icon. Make sure the site name is simple and to the point. This will be the first glimpse into what your site is all about.

5

Step 2. Pick a time zone. This is on the same page where you name your site. Your time zone should be set to where your target audience is located.

Step 3. Now comes the fun part, picking a theme! The themes determine the look of your entire website. Click on appearance. Two drop down boxes should appear, click on themes. You can choose from all the different themes available on the wordpress site.

6

Once you decide which one you like best, simply click on it and a preview of what the site will look like will be shown. If this theme matches what you are looking for, click ‘Activate this design’.

Step 4. Edit your homepage. Just follow the ‘Update your Homepage’ link. Click on the plus (+) in the top left corner of the screen. This will allow you to navigate blocks, which will allow you to alter the heading, choose image layout, add embeds, and shift the text.

7

Step 5. Once you have chosen your theme and fixed your home page, you can further customize your site. Go to design and then click customize. On the customize page, you can change the color palette and add widgets. You can further dive into the customizations and change the sidebar location, button shape, menu items, and blog listing display.

Step 6. Confirm your email address. WordPress will send you a confirmation email, all you have to do is click the ‘confirm’ button within the email. Then, refresh the webpage.

8

You have set up the general website, however, you will still need to add posts, documents, and other items to your page, which is discussed in the next section Setting up a page: Setting up a page is perhaps the most difficult part of the WordPress process, as it is relatively unintuitive and requires exploration to understand in its entirety. We will explore page elements, determining the function of pages, and how to utilize the page editor. Step 1. Review the page system. Before anything can be changed, the page system should be elaborated. From your site homepage, click the ‘site’ dropdown menu on the left side of the screen, then navigate to ‘pages’ within the dropdown menu. You should see something like the image below.

9

This is a list of all your pages. Think of a page as individual screens your viewers can see at a given time. There are navigation tools built into your website to allow the user to go from page to page. The name of your pages may be a bit different from those seen here. Specifically, the page titled ‘Documents’ may actually say ‘Blog’ on your screen. This is because the name of the page has been changed using editing, which will be described shortly. Step 2. Determine the function of each page. WordPress has two primary functions for your pages. The first is a home page, which you’ve likely already seen a few times by now. The second is a posting page, or a ‘blog’ page. Even though Technical Writing will not require the creation of a blog, the posting feature of the blog will be used to easily add information to our website. The function of a page can be determined by selecting the ellipses (...) on the right hand side of each page title. From there, a short menu will pop up with several options. You may select ‘Select as Home Page’ or ‘Select as Posts Page’ for two of your pages. Any additional pages cannot act as a posts page or a home page if you have already selected designated pages, though additional pages can still serve various functions.

10

Step 3. Edit existing page elements. Edit a page by selecting ‘edit’ from the menu produced by the ellipse from the previous step. You will be brought to an editor that displays the page alongside additional tools for editing. Page editing allows the user to create a page from scratch, or simply edit existing elements of their chosen theme from site creation. The page for this example will be the about page, though this process is generally the same for all pages.

In the Red Box: These are your general tools. The blue square with a plus sign allows the user to add new ‘blocks,’ which is just a page element. A block could be a textbox, an image, a button, or an embedded link. There are too many blocks to cover in one guide, so take some time and play around with these. The page formatting will not be disturbed from its original look so long as ‘update’ is not pressed in the upper right hand corner. The pencil icon is actually two tools, an editor and a selector. The editor allows for a specific block to be edited, which produces the menu shown in the green box. The selector allows for blocks to be selected and reshaped without opening the editing menu. The forwards and backwards arrows are undo/redo buttons. The ‘i’ is

11

an information page that will provide detail about your page. The three horizontal lines display the overall layout of your page. In the Green Box : This is the block editing menu. Each block will have its own features to edit, however there are consistencies. The very left icon will display the block type, and will allow you to select to which group or column the block belongs to, which will be elaborated further in the following steps. There are also text options, link options, and the three dots on the right open up another menu that allows for more options, such as deletion if the block should no longer be there. In the Blue Box : This is a context menu, which will provide detail about the selected page element. In the picture, no specific element is selected, so the menu provides detail about the overall page. This will change to reflect whatever block or page element is selected. In the Pink box : These buttons allow the user to save, preview, and draft their page. The update button will save the changes made to a page and is not reversible, so only use it when you are sure you’re satisfied with your changes. The preview button allows the user to see what their page will look like in an actual viewing of the site. This is what users will see when visiting your page. Switch to draft allows the user to draft their page if page changes are acceptable but not ready to be finalized. The gear icon will hide or display the context menu. There are more menu options further to the right, but they are not necessary for the page editing process. Additionally, the ‘About’ text at the top of the page is a header. Each page has a header and cannot be deleted. Changing the text of the header will change the name of your page. This is how you will name your pages. Of course, you can simply edit the existing page elements to fit your purpose. However, reshaping an existing page like the about page into a page that displays your work will require a bit more effort than navigating menus. Step 4. Build a page from scratch. We will quickly address the mechanics of building a page from scratch. WordPress uses a vertical, top-to-bottom, system to organize page elements. This means if a textbox is added first, then an image, that the textbox will sit above the image on the page. This can be frustrating for users who desire a more comprehensive page design. While templates again are good for resolving this, they often do not represent our needs entirely. In this step, a page will be built from scratch, using the home page as an example.

12

Here is a blank page, which you may or may not choose to design. Step 5. Add a cover. In the top left, use the ‘Add Block’ button to add a ‘Cover.’ A cover is an image that will allow other page elements to occupy the same space. You will be asked to select an image, which can be uploaded and edited to the WordPress site.

The cover serves as a page banner, which differentiates content from format. The cover will likely not be to your satisfaction at first. Change the width, height, and image of the cover to satisfaction. From there, select ‘Write title…’ on the cover to edit the text. This is a built-in header that is paired with the cover automatically.

13

Here’s an example of what a cover might look like. Step 6. Add a grid. Using the blue ‘Add Block’ button in the top left, search for the ‘layout grid’ block and add it. This is how to add multiple page elements that exist at the same space on the page. You will be asked to select how many columns to use. For now, select three columns. Of course, more columns can be used, depending on the page’s needs. This will add a small box with three rectangles with pluses inside of them.

These boxes with pluses are columns that allow additional blocks to be added. This means that a header, paragraph, button, image, and other elements can be added all in the same vertical space. Using the layout grid, the design of your page can become much more intricate and elaborate, allowing for greater creative design not afforded by preselected template themes. Here’s an example of what a designed layout grid might look like:

14

Though there are many more details involved in page designing, this basic walkthrough should provide enough insight into allowing for users to display exactly what they would like. The block system allows page elements to be added from top-to-bottom, while the layout grid element allows blocks to be added from left-to-right. While you are not required to follow this example format, it is a simple display of the WordPress page editor. Be sure to click ‘update’ in the top left corner to save any work you complete. Creating a post: Posts are content that show up directly on your posts page. This is the blogging feature in WordPress. Of course, you’re not required to have a posts page to operate your site, but the posts feature is still helpful for Technical Writing. The posts page displays posts in a timeline fashion. This is one way to display the work in your portfolio in a chronological fashion. Though, you may choose to stick to page editing to display your work. Regardless, creating a post is straightforward and simple. Step 1. Start a post. From the home menu, select ‘Write’ in the top right hand corner. This will take you immediately to an editor.

15

Additionally, by selecting the ‘site’ dropdown menu on the left side of the page, then selecting ‘posts,’ posts can be created, deleted, and managed from this menu. You may have some already existing posts that serve as examples. You may delete these if they are unnecessary.

Step 2. Edit your post. Much like the page editor, many of the same blocks and page elements will be available. However, instead of an entire page being published, only a post will be published to your posts page. Step 3. Add your documents. You can do this in a variety of ways. You can simply add an image that is legible enough to provide the detailed document in its entirety. Additionally, a file download can be added that allows users to review the file itself.

16

Step 4. Publish the post. Publish the post to your posts page by clicking the blue ‘Launch’ button in the top right of the screen. This allows viewers to see your post. However, you can always edit or delete your post from the posts menu shown in the previous step. This completes the general process of creating a page and posting content to those pages. Once you’ve completed designing your website, you can decide to make it visible to others by launching it. Here is the website used as an example for this guide: https://exampleportfolio577259210.wordpress.com/ Launching your site: Once you’ve built a site you’re comfortable with, it is time to launch it. This makes it visible to others. You will always be able to change your website, so launching your site will not prevent editing and updating your website. In these final steps, the implied paywall will pop up a few more times. Again, launching the site does not require payment whatsoever. Step 1. Find the launch button. From the site home menu, click ‘Launch your site’ on the right hand side of the screen. Follow this by clicking the pink ‘Launch site’ button in the middle of the screen.

17

Step 2. Select a free domain. You will be prompted to select a domain. This may be confusing, as the domain was already selected during account creation. This is WordPress’s attempt to confuse the user into buying a domain. Simply select the ‘skip purchase’ selection towards the bottom of the screen, which includes your domain with added numbers, but will still be entirely functional.

Step 3. Don’t select a plan. You will be prompted to select a payment plan. Like before, simply select ‘start with a free site’ at the top of the selection.

18

Step 4. Reselect your domain. WordPress will again urge you to select a domain, making this the third time the user has been asked to pick a domain. Simply select the ‘no thanks’ option at the bottom of the screen. Be careful, one of the paid options is already selected, and will be added on at checkout if the pink button is selected. Do not press the pink button.

Step 5. Checkout. You will be brought to a checkout page. Again, be very careful. Paid options will automatically be added to your cart. You will have to manually remove them. Do this by clicking edit next to your order.

19

You will now be given the option to edit items in your order. Click the trash icon by all options to remove them. Remove items until your total on the right side of the screen reads: $0. You will not disrupt your site by removing these options, nor will you lose any progress you’ve made.

Once your total is $0, select ‘save order’ and complete checkout. If you are asked to pay or provide card information- do not. If this is the case, it is likely there is still a paid option in your order that you have not deleted and you must remove the item from your order to continue. Step 6. Return to the home menu. You will be returned to a screen that displays paid plans without confirmation that your site has been launched. Fortunately, if you have reached this point, your site has been launched and is visible to others. Simply select the home menu option to return to the home screen. This is WordPress’s last attempt at confusing a user into buying a plan.

20

Congratulations, you have completed the WordPress startup process! Tips, Tricks, and Pitfalls: