Code Monkey home page Code Monkey logo

pegasus-theme's Introduction

Pegasus-Theme

Wordpress theme for Pegasus Magazine. Built off of UCF's Generic Theme.

Requirements

  • WordPress 4.4+

Required Plugins

  • Map Cap (see notes)
  • Gravity Forms
  • WP Rest API (version 2.0-beta13.1 or greater)

Installation Requirements

  • Set user capabilities for custom post types via Map Cap. See notes below.
  • Configure Cloud.Typography projects for Development and Production environments.
  • Set an active issue in Theme Options. See Theme Help for more info.

Notes

Developer Mode

This theme has a built-in Developer Mode that should be activated while stories and issue covers are in development. Update the Developer Mode setting in Theme Options to activate or deactivate Developer Mode.

Developer Mode allows for a streamlined development process; instead of uploading updated css and javascript files into WordPress's editor with every update to view changes, you can maintain a consistent naming schema for all story/issue-related files in the dev directory and reference those files by story/issue directory. With Developer Mode turned on, these files will be referenced automatically if the naming schema matches the post slug (e.g., a story with slug 'my-story' has the css file 'my-story.css') and a particular directory in the dev directory is specified in the Developer Mode meta field(s). More information is provided in the meta field description for those fields. The fields will only appear if Developer Mode is turned on.

HTML markup is also updateable with this method; if the WYSIWYG editor is blank and a dev directory is specified, you can work off of a file of schema 'post-slug.html' in that directory instead of copy+pasting the markup with each update.

Note that Developer Mode should be turned off for non-development environments.

Theme Versions

As of v3.0.0 of this repo, this theme uses a "versions" concept to load functions, templates and assets conditionally, depending on the story/issue being requested. Versions allow us to maintain backward-compatibility with stories that were written using custom markup and/or code that is heavily dependent on outdated assets. Versions are assigned to issue posts as a custom meta field value; available values are defined with the LATEST_VERSION and EARLIEST_VERSION constants in functions/config.php. These versions correspond to contents in a versions/ subdirectory. Ideally, versions values should line up with with major git tags on the theme (e.g. git tags of 3.x.x+ should have a LATEST_VERSION value of 3), though this is not technically required. See the readme in each version directory for more details on those versions.

Create a New Version

To create a new version, copy the latest version directory in versions/ and rename it, then update the LATEST_VERSION value in functions/config.php and "version" in gulp-config.json. Make any changes to the newly-copied code as necessary. Deploy repo with new version code, then assign the new version to newly-created issue posts in WordPress.

Stories, Issues, Photo Essays Capabilities

This theme uses the Map Cap plugin to set user capabilities for custom post types. See recommended schema below.

For custom post types in this theme to be usable for users that are not super admins, this step MUST be performed upon theme activation.

Publish

  • Administrator
  • (Photo Essay ONLY:) Editor

Edit Own

  • Administrator
  • Editor
  • Author
  • Contributor

Edit Others'

  • Administrator
  • Editor
  • Author

View Private

  • Administrator
  • Editor
  • Author

Using Cloud.Typography

This theme is configured to work with the Cloud.Typography web font service. To deliver the web fonts specified in this theme, a project must be set up in Cloud.Typography that references the domain on which this repository will live.

Development environments should be set up in a separate, Development Mode project in Cloud.Typography to prevent pageviews from development environments counting toward the Cloud.Typography monthly pageview limit. Paste the CSS Key URL provided by Cloud.Typography in the CSS Key URL field in the Theme Options admin area.

This site's production environment should have its own Cloud.Typography project, configured identically to the Development Mode equivalent project. The webfont archive name (usually six-digit number) provided by Cloud.Typography MUST match the name of the directory for Cloud.Typography webfonts in this repository!

Importing Content

Install the https://github.com/UCF/WP-Allowed-Hosts wordpress plugin if media import fails. After installing the plugin update the Allowed Hosts under the admin Settings menu. Use the following regex \.ucf\.edu$ and check the regex checkbox.

Custom Post Types

  • Issue - a post reference to an overall group of stories. Acts as the home page for Pegasus when a particular issue is active (via Theme Options.)
  • Story - a single story, categorized by the issue taxonomy.

Custom Taxonomies

  • Issue - grouping mechanism for stories. Note that the slugs for these must match their equivalent Issue post slug exactly.

