General notes

  • It’s helpful to read the web style guide.
  • Don’t delete items, just change them from Published to Draft. They won’t appear to users, but will still be available if you need them later.
  • You can set items to publish at a certain time in the future. This is useful for blog posts. Click on the Edit button next to “Publish immediately” in the top right corner of an item, and choose the date and time you want the item to be published. (NOTE: the date is set to Pacific Standard Time)

Pages

Click on Pages in the left column of the Dashboard to view the pages on the site. NOTE: There is not a Update or Save button on this page, so any change you make automatically updates the site. So be careful.

You can drag and drop pages to rearrange their order. Changing the order here does NOT change them on the menu (see notes on how change them on the menu below), but it does change the URL’s of child pages. For example, Current Scholars is a child page of the Community Impact page, so the URL is https://pridefoundation.org/community-impact/current-scholars/. If you dragged the page so it was a child of Find Funding, the URL would be https://pridefoundation.org/find-funding/current-scholars/

If you move the mouse over a page,  you’ll see options to Edit, Quick Edit, View, Delete, or see more options (… ):

  • Edit opens the page in the editor, and gives you full editing capabilities
  • Quick edit lets you change things like the author, title, and whether it’s published or not
  • View lets  you see the page
  • Delete lets you delete the page
  • … lets you add child pages, insert blank pages, move the page to the top/bottom, and clone the page. NOTE: cloning a page is an excellent way to create a new page, if it’s similar to the one you want to create. If you do clone a page in order to create a new one, make sure you change the URL manually.

Dynamic Pages

Some pages (Current Grantees, Current Scholars, Staff, Board, FAQ’s), are created dynamically. That means that the page content is created from the different content types listed in the left column of the Dashboard. You can tell a page is dynamically generated if you click the edit button on that page and there’s nothing there to edit.

If you want to edit the content on the page, you’ll need to edit the information in the content type, not the page itself. For example, if you wanted to edit the info about a staff member, click on People in the left column of the Dashboard, find the person you want to edit, and click the edit button. Any change you make to that person will automatically appear on the Staff page. If you want to add a new staff member, click on People in the left column of the Dashboard, then click Add New at the top of the page.


Basic Pages

Most of the pages on the site are basic pages, which means they consist of the header, a main content area, and a footer. Examples of basic pages are Advocacy, Grant Resources, and Racial Equity Core. You can tell if a page is a basic page by looking at the Page Attributes block in the right column when you’re in edit mode. If the template is Default Template, it’s a basic page.

To add an image to the top of a basic page, click Add Featured Image in the bottom right of the page, and select an image.

You can add any content you’d like in the main content area. Click Add Media to add an image. NOTE: Always add a description in the ALT box when you upload an image. This text is what search engines use when they index an image, and also what screen readers read aloud for disabled users. If the image contains critical information, e.g. a chart with data, the ALT tag should describe what that data is.

You can also add defined blocks of content to a basic page. The defined blocks are:

  • Blog Carousel
  • FAQ’s
  • Feature Narrative with Two Images
  • Feature List
  • Feature Narrative
  • Headline and Copy
  • Large Image with background
  • Promo bar
  • Secondary content
  • Testimonial
  • WYSIWYG

To keep the style of the site consistent, try to only use the following blocks on a basic page:

  • FAQ’s
  • Headline and Copy
  • Promo bar
  • Testimonial
  • WYSIWYG

(The other blocks were created for, and used, on Portal pages.)

To add a block, click the Add Block button below the main content area. A pop up will show you visual examples of the different blocks. Choose the one you want, then add the information requested for that type of block.

You can add as many blocks as you want to a page.

You can drag and drop the blocks to rearrange the order.

If a block has a button and button link, entering that info will automatically create a button for you. If you leave that info blank, a button will not appear.

Don’t put a testimonial as the very last block, since it clashes with the footer colors.

NOTE: The blog carousel on each/any page is unique to that page, and must be manually edited to include the content you’d like to appear (In other words: changing the blog carousel on the home page will not affect any other blog carousel throughout the site). The only exception to this rule is the blog carousel that appears on each regional page, which dynamically pulls content tagged with that region. If you want to control which blog content appears on a regional page, you do so via tagging on the blog post. 


Portal pages

Portal Pages are more highly designed and serve to direct the user toward deeper content through narrative content sections (any section that includes the light pink background). Good examples of Portal Pages are Scholarship Program and Community Impact You can use all the blocks from Basic Pages on Portal Pages. In addition, we recommend using these portal page-specific content blocks: 
 
  • Featured Narrative w/ Two Images
  • Feature List
  • Feature Narrative
  • Large Image with Background
  • Secondary Content
  • Blog Carousel

Home page

The home page is a unique page. It has several tabs on it that correspond to different sections of the page. Click on the tab that has the content you want to edit.

Hero tab: click on Add Hero Image at the bottom right to add another image. You can add heading and caption text, but they’re not required. Heading and caption text is unique for each image, so if you want to use the same text for different images, you’ll need to copy and paste it from one image to the other. The image is displayed with the anchor set at bottom center, so the top of the image may be cut off. If so, recrop the image. The current hero image has a dark gradient background at the top of the image that was manually added in Photoshop so the menu appears more clearly. If more than one hero image exists, one will be randomly selected each time the page loads.

Intro text: the heading is automatically set to be an H2 (with the solid line to the left). If you omit button text and a button link, the button will not appear.

Programs: hover the mouse over the image so the Edit and Delete icons appear in the top right corner of the image. Choose the icon for the action you want to do. You can drag and drop the programs to rearrange them. You can add additional programs by clicking Add Item in the bottom right of the block.

Feature tab: hover the mouse over the image so the Edit and Delete icons appear in the top right corner of the image. Choose the icon for the action you want to do.

