a fee child theme for the Genesis Framework with WooCommerce and bbPress compatibility.


Current Version : 1.3 | Release Date : September 12, 2013

This documentation is for version 1.2.2. AyoShop documentation for v1.3 is still on progress.

This is the dummy content data that we use at the demo page.

Before you import the xml data, please make it sure to install all the requirement and recommendation plugins.

Download XML Data


Just for a quick note! This documentation only covers all features and how to use Ayo Shop Child theme. So, if you are new about WordPress and Genesis Framework, we recommend you to download and read Genesis for Absolute Beginer by StudioPress. The PDF almost covers all information to get started with WordPress and Genesis Framework.

You can also read the documentation about AyoShop Child Theme online, just to make sure that it's up to date.


Genesis framework is a parent theme of AyoShop Child Theme, so make it sure you install both of them.

An easy way to install AyoShop child theme is via WordPress admin dashboard it self.

Upon theme activation, there will be a notification about AyoShop plugins dependencies which are listed below:

Note: Each plugins has different functions and features, only use them depend on your needs.

This video will illustrate theme installation:

Background music that we use at video presentation → Love Piano Theme by Boris Sevastyanov

02. Setting Up Homepage

Since AyoShop version 1.2 Custom homepage is handled by Aqua Page Builder plugin.

To setup a custom Homepage, lets create a template first: (Assuming Aqua Page Builder and AyoShortcodes already installed and activated)

We are not done yet, there is some few steps that we need to cover.

By default, AyoShop child theme homepage is a blog page or list of posts. To setup a homepage just like at the demo page, just Add New or edit WordPress page (Admin Dashboard → Pages → New Page). Step by step to setup homepage:

  1. Give title for your page (e.g. homepage, home, front page etc).
  2. Click Add Template, select template that you just created before and then click Insert Template
  3. At the Page Attributes → Template, choose Canvas template.
  4. At Genesis Layout Settings, choose full-width (recommended).
  5. Publish.

Now lets go to Settings → Reading.

  1. At Front page displays choose a static page.
  2. At Front Page selection, choose the page that we just created for Homepage.
  3. At Posts page selection, choose blog page (optional).

This video will illustrate how to setup custom Homepage:

Background music that we use at video presentation → Love Piano Theme by Boris Sevastyanov

04. Setting Up WooCommerce

In order to turn your website into eCommerce with WooCommerce, you need to have the following that are listed below Installed and Activated:

You can learn more about how to setup your shop with WooCommerce at their documentation page.

After you activate WooCommerce, please go to WooCommerceSettingsCatalogImage Options. And change the followings:

Optional : Use Regenerate thumbnails or Force Regenerate Thumbnails plugin if there are images which are already stored before you save WooCommerce Image Options.

05. AyoShop Settings and WP Customizer

Since AyoShop version 1.2, AyoShop settings is using Genesis Settings API.

AyoShop Settings

To Access theme Child Theme Settings go to Admin Dashboard → GenesisAyoShop Settings. Each settings has their own explaination.

WP Customizer

Any customization such as colors and typography are handled via WP Customizer. To access WP Customizer, (while you still login) go to the front page of your site. Next, at WordPress admin toolbar hover over your site title → Customize.

06. Shortcodes

Shortcodes are handled by a plugin that we just developed called AyoShortcodes.

To use the shortcode: [icon]

To change icon type: [icon icon="display"]

Full parameter: [icon icon="display" color="#444" size="24"]

Please take a look at AyoShortcodes homepage for more detailed documentation.

This video will illustrate how to use the shortcode:

Background music that we use at video presentation → Indubitably Mellow by alkis

07. Translation and Localization

Localization files .po and .mo for translation are already included at AyoShop Child theme.

Translating WordPress

  1. Visit WordPress in your language.
  2. Download language files .po and .mo that you want and use it at your WordPress installation ( wp-content → languages ). If the language folder does not exist, just create it.
  3. Open wp-config.php and give the ID of your language. define('WPLANG', 'LANGUAGE ID'). Take a look at http://codex.wordpress.org/WordPress_in_Your_Language to find out the ID of each language.

Translating Genesis Framework

  1. Install and activate Genesis Translations plugin.

Translating Genesis Child Theme

  1. Download and Install Poedit.
  2. Open ayoshop.po file with Poedit.
  3. Translate the source text at translation box.
  4. Save the file and give the file name depending on your language ID. File → Save As → Language ID. (e.g. de_DE, fr_FR, etc). Poedit will automaticly generate .mo file.

Contribute the translation:

If you want to contribute AyoShop translation files, please send me a message to ayothemes@gmail.com.

This video will explain how to translate Gensis Child theme:

08. Source and Credits

We've used the following images, icons, fonts or other files as listed below.

Scripts and styles:

PHP scripts and classes:

Images, Icon and Font:

09. Changelog

Version 1.2.2

* Update Screenshot v1.2.2
* Fix logo width and height
* Fix footer-widgets css
* Update responsive stylesheet
* Update file path of Aqua Page Builder Plugin
* Update file path of Ayo Shortcodes Plugin

Version 1.2.1

* Update Screenshot v1.2.1
* Fix translation domain
* Fix translation for new strings
* Update .mo and .po files
* Fix bbPress action and filter file path
* Fix WooCommerce action and filters file path
* Fix Dynamic style and main stylesheet
* Update AyoShortcodes plugin
* Update Aqua Page Builder modules

Version 1.2

* Update Screenshot v1.2
* Fix Genesis 1.9.2 compatibiliy
* Fix WooCommerce 2.0.0+ compatibiliy
* Reorganized files and folder structures
* Code optimization
- Drop Options Framework Theme library
+ Add settings for child theme autoupdate
+ Add plugins dependency features
+ Add AyoShop Settings based on Genesis Settings API
+ Add support for Aqua Page Builder plugin modules
+ Add support for AyoShortcodes plugin
+ Add 600+ Google WebFonts Selector	

Version 1.1

1.	Update Screenshot v1.1
2.	Update Options Framework Theme into v1.4 - ayoshop/lib/admin/
3. 	Add autoupdate theme feature (beta)
4.	Add bbPress compatibility - ayoshop/lib/functions/theme-bbpress.php
5.	Conditional statement for bbPress - ayoshop/lib/functions/theme-tweaks.php
6.	Update translation - ayoshop/languages/
7.	Fix plural and singular for translation - ayoshop/lib/functions/theme-woocommerce.php
8.	Remove unncessary array - ayoshop/lib/functions/theme-functions.php
9.	Update stylesheet for main style
10.	Update stylesheet for responsive style
11.	Add stylesheet Contact form 7
12.	Add stylesheet for bbPress - ayoshop/lib/css/ayo-bbpress.css
13.	Separate files so it will be more manageable for future development.
14.	Fix some minor bugs
15.	HTML5 Docktype to make it compatible with WooCommerce.
16.	Prepare for Genesis 1.9

Version 1.0

1. Initial Release

10. License

AyoShop is distributed exclusively at Designmodo, licensed under GNU General Public License v2.0 (or later)