The Page/Post Editor

The Page/Post editor is the most important tool you will use in WordPress. It is how you build each and every page or post. It has two modes, the WYSIWYG or “visual” editor, that gives you a preview of your formatting, and the raw “text” editor, that allows you to type in HTML and add classes to your elements.

In this tutorial we will cover each menu in the Page/Post editor, and what each control does.

The Main Editor

The main page editor area

The main page editor area

When you click “Add New Page/Post” or “Edit” on an existing post/page, you will be taken to the editor screen. In the center is the main editor area. You can add images, text, lists, tables and links to your pages here.


Setting a Title & URL

At the top of the screen you should see a single line text field, with a permalink below it:

Edit the post title or permalink(URL)

Edit the post title or permalink(URL)

This is your page title and page URL. Make sure to keep your page title short and descriptive. If you expect people to visit this page by typing in the URL, type in a custom URL that is short and simple. More details on


Adding & Formatting Text

To add text, simply type into the text box. To format text as a heading, use the drop-down on the left of the WYSIWYG, that usually says “Paragraph.” Select the styling you want to apply to whatever text you current have highlighted.  Next to the drop-down are several buttons for formatting text that you will recognize from other programs and word processors. Again, highlight the text you wish to format, and click the appropriate button. Alternatively, if you are comfortable with HTML, you can use  <h>,<strong>,<em> or <p> tags in the text editor to format your text manually.


Adding Images

The WordPress Insert Media screen, used for adding images to pages

The WordPress Insert Media screen, used for adding images to pages

Simply click the “Add Media” button to add images. A new window will appear that will allow you select an image from the media library (where WordPress saves your uploads) or upload a new image. When uploading a new image, add a description of your image in the “alt” field for visually impaired users.

If you would like a caption to appear under your image, enter it into the “caption” field. At the bottom right, you will see options to choose the image’s alignment, what the image should link to (if anything) as well as what size it should be.


Adding Sliders

Add Slider button

Add Slider button

Next to the “Add Media” button you will see an “Add Slider” button. This lets you insert a previously created slider. Creating sliders will be covered in our “Understanding WordPress” > “Plugins” section. You may also see a button for “Add Video Gallery”, however, adding video galleries requires admin access or higher.


Adding Columns

The Column Shortcode button

The Column Shortcode button

You will also see a small button with a pair of brackets on it. This brings up the column shortcode generator. Using these shortcodes makes it possible to have your content in columns. The last column in a row or section should be a “last” column to prevent formatting issues later on. More details can be found in our “Understanding WordPress” > “Plugins” section.


The Right Sidebar Menus

Add Sidebar Menu

Select your Sidebar Menu here

Select your Sidebar Menu here

If you wish a menu to appear in the sidebar of your page, select the menu you wish appear from here. Information on creating menus is in our “Understanding WordPress” > “Menus” section, and information on order and organization for menus is in our Style Guide.


Publish Menu

The Publish menu is where you can control your page/post’s status. Click “Save Draft” to save your current progress without publishing. (DO NOT hit “publish” until you are ready for the Web Team to review your page) If your page has been published already, “Save Draft” works the same as “Publish.” If you wish to “preview” changes on a published page without the public seeing those changes, make a copy of your page, and make your edits on the copy. Then bring the edits back to published page when you’re ready.

In the Publish menu you can also control the “visibility” of your page. You may make it “private,” which is visible only to users with “editor” access and higher. You may also set a password on your page. For instance, if you have a group page with information for group members only, you can set a password on the page, and share the password with your group. If you need a page restricted to the DSU community only, use the Page Restrict plugin instead.

The Publish menu also logs your past revisions, and has a link to browse and restore previous versions of the page.

The last section of the Publish menu allows you to set a publish date, if you need to move the published date of a page or post forward or backward. For instance, if you write a post about an event a few weeks after the event, you may want to change the date to the date of the event, or if you’re copying a previously published article, you may want to change the date to the original publication date. Alternatively, you may have a page or post with information that you do not want people to see until a specific date and time. Rather than sitting at the computer with a timer, you can set the publish date to a time in the future when you wish it to appear. The server will automatically publish the page at the appropriate time (If you are an editor, you will need to ask Web Services to set a future publishing date for you).


Page Attributes Menu

The Page Attributes menu

The Page Attributes menu

In the Page attributes section you can set the attributes of the page. You can set it’s “parent” to show a hierarchical relationship between pages. For instance, this page is a “child” of the “Understanding WordPress” page, which is itself a “child” of the “Web Resources” page.

You may also pick which page template to use. Depending on which theme you have activated on your site, you templates may vary.


Active Widget Areas

Active widgets menu

Active widgets menu

On the Widgets screen, you can configure which widgets should appear in a sidebar, and what the widgets should contain. On the “Active Widget Areas” menu, you select the sidebar containing the widgets you wish to appear on your page. If you do not wish to have any widgets appear, deselect them all.


Breadcrumbs

The Breadcrumb menu allows you to turn "breadcrumbs" on or off

The Breadcrumb menu allows you to turn “breadcrumbs” on or off

The breadcrumbs are the links at the top of most pages, showing the hierarchy between the homepage and the user’s current location. We recommend turning them off on homepages, landing pages, or other pages that do not have parents. However, 99% of your pages should have breadcrumbs “on” so that users can always find their way back.

The breadcrumb trail for this page

The breadcrumb trail for this page


The Bottom Menus

Page Restriction

Check the box in the “Restriction” menu to restrict access to users with a DixieID. This also limits access to on-campus users as well, as you must be connected to the Trailblazers network to log in and view the page.


Revisions

The “Revisions” menu at the bottom shows you a summary of past revisions. This makes easy to see when your page was last edited and by whom.


Author

You may not see this menu by default, but it can be turned on in the “Screen Options” menu at the top of the page. This shows you the current author, and you can change who is assigned as the author.


Image/Video Header

in the Image/Video header section you can configure the page header

in the Image/Video header section you can configure the page header

This section configures the page header.

For home pages, landing pages, important sections, etc, use the “normal” sized header. You can set a default image in the “Theme Customizer,” otherwise you can set a header image in the “background image” section. The selection screen doesn’t always work however, so you may need to copy/paste your image URL in. For a new section or a page you would like to highlight, the “small” sized page header is appropriate. For regular content, or long text pages, the “no header” option is most appropriate.

By default, the page title will appear as the heading in the page header. If you would like a custom one, enter it into the “H1 Text” field, and a subheading may be added in the “H2 Text” option. It is conventional to have your department name as main heading, and the college/division/group that houses your department as the subheading.

For using videos in your header, please ask for assistance.

Example Photo Header with customized text headings

Example Photo Header with customized text headings