Promo bar: If you omit button text and a button link, the button will not appear.

Latest news: to add an item, click on it in the left hand column. If an item is grayed out, that means it’s already been selected. To remove an item, hover over the item in the right hand column, and click the Minus box that appears. You can use the Search box over the left column, or the filter drop downs over the right column, to help you find the items  you want to add. Drag and drop items vertically to change the order in which they appear. NOTE: items are NOT automatically added to the right hand column-you always have to manually add them. This means that, if you add a new blog post that you want to appear on the home page, make sure you add it manually. 

 


Menu

To access the menu, choose Appearance > Menus in the left column of the Dashboard.

There is a menu for each section in the main navigation (for example: Scholarships, Grants, Sponsorships, etc.) Each has its own discrete menu. Choose the menu you want to edit in the “Select a menu to edit” dropdown, then click the Select button.

You can drag and drop menu items to rearrange their order.

To change the text that appears on the menu, click the down arrow next to the menu item. Change the text in the Navigation Label text box.

Adding a new page does not automatically add it to the menu. To add a page to a menu, choose the menu you want to edit, then click Pages in the Max Mega Menu Settings in the left column. Click the Search tab, and type the name of the new page. Check the box next to the page, then click “Add to Menu.” The page appears at the bottom of the menu you’ve selected, and you can drag and drop it where you want it to appear.


Importing grantees

Login to WpEngine.com and backup the site, in case something goes horribly wrong in the import:

  • Once logged in to Wpengine.com, click Sites on the main menu
  • Click the pridefdn site
  • Click on “backup points” in the left column
  • Click the “backup now” button
  • Type a description of the backup, and click “Create production backup”

Prep the grantee file in Excel:

  • Make sure all websites start with either http:// or https:// in the website field, e.g. https://www.406pride.org. Just having www.406pride.org will not work.
  • Delete any rows or columns that don’t have any data
  • Save as a CSV file

Import the file:

  • In the left column of the Dashboard, choose All Import > New Import
  • Click Upload a file button
  • Select the file from your computer
  • Choose New Items
  • Choose Grantees from the Create New dropdown
  • Click Continue to Step 2
  • You should see a screen that shows the first record with the label and field data, and the number of rows that will be imported. If there are extra fields, you need to go back to the csv file and delete empty rows and columns.
  • Click Continue to Step 3
  • In the Load Template dropdown at the very bottom of the page, choose Grantees1. This tells WordPress which fields in the csv file to map to which fields in the Grantee content type.
  • Click Continue to Step 4.
  • Click Continue

Now that the new grantees have been imported, you’ll need to add the states manually (they can’t be imported automatically, unfortunately, since they’re a taxonomy, and used several places within the website.)

  • Choose Grantees in the left column of the Dashboard. This gives you a list of all the Grantees.
  • Choose the current year in the Any Year dropdown near the top of the page, then click Filter. This will show only the current year Grantees.
  • In the State field, click the Pencil icon. Start typing the correct state, or choose it from the dropdown.
  • Do this for all the new Grantees that don’t have states.

To define which year of grantees is shown on the Current Grantees page:

  • Choose Editor from the Appearance menu in the left column of the Dashboard.
  • Choose Grantees Page Template in the right hand column (under Theme Files)
  • On line 67, increment $current_year = ‘2019’; by one year, e.g. 2020
  • Click Update File at the bottom of the page.
  • On line 138, increment <h2>2018-2019 Community Grantees</h2> by one year, e.g. 2019-2020

To change which years are shown in the Past Grantees:

  • Choose Editor from the Appearance menu in the left column of the Dashboard.
  • Choose Grantees Past Page Template in the right hand column (under Theme Files)
  • On line 71, increment the  $last_year = ‘2018’; by one year, e.g. 2019
  • On line  75, increment the  $oldest_year = ‘2013’; by one year, e.g. 2014. (the page displays all Grantees whose year is between the oldest and current years, inclusive.)

Really specific tasks

Adding a button

Use the classes “btn btn-primary” or “btn btn-secondary in a paragraph. (You’ll need to do this in the Text tab of the editor, not the Visual tab.)

<p class=”btn btn-primary”>click here, please…</p>

looks like

click here, please…

<p class=”btn btn-secondary”>click here, please…</p>

looks like

click here, please…

Note: After you add a button, you may find that text doesn’t start in a new paragraph, i.e. the button and the text are on the same line. To fix this,  add the class clear on the next HTML element. For example:

<p class=”btn btn-primary”>click here, please…</p>

<p class=”clear”>Hello, world</p>

looks like this:

click here, please…

Hello, world

Adding a blank paragraph (two blank lines)

To add a blank paragraph, press the Enter key. (You can also insert a blank paragraph by adding <p>&nbsp;</p> in the Text tab of the editor. &nbsp; just means non-breaking space.)

Adding a new line

To add a new line, press Shift + Enter. (You can also insert a new line by adding <br/> in the Text tab of the editor. br means line break.

Adding the double carets

Use the keyboard shortcut Shift + Option + \  Or copy and paste it from here: Learn more »

Adding confirmation emails to forms

The forms automatically store all the data that has been submitted, so if you accidentally delete an email that contains the form info, you don’t need to panic. Just click Forms in the left column of the Dashboard, move your mouse over the form you want and click Settings, then click Entries at the top of the page.

You can also have a form:

  • send an email to a staff member, or staff members, with the submitted info
  • send a confirmation email to the person submitting the form

You can see examples of both of these by choosing Forms in the left column of the Dashboard, clicking Settings in the Year-End Community Celebrations form, then clicking Form Actions in the left column of the form. Actions can be turned on or off by clicking the button to the right of the trash can on the name of the action.

Stay Informed

Join our email list for LGBTQ news and updates.
Newsletter Signup