Link to this page: bit.ly/2NKwe0z

In this tutorial, I will walk you through the steps of getting a very basic professional website up and running. I’m going to keep the options very narrow so that you can get a feel for how WordPress works. Don’t worry if it seems overwhelming — you’ll soon get accustomed to its logic! Later on we can work together to customize your site to your own taste.

First, let me show you a fake student website that I’ve made to serve as a model.  It’s simple, but once you get the basics you can get fancy on your own!

Setting up a site on KNIT:

  1. Navigate to this page and click on “Create a site.”
  2. In the next window, enter your site name using your name or initials. Such as knit.ucsd.edu/YOURNAME. Feel free to use underscore or dashes if you’d like to separate your names, such as knit.ucsd.edu/YOUR_NAME.
  3. Give your site a name, such as your name! This can be changed in the future.
  4. Click on your preferred privacy settings. When I’m building websites, I typically select “VISIBLE ONLY TO ADMINISTRATORS OF THIS SITE.”
  5. Now click “Create site.” In the next window you will find the URL of your new site. Click on it!
  6. Congrats, you have created a site.

Designing your site on KNIT:

Creating your About Me page:

  1. You should now see a big picture of a little plant! We’re going to change that!
  2. Navigate to the top menu bar and hover on “+New.” Click on “Page,” the third menu option down.
  3. In the next window, give your page a name. I suggest “Hello” or “About Me.”
  4. Now write a few sentences for your bio. If you can’t think of anything, feel free to copy this:  “My name is XX. I study arts & humanities at UC San Diego. [And one fun fact about yourself or something your working on, such as: “I love San Diego’s canyons.”]
  5. Now we’re going to add a profile photo. If you have a photo you’d like to use, email it to yourself so you can add it.
  6. To add a photo, click on “Add media” below the title.
  7. Upload the image, and select “Insert into page.”
  8. Once the image is inserted, you can click on it to adjust the size, or align it to the left or right of your text.
  9. Now click “publish.” Hooray, you’ve create a page!

One more page to make!

  1. Click “+New” and create a page with the title “Blog.” Hit publish. That’s it!

Designing your home page:

  1. In the dashboard, navigate to the lefthand menu bar and hover over “Appearance.” Click on “Themes.”
  2. In the new window, enter the words “Twenty Sixteen” in the search bar. You do not need to hit enter. When you see it, hover over the theme icon and click on the button that says “Activate.”  Twenty Sixteen will be the theme we use to control the design of the site. (We’ll talk more about themes later.)
  3. Now click on the “Customize” button on the theme icon.
  4. In the new window, click on “Static Front Page.” Then in the new panel, click the option that says “Static Front Page.”
  5. For your front page, choose the page you just made (“Hello” or “About me.”). For your blog page, choose “Blog.” (You can change this later to another name like “writing” if you wish.)
  6. Now hit “Save and publish.”

The Side bar

  1. The sidebar allows you to add content like “recent posts” or “recent comments.” In my sample student site, I’ve taken them out. I’ll show you how to take them out or change the content.
  2. To the left of where it says “Static front page,” there is a little arrow pointing left. Click it. You are now back in the customization panel.
  3. Click on “Widgets,” then click on “Sidebar.” Those little text boxes (that say “Search,” “Recent posts,” etc) represent the widgets that are populating your sidebar. Click on them and see what happens.
  4. To remove them, click on the text box, and then click “remove.”
  5. To add widgets, click on “add a widget.” Look at all the options! Feel free to explore them and see what happens.
  6. If you end up writing blog posts in the future, you may want to use the “Recent posts” widget to showcase your blog posts on the home page.

The Menu

  1. A  menu helps users navigate through your site. To create a menu, go back to the customization panel.
  2. Click “menu,” and then click “add a menu.”
  3. Name your menu “first menu.”
  4. Click “primary menu” as your menu location. Then click “add items.”
  5. Click on “About me” and “Blog” to add these pages to your menu. You can create more menu items here in the future.

Yay! You have a basic website up and running. Now let’s talk about making it fancy! Feel free to post questions on the forum or arrange to meet me in person.