1. Home
  2. AccessAlly
  3. The AccessAlly Theme

The AccessAlly Theme

In the past we have recommended several different WordPress themes and page builders. But, one thing was clear… none of these themes knows AccessAlly like we do. We tasked Naomi from our Customer Support team to build our most popular requests and wishes into our recommended WordPress theme…

The AccessAlly Theme

Part 1: Installing the AccessAlly Theme

Click here to download the AccessAlly Theme ZIP file.

You will also want to download the AccessAlly Child Theme ZIP file.

Go to Appearance > Themes > click Add New

AccessAlly Theme Adding a WordPress Theme

When prompted choose the AccessAlly Theme ZIP file from your computer.

Then go back to the Themes page, and choose “Add New” again, and this time upload the AccessAlly Child Theme ZIP file from your computer and click Install Now and Activate.

Why do you need both the AccessAlly Theme and the AccessAlly Child Theme? Because the AccessAlly theme may be updated from time to time, and when you update a theme it wipes out your settings (like colors, fonts, etc.) and reverts back to the defaults.

So what you’re doing here is installing the AccessAlly theme, but enabling and customizing the AccessAlly Child Theme. That way, when there’s an update to the AccessAlly Theme, your child theme will retain all of your settings.

Screenshot of AccessAlly Child Theme Enabled

This is what your Theme settings page should look like: the child theme enabled, with the AccessAlly theme installed but not enabled.

Now you can customize the child theme!

Part 2: Customizer Settings

In the left WordPress sidebar, go to Appearance > Customize.

1. SITE IDENTITY - Site title and footer text

In the boxes provided add your Site Title and Custom Footer wording.

Site Identity AccessAlly Theme

2. FONTS

Choose your fonts.

Site Fonts AccessAlly Theme

3. COLORS

