wp-a11y-theme Child Template Documentation

The Favicon should be implemented by the child theme and located in the child theme's ./images/ directory with the filename 'favicon.png'.

The logo appears at the top of the site. The parent theme has CSS in place to insert the logo, and it is the responsibility of the child theme to provide the logo.

The logo should go into the ./images/ directory of the child theme
The logo should be SVG format.
The logo image should follow this filename format logo-[COLOUR].svg
- where [COLOUR] could be:
  - COLOUR - default
  - WHITE - for white on black, and low contrast themes
  - GREY - for black on white, and black on yellow themes
  - YELLOW - for yellow on black themes

For example, a child theme should have the following images to make use of the sidebar graphic and its contrast modes:

./images/logo-COLOUR.svg
./images/logo-GREY.svg
./images/logo-WHITE.svg
./images/logo-YELLOW.svg

The sidebar has a graphic that appears along the left hand side of the site. The graphic has two parts - one part appears in the aside element, and the other part in the footer.

The parent theme has CSS in place to insert these images as backgrounds, it is the responsibility of the child theme to provide the images.

The sidebar images should go into the ./images/ directory of the child theme
Sidebar graphics should be SVG format.
The sidebar images should follow this filename format sidebar-graphic-[COLOUR]-01.svg and sidebar-graphic-[COLOUR]-02.svg
- where [COLOUR] could be:
  - COLOUR - default
  - WHITE - for white on black, and low contrast themes
  - GREY - for black on white, and black on yellow themes
  - YELLOW - for yellow on black themes
- sidebar-graphic-[COLOUR]-01.svg appears in the sidebar
- sidebar-graphic-[COLOUR]-02.svg appears in the footer

For example, a child theme should have the following images to make use of the sidebar graphic and its contrast modes:

./images/sidebar-graphic-COLOUR-01.svg
./images/sidebar-graphic-COLOUR-02.svg
./images/sidebar-graphic-GREY-01.svg
./images/sidebar-graphic-GREY-02.svg
./images/sidebar-graphic-WHITE-01.svg
./images/sidebar-graphic-WHITE-02.svg
./images/sidebar-graphic-YELLOW-01.svg
./images/sidebar-graphic-YELLOW-02.svg

The parent theme supports a graphic that appears in the top-right corner which we have called the "corner flourish".

Child theme location: ./images/corner-flourish.svg
Format: SVG

Contrast theming for corner flourish

TODO
You need to implement some css for this.

Instagram, Twitter, and Facebook feeds are handled by plugins:

Custom Twitter Feeds - https://wordpress.org/plugins/custom-twitter-feeds/
Instagram Feed - https://wordpress.org/plugins/instagram-feed/
Custom Facebook Feed - https://wordpress.org/plugins/custom-facebook-feed/

Install and activate each of them.

Note: The following are just guidelines. You may want to use different settings.

Custom Twitter Feeds

Enter the access tokens - you will need the Twitter account login and password to generate these keys. Use the "Login in to Twitter and get my Access Token and Secret" button, or manually enter the information:
1. Locate the consumer key, consumer secret, access token, and access token secret for the Twitter account. To generate these, you can follow the instructions here: https://developer.twitter.com/en/docs/basics/authentication/guides/access-tokens.
2. You will need the Twitter account login and password to generate these keys.
Enter those keys in the appropriate text fields in the Custom Twitter Feeds admin page (Dashboard > Twitter Feeds > Tab 1. Configure
Under Tab 1. Configure, suggested settings under Feed Settings:
1. Feed Type:User Timeline
2. How many tweets to display:5
3. Check for tweets every:1 hour
4. Preserve settings when plugin is removed:unchecked (This is more secure)
5. Are you using an Ajax powered theme:unchecked
under Tab 2. Customize, suggested settings:
1. Width of Feed: 100%
2. Height of feed: blank
3. Show/Hide: All unchecked except Avatar image, author name, tweet text, media placeholder, date.
4. Show header: unchecked
5. Show "load more" button: unchecked
6. Add custom twitter feeds credit: unchecked
7. Rest of settings leave as default.
under Tab 3. Style
1. Left as default
under Tab 4: Display Your Feed
1. Nothing to modify here. We will use the shortcodes to generate our feeds later.

Instagram Feeds

Get an Instagram access token using the "Log in and get my Access Token", or manually get the token: https://www.instagram.com/developer/authentication/
Paste the access token into Access Token field
Enter the User ID of the feed to display.
Under Tab 1. Configure
1. Preserve settings when plugin is removed:unchecked (This is more secure)
2. Are you using an Ajax powered theme:unchecked
Under Tab 2. Customize, suggested settings:
1. Width of Feed: 100%
2. Height of Feed: blank
3. Number of photos: 2 photos
4. Number of columns: 1
5. POadding around images: 5px
6. Sort photos by: Newest to oldest
7. Image Resolution: auto-detect
8. Show the header: checked
9. Show bio text: checked
10. Load More button: unchecked
11. Follow button: unchecked
under Tab 3: Display Your Feed
1. Nothing to modify here. We will use the shortcodes to generate our feeds later.

Facebook Feed

Under Tab 1. Configuration
1. Facebook Page ID: Enter the Facebook username
2. Enter my own Access Token: can be unchecked if the Page ID is a public page.
3. Is this a page, group or profile: Page
4. Show posts on my page by: Only the page owner (me)
5. Number of posts to display: 3
6. Change the post limit: blank
7. Check for new Facebook posts every: 1 hour
8. Localization: English
9. Timezone: Change to fit your locale
Select Save Changes
Under Tab 2. Customtization
1. Feed width: 100%
2. Everything else left default.

The social media feeds use shortcodes to insert into content. You can insert the social feeds into Posts, and Pages using the WP rich editor. You can also insert the social feeds directly into PHP files by using the do_shortcode() Wordpress function.

For example, in BIG IDeA and Our Doors Are Open the social feeds are structured as seen in the following code snippet:

<section class="row a11y-panel-container bi-social-feeds">
    /* Class .bi-social-feeds is used for styling purposes. Replace with your own. */

    <article class="small-12 medium-4 columns a11y-front-panel">
        <header class="a11y-entry-header">
            <h1>Twitter</h1>
        </header>
        <section>
            <?php
            // Shortcode for Custom Twitter Feeds plugin
            // https://wordpress.org/plugins/custom-twitter-feeds/
            echo do_shortcode("[custom-twitter-feeds]");
            ?>
        </section>
    </article>
    <article class="small-12 medium-4 columns a11y-front-panel">
        <header class="a11y-entry-header">
            <h1>Facebook</h1>
        </header>
        <section>
            <?php
            // Shortcode for Custom Facebook Feed plugin
            // https://wordpress.org/plugins/custom-facebook-feed/
            echo do_shortcode("[custom-facebook-feed]");
            ?>
        </section>
    </article>
    <article class="small-12 medium-4 columns a11y-front-panel">
        <header class="a11y-entry-header">
            <h1>Instagram</h1>
        </header>
        <section>
            <?php
            // Shortcode for Instagram Feed plugin
            // https://wordpress.org/plugins/instagram-feed/
            echo do_shortcode("[instagram-feed]");
            ?>
        </section>
    </article>
</section>

Graphics

Favicon

Logo

Sidebar graphics

Corner Flourish

Social Media Feeds

Get the Social Media Plugins

Set Up the Plugins

Configuring the Social Media Feed Markup