Admin Tutorials

This page covers basic site-editing topics. Here are some more specific tutorial pages:

Logging in

If you’re logged in, you’ll see a dark bar that sticks to the top of the screen with different actions. If you don’t see this bar, hold down [ctrl] and click here to view the login page in a new tab. After you’ve logged in, return to this tab and refresh the page. You should now see a dark bar at the top, which means you’re logged in.

Admin Basics

If you’re viewing the site, hold down [ctrl] and click the “[home icon] Be Alright” link to view the admin side of the site in a new tab. The admin side of the site has a sidebar on the left with a lot of links. Below are the ones you’ll use the most. For quick reference, each header below is also a link that takes you to its edit-area. Other links will be covered in other tutorials about accomplishing a less-common task.

Posts

These correspond to the “updates” section of the site. “Posts” include blog posts and reflections on specific events.

Pages

These are the most popular pages of the site (like “Home” and “Take Action”).

Events

These are event and campaign summaries. All events are listed out on the site here.

Quick Edit

How to quickly edit the page you’re looking at

In the dark bar at the top of the page, find the link with a pencil icon and the text “Edit Page”. Hold down the [ctrl] button on your keyboard and click this link to open it in a new tab. When editing a page in the future, it’s nice to do this so you can edit the page on one tab, save your progress, and then view your results on the other tab to make sure you’re on the right track.

Quick Find

How to quickly edit the particular content you’re looking at

It can be overwhelming opening up the editable side of a page and scrolling through all the content and options that can be edited. Here’s a trick to quickly find where you can edit a piece of content on a page:

Highlight some of the text you want to edit (try to highlight a segment of words without apostrophes or quotation marks)
Copy it to your clipboard ( [ctrl] + [c] )
Open a new tab to edit the page you’re looking at (see “How to quickly edit the page you’re looking at”)
In the edit-page tab, press [ctrl] + [f] to search the page
Paste the text into the search input ( [ctrl] + [v] )

Help! “Quick Find” not working

This could happen if the content you’re searching for is “collapsed” and temporarily hidden. If you’re editing a “page”, search for the text “page sections”. You should see something like this:

In the above screenshot, “Page Sections” is a panel that contains one or more “Section” panels (labeled here by “Sections List”). On the right of every panel on the site there’s a little triangle that toggles whether or not the panel is collapsed. In the above screenshot, the larger “Page Sections” panel is expanded while the first “Section” panel is collapsed. If you can’t find the text you’re looking for, see if any of the panels on the page are collapsed (triangle pointing down) and click the triangle to expand them. Then try searching again.

Using the Visual Editor

At the top of every visual editor is a series of options for styling your text. We’ll cover each here left to right:

Text type dropdown

This defaults to “Paragraph”. If you click on it, you’ll see some other text options, but mainly different header sizes. “Heading 1” is the biggest an ideally every page should have only one of these types of headers towards the top. This is because all site pages are analyzed by a search engine like google or duckduckgo and if a page has a “Header 1”, those search engines have a better idea about what the page is about. A “Heading 2” is commonly used at the top of each page section. The headings 3-5 will generally only be used on pages with a lot of text. “Heading 6” is unique because it is used as a super-header at the top of some text blurbs.

[Link Icon] (Insert / edit link)

In order to create a link, first highlight the text you want to be a link an then click on this button. Instead of clicking on the button, you may instead press [ctrl] + [k]. This brings up a search bar, where you can search for an existing page on the site. You can also simply copy/paste a URL from a different site into this area and press [enter] to save the link.

How to add the URL to download an image or PDF

Click the “Media” link in the site admin left-sidbar (under “Posts”).
Search for the thing you want people to download (if you search “pdf”, all pdfs will display)
Click the name of the file you want (the name is in blue text towards the left)
You will be taken to that file’s unique page. On the right, click the button “copy URL to clipboard”
Come back to where you want to add the link and paste that URL into the link’s search field and press enter

“Formats” dropdown

This adds additional styles to either a Text Type or link you created. For example,

here’s a paragraph text made to look bigger by making sure the editor’s cursor is sitting on the text you want to change, clicking “formats”, and then “p => small lead”

This is an example of “P => stand-alone lead” which is often used in full-width text sections where you want to make a single, loud statement.

This is an example of “P => post-header lead”, which often comes after a “heading 1” or “heading 2”

A link with “Link => Button Solid” applied looks like this:

example

A link with “Link => Button Outline” applied looks like this:

example

Help! The resulting text looks wrong

Open the “Formats” dropdown and see if you have an old selection that you need to click again to unselect.

Bold and Italic

After “Formats” there is an option for making text bold and making text italic.

List Options

After the italic option are two list options, an unordered list:

item
item
item

and an ordered list:

item
item
item

Blockquote

This may be used in places with a lot of text where you want to visually call out a particular statement a second time for emphasis.

This is what the blockquote looks like

Text Alignment

After the blockquote icon there are two text alignment options. The first is left-aligned and the second is center-aligned. Usually you’ll only use “center-aligned” when you either are creating a blurb with little text or a full-width text-only section.

