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
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:
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 custom urls is in our Pretty URLs section.
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.
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.
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.
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
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.
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
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
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.
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 Bottom Menus
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.
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.
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.
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.