WiscWeb - Creating a Page

Pages are used to create a navigation structure for your WordPress site, and are primarily used to present content that will not change often.

In this document:

Purpose

A website page is a way for you to provide information to your site visitors, both new and returning, and can use a number of different strategies to display content and important topics. In WiscWeb and the UW Theme, pages will likely make up the majority of your content delivery to your audience. Those pages, along with other types of site elements such as posts or events, make up your website.

Accessing your Pages list

To view your pages, click on Pages in the left menu. The next screen will show you all pages that currently exist within your site.

Full Pages list

Creating a new page

To create a new page, click the Add New button at the top of the page. You are presented with the page builder options, and several fields that require your attention to add content.

Page Title

When creating a new page, add a title to generate a friendly URL for the page as well as provide users with context of the content it will contain. For example, a "Contact" page would presumably contain information on how to get in touch with your department or program. Once you create a title, a Permalink value will also be updated with the expected URL for this particular page.

Page title filled in and expected URL displayed for new page

Please note: Unless otherwise necessary, do not use all caps for your page titles (use Contact instead of CONTACT), and separate words with spaces instead of other characters. Also try to avoid special characters such as apostrophes, exclamation points, and ampersands.

Also be aware that page titles will appear as part of the breadcrumbs that are created by default. Breadcrumbs will appear on every page except the site's homepage.

Page Layouts

Your next option is to choose a Page Layout to begin your new page. By default, your page is created with a one-column layout that includes a single Text Block page element to work in. In this section you can choose to remove that initial layout and replace it with one of three other two-column choices.

Options available for initial page layouts of a page.

The other values are Two Column (60% left, 40% right); Two Column (40% left, 60% right); and Two Column (50% left, 50% right). You can click and choose one of those if you choose to. This option goes away when you Save as Draft or Publish this page.

Please note: If you have entered content into the default one-column layout below, and then choose one of the different layouts in this section, you will lose any work that you had done below as part of this process. It is recommended to instead use the Add Content Layout button option below to add additional layouts on the fly without effecting your existing content.

For more information on Content Layouts and their use, please see the WiscWeb site page that covers this topic.

Upper Content Area

The first specific content area that you can add anything to is the Upper Content section. This is where you can add your Hero Image, or the banner image that can appear at the top of this page. To add a hero image, follow these steps:

  1. Click the Add Upper Content button and choose Hero Image/Carousel

    Add upper content button is depressed and the option to add the hero image or carousel is visible
  2. The various options and inputs are now visible for your first hero image to be added. There are several layout options to choose from, but the first thing to be aware of in a hero content area is the specific Hero Image size requirements. The image that you use should be at least 1600 pixels wide, and no more than 500 pixels in height.

    The layout options for the hero content area are displayed

Primary Content Area

Below the Upper Content area, you will see the Primary Content Area where the majority of your page content will likely exist. Again, by default, a one-column layout already includes a Text Block page element where you can begin entering content using a simple What You See Is What You Get (WYSIWG) editor. The Text Block is the most commonly used page elementfor adding words, images, and other types of media. More advanced items are also added into Text Blocks, including Gravity Forms and Events Calendar shortcodes.

There are a number of other Page Elements for you to choose from, and each can be added by clicking on the Add Page Element button and choosing the one you would like to add.

Animated GIF image of adding a page element to a content area

You can add media to your page elements by clicking the appropriate Add button (Add Media for Text Block, or Add Image for a Featured Content Block for example). Learn more about adding media to your Media Library through this course page.

You can also add additional layout blocks by clicking the Add Content Layout button and choose a one-, two-, or three-column layout. Be aware that content cannot be dragged between the various column layouts at this time.

Lower Content Area

Below the Primary Content Area is the Lower Content Area, where you can add a single image to the bottom of this page. This image's size restrictions are similar to that of a hero image.

Excerpt

The excerpt field is meant to be a brief summary of your page content on and can be displayed when using different UW Theme page elements, like a post listing or Featured Content Block. The excerpt is also displayed when search engine results are displayed to better inform your audience.

By default, the excerpt field is left blank and WordPress will automatically populate the field based on the first text that appears on the page. Because of this, the excerpt may not accurately represent your page content so it is recommended that you add your own excerpt. 

An excerpt field is displayed with a paragraph of text entered to describe the purpose of the page.

 

 

Meta Tag Settings

Another specific function within the UW Theme is the ability to customize the look of a post when it is shared through Social Media or crawled by search engines. The Meta Tag Settings section allows you to use a number of different options to edit this delivery. More on this can be found here: WiscWeb - Sharing pages to social media and search engines.

Some of the options that exist for Meta Tag Settings, including the Title and Image fields

If you do not see the Meta Tag Settings section, you will likely have to make it visible by clicking on Screen Options at the top of your screen and checking the Meta Tag Settings option there.

Screen Options pull down area visible with Meta Tag Settings highlighted

Parent / Child Page Relationships

Within your page builder area, you have the option to use parent / child relationships to create subpages for your site. This option only becomes available when you have created more than one page. When you are editing your page, on the right side you can declare the parent of this page by clicking on the drop down menu and choosing a published page from the list.

Options for the parent and child selection

Pages that have a Parent / Child relationship defined will be grouped together in your Pages list to make it easier to find them. You can define the order in which the pages appear as subpages by using the Order value. The default order for subpages is alphabetical.

Page list view with parent and child pages

Saving drafts and previewing pages

As you are building out this page, you want to make use of the Save Draft button in the upper right section of your editing environment. This will save the work that you have done up until this point, but will not make the page live just yet.

Publish options section, where you can save drafts, preview, and publish your current page

Once you have saved your draft, you can click on the Preview button that will open a new browser window or tab, and show you the current state of your page. This is a good way to check periodically that the changes or updates that you are making look as you expect them to.

Publishing your page

Once you are ready for your content to be live and visible for your site visitors, click the Publish button in the upper right section of your editing environment. Whenever you want to publish new changes, simply click the Update button that now displays in this section. You can also click the Preview Changes button before committing your update to preview what it will look like.

Updated publish section is visible, where you can update or preview the changes you want to make.

Additional Resources