[Eraser icon] (Clear Formatting)

If you’re copy/pasting content from somewhere else into the visual editor, you may accidentally also copy/paste invisible code that changes the look of the text. A trick to always strip out this invisible code from other sites is to paste using the keyboard shortcut [ctrl] + [shift] + [v]. But you can also highlight the buggy-looking text and press this eraser icon, which does the same thing.

Undo / Redo

These are the arrows curving back (undo) and forward (redo) in case you make any mistakes.

? (Keyboard Shortcuts)

Click this button anytime to see some helpful keyboard shortcuts you can use. A keyboard shortcut exists for every option in the editor except for the “formats” dropdown. One especially useful one is creating a header, which is [shift] + [alt] + [number] where [number] is 1-6 (corresponding to “Heading 1-6”).

Shortcodes

Shortcodes are little snippets of text that can be added into a visual editor and will convert into more complex pieces of code. Below are the available shortcodes. Note that you can click any of them here to quickly select the whole text, which you can then copy/paste somewhere else.

`[breadcrumbs]`

This shortcode should be add at the top of any page that has a parent page other than the homepage. For example, on the “What is Domestic Violence?” page.

`[big-phone-number]`

This currently only appears on the Get Help Now page.

 [big-phone-number number="1-877-863-6338" number-with-letters="1-877-TO-END-DV" numbers-equivalent-of-letters="(863-6338)"]

Will translate to:

1-877-TO-END-DV (863-6338)

although the part number="1-877-863-6338" does not get displayed, it’s important to fill out using only numbers because it will make the number a clickable link that will allow users to call the number from their browser.

`[icon name="logo-image-only"]`

This currently only appears on the homepage (the flower icon at the top of the purple section towards the top of the page).

This translates to

You can make this larger by applying a larger text-size option to the shortcode.

`[newsletter_signup]`

This outputs a form that allows users to signup for your Mailchimp newsletter:

`[donate_btn]`

This only appears on the donate page:

Changing Content that appears in multiple pages

Some content, like the header and footer of the site, appears on multiple pages. The fields for this type of content live in the “Options” area of the site (Look in the admin left-sidebar towards the bottom).

This page has 4 main sections:

Header Links
Footer Fields
Newsletter Prompt (this appears at the bottom of every post (“update”) page)
Event Page Volunteering Prompt (this appears at the bottom of every event page)

Hidden Content

Some content on the site is visually hidden but still important.

Page Metadata

At the top of every page/post/event there is a section labeled “Yoast SEO” (SEO stands for “search engine optimization”). This section is created by the “Yoast SEO” plugin and helps the user add content to the page that is used to help search engines (like Google or the more privacy-oriented Duck Duck Go) figure out what the page is about. The “Yoast SEO” plugin has 4 tabs:

SEO

In this tab you want to focus on adding content to the “Focus keyphrase” field (click the “?” icon to read a helpful article about what should go here) and the “Meta description” field, which is a short description of what the page is about.

Readability

This section analyzes the content on the page for its readability. Click the “?” icon to read a helpful article about tips for writing content for a web page.

Schema

Ignore since this will generally be the same for every Be Alright page.

Social

Optional. By default, the page’s title, meta description (from the “SEO” tab) and “Feature Image” (defined in the right column of the page) will show up if a user copy/pastes the URL of the page into Facebook or Twitter. These fields override whatever those are so they will be rarely used.

Image “Alt”

Another hidden piece of content on the page is the “Alt” text for each image that’s displayed. “Alt” stands for “alternative text” and is the text that is read by screen readers to describe the image to people who can not see it. Every image on the site should have this text defined for it to make the site more accessible.

To edit this, click on the pencil icon that appears when hovering over an image added on the admin-side of a page. A window will pop up with fields relating to that image. Look for the field labeled “alternative text”.

Undoing Changes

Undoing page-specific changes

At the bottom of every page there is a “Revisions” section that will allow you to undo any changes you made on the page. Click on a link in this section to see what changes are associated with it and, on the page that loads, you’ll also be able to move a slider to go back and time and revert the page to an earlier state.

Site Backups

If you ever need to revert the whole site to an earlier state, you can do so through the backups section of the site, which runs regular backups.

Adding/editing Users

In the left-side admin bar, there’s a link labeled “users”. If you click this you’ll be taken to a list of all registered users on the site. Towards the top of this page there’s a button for adding a new user. If you add/edit a user, the only fields you need to worry about adding are:

username
email
password (generate one and encourage any user to use a password manager like “last pass” to keep track of it)
role (Sonia and anyone with additional wordpress knowledge should be an “admin”, but most users helping with adding site content should be “editor”)

Images

Right now we’re at the limit of the image-compression free-plan that’s being used on this site. I can see what I can do to increase it but in the meantime, please pre-compress any images you want to add using this service. Also, please let me know when you’ve added your first image (and where it’s appearing on the site) so that I can test it and make any adjustments for future images.