Welcome to The Open Standard Documentation!

This document explains how to install and use openstandard.mozilla.org.

Contents

Installing The Open Standard Theme

Pre-Requisites

Installation

Clone the wordpress theme & plugins directory:

git clone https://github.com/mozilla/theopenstandard.git

Move plugins and theme files to the appropriate place for your local development.

Stylus

Installation

Run “npm install” from the theme directory

Development / Compilation

If this is the first time you’re compiling, ensure you’ve met all of the requirements for compiling with grunt, then follow these getting started instructions: http://gruntjs.com/getting-started#working-with-an-existing-grunt-project

Type “grunt” in theme directory. This watches for changes to any .styl file and compiles blog.styl

Word Press Settings

Required Pages

  • Authors
  • Contact Us

Required Menus

Content Editing

Articles

Articles should be easey-peasey to edit in wordpress. Below are the items specific to our theme.


Full & Short Titles

There are 2 titles for each article, the full title (used on the article page) and the short title used everywhere else. If a short title is not supplied the long title will be used.


Deck

The exerpt field is used for the deck and is required.


Categories

Articles are assigned categories via the checkboxes on the right side. If you specify more than one category you should pick one category as primary. The primary category is where the article appears in navigation and search. To select a primary category scroll down in the edit interface until you see Categories. Select the primary category from the dropdown.


Content

The following codes allow you to manipulate the contents of the articles.

Shortcodes

[post_gallery id="ID HERE"] will insert a gallery in the post.

Blockquotes

Blockquote tags will be pulled to the side and have a share button added to them.

<blockquote>I am some copy</blockquote> is Rendered As:

_images/blockquote-render.png

They will maintain their vertical position within the flow of the document, and the content below them will collapse to fill in the space they occupied.

Note

{fill in number of blockquotes allowed and if their position in the copy matters}.

Block Grids

Block grids can be created by putting `::` at the beginning of a P tag. All consequtive p tags that start with `::` will be put into the same block grid.

Example:

_images/block-admin.png

Rendered As:

_images/block-render.png

Hero Images & Thumbnails

Each article “usually” has a hero image. To set this image for an article add it as the featured image. Note this image is used as the thumbnail, insterted into the rss feed and in other places.

Since the various image sizes are generated upon upload, you should upload a large and high quality (Max Size 25mb).


ToDo
  • tags (issues)

Categories

Categories may be edited by navigating to posts -> categories.

Categories at launch include:

  • Engage
  • Featured
  • Innovate
  • Learn
  • Live
  • Opinion

Each category must have a name and a description.

Special Categories

There are a few special-purpose categories that must exist.

  • Sponsored sponsored - for sponsored articles.
  • HP Lead hp_lead - for the main article featured on the home page.
  • HP Featured hp_featured - featured stories on the home page (most recent by category).
  • HP Recent hp_recent - most recent stories on the home page sorted by published date.
  • Featured featured - to feature articles on the category listings page.

Note

If hp_featured category is ommited the homepage will display the latest articles with the featured catergory. If hp_recent is ommited the homepage will display the most recent articles.

Comments

Comments are moderated according to the following settings:

_images/comment-settings.jpg

The author of an article will receive an email notification of comments requiring moderation. You can moderate comments by navigation to Comments in the admin.

Around The Web

Around The Web is intended to provide a place to manually link to content on other sites around the web. This works through menus assigned to the home page and each of the category pages.

To add Around The Web content:
  1. Go to Appearance -> Menus
  2. Choose the appropriate Around The Web menu from the dropdown menu
  3. Choose the “Links” section on the left
  4. Add the URL and Link Text for the content you’re linking (both required)
  5. Click Add to Menu
  6. Drag-drop to reorder the menu as needed
  7. Click Save Menu

Galleries

Galleries, once created, may be inserted into the body of a post using the shortcode [post_gallery id=gallery_id_here]

Homepage

The homepage has 3 areas that can be actively managed.

  1. HP Lead
  2. HP Featured
  3. HP Recent
