This style guide offers guide rails for maintaining uniform style and function across all Chris Johnson branded websites ("CPJ sites"). Currently:
All CPJ sites are deployed with the Beaver Builder child theme.
The CPJ plugin
We've developed the a plugin ("CPJ plugin") to provide a variety of essential functions across all CPJ sites.
[fact]The Beaver Builder theme uses
px rather than
em for all font sizing[/fact]
- All headings are rendered in the Merriweather Sans font.
- Body text is rendered in the Merriweather font. (18px)
- The nav menu is rendered in the Merriweather Sans font (16px, all caps)
All content is rendered at 800px wide, via both the builder's global settings and the Themer post layout.
[caution]Adjusting widths will affect display of the [sc tag="code"]aside[/sc] and may have other consequences too.[/caution]
Handled by the CPJ Plugin, Globally
The CPJ plugin designates a "master" site (currently contender.co), from which all other CPJ sites reference a stylesheet. This stylesheet governs much (but not all) of the site layout.
[caution]In order to maintain consistency across all CPJ sites, this stylesheet overrides many of the Customizer settings, including font selections.[/caution]
Handled by the CPJ Plugin, Per Site
While all CPJ sites are configured to reference the "master" stylesheet which lives at contender.co, there are certain features which live in the server-side PHP code.
For this reason, the plugin must be re-deployed to each CPJ site whenever changes to that code are made.
Primarily, the plugin provides use of various shortcodes.
There are two primary types of shortcodes:
- The [sc tag="code"]aside[/sc], [sc tag="code"]inside[/sc], and [sc tag="code"]footnote[/sc] render supporting content to the page or post layouts
- The [sc tag="code"]caution[/sc], [sc tag="code"]fact[/sc], [sc tag="code"]success[/sc] and [sc tag="code"]warning[/sc] render Bootstrap 4 style alerts to the page or post layout
[caution]Because a shortcode is rendered with server-side PHP code, it will be necessary to update the CPJ plugin on each site whenever a change to shortcode rendering is made.[/caution]
[aside]I'm an aside[/aside]Renders an aside which displays to the left or right of the body on desktop or tablet, and within the post contents on mobile.
Renders a "caution"-style alert.
[caution]I'm a caution[/caution]
Renders a "fact"-style (primary) alert.
[fact]I'm a fact[/fact]
Renders a numeric, superscript footnote[footnote]I'm a footnote[/footnote] which is linked to the footnote at the bottom of the post content, which renders with the contents of the footnote tag.
[caution]Footnotes cannot, at this time, be embedded within the contents of another shortcode or within page layouts.[/caution]
Renders an "inside" which displays within the post contents.
[inside]I'm an inside[/inside]
Renders a "success"-style alert.
[success]I'm a success[/success]
Renders a "warning" alert.
[warning]I'm a warning[/warning]
Handled Manually, Per Site
Inside of WordPress
Currently, the following steps must be performed manually per each CPJ site (typically, once per the initial setup process).
- From our master site, via the export utility, export all pages and Themer layouts
- From our master site, export the Customizer settings
- Install and activate the Beaver Builder, Beaver Themer, Gravity Forms, Litespeed Cache, Wordfence, WP Fusion and Yoast plugins
- Under Tools > Import, import our previously exported Pages and Themer layouts
- Under Settings > General, provide the new "Site Title", set "Timezone" to Los Angeles and set "Week Starts On" to Sunday
- Under Settings > Reading, set the Homepage to the correct home page; leave the Posts page set to none
- Under Settings > Permalinks, set the permalink structure to "Post Name"
- In the Customizer, import our previous Customizer settings
- In the Customizer, under General > Layout, toggle Full Bootstrap 4 and Font Awesome 5
Outside of WordPress
- [CPJ] Point the domain's name servers to ns.liquidweb.com and ns1.liquidweb.com
- [CA] Create MX records and SPF record