Shortcodes

  • image - returns the URL of an image uploaded as an attachment for the post.
  • static-image - link to an image in the theme's static directory. (Requires extension)
  • media - if found, returns the URL of some arbitrary media in the media library that is an attachment of the current post. Should only be used for media types that can't be returned via [image] or [static-image].
  • google-remarketing - outputs Google Remarketing javascript code.

pegasus-theme's People

Contributors

aaronj1335 avatar ansman avatar beck avatar buraktuyan avatar cadie avatar calvein avatar caniszczyk avatar cgunther avatar cjg89 avatar conover avatar dfieldfl avatar dhs avatar evnm avatar fat avatar jmbarne3 avatar keeeeeegan avatar kriansa avatar lookfirst avatar mdo avatar mgaetan89 avatar necolas avatar pokonski avatar pthrasher avatar purwandi avatar rjucf avatar rogerwolf avatar rvagg avatar sankage avatar smaboshe avatar tinyfly avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

rolandinsh

pegasus-theme's Issues

Update issue and story version templates

Update versions/v6/templates/issue/default.php, versions/v6/templates/story/default.php, versions/v6/templates/story/photo_essay.php with Athena markup. Also update the related scss files and functions.

Resolve ejs vulnerability

Consider removing bootstrap-sass's build assets and package.json to resolve the ejs vulnerability in 3.3.4, since bootstrap is added to the theme manually and those build assets are not in use.

Improve keyboard accessibility of pulldown nav menu

We should probably look at replacing the existing pulldown menu logic to use an Athena navbar + collapse buttons, and incorporate relevant aria attributes to improve the user experience for keyboard and screenreader users.

Additionally, we need to ensure each link in the nav bar has a visible focus state--currently, the Pegasus logo's outline is not visible.

Older Pegasus stories pulled into the Related Stories sidebar have larger thumbnails

Older Pegasus stories pulled into the Related Stories sidebar section have a larger thumbnail size than the pulled in News stories or v5 Pegasus stories.

For example: https://www.ucf.edu/pegasus/powering-potential/
The 'Custom Solar Sculpture Built by UCF Students' story's thumbnail image size.

It's preferred that these stories thumbnails are the same size as the other Related Stories in the sidebar, if possible, ensuring that the older thumbnails are not cropped too much to where they are cutting out important parts of the image.

Update page content

The pages in PROD have bootstrap markup in the wysiwyg editor that will have to be updated to utilize Athena markup and shortcodes. We can copy over the pages from PROD into QA and update them there, ready to update post-deployment.

The pages:

WYSIWYG Updates to support Athena

Make any WYSIWYG adjustments to support Athena and the Athena Shortcode Plugin. Also ensure compatibility with old Pegasus story versions.

Issue Feed

We need to make sure issues that haven't been "published" yet don't show up in the issue list.

Update theme-help/options files

Update includes/theme-help.php, includes/theme-options.php with updated theme information as necessary.

Also update images in static/img/theme-help/ as necessary.

Update V6 template files

Update /v6/templates/issue/ and /v6/templates/story/ files as necessary and any other related or referenced functionality/markup/styles.

Lazy loading of images in headers, footers broke with v6

With the introduction of display_story_callout() to globally display story links/thumbnails, we lost the custom markup required for the lazy load js included in the theme to function properly.

We should consider either:

  • Updating display_story_callout() to omit the image src attribute in favor of using data-original
  • Or, de-queue jquery.lazyload.min.js in v6, and activate the lazysizes plugin like we use on other sites

Upgrade Athena Framework to latest version

Description

See title.

Why it's Important

To incorporate accessibility improvements introduced in v1.1.1, and to ensure we're including the latest+greatest updates.

Alternatives

n/a

Possible Implementation

Update package.json and re-run gulp tasks.

Additional context

n/a

Story Style Tweaks

There are some style adjustments we could make for the Story post type that would help improve the spacing, readability and usage of classes throughout the stories:

  • Headings in stories are adjusted to have a custom font face, size, and color in https://github.com/UCF/Pegasus-Theme/blob/master/versions/v6/functions.php#L35. The .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4 should be displayed the same/similarly to their respective heading/display tag, in order to discourage assigning text to headings and creating custom styles.
  • Increase the margin/spacing above and below the image/image captions. The images are a little too close together and to other content as it is.
  • Increase margin/spacing above headings. Headings throughout the story should have a little bit more breathing room in order to create a pause in reading.
  • font-size-* classes should be relative to what the story's new font-size is, the current font-size with .font-size-sm applied is too small relative to the story text font size.

