Editing Resources

The Political Parity theme is intended as a bare-bones WordPress site to archive completed research and past blog posts for the program. While all visible content is easily editable with custom fields and documentation provided below, minimal ongoing maintenance is required.

External WordPress Documentation

If you’re unfamiliar with WordPress or would like a refresher, it’s best to start with all of the excellent documentation over on the WordPress Codex. Some particularly useful bits:

Menus

The Political Parity theme uses one menu in the “Pre-Header” location above site branding.

Menus can be managed by hovering over Appearance in the WordPress Dashboard menu and selecting Menus.

Widgets

This theme does not have any active widget area.

Forms

We have the Gravity Forms plugin installed and use it for all forms you see on the site. Documentation for this plugin can be found at docs.gravityforms.com. Some important topics:

Page Templates

This theme uses only default or theme-define page templates. No selection required.

Available Post Types

The Political Parity theme uses the Posts post type as the blog archive and a custom Research Reports post type to create/store program research material and build the list of research on the site’s homepage. To add a new report go to Research Reports -> Add New. It is important to include a featured image and excerpt when adding new research as both fields are used to populate the cards on the homepage.

Updating the Homepage Hero

At the time of this writing, the homepage hero area is featuring Parity research, but is intended to show a summary and link to the upcoming Parity Reader. The Reader can be added as either a media item or as a research report (as discussed above). Once the content is online, update the hero:

Log in to WordPress.
Go to Pages.
From the list of All Pages, select Home – Front Page.
The homepage is a modular design with multiple types of “Sections” available. The Hero Image section should be the first visible. If the section is collapsed, click the arrow to the right of the section type to expand it.
Change the Headline, Summary, Image (if needed), and Button URL fields.
The URL will be either the address to your newly-created research report post, an external web page, or that of a media item (PDF). To find a media item URL, go to Media, click your document, and copy the URL field from the right-hand side of the window.
Click Update in the Publish metabox towards the top right of the page.

Dashes

WordPress will automatically change dashes of different configurations into en or em variants. Here’s how to create them:

Em dash:

Three dashes without spaces around it:
```
---
```
Three dashes with spaces:
```
 ---
```
Two dashes with spaces:
```
 --
```

En dash:

Two dashes without spaces:
```
--
```
One dash with spaces:
```
 -
```

A single dash without spaces will remain a normal hyphen.

If all else fails, you can also switch to the HTML editor and use the appropriate HTML entity codes: — (em dash) and – (en dash).

Exception: Outside the WordPress WISYWIG text editor (any text box with the toolbar of formatting options), the shortcut options will not work and the HTML entity code is required. For example, any promo block or custom title text box requires HTML

Shortcodes

WordPress shortcodes allow you to execute relatively complex layout options with simple (hopefully) markup in the Visual editor.

Buttons

[button url="http://www.google.com"]Learn More[/button]

The basic button code adds the standard, brand-compliant blue button meant for bold calls-to-action across pages such as submitting forms, downloading files, or moving from landing page to landing page. There shouldn’t be too many of these buttons on any one page or, for that matter, more than one in a single page section.

This shortcode accepts the following attributes:

url=”” – The URL of the link this button will create. This attribute is required.
class=”” – Optional style of buttons. Adding class=”small” will result in the less bold button style appropriate for frequent use on pages. Adding “social” and the the network name, such as “twitter,” when creating buttons in a widget area will style them accordingly.

Large, standard button:

Learn More

Smaller button: Learn More

Grids

[grid-container]
[grid-box]

CONTENT!

[/grid-box]
[grid-box]

CONTENT!

[/grid-box]


[grid-box]

CONTENT!

[/grid-box]
[/grid-container]

You can create multi-column or grid layouts using the [grid-container] and [grid-box] shortcodes. The [grid-container][/grid-container] tags must wrap around your [grid-box][/grid-box] tags.

The [grid-box] shortcode accepts the following optional attributes:

size=”” – This specifies the size of the column and how many will fit in each row. For instance “third” creates a box that is 33% the width of the content area and you can put three next to each other before they start to wrap. Acceptable values are full, half, third, and fourth.
card=”” – This attribute accepts true/false only. If true, the grid box will be styled in the site’s card format which includes a border and light gray background.

You can see a grid in use with cards at www.demandabolition.org/the-issue/. If inconsistencies occur with grid or card spacing, try switching to the Text tab of the page editors.

Clearing Break

If you ever encounter problems with grid containers or cards collapsing, or left or right aligned images breaking or overlapping each other, you can try inserting a clearing break either inside the collapsing container or between images:

[break]

You can learn more about clearing floats on CSS-Tricks.