There are two options for colors. You can use AccessAlly colors (matches the colors you set under AccessAlly > Settings > Styling or choose your own.

Colors in the AccessAlly Theme

4. PAGE OPTIONS

You can change the width of your pages, choose if you’d like to display titles, and center titles.

Page Options AccessAlly Theme

5. MENUS

There are two default menus in the AccessAlly theme. The primary menu (center top) and the account menu (by the profile photo.) We’ll cover menus in more detail in step 3.

Menus AccessAlly Theme

After you set your menu areas, you can scroll to the bottom, and collapse your submenu pages. This can be helpful if you have a large number of pages in a menu.

Scroll Menus

Select menu display options.

Menu Display Options

Mark the option to collapse child sidebar pages.

Collapse Child Sidebar

The result with child sidebar pages collapsed (click “+” to reveal submenu items.)

collapse sidebar example

The result without collapsing child sidebar pages (all menu items are shown.)

Full Menu View

6. HOMEPAGE SETTINGS

The Homepage Settings are set to the recommended settings to use with AccessAlly shown in the photo below.

Homepage Settings AccessAlly Theme

7. ADDITIONAL CSS

If you’d like to make custom changes to the AccessAlly theme via CSS you can make your changes here.

CSS Settings AccessAlly Theme

Part 3: Menu Locations

There are three menu locations in the AccessAlly Theme. You can find these under Appearance > Menus > Menu Settings. We’ll explore each below.

1. PRIMARY NAVIGATION MENU

Primary Navigation Menu AccessAlly Theme

This menu is at the center top location in the theme. You can add any pages that you would like to this menu. We recommend keeping this menu to a single level (no submenu pages.)

Go to Appearance > Menus and create a new menu and mark the Primary Navigation location to be used with this menu.

Primary Menu AccessAlly Theme

2. ACCOUNT MENU

Account Menu Caret AccessAlly Theme

This menu is at the top right location in the theme. You can add any pages you would like to this menu – we recommend adding My Account/Profile, My Orders, and a Logout link to the menu. This menu should not have any submenu pages.

Go to Appearance > Menus and create a new menu and mark the Account Menu location to be used with this menu.

Account Menu Settings AccessAlly Theme

Go to your My Account/Profile page. Copy and paste the shortcode below and add it to this page if you would like members to add their profile image.

[accessally_profile_image readonly="no" label_text="Upload a new file" button_text="Browse" height="175px" width="175px" ]

Profile Photo AccessAlly Theme

Visit the Dashboard page of your site and click the caret icon by the profile photo. This will open up your newly created Account menu.

Account Menu Caret AccessAlly Theme

3. STATIC SIDEBAR MENU

This menu location allows you to create a sidebar design that displays the same sidebar content on multiple pages of your site.

Here’s an example of the Static Sidebar Menu being used to display Group Settings for a site using CommunityAlly. This allows members to easily see these options.

Page with Sidebar Community

No Static Sidebar Menu

If you go to Appearance Menus you’ll be able to create a static sidebar menu using the image below.

Sidebar Template Menu

  1. Create a new menu
  2. Choose your menu items (example CommunityAlly Profile)
  3. Select desired pages
  4. Click the Add to Menu button
  5. Check the Static sidebar menu button
  6. Save Menu

Part 4: Using AccessAlly Theme Templates

There are three templates included with the AccessAlly Theme.

  1. Default Template
  2. Page Without Sidebar
  3. Page With Static Sidebar

You can open any page of your AccessAlly site and use the Template section in WordPress to assign your desired template. Click the dropdown and you’ll see all three styles.

AccessAlly Theme Template Settings

1. DEFAULT TEMPLATE

This is the template style that is automatically used on your site. This design shows key pages of your site without a sidebar while showing pages in your AccessAlly Offerings along with progress if you’re using AccessAlly Pro.

Example of a key page using the default template.

Default Key Pages

Example of an offering using the default template. This sidebar is automatically created with the icon and pages in your offering.

Default Offering

2. PAGE WITHOUT SIDEBAR TEMPLATE

When you assign this template to pages on your site only the page content will display and there is no sidebar. This design template style is perfect for order forms, opt-in pages, and sales pages.

3. STATIC SIDEBAR TEMPLATE

This template style will display the same items on all pages this template is assigned to. It is very different from the default template which creates a different sidebar for each offering.

Static Sidebar Template with a WordPress Menu

Here’s an example of the static sidebar template used with a WordPress menu.

Page with Sidebar Community

For this style menu to appear you must have the WordPress menu settings checked for Static Sidebar Menu under Appearance > Menus.

Menu Settings Checked

Static Sidebar Template with WordPress Widgets

Here’s an example of the static sidebar template used with WordPress widgets.

Group Widget

For this style menu to appear you must have the WordPress menu settings unchecked for Static Sidebar Menu under Appearance > Menus.

No Static Sidebar Menu

You will then be able to use WordPress widgets to create a custom sidebar.

Sidebar Widgets

Part 5: Using Templates with CommunityAlly Groups

If you would like to use the AccessAlly Theme templates for your CommunityAlly Groups visit the group(s) and click the Settings tab.

Settings Template

In the Theme Templates Section click the dropdown to select your desired template. We recommend trying the default template to start as the AccessAlly offering menu and progress will appear.

Theme Template Settings

Part 6: Adding Your Content

We recommend using Gutenberg to add your offering content to the site. It’s fast, flexible, and works great with AccessAlly… without the need to purchase additional page builder plugins.

Using AccessAlly and ProgressAlly blocks

You can add blocks for AccessAlly and ProgressAlly (AccessAlly Pro users) on any page of your site.

Click the “+” in the spot you would like to add your content to.

Use Blocks Image 1

Type AccessAlly or ProgressAlly in the search and click the one you would like.

 

AccessAlly Block

Look to the right side under blocks for the dropdown to make your selections

Block Details

Your selected item will appear on the page.

Select Options in Blocks

Using Classic blocks

The classic block is very flexible and allows you to type and add AccessAlly/ProgressAlly shortcodes to your page quickly and easily.

Click the “+” sign, type Classic in the search box, and click Classic when it appears.

Select Classic Block

Use the editor and AccessAlly Shortcode Generator to add content to your page.

Classic Block type

Using the AccessAlly Shortcode Generator

You can find the AccessAlly Shortcode Generator by going to the /wp-admin page on your site.

Shortcode Generator

With the AccessAlly Shortcode Generator you select the options from the dropdown and paste them into a block on your Wordpress page.

Shortcode Pasted Into Gutenberg

Part 7: Customizing the AccessAlly Theme with CSS

If you are familiar with CSS here are some options you can try with the AccessAlly Theme.

Remove gray shading and border around content

Default look with grey background and white content section with background shading border.

Default AccessAlly Theme Content Section

Look when CSS is used to make the background white.

Background View CSS White in AccessAlly

CSS code used for white background.

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
background-color: white;
}

CSS code used to remove border shadow around content.

main article {
box-shadow: none;
}

Change gray container to white

By default there is a gray background color on all pages in the AccessAlly Theme.

Gray background in AccessAlly Theme

You can switch this to white (or any color you’d like) by adding the CSS code shown below.

main #main-content-page {
background-color: white;
}

White background page in AccessAlly Theme

Need Help with the AccessAlly Theme?

If you have questions about using the AccessAlly Theme join our next Tune Up call or Contact Support.

FAQs

Can I use the AccessAlly Theme on my main website?

We do not recommend using the AccessAlly Theme on your main website if you already have a theme installed like the Hello Theme, Divi, or Beaver Builder Theme. The AccessAlly Theme works best on a subdomain. See why we recommend subdomains here.

How does AccessAlly Widget Control Tool Work?

AccessAlly Widget Control Tool

The AccessAlly Widget Control Tool is deprecated as of WP 6.2 (2023). It allows conditional display of classic widgets based on user login status. It only works with the classic widget editor on non-block themes with modifications. In case the Widget Control Tool is needed, add the following code to your WordPress Theme under Appearance > Theme File Editor > functions.php:


function accessally_base_theme_support() {
remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'accessally_base_theme_support' );

 

Updated on March 4, 2024

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Laptop with the AccessAlly demo site

AccessAlly is the most flexible way to sell and elegantly deliver digital offerings. All in one place.

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.