Let's take a step-by-step tour through your WordPress site and see how the different functions work so you can make your new site the best for your project and course. (Note: This tutorial is geared toward COPLACDigital faculty. It will still be useful for students, but the walkthroughs and details may be slightly different.)
Begin by logging in to the administration area, or the "back end," as we will call it, of your website. You can get to the login page simply by adding /wp-admin to the end of your site's URL. For example:
- slug.coplacdigital.org/wp-admin (replacing "slug" with your course's actual slug) would be the login page for your class' overarching project site
- slug.coplacdigital.org/course/wp-admin (replacing "slug" with your course's actual slug) would be the login page for your class' course site
After logging in, you are in the main administration area called the Dashboard. This is the brain behind your website and where the organization of your site begins.
Note: Since we are using WordPress Multisite, once you have logged in to one of your sites, you can easily switch between their back ends by hovering over "My Sites" in the top left-hand corner. When you hover over it, it will list the sites within your class's multisite network that you have access to (which should just be your course site and project site).
From the Dashboard, notice the toolbar at the top of the screen. The link that is your site's name will take you to a view of your new site.
Take some time to just look at your site before you begin changing things. It's important to see how your site is laid out and how it works on the front end (the presentation side).
The layout you're looking at is called a WordPress Theme. Themes control the appearance of your website, styling the look of it and the framing of its content. Your default theme, WordPress Twenty Seventeen (pictured above), features a "header" at the top with the title and tagline for your site. Below the header is a menu area (pictured above but not automatically created for new sites), a content area displaying your lone post, and finally, the site's footer.
While a visually sleek and simple theme, Twenty Seventeen is not the best choice for exploring the different types of pages and content areas mentioned below. For the purposes of this walkthrough, we recommend changing your theme to Twenty Sixteen. To switch to Twenty Sixteen:
- Go to your Dashboard (slug.coplacdigital.org/wp-admin)
- Choose "Appearance" and then "Themes" from the left-side menu
- Hover over Twenty Sixteen (near the end—themes are displayed in alphabetical order) and choose "Activate"
- Go back to your front end home page and see your site has changed.
Along the right side you will see some titles and links—these and other items in the sidebar comprise Widgets. Most likely there is a Search box, followed by a list of Recent Posts, Recent Comments, Archives, and Categories, and perhaps other content.
Within the main middle section of the page is the content area. Take a look at the default post that shows up: there is a Title, and below the title is the date the post was written, other information about the post (known as post metadata), and the body of the post.
At the bottom of the page is the area called a "footer." It says "Proudly powered by WordPress."
If you have already changed your theme to something other than Twenty Sixteen or Twenty Seventeen, your site may look different and have these items (menus, widgets, etc.) in different places.
Take time to notice the smaller details of the home page's layout and design. Move your mouse over the title of the post. Notice how it changes color—this is called a "hover." Most themes feature a distinctive color underline when you move your mouse over a link. Move your mouse over any of the links in the sidebar. Do they change? Is the change the same? Also look at the color of the links before you mouse over them—how are they colored or underlined to stand out from the rest of the text?
Right now you have only one post. It is residing on a page that is laid out as your site's home page, or front page. By default, the home page of your site features the most recent posts on your site (you can change this later). If you click on the title of the post that's on your home page, it will take you to the specific page for that post. Some theme designers style their single post pages to look different from the home page.
On the single post page, again pay attention to the layout and notice what is different about the design elements. Is the header different? Smaller, larger, or a different color? Is there a sidebar?
Posts are usually stored in Categories and/or Tags so you can keep related topics together. Right now you have only one category, but that may change as you put content on your site. Back on your home page, click on the single category ("Uncategorized") that appears in the sidebar. Now you should be on a page that has been generated to display only the posts within that category. Again, take a look at the layout and see how it may be different from the home page and the single post post.
Go back to the home page and do the same with the Archives link in the sidebar.
Now that you have an idea of how your site looks and what the different layout sections are called, it's time to test drive the back end of your site! The first page you see after logging in is the Dashboard (slug.coplacdigital.org/wp-admin), a collection of information and data about the activities and actions on your WordPress site.
The Dashboard helps keep you up to date on new and interesting bits of information from many WordPress resources. In the corner it also features a list of the most recent activity you've accomplished on your site.
On the left side of the Dashboard is the main navigation menu that details each of the administrative functions you can perform. Move your mouse down the list, and sub-menus will appear with quick action/access items for you. Once you have selected a parent navigation item, the sub-menu will remain open for you to see those additional items. Throughout this test drive, we'll be navigating from this main menu on the left.
To begin, click on "Settings." You'll be taken to a screen with very basic information and settings for your site. Notice that sub-menu options have also appeared on the left—you may want to check these out later. On the main Settings page, change the tagline of your site so that it's something different from "Just another COPLACDigital Site." Scroll to the bottom and click the blue "Save Changes" button.
Next we'll move on to Users—choose "Users" from the main navigation menu. You'll be taken to a screen showing all of the users on your site, as well as their roles. Right now it should just be you and your co-teacher (and perhaps a cryptic username associated with Leah's email). With your administrative privileges, you can add users or change existing ones. Under "Users," click on "Your Profile." This is where you can change your profile (though you cannot change your username). You can select how you would like your username to be displayed, and you can also change your password from here. If you make any changes, be sure to scroll to the button and click "Update Profile."
Changing Themes
You may have already changed your site's theme, but here's a quick overview of how to do it. From the administrative side, hover over "Appearance" in the left-hand menu and choose "Themes." You'll see the 14 themes we have made available to you (based on careful selection). To change your theme, thus changing the way your site looks, simply hover over one and click "Activate." If you'd like to see what it looks like before activating it, you can choose the "Live Preview" option instead.
You can change the theme as many times as you want. No matter how many changes you make, it will not affect the content of your site. When switching themes, some of your content may seem to "disappear," but remember—all a theme does is change the appearance of your site. The content is all still there on the administrative side—the new theme may just be presenting it in a different way. (A perfect example of this is Twenty Seventeen versus Twenty Sixteen.)
Adding and Changing Functionality
You may remember from Martha Burtis's WordPress portion of the workshop that while themes control the appearance of your site, plugins are what add, change, and enhance the functionality of your site. Let's take a look at the plugins on your site. Choose "Plugins" from the main menu, and you'll be taken to a screen that shows all of the plugins available to you. You should have 18 plugins that are installed on your site—if you want to use a plugin, this is where you will come to activate the plugin. Activating plugins is typically very easy, and most plugins give you activation instructions. Notice that some of these plugins are "Network Active." Those are plugins that we force every site to use, for security purposes, so you do not have control over them. You can't deactivate a Network Active plugin.
Take a moment to peruse the descriptions for the plugins available on your site to see the range of functionalities they can add. From easy-to-create tables, to PDF embeds, to easy image slideshows, to custom widgets on different pages, these plugins will allow you to do more with your site. If there's something extra you want to do with your site but don't see a plugin that can help you do that, contact Leah. She can look through the plugins and give you access to additional ones that may help you, and she can also work to find alternative solutions that don't involve plugins if that's a possibility.
Creating and Managing Content
There are three main types of content that you can create and manage in WordPress: Posts, Pages, and Media. The interfaces for creating and managing each of these content types are user-friendly and straightforward to work through. Here we'll just give a brief overview of the basic content types and where to manage them.
Posts are written content that we traditionally associate with blogs. They display in reverse chronological order with the most recent post first. Posts are best used for ephemeral content—something that you don't mind eventually slipping off your site as newer content takes its place. For COPLACDigital, you and your students will be using posts on your course sites (slug.coplacdigital.org/course and slug.coplacdigital.org/student) as a way to respond to assignments, update each other on projects, and have discussions about course content and research discoveries. You can organize posts with Categories and Tags. When you publish a post, it becomes available on your site.
Choose "Posts" from the main navigation menu, and you'll see a screen that lists all of your posts. Right now you probably just have the template "Hello world!" post from WordPress. This is where you will come to add and manage your posts.
Pages are written content that we associate with more traditional websites—static webpages with various types of information. Pages are best for "permanent" content—something that you want to stay in the same place, outside of a blog flow. Pages are hierarchical in nature, and these hierarchies are oftentimes reflected in site menus. (For example, this First Steps tutorial page is under WordPress Tutorials, which is under Resources.) For COPLACDigital, you and your students will be using pages on your project sites, and to a lesser extent on your course sites. For project sites, the pages will showcase students' research and analysis and contextualize the project. For course sites, you and your students could each have an "About" page that introduces the project and person. When you publish a page, it becomes available on your site.
Choose "Pages" from the main navigation menu, and you'll see a screen that lists all of your pages. Right now you probably just have the template page that WordPress automaticallly adds for you. This is where you will come to add and manage your pages.
Media are audiovisual and other content (ex. PDFs) that you can add to your site. For the purposes of WordPress, audiovisual content should really just be images (JPEGs, PNGs, etc.). You should not add audio or video to your WP Media Library because WordPress is not meant to host and serve those kinds of files. Of course, you can still include audio and video on your websites—it just needs to be drawn in from somewhere else, such as YouTube. We'll get into that in another tutorial. Aside from images, the other media you will most likely be adding to your site are PDFs. Unlike Posts and Pages, when you add a media item to your Library, it does not automatically become available on your website (at least not in an obvious place). If you want it to be part of a post or page, or an element in your theme, you will have to add it there.
Choose "Media" from the main navigation menu, and you'll be taken to your media Library. You probably don't have anything in there yet, unless you got excited and already added something yourself! This is where you will come to add and manage your media. You can also add media to the Library as you are working on a page, post, or element of your theme. The Library is just a central place that draws in all of your media and allows you to manage it.
Now that you've looked around your site on the front and back end, seen how it functions, and seen where you can go to make changes, let's really start setting up your site. For the purposes of this step, if you aren't already in your course site (slug.coplacdigital.org/course/wp-admin), go there now.
On the admin side, go back to Settings and see if there's anything else you want to change other than the tagline. Do you want a different title for your site? How do you want dates and times to be displayed?
Activate Plugins
Next, let's add some functionality to your site. Navigate to the Plugins area and find one or two that sound like they will add useful functionality to your site. Since we're working in your course site, a good one to activate might be PDF Embedder—we'll use that as the example for this step, but feel free to activate a different one. Under the plugin name, choose "Activate." Once the plugin activates, you will see a banner like this at the top of your Dashboard screen:
Voila! Most plugins are this easy to activate. Some plugins will have settings that you can change once they're installed, and some will appear as a new menu item on the left side of your Dashboard (or as a new sub-menu item in an already-existing option). PDF Embedder, for example, becomes a sub-menu item under "Settings." This new menu/sub-menu item will allow you to configure and change the plugin's settings. If the activation of a plugin does not add a new menu/sub-menu option, you can always go back to the main Plugins area and check there. For example, after activating PDF Embedder, its listing in the Plugins area now looks like:
A few plugins are not as easy to activate as PDF Embedder—Jetpack is a very popular WordPress plugin that has a much longer activation process. (For a tutorial on how to activate Jetpack, click here.)
If you have trouble activating a plugin, remember that you can always email Leah.
Create a Page
This tutorial was created in versions of WordPress using the Classic Editor. WordPress has since upgraded to a new, block-based visual editor. You can return to the Classic Editor shown in these tutorials by activating the "Classic Editor" plugin. For more on how to use the new WordPress Editor, see UMW's Gutenberg Editor Walkthrough.
It's time to start creating content! Let's make a "Syllabus" page for your course site. (It's okay if your syllabus isn't ready. We can just put skeleton content up.)
To get started, hover over "Pages" in the main menu, and then choose the "Add New" option from the sub-menu. In the very first box that says "Enter title here," give your page a title. ("Syallbus" is perfectly fine!) Then click down into the text editor area and add some information! Low-stakes items you could add are:
- Your course title
- Your course time and run dates
- You and your co-teacher's information
- Your course description
Notice that WordPress automatically has you working in the "Visual" text editor—this mode will be the easiest for you to work in. You'll see familiar menu items to help you format the text on your page. For even more formatting options, toggle the toolbar by choosing the right-most button that looks like a keyboard.
Once you've finished adding some content to this page, go ahead and hit the blue "Publish" button on the right-hand side of your screen. (If you want to see what it looks like first without officially publishing the page, you can click the "Preview" button that is on the right-hand side just above the "Publish" button.)
You've just published your first page! You'll see a banner notification, very similar to the plugin activation one, at the top of your Page screen:
From here, you can view the page that you just published. Congratulations!
Optional: If you'd like to keep working with Pages, go back to the main "Pages" area where you see a list of all of your site's pages. Hover over the "About" page and choose the "Edit" option. Edit the default "About" page that WordPress created and add a short bio for yourself. Update the page when you're finished. Voila! You are now a pro at WordPress pages!
Create a Post
Now that you've published a page (or two!), it's time to create a post. Let's make a "Welcome to the Course!" post. Creating a post is very similar to creating a page, though there are a couple differences. Hover over "Posts" in the main menu, and then choose "Add New" from the sub-menu. Give your post a title. ("Welcome to [your course title]" is a good option.) Then click down into the text editor area and add a few lines welcoming students to the class and perhaps introducing yourself. Like creating a page, you'll be working in the visual text editor and can expand the toolbar for additional formatting options.
When you've finished composing your message, take a look at the right-hand side of the screen. Unlike pages, you'll see some additional options: Format, Categories, and Tags.
- Format determines what your post will look like. You should base a post's format upon what you want your post to feature most prominently and/or upon what your post is primarily composed of. Since you've composed a (presumably) all-text post, we'll keep the format set to "Standard."
Categories and Tags function similarly but with subtle differences—both of them help organize and sort your posts, but they work across different levels.
- Categories are broad ways of sorting your content. Categories should exist independently of each other—so, one category should not overlap with another. Let's go analog for a moment to think about this:
Categories work like the chapters of a book: All of a book’s content is organized into chapters. Looking at the title of each chapter will give you a good idea of the topics the book covers and how it’s organized. If the book author or editor wanted to change, add, or remove any chapters, it’d be a pretty big structural change for the book.
—Best Practices For Using Categories And Tags In WordPress- Example: One of the categories you might use for your COPLACDigital course would be "Assignments."
- Tags are more granular ways of sorting your content. Tags can function across categories and do not necessarily need to be independent of other tags. Back to the analog:
Tags work more like the book’s index. Indexes are a much longer list of more specific topics the book mentions. If a topic is in the index, it’s probably covered (albeit briefly, maybe) in more than one area of the book. A book’s index is usually much longer than the table of contents, and adding or removing an item doesn’t affect the structure of the book.
—Best Practices For Using Categories And Tags In WordPress- Example: One of the tags you might use for your COPLACDigital course would be "Announcements." You'll most likely have announcements related to multiple aspects of your course.
If you aren't comfortable with using categories and tags yet, that's okay. You can always publish a post without categorizing or tagging it (but we highly recommend doing so once the class begins, especially since your course's blog will contain your posts and your students' posts). When you're ready to publish your post, hit the blue "Publish" button on the right-hand side of the screen. As with publishing a page, you'll see a banner at the top of your Post screen:
From here, you can view the post that you just published. Congratulations!
Add Navigation
Now that you have some content on your site, let's add a menu so that you and your visitors can easily find your way around the site. Hover over "Appearance" on the left-hand menu and then choose "Menus" (the 4th item). To get started, give your menu a name ("Main Menu" is perfectly fine!) and hit the blue "Create Menu" button.
With your menu named, you can now choose which pages you want it to link to. You will see your options on the left side of your screen—you probably have only a page or two to choose from unless you've created more.
Let's add both the Syllabus and the About page to our menu since those are both important pages that you, your students, and any visitors to the site will want to see. Check the boxes for the Syllabus and About pages and click "Add to Menu." Voila! Your menu now has structure and links to important content on your site. In the main area of the Menu screen, you'll now see these pages listed under "Menu Structure." You can reorder the menu items by dragging and dropping the gray boxes that they are in. Additionally, you can create a drop-down or sub-menu by dragging a menu item slightly to the right, as long as there is an item above it. (Your first menu item cannot be a sub-item.)
Below "Menu Structure," you'll see "Menu Settings." Here is where you can choose where you want your menu to display. The Display locations available to you will vary depending on which theme you are using. If, for example, Twenty Sixteen is your active theme, you will have two display locations: Primary Menu and Social Links Menu. Most themes will have a display location called "Primary Menu" or something similar. Since this menu is our main means of navigation, let's add it in the Primary Menu display location. Once you've chosen the display location, click the blue "Save Menu" button.
View the home page of your site and see how your menu looks now!
Congratulations! You've reached the end of the first WordPress tutorial! The next "step" includes additional resources from the WordPress Codex that will help you learn more about the different aspects of WordPress. We encourage you to browse the Codex articles and to start another one of our tutorials.
Here are some additional resources from the WordPress Codex that cover items from this tutorial: