Uncategorized

Tutorials »Build a Virtual Classroom Website Tutorial

This guide is designed to help you build a Virtual Classroom website that will enable you to distribute and collect assignments, facilitate discussion, and build community for your class, without being together in person!

It will help you:

  1. Choose a theme and website structure
  2. Set up ways to facilitate learning and interaction
  3. Maintain a safe and effective online classroom environment

Table of Contents

Before you get started, it can be helpful to think about how you’d like to structure your website. What information do you need to share with your class? Do you need to facilitate discussion or collect assignments? This will help you decide what pages to add, and how to set up your homepage.

Let’s get started!


Choosing a Theme

The first step is to choose a theme for your virtual classroom site. WordPress.com has more than 200 themes, but there are a few that will be more conducive for an online classroom environment. We have a few specific recommendations:

* The P2 theme is unique as it allows for front end posting and commenting.

To take a look through our entire theme library, go to My Sites → Design → Themes. You can choose from our block-based recommended themes, or scroll down and click Show all themes to reveal the rest of our Theme Showcase as well as a search bar. Here, you can add different filters to narrow your search. For example, you can filter by left sidebar or right sidebar.

For more help with choosing a theme, visit our theme support page.


↑ Table of Contents ↑

Setting Up the Homepage

Your site is made up of Blog Posts and Pages.

  • Posts are for content that is added often. These can be used for lessons, messages to your students, or assignments. Posts will appear on a blog feed page with the most recently published post shown at the top.
  • Pages are for static content. Pages can be used to publish content such as an about or contact page, welcome message, instructions, or even assignments.

Your homepage can be set to either show a list of your latest blog posts, or to show a static page. How you set up your homepage depends on how you plan to use your website. Setting your homepage to display recent posts can ensure that the most recent assignment or message is easy to find for your students.

Alternatively, if you would like to display a welcome message, important instructions, or any other static piece of content, setting up a static page might be your preferred option.

Only published pages can be selected as a Homepage or Posts page.

To Set a Homepage:

  1. Go to your My Sites → Design → Customize → Homepage Settings.
  2. Select your desired homepage display setting.
  3. If choosing Your Latest posts, there will be no additional settings to choose.
  4. If choosing A static page, in the dropdown menus, select the page you want to use as your Homepage.
  5. Optionally, you can also set another one of your pages to display a list of any blog posts you’ve written under Posts Page.
  6. Click Save Changes to save your changes.
Customizing Homepage Settings

For more information on setting a static home page, see this support page.


↑ Table of Contents ↑

Creating Pages

Your theme may have activated with a few sample pages. Pages are managed under My Sites → Site → Pages. Click a page title to open any page in the editor or click Add New Page to start a new page.

Add New Page

Before entering into the editor, you can choose a pre-designed Page Layout, or choose a blank Page Layout if you want to start from scratch. Using our Page Layouts can help you get up and running quickly and they are fully customizable. Learn more about our Page Layouts here.

Once a layout is selected, you will be taken to the WordPress Editor, where you can edit your new page.

In the editor, add your own title and content for a page and click the Publish when you are finished. Here’s a breakdown of some of the important sections within the editor:

The Block editor

Repeat this step for each page you’d like to create on your website. You can choose to add as many or as few pages as you’d like.

Using the Block Editor

You add content to your pages by using Blocks. Blocks are modules that contain various content, such as paragraphs, images, galleries, audio and more! Some basic blocks you might want to add to get you started:

  • Paragraph: This is a basic block that adds plain text to your page or post. More information.
  • Heading: These blocks are good for adding titles within your post or page for breaking up your content. More information.
  • Image: Lets you add images inside a block. More information.
  • Media & Text: This block lets you put an image and text side by side. More information.
  • Columns: This block lets you put other blocks side by side in rows and columns. More information.

For a full list of blocks and their support documents, check out this support page.

When you’re done adding content, click the Publish button to make this page live. At any time you can make changes to this page, set it back to draft mode, or send it to the trash.

If you have not yet launched your website, or it is set to private, published pages will only be viewable by admins


↑ Table of Contents ↑

Creating a Menu

When a page is published, it is live on your site. By adding page links to your menu, we can provide a way for your students to navigate to the various pages you have created.

To Create a Menu:

  1. Click on My Site → Design → Customize → Menus.
  2. Choose a menu you want to edit, or create a new one. When you create a site, a Primary Menu will be created automatically.
  3. Click on Add Items. In the menu that slides out, you’ll see a list of pages, categories, posts, etc. that you can add to your menu. Click on them to add them to the menu.
  4. You can click and drag menu items around to re-arrange them, or drag them and indent them underneath one another to create dropdowns.
  5. Make sure that “Primary Menu” is checked under Menu Location.
Add Menu Items
Click on the image to see a larger version.
Organizing Multiple Topics with Categories

If you are managing more than one subject or class within the same website, you can make use of category pages to stay organized. A Category Page is a link placed in your menu that when clicked, it will display all the posts of a certain category.

To learn how to create and make use of Category Pages, see this support page.

When you’re finished adding items to your menu, remember to click the Save Settings button to save the changes to your menu.

If you want to setup a more complex menu, you can find more detailed instructions on customizing your menu in our support docs.


↑ Table of Contents ↑

Adding Lessons and Assignments

Now that we have the basic structure of your website set up, you can start adding your first lessons or assignments.

In this tutorial, we are using posts for assignments and lessons, however, pages can also be used. Creating a post is much like creating a page and uses the same block editor.

To create a new post, go to My Site(s) → Site → Posts and click Add New Post. Unlike pages, posts do not have predefined layouts to select. You will have all the same blocks available for writing up lessons and assignments.

Adding Videos

Video can be a highly personal and efficient way to communicate with your class. This might be in the form of a recorded lesson or lecture, instructions about the assignment, or a personal message.

To upload video files directly to WordPress.com, a Premium Plan or higher is required. The free and Personal plans support video embeds from YouTube, Vimeo, and other free video hosting services.

Visit our videos support page for a full list of supported services.

Adding Documents

WordPress.com supports the upload of many types of common file types. You can see a full list here. A File block can be used to upload a file and create a download link to it. You can find full instructions for uploading documents here.

PDF files can be embedded and viewable directly on the website. To do this, add a URL to the PDF file directly into a paragraph block and the editor will do the rest. You can find full instructions for embedding PDF files here.

Using Tags and Categories

If you are managing more than one class, or need to keep various assignment posts organized, use categories and tags. These can be assigned to each post within the post editor, or managed globally here or by going to My Site(s) Manage → Settings → Writing.

If you are not sure whether to use categories or tags, this support page has some guidelines.


↑ Table of Contents ↑

Adding Widgets

Widgets are additional content you can add to your site’s sidebars and footer, and can be tailored for each of your pages. The available widget areas will dependent on your theme.

Widgets can do a variety of things. Here are a few that might be useful for your virtual classroom:

  • Contact Info Widget – Display your personal or other important contact information More information.
  • Text Widget – A simple widget that lets you add any text that you want. Great for providing general information, announcements, reminders, links, and more! More Information.
  • Search Widget – Creates a search bar that people can use to find posts, pages, and other content on your site. More information.
  • Milestone Widget – This can give a nice visual reminder for the due date of an assignment. More information.
  • Google Calendar – If you already use a Google Calendar, you can link this to your sidebar. More information.

For more detailed instructions on how to use widgets, see this support document.


↑ Table of Contents ↑

Configure Privacy Settings

By default, all new websites at WordPress.com will be private until they are launched. During this time, you are free to work on your website without being viewable by the public.

Privacy settings determine who can view your website. To manage your privacy settings, go to My Site(s) → Manage → Settings and look for Privacy on the General tab. Once your website is launched, you will have the option to set your privacy settings to Public or Private.

If you want only your students to have access to your website, set the privacy settings to private. You will then need to make sure each student is added as a viewer to your website.


↑ Table of Contents ↑

Adding Students

Once your website structure and content is ready to go, you can allow access to your students. If your website is public, this is as simple as sharing your website address with your students without any additional steps.

New Post Notifications for Students

Your students can follow your website and receive notifications each time a new post is published. This is a great way for students to keep up with any new assignments, news, or special messages.

Your website will have a follow button in the lower right corner where students can click and follow through their WordPress.com account. If they do not have an account, they can follow with any email address.

You can also add a Follow Blog widget to your sidebar for better visibility. You can see how to set this up here.

For full instructions on following websites, you can share this support page with your students.

Adding Students as Viewers to a Private Website

If your website needs to remain private, you can grant access to your students by adding them as Viewers. As viewers, they will not be able to add or change any content. They will be able to comment on posts.

To add viewers to your private site, first open My Site(s) → Manage → People. Once there, click the +Invite button. From here, you can enter up to 10 email addresses, choose the Viewer role, write a custom message, and send the invitation. To view and manage your viewers, visit My Site(s) → Manage → People → Viewers.

Allowing Students to Write Content

If you would like to allow students to write posts or pages, this is possible by choosing a different role. Contributors and Editors have access to write content, but do not have access to any other website settings.

  • Contributors can write and edit their own posts, but cannot publish.
  • Authors can write, edit, and publish their own posts.

User roles can be changed at any time.

To view your private website, each student will need to set up a WordPress.com account. For full instructions on adding users and user roles, see this support page.


↑ Table of Contents ↑

Charging for your classroom

Recurring Payments allows you to create renewable payments. When they get set up, your subscribers will fill out their credit card details and will then be charged automatically every month or every year. You don’t have to remind or nudge them, and they also don’t have to remember to pay you — everything is handled.

To enable paid subscriptions to your classroom, add “Recurring Payments” block on your home page:

The first time you insert the Recurring Payments block, you will have to connect or set up a Stripe account. We partner with Stripe to make sure payments end up safely in your bank account.

Once Stripe is set up, you can add your first subscription. Choose a renew interval (a month or a year), title of your course, and of course – the price:

Once you publish the page, your students will be able to sign up and they will be charged automatically every month or a year.

You will have to add the students manually, as described in the section above, so they can access the content they paid for.

For more details, please read this Recurring Payments support article.

Recurring Payments work with any WordPress.com paid plan.

↑ Table of Contents ↑

Conclusion

That’s it! You’ve successfully created and set up your Virtual Classroom website. Congratulations!

Keep in mind that you can make changes at any time to your website. To find help, click the blue question mark in the lower right of your dashboard. Here you can find help from our documentation or get in touch with support directly. Visit our support documentation at wordpress.com/support or get in touch with our Happiness Engineers and we’ll be happy to help!

Not quite what you're looking for?

Get Help