• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Mobile Atom Code Header Logo Glow

Mobile Atom Code

Accessibility, privacy, and security compliant WordPress themes

This site uses cookies to analyze our traffic. For more information see our privacy policy. Cookie Policy
  • Home
  • Articles
  • Contact

 
 

Compliasis Pro Docs

April 26, 2019 By Reuben Walker

Illustration of a programmer

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

Screenshot of Customizer Theme Colors Settings

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 screenshot

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. 🙂

frontend.css screenshot

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.

Screenshot of color options available for the paragraph block.

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

Tutorial Image
  • Section 1 – JS Library
  • Section 2 – Views
  • Section 3 – States
  • 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.



    Screenshot of page templates settings

    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.


    Screen shot of 404 settings page

    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

    Illustration of cookie

    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.


    Illustration of an operating system

    Customization available via WordPress itself

    You have many customization options that are baked into the WordPress content management system.


    Custom Fields

    <
    Custom Fields settings screenshot.

    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 logo.

    Yoast SEO

    Image of default Theme SEO settings fields.
    Default Theme SEO Settings Fields

    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.

    Screenshot of Yoast SEO settings.
    Yoast SEO Settings Fields

    You can learn more here. Their beginners guide is a good place to start.

    Screenshot of the Genesis Simple Edits setting options.

    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.

    Screenshot of Genesis Simple Share settings.

    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.

    Image of Jetpack Plugins Features and Benefits.

    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

    Learn more here.

    Additional recommended plugins

    • Accessibility by Userway
    • Cookie Notice (see above)
    • Smush Image Optimization and Compression

    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

    Screenshot of Simple Icons Settings.

    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.

    WooCommerce Logo.

    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 Framework Logo

    Genesis Parent Theme Documentation

    Access information from the parent theme documentation.


    Reuben Walker

    Author Image

    Reuben is Ringmaster of Mobile Atom Media and its division Mobile Atom Code. In addition to his content specialties, he is also a full-stack developer.

    An ABJ graduate of the University of Georgia and MA graduate of Georgia State University, he lives in Orlando, FL, with his wife and English labrador. He received his full-stack certification from the University of Central Florida.

    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 44,143+ followers of his Flipboard Magazines.

    Share this:

    • Twitter
    • Tumblr
    • LinkedIn
    • Reddit
    • Pinterest
    • Facebook
    • More
    • Print
    • Pocket
    • WhatsApp
    • Telegram

    Filed Under: Documentation Tagged With: Compliasis Pro, WordPress Theme

    Reader Interactions

    Primary Sidebar

    Table of Contents
    Accessibility
    Theme Color Schemes
    Customizer

    CSS
    style.css
    frontend.css

    Block Customization
    Blocks

    Page Templates
    404 Page
    404 Page Plugin

    Cookies
    Cookie Notification

    Custom Fields
    Schema

    Built-in WordPress Customization
    WordPress Options

    Recommended Plugins
    Yoast SEO
    Simple Edits
    Social Share Icons
    Jetpack

    Optional Plugins
    Social Icons
    WooCommerce

    Genesis Framework
    Parent Theme Documentation

    Footer

    Mobile Atom Media grows your business via a strategy for the content in your site, blog, social media, streaming, and email communications.

    Follow

    UCF Accredidation Logo
    Mobile Atom Code Logo
    Mobile Atom Code designs and produces digital media like sites, email templates, visuals, videos, and apps for use in your content marketing.

    Follow

    Copyright © 2022 · Compliasis Pro On Genesis Framework · WordPress · Log in

    • Search
    • Privacy Policy
    • WP Codex
    • WP Developer
    • WP Gutenberg
    • WP Themes
    • WP Plugins
    • WP Accessibility
    • WP Coding Standards
    • WP Support