Theming Exchange

Getting Started

Adding an Exchange Directory

Get started with Theming Exchange by creating an 'exchange' directory in your theme. This is where all of your Exchange modifications will reside.

/theme-name/exchange/

Adding an Exchange Stylesheet

At it's most basic level, theming exchange is as simple as adding a stylesheet to the exchange directory of your theme (exchange/style.css). From here all you have to do is add some styles to this file.

/exchange/style.css

Adding an Exchange Functions File

Much like a standard WordPress theme, Exchange loads a

functions.php

file for adding functionality specific to the theme.

exchange/functions.php

This is the most basic setup of Exchange.

Customize Ghost and Product Pages Output

Exchange Pages

Exchange pages are pages "created" on the fly by Exchange but do not exist in the standard pages section of the WordPress admin area. You can see a list of these pages in Exchange --> Settings --> Pages. Some of the pages have the option to be disabled or replaced by a standard WordPress page/shortcode.

In order to customize the content of Exchange Pages completely, we recommend creating a file named page.php, adding it to the exchange directory (/exchange/page.php) in your theme, then adding the following code:

get_header();
while ( have_posts() ) : the_post();
the_content();
endwhile;
get_sidebar();
get_footer();

Of course this example is for a standard WordPress theme. If you are using a theme that uses a different method of rendering the loop (e.g. Builder) you will need to place the necessary code in exchange/page.php.

Builder Example

function render_content() {
if ( have_posts() ) {
while ( have_posts() ) : the_post();
the_content();
endwhile;
} else {
do_action( 'builder_template_show_not_found' );
}
}
add_action( 'builder_layout_engine_render_content', 'render_content' );
do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

For a full list of the Exchange Pages visit Exchange » Settings » Pages in your WordPress admin area.

Products

In order to customize the content of single product pages, we recommend creating a file named product.php, adding it to the exchange directory (exchange/product.php) in your theme, then add the following code:

get_header();
it_exchange_get_template_part( 'content', 'product' );
get_sidebar();
get_footer();

Again, you may need to add different code depending on your theme.

Builder Example

function render_content() {

it_exchange_get_template_part( 'content', 'product' );
}
add_action( 'builder_layout_engine_render_content', 'render_content' );
do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

Adding Custom Templates

All of Exchange's default template parts are found in the /lib/templates directory. We have broken the structure of this directory down to pretty small and specific template parts. If your theme needs to modify one of the template parts, simply copy that file and its folder hierarchy over to your theme's /exchange/ folder.

We highly recommend only copying over the template parts that you must modify so that you don't have to update them when we modify template parts you haven't customized.

Examples

For each of the below examples you will copy the default template part(s) from the default templates directory of Exchange (ithemes-exchange/lib/templates/) over to your theme (your-theme/exchange/). Please note that some of these template parts are located within specific directories and must be copied over accordingly in order to work properly.

Customizing Product Images

The template part needed to customize how the product images function is content-product/elements/product-images.php. Copy this over to your theme (keeping the same directory structure) and make modifications accordingly.

Reordering Product Price & Description

The template part needed to rearrange these items is content-product/elements/product-info.php. Copy over this template part and rearrange the elements in the it_exchange_get_template_part_elements() array, switching base-price and description.

Before:

array( 'base-price', 'description', 'super-widget' )

After:

array( 'description', 'base-price', 'super-widget' )

This is a simple way to reorder the product price and destription and is can also be used in the same manner on many other templates.

There is another, more advanced method of reordering (or even removing) elements, but we will get into that later.

 

Have more questions? Submit a request
Powered by Zendesk