Combined Shape Copy Arrow Button Arrow Button Path 2 Arrow Button Copy Arrow Button Copy bg-arch UX / AV Descriptions icon-a11y UX / Arch UX / ASL UX / Calendar UX / Close UX / Location icon-pin icon-stl UX / Time UX / Wheelchair Facebook logo-instagram Logo / STLSF logo-twitter logo-youtube

Instructions

Table of Contents

(scroll or use CTRL+F to search page)
  • Pages
  • Homepage
  • Productions
  • Events
  • Content Modules
  • Options
  • Menus
  • Text Formatting
  • Image Sizes

PAGES

Pages are used for the Homepage and any page that is NOT a Production. You can add, update and delete pages – which you can read more about below.

Add a Page

  1. In the back-end of WordPress, hover over Pages in the left-hand column and click on Add New.
  2. Alternatively, you can click on Pages in the left-hand column, and then click the Add New button at the top of the page.
  3. Enter a Title and complete the Hero section. Select as many Content Modules (more info below) as necessary and click Publish in the top right.

Edit an Existing Page

  1. In the back-end of WordPress, click on Pages in the left-hand column, and then click the title of the Page you’d like to update.
  2. Update the Title and any additional Content.
  3. Click Preview in the top right to view changes before pushing them live.
  4. Click Update in the top right.

Delete an Existing Page

  1. In the back-end of WordPress click on Pages in the left-hand column, and then hover over the title of the Page you’d like to delete.
  2. Click on the Trash link that appears below the title.
  3. To undo a delete, click on the Trash link above the list of Pages, find the page you’d like to restore and click the Restore link.
  4. Alternatively, you can delete a page by viewing the edit page for the specific page, and click Move to Trash in the top right, next to the Update button.

HOMEPAGE

Most of the content on the homepage operates that same as other interior pages — with the exception of the Homepage Hero. The Homepage is set as the “Front Page” in settings so that it automatically pulls in the specific hero content block. Do not create a duplicate homepage or change these settings.

  1. In the back-end of WordPress, click Pages in the left hand column and find the Homepage.
  2. Edit CTA under Homepage Hero
    1. Enter the Headline and Copy
    2. Button Text – Enter a call to action that will appear in the black button.
    3. Button Link – This is the link for the CTA button. Click to add an internal or external link.
  3. Edit Hero Images under Homepage Hero — you can add up to 3 images.
    1. Click the “Add Hero Image” blue button
    2. Click “Add Image” to upload an image or select from an existing image in the Media Library.
      1. Note: these images should be AT LEAST 425 × 425 px.
    3. Enter a “Caption” to show over the image on hover. Note: keep these concise.
    4. Select a “Background Image” as the texture behind the featured images.
      1. Click “Add Image” to upload an image or select from an existing image in the Media Library.
      2. Note: these images should be AT LEAST 1440 × 700 px. This will ensure the image is appropriately scaled for different devices.
      3. Image will automatically be converted to black & white.

PRODUCTIONS

Productions are pages specifically for shows and performances that are featured in your season. These pages hold specific features that will highlight relevant info for your audiences.

Add a Production

  1. In the back-end of WordPress, hover over Productions in the left-hand column and click on Add New.
  2. Alternatively, you can click on Productions in the left-hand column, and then click the Add New button at the top of the page.
  3. Fields to complete:
    1. Title
    2. Credits – this is a repeater field, so that you are able to add as many credits as you need for a production.
      1. Click the “Add Credit” button for each credit.
      2. Both the Credit and the Name fields are simple text input to have full flexibility for each show’s needs.
    3. Start/End Dates — use the date pickers to choose dates. These are simply to display on the Production’s page and will not pull into the calendar. You must create an event for it to show on the calendar.
    4. Venue – simple text input
    5. Description – this is the copy that will live in the main text area of the page and rolls over the main image.
    6. Button Text – the text that will appear on the button at the bottom of the Description box. If you leave this blank, the button will not appear.
    7. Button Link – the link to the ticketing page or any other page for an additional resource.
    8. Background Image – this is the image that will appear at the top of the Production page and the main info will roll over.
      1. Click “Add Image”
      2. Select an image from the Media Library or Upload from your computer.
      3. Image should be at least 1440 x 800
    9. Featured Image (in the right hand column) – this is the image that will appear on the Production Archive page.
      1. Click “Set featured image”
      2. Select an image from the Media Library or Upload from your computer.
      3. Image should be at least 320 px wide and be a vertical crop
    10. Content Modules — more info on setting up each content module is further down the page. The content modules that we recommend for this page include:
      1. Bios – for cast members and artistic leadership
      2. Gallery – for production photos
      3. Map Block – for venue information
    11. Click Publish in the top right.