Remove logic and existing references to the iPad app

The iPad app hasn't been a thing for a while. We have some leftover settings, markup and js logic still floating around for it that are still impacting frontend markup; the old "available on iPad!" modal in particular is getting flagged in Siteimprove for not being within an ARIA landmark. Removing these should help resolve those accessibility issues and help reduce a little bit of cruft in the theme and WP admin.

Remove header_title()

Because we use title-tag theme support instead of wp_title() to print a <title> tag in the document head, this function has no effect and should be removed.

Update JS files

Update JS in /v6/static/js/ as necessary. Some JS might have already been updated with previous Athena updates in this project. This should be completed towards the end of the project to update any remaining functionality and ensure that previous version's stories/pages/etc work correctly.

Utilize our Social plugin instead of the current built in social share buttons

The current social share buttons are outdated style-wise and content-wise.

Replace the social buttons on the sub-footer, header, and story template. Also, ensure that older version's social functions do not conflict with the UCF-Social-Plugin's functions.

Changes were previously made to the v6 footer file but reverted since it was out of scope of that PR: See 132c2a8. Those should be good to cherry pick for these updates.

Mobile header pulldown toggle has no text alternative

Update/remove static/ files

Update/remove any files, images, css, js in static/ as necessary. Make sure to ensure that previous version's stories, pages, etc still look & function correctly.

Update front-end non-version template files to utilize Athena

Update front-page.php, index.php, page.php, 404.php, and single.php to use Athena markup. This might be dependant on the current issue's version being set to 6+, so make sure to take that into consideration. The front-end should still be functional and look correctly if the current issue is set to v5.

Update SCSS files

Update SCSS styles in /v6/static/scss/ as necessary. Many of the styles might have already been updated with previous Athena updates in this project. This should be completed towards the end of the project to update any remaining styles and ensure that old version's stories and pages display correctly.

font-family sass mixins in v4 don't generate correct font weights

// Adds Gotham font family styles to an element (using backward-compatible
// font-family declarations for IE8 support.)
// $weight should be a number from 1-9, which references the desired font
// weight (100-900). Default is 4 (400) or 'Book'.
@mixin gotham($weight: 4, $font-style: normal) {
font-family: 'Gotham SSm #{$weight}r', 'Gotham SSm A', 'Gotham SSm B';
font-style: $font-style;
font-weight: #{$weight}00;
}
// Adds Archer font family styles to an element.
// $weight should be a number from 1-9, which references the desired font
// weight (100-900). Default is 4 (400) or 'Book'.
@mixin archer($weight: 4, $font-style: normal) {
@if ($font-style == normal) {
font-family: 'Archer #{$weight}r', 'Archer A', 'Archer B';
} @else if ($font-style == italic) {
font-family: 'Archer #{$weight}i', 'Archer A', 'Archer B';
}
font-style: $font-style;
font-weight: #{$weight}00;
}

We ran into a bug with generated font-weights after upgrading gulp-sass in v4.1.14 where the gotham() mixin at least is not generating accurate font-weight values; e.g. gotham(7) generates a font weight of 70 instead of 700. We may need to update these mixins to calculate weight explicitly instead of appending a literal in front of two 0's; e.g.:

...
$weight-calculated: $weight * 100;
font-weight: $weight-calculated;
...

UCF Header script needs to be enqueued with `use-bootstrap-overrides` option for versions using Bootstrap 2

array( 'name' => 'ucfhb-script', 'src' => '//universityheader.ucf.edu/bar/js/university-header.js?use-1200-breakpoint=1', ),

The UCF Header is enqueued on all versions using the use-1200-breakpoint option. Versions that utilize Bootstrap 2 need the use-bootstrap-overrides option set instead, which fixes excess left- and right-hand padding on the bar at mobile sizes.

Determine which versions use Bootstrap 2, and implement this option for those versions in some way. Consider moving enqueueing of the header script out of the main functions/config.php and into version-specific functions/config.php files.

Update search markup

Update search.php and searchform.php and any other related search functionality/markup/styles. Ensure search functionality for previous version stories, issue pages, and archive pages.

Update V6 header & footer files

Update /v6/footer-front.php, /v6/footer.php, /v6/header-front.php, /v6/header.php and any other related or referenced functionality/markup/styles.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.