HP Lead

The HP Lead story is the latest story in the special category hp_lead.

HP Recent

The most recent stories are stories sorted by published date with the hp_recent category

Users

For the purposes of content editing there are 3 user roles we use:

  1. Editor - our paid staff, somebody who can publish and manage posts including the posts of other users.
  2. Author - folks who have content published on TOS but it’s entered/managed by our editors. These users never login.
  3. Contributor – folks who have content published on TOS but it must be reviewed by an editor before being published. These users do login.
Authors

If you have received content from an outside author and need to enter it into wordpress, this section is for you!

To accomplish the above you must create the user in a unique way. Usually when a user is created an email is sent with login instructions. Because this user will never login we will use a dummy email address.

Create The Author Account
  1. In the admin navigate to Users and click the Add New button at the top of the page.
  2. Under the second section Add New User fill out the following information:
    1. Username - all lower case concatenate the first and last name benjaminsternthal
    2. Email - use the following email TOSEditors+username@mozilla.com example TOSEditors+benjaminsternthal@mozilla.com
    3. Role - select Author.
    4. Check this box - Add the user without sending an email that requires their confirmation.
    5. Save - do not upload a profile image from this screen.

Important

Wordpress will always send out an email with login information, since these users are not logging in you must always use the email TOSEditors+username@mozilla.com

Important

Wordpress will send an email to the editor account. This email should be ignored.

Note

Comment moderation emails will be sent to TOSEditors+username@mozilla.com for their respective articles.

Populate The Author Account

Once the author account is created you can edit it to add biographical information and a photo.

  1. In the admin navigate to Users All Users and Edit the author.
  2. Add the following requried information
    1. Image
    2. First Name Last Name
    3. Display Name Publicly As
    4. Biographical Information
  3. Add the following optional information
    1. Twitter
    2. Facebook
    3. G+
Contributor

Documentation coming soon.

Plugin Settings

Contact Form 7

Provides the contact us form. Note we use Akismet to cut down on spam with this form.

  • Enable plugin

  • Go to Contact -> Contact Forms
    1. Paste the html below in the Form textarea
    2. Save the form
    3. Copy the provided shortcode into the Contact Us page

    Form HTML

    <p>
    Hello. The Open Standard wants to hear from you. Please, share with us your suggestions. Do you have a story tip? A problem with the site? This is where you can reach us.
    </p>
    
    <p> Name<br />[text your-name akismet:author] </p>
    
    <p>Email (required)<br /> [email* your-email akismet:author_email] </p>
    
    <p>Message<br />[textarea* your-message] </p>
    
    <p>[submit class:button "Send"]</p>
    

Extra User Details

Adds extra user fields (for us social media) to the user profile.

Under User -> Extra User Details add the following custom fields.

Meta Key Field Name Description
twitter Twitter URL Full Twitter URL
facebook Facebook URL Full Facebook URL
googleplus Google Plus URL Full G+ URL

Password Protected

This plugin password protects all pages on the blog and is only used during the initial population of the production site.

We do not password protect the RSS feed.

  • Enable plugin
  • Go to Settings -> Password Protected
    1. Enable “Password Protected Status”
    2. Protected Permissions Enable “Allow Administrators”
    3. Enter A Password

Simple Fields

This plugin provides simple custom fields to the editing interface. For example “sponsored” and “short title”.

  • Enable plugin
    1. Go to settings->Simple Fields
    2. Import simple-fields-export.json from themes->theopenstandard->imports
    3. Set “Default Post Connector” for Posts to “Simple Fields” - as follows:
_images/post-type-defaults.png

Wordpress SEO

This plugin provides automatic generation of many standard meta tags

  • Enable plugin

Deployments

Deployments to dev and production are handeled by IT and are requested via bugzilla.

To request a deployment file a bug in the following product & component:

  • Infrastructure & Operations
  • WebOps: IT-Managed Tools

You can also use this link

In the bug please specify dev or production and note the githup repository.