Edit an Existing Production

  • In the back-end of WordPress, click on Productions in the left hand column, and then click the title of the Production you’d like to update.
  • Update the Title and any additional Content
  • Click Update in the top right.

Delete an Existing Production

  • In the back-end of WordPress, click on Productions in the left-hand column, and then hover over the title of the Production you’d like to delete.
  • Click on the Trash link that appears below the title.
  • To undo a delete, click on the Trash link above the list of Productions, find the post you’d like to restore and click the Restore link.
  • Alternatively, you can delete a production by viewing the edit page for the specific post, and click Move to Trash in the top right, next to the Update button.

EVENTS

Events are content that you specifically want to show on your calendar. These can be attached to specific productions or not.

Add an Event

  1. In the back-end of WordPress, hover over Events in the left-hand column and click on Add New.
  2. Alternatively, you can click on Productions in the left-hand column, and then click the Add New button at the top of the page.
  3. Fields to complete:
    1. Production – if this event is a performances of a Production that you created, select it from the dropdown list. If selected, the venue and credits will show what is entered into the Production and the More Info button will link to the Production page. Any information entered on an Event will override Production page info.
    2. Subheader – simple text input
    3. Accent Color – choose a color from the dropdown to be the accent square
    4. Credits – this is a repeater field, so that you are able to add as many credits as you need for a production.
      1. Click the “Add Credit” button for each credit.
      2. This is a single simple text input to have full flexibility for each show’s needs. Enter everything in as one line (i.e. Written by William Shakespeare)
      3. Note: If you have chosen a Production above, the credits will pull from that automatically. Any info enter into the credit field here will override those.
    5. Sold Out – check this box if the event is sold out and the ticket button will show disabled.
    6. Ticket Button Link – the link to the ticketing page or any other page for an additional resource.
    7. Ticket Button Text – the text that will appear on the button at the bottom of the event calendar tooltip. If you leave this blank, the button will not appear.
    8. More Info Button Link – the link to the any page for an additional resource. If a link is entered, the button will auto-show as More Info. If the Event is connected to a Production, this button with automatically link to that Production page.
    9. Accessibility – Check the accessibility options available for this event for these icons to appear on the calendar event tooltip.
    10. Start/End Dates — use the date pickers to choose dates and input times. If this is a run/series, input dates and times for the first one and then you can create multiples below through “Event Series” and you’ll be able to edit each event individually.
    11. Event Series – Here you can create multiples of an event — whether they occur regularly or just have a few instances.
      1. Click the “Schedule Multiple Events” button
      2. Select the frequency that you would like them to repeat — Daily, Weekly, Monthly, Yearly, Once
      3. Then select the perimeters of this continuation — how many occurrences, ending date, etc.
      4. Click “Add Exclusions” is there are certain days that it will not occur.
      5. Note: you will be able to edit all the events individually once it is saved.
    12. Venue – click the button to select a venue previously used from the list or enter in a new venue name. Note: once a venue is created one time, it’ll always appear in the venue list after.
    13. Tags – located in the right sidebar. These are for special designations (i.e. Opening Night, Closing Night, Virtual).
      1. Type in the input field. Suggested tags that are already added will display below. If the tag has not been used yet, you can simply click Add to include in the list.
      2. Click on “Choose from Most Used Tags” to see options for tags already created.
    14. Click Publish in the top right.

Edit an Existing Production

  • In the back-end of WordPress, click on Productions in the left hand column, and then click the title of the Production you’d like to update.
  • Update the Title and any additional Content
  • Click Update in the top right.

Delete an Existing Production

    • In the back-end of WordPress, click on Productions in the left-hand column, and then hover over the title of the Production you’d like to delete.
    • Click on the Trash link that appears below the title.
    • To undo a delete, click on the Trash link above the list of Productions, find the post you’d like to restore and click the Restore link.
    • Alternatively, you can delete a production by viewing the edit page for the specific post, and click Move to Trash in the top right, next to the Update button.

CONTENT BLOCKS

Content Blocks provide flexible content sections within each of your pages and posts. Content Blocks are explained below, but you can visit this Sample Page to get a better understanding of each content module.

  • To add a Content Block, click the “Add Content Block” button and select from the following:
    • WYSIWYG – A basic text editor with formatting capabilities
      • Text Area – this is a standard WYSIWYG editor
      • To see the full range of formatting capabilities, visit the Kitchen Sink
    • Bios – select all of the bios in the left-hand relationship field that you’d like displayed on the page. Everything in the right-hand column will appear on the page. (Bio shape can be selected in the Customize options)
    • Gallery – Publish a full grid of images with your introductory text. Images have to be uploaded individually and you can add a caption for each one.
    • Calendar – Under “Calendar Type” select Month- or week-view. Select your starting date, if left blank this will automatically fill with the current date.
    • Map – This block adds a map showing a location on your page. There are two fields to complete:
      • Map Height —The options are small, medium and large. Medium is the default value. Width will not change; the map will always be as wide as the browser window.
      • Location — This determines the marker location. Users can either click directly on the map to drop a marker, or you can type in the address or business and the marker will appear.
    • Featured Content

