How You Can Edit the Theme
A Note About Accessibility
Compliasis Pro is built with accessibility front and center. The following resources were referenced in the theme’s coding and will be useful for your ongoing accessibility maintenance and optimization of the theme:
- Web Accessibility Checklist: 16 Things to Improve Your Accessibility
- WordPress’ about accessibility
- WordPress Accessibility Standards
- GitHub WordPress Coding Standards Repository
- Mozilla Developer Network’s accessibility page
- The A11Y Project
- Accessible Rich Internet Applications (WAI-ARIA) 1.2
- Essential Components of Web Accessibility
- Web Accessibility Standards: an overview for designers
- WordPress’ about accessibility
- WordPress Accessibility Standards
- GitHub WordPress Coding Standards Repository
- Mozilla Developer Network’s accessibility page
- The A11Y Project
- Accessible Rich Internet Applications (WAI-ARIA) 1.2
- Essential Components of Web Accessibility
- Web Accessibility Standards: an overview for designers
Theme Color Scheme
Under the Appearance menu choose Customize. When the customizer opens, choose Theme Settings then select Color Scheme. You will have six color options to choose from. All have accessible contrast ratios. Greens and Reds are not options as color blind individuals have trouble seeing those colors. The options are:
- Default (the scheme on this site)
- Blue
- Purple
- Grey
- Gold
- Black
If your brand features reds and greens we recommend using the grey, black, or possibly the other color schemes if they match the hue and saturation of your branding. You can bring your colors in via your logo or headings colors as an accent.
CSS
After selecting a color theme you may customize it by editing the theme’s CSS in the style.css and frontend.css files. If you are not experienced with editing code we do not recommend doing this.
style.css
This file is where you edit the CSS for your site in general. If you are a frontend developer you know what to do here.
To find the CSS you need to edit and test changes before editing it in WordPress, use the Chrome browser’s web tools. This tutorial is a good starting point if you are new to this. You can examine and decide what CSS to edit in Firefox as well.
If you aren’t a coder, a better approach is to override specific theme CSS under the Additional CSS tab in the Theme Customizer. WordPress has some good information about the subject.
Design Palette Pro is a paid plugin that lets you easily style themes built on the Genesis Framework. It has a variety of free companion plugins that extend its functionality. No coding is required. 🙂
lib/gutenberg/front-end.css
This file is where you edit the CSS for content blocks in the WordPress Gutenberg editor.
Blocks
The theme has customized color options for the paragraph block and additional custom blocks via the Mobile Atom Blocks plugin.
Paragraph Block Color Options
Compliasis Pro has paragraph color options for text and backgrounds that complement the theme’s color schemes. Again they are optimized for accessibility. A custom color picker is also available. Be mindful of contrast ratios and viewability by your color blind users if you use custom colors.
Custom Blocks
In addition to WordPress’ built-in editor blocks, the theme can use a variety of custom blocks built with React JS. They are available in a free companion plugin (Mobile Atom Blocks) that complements the theme:
- Tutorial Card – with title, image, sections list, and instructions (below)
- Author Card – with title/name, image, credentials, and bio (bottom of page)
- Dialable Phone Number – To use the block, copy and paste this number into the block: 555-555-5555 . Then edit the phone number.
Example of Tutorial Card – React JS
Section 1
React is a JavaScript library for building user interfaces.
Section 2
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
Section 3
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Page Templates
Compliasis Pro comes with Page Templates you can apply to your pages.
In addition to the default template, there are landing page (see the Purchase page in our top navigation menu) and blocks page (all formatting other than header and footer are removed so you can design the page as you want via blocks) templates.
Select them under the Document tab on the right hand side of the page editor.
404 and Search Not Found Pages
The theme’s 404 and Search Not Found pages have an image and message coded into them to make them more interesting and useful for your audience. If you would like your own design and content for the pages we recommend the Genesis Widgetized Not Found & 404 plugin. You can edit the pages by placing widgets into a blank page via the Theme Customizer.
Complementary Enhancements You Can Make to Compliasis Pro
Cookies Notification
We recommend providing a cookie notice at the top of your page to comply with Europe’s GDPR regulations. The Cookie Notice plugin is a good solution. Jetpack also offers one via a widget and is what we use on this site.
Customization available via WordPress itself
You have many customization options that are baked into the WordPress content management system.
Custom Fields
<
Schema
WordPress’ custom fields give you greater control over the content of your website. However, that isn’t their only benefit.
Using them also gives you the ability to be more transparent with your site’s visitors and search engines. Custom fields let you add information in the form of meta-data that would not normally be displayed.
This includes schema markup. By using it you can change the way your search engine results, SERPs, appear in search engines. You are also giving them more information about the type of content in your page or post.
You may find it easier to use a plugin for schema markup rather than custom fields.
Head Schema
Detailed schema data can be added to your site’s head to help search engines know more about your organization. SEMrush has a helpful article on what to include in your schema. And Kalicube has a schema markup generator to write a JSON-LD script with your data. You can then paste it into your header in via the Theme Customizer.
Recommended Plugins
Yoast SEO
There are default SEO Theme settings (above) you can use for document (page or post) title, meta description, meta keywords or phrase, etc. However, the free and professional versions of the Yoast SEO plugin (below) are the industry standard for search engine optimization in WordPress. They also give you more ways to improve and customize your schema.
You can learn more here. Their beginners guide is a good place to start.
Genesis Simple Edits
As the name implies Genesis Simple Edits is a simple plugin. Via the author StudioPress:
“This plugin creates a new Genesis settings page that allows you to modify the post-info (byline), post-meta, and footer area on any Genesis theme. Using text, shortcodes, and HTML in the text boxes provided in the admin screen, these three commonly modified areas are easily editable, without having to learn PHP or write functions, filters, or mess with hooks.”
It is the best way to edit the copyright message in the footer.
Genesis Simple Share
Genesis Simple Share is a plugin that lets you add share buttons to your posts, pages, etc. Jetpack also has this functionality.
Jetpack
Jetpack is a multipurpose plugin from Automattic, the parent of WordPress. The free version provides:
- Security enhancements
- Performance enhancements
- Various marketing integrations
- Social share buttons
- Additional widgets
- Sitemap generation and submission
- Lazy image loading
Additional recommended plugins
The Accessibility by Userway plugin is a good option for maximizing your site’s accessibility without changing the theme’s code. Users can select the “Man” icon to the right of the menu and customize your site’s accessibility to best suit themselves.
Optional Plugins
Simple Social Icons
The Simple Social Icons plugin, as the name implies, is a simple way to display icons linking to your social media accounts. After installing the plugin you add them via a widget.
Genesis Connect for WooCommerce
Via StudioPress, the plugin authors:
“This plugin replaces WooCommerce’s built-in shop templates with its own Genesis-ready versions…
To allow easy customization of these templates, and ensure that you do not lose your customizations when the plugin is updated, you can place your own copies of these templates in your child theme’s ‘woocommerce’ folder and customize these copies as much as you like.”
Genesis Parent Theme Documentation
Access information from the parent theme documentation.
Reuben Walker
Ringmaster, Mobile Atom Media
Reuben is a certified full stack developer and owner of Mobile Atom Media and its division Mobile Atom Code.
A graduate of the University of Georgia he lives in Orlando, FL with his wife and English Labrador.
For great curated and original content on entrepreneurship, content, design, and code follow him on the social media platform of your choice via the icons in this site’s footer. Or join the 40,040+ followers of his Flipboard Magazines.