MENUS

There are 3 different menus that exist on the website. Note: If you want to edit the green Donate button in the navigation bar, you can edit the text and link in OPTIONS (see below).

  1. Primary Navigation — this is the main navigation on the white bar.
  2. Secondary Navigation — this is the navigation at the top of the site in the black bar.
  3. Footer Navigation — this is the navigation items that live in the footer of the site.

There are a few rules to remember with the navigation for this website.

  • Keep the navigation titles short and clear. This site has navigation (especially in the Primary and Secondary menus) that is designed specifically to the current number and length of items. If these are edited to longer names, it may break the bars.
  • Only the Primary Navigation is set up for sub navigation with the dropdown of child pages. Sub nav is not designed for the Secondary or Footer nav. Nor can you have a third tier of pages in the main nav.
  • Do not change the settings of the menus on the backend. This may change what menus are pulled into different locations and break the navigation.

To edit the menus, go to Appearances on the backend and click Menus.

  • At the top of the page, select the menu that you wish to edit and click Select
  • Under Add Menu Items, check the pages that you want to appear in the menu and click Add to Menu. These will appear at the bottom of the menu.
    • Note: if you don’t see certain content show up (i.e. Pages), go to Screen Options as the very top of the page, and check the items that you want to appear.
  •  Drag and drop these items to appear in the order that you wish. To set a Page as. a sub nav item, just click and pull the item to the “sub item” indented position.
  • Update the name of the Nav item by clicking on the down arrow and typing in the “Navigation Label”
  • Click SAVE MENU to update the site

OPTIONS

There are certain site-wide options available in the Options tab. In the back-end of WordPress, click on the Options tab in the left-hand sidebar.

  • 404 Page — this controls what appears on an error page, when a user lands on a page that doesn’t have a correct url.
    • Headline — this is the header that will appear in the text box.
    • Text — copy that will appear between the header and the error line.
    • Note: “404 Error – Page Not Found” line is permanently fixed.
  • Header — this controls the green button included on the far-right side of the navigation bar.
    • Donate Button Text — edit the text on the button. We recommend keeping a single, clear word here.
    • Donate Button Link — the url that the button links to.
  • Details — edit the contact info and social media content that lives in the footer
    • Logo — upload a logo for the footer. SVGs are the recommended file format.
      • Note: this does not change the logo at the top of the site. This must be hardcoded in by the development team.
    • Address — STLSF’s address
    • Phone Number — STLSF’s office phone number
  • Social — enter urls for your Twitter, YouTube, Facebook and Instagram accounts. Icons will automatically appear in the footer when these fields are filled in. You can reorder the icons.
  • Google Analytics — Paste your Google Analytics tracking ID (including the script) to ensure analytics are enabled.

Text Formatting

IMPORTANT: when copying and pasting text from a previous source, please first paste this text into a plain-text editor, such as Notepad. Styles from another source may be copied over and interfere with the formatting.

In the WYSIWYG text editor, there are a wide variety of formatting options. Review your Kitchen Sink to see the full range of capabilities in action. These include:

  1. Formats – in the Formats dropdown menu, you’ll find a list of all headers, intro text (larger font size for introductory text), and paragraph styles
  2. Buttons – To create buttons within your text blocks. Highlight the text you’d like to turn into a button and click “Add a Button” in the formatting toolbar.
  3. Blockquote – To designate a quote or call attention to special content within your text block. Highlight the text you’d like to turn into a button and click Quotation Marks icon in the formatting toolbar.
  4. Horizontal Line – To divide large amounts of copy on pages, use the Horizontal Line but clicking the Line icon in the formatting toolbar.

IMAGE SIZES

There are specific images that will be cropped to a certain dimension to fit the design. If the uploaded image does not at least meet the cropped dimensions below, it may look pixelated.

NOTE: The crop will only occur if the image size is LARGER than the dimensions listed below.

  • Production Featured Image: 320 × 9999 pixels (but it shouldn’t be panoramic like some of their ones now are
  • Production Background Image: 1440 × 800
  • Bio Block: 310 × 310 pixels (cropped to fit)
  • Interior Page Hero: 1400 × 9999 pixels (proportionally resized to fit inside dimensions)
  • Featured Content Block featured image: 790 × 400 pixels (cropped to fit)
  • Featured Content Block texture image: 450 × 450 pixels (cropped to fit)
  • Homepage Hero texture image: 1440 × 700
  • Homepage Hero featured image: 425 × 425