# Implementing Template to a CMS

If you'd like implement the template to a CMS it's recommended to specify the absolute URLs for the template assets. Here is an implementation example for WordPress:

# ▶️️️️️ Step 1.

Define some useful global constants that we will use throught the implementation later:














 
 

<?php

$theme         = wp_get_theme();
$theme_version = $theme->get( 'Version' );

// Try to get the parent theme object
$theme_parent = $theme->parent();

// Set current theme version as parent not child
if ( $theme_parent ) {
  $theme_version = $theme_parent->Version;
}

define( 'ARTS_THEME_VERSION', $theme_version );
define( 'ARTS_THEME_URL', get_template_directory_uri() );

# ▶️️️️️ Step 2.

Output the absolute paths to template assets with a help of ARTS_THEME_URL constant. Also note asli-app id handler of our app.js script.









 
 



















































































































<?php

/**
 * Localize Theme Assets
 */
add_action( 'wp_enqueue_scripts', 'arts_inline_theme_assets', 60 );
function arts_inline_theme_assets() {
  wp_localize_script(
    'asli-app',
    'asli_theme_assets', // this will go to app.assets.asli_theme_assets in JS
    array(
      'arts-header'            => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/arts-header.min.js' ),
          'id'   => 'arts-header-js',
        ),
      ),
      'arts-fullpage-slider'   => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/arts-fullpage-slider.min.js' ),
          'id'   => 'arts-fullpage-slider-js',
        ),
      ),
      'arts-infinite-list'     => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/arts-infinite-list/arts-infinite-list.min.js' ),
          'id'   => 'arts-infinite-list-js',
        ),
      ),
      'arts-horizontal-scroll' => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/arts-horizontal-scroll.min.js' ),
          'id'   => 'arts-horizontal-scroll-js',
        ),
      ),
      'arts-parallax'          => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/arts-parallax.min.js' ),
          'id'   => 'arts-parallax-js',
        ),
      ),
      'arts-cursor-follower'   => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/arts-cursor-follower.min.js' ),
          'id'   => 'arts-cursor-follower-js',
        ),
      ),
      'circle-type'            => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/circletype.min.js' ),
          'id'   => 'circle-type-js',
        ),
      ),
      'photoswipe'             => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/photoswipe.umd.min.js' ),
          'id'   => 'photoswipe-js',
        ),
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/photoswipe-lightbox.umd.min.js' ),
          'id'   => 'photoswipe-lightbox-js',
        ),
      ),
      'lenis'                  => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/lenis.min.js' ),
          'id'   => 'lenis-js',
        ),
      ),
      'barba'                  => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/barba.min.js' ),
          'id'   => 'barba-js',
        ),
      ),
      'curtains'               => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/curtains.umd.custom.min.js' ),
          'id'   => 'curtains-js',
        ),
      ),
      'pristine'               => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/pristine.min.js' ),
          'id'   => 'pristine-js',
        ),
      ),
      'bootstrap-modal'        => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/bootstrap-modal.min.js' ),
          'id'   => 'bootstrap-modal-js',
        ),
      ),
      'isotope'                => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/isotope.pkgd.min.js' ),
          'id'   => 'isotope-js',
        ),
      ),
      'dat-gui'                => array(
        array(
          'type' => 'script',
          'src'  => esc_url( ARTS_THEME_URL . '/js/vendor/dat.gui.min.js' ),
          'id'   => 'dat-gui-js',
        ),
      ),
    ),
  );
}

# ▶️️️️️ Step 3.

Now do the same for the template components:









 
 































































































































































<?php

/**
 * Localize Theme Options
 */
add_action( 'wp_enqueue_scripts', 'arts_inline_theme_components', 60 );
function arts_inline_theme_components() {
  wp_localize_script(
    'asli-app',
    'asli_theme_components', // this will go to app.assets.asli_theme_components in JS
    array(
      'Preloader'                      => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Preloader.js' ),
      ),
      'Header'                         => array(
        'dependencies' => array( 'arts-header' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Header.js' ),
      ),
      'MenuOverlay'                    => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/MenuOverlay.js' ),
      ),
      'MenuClassic'                    => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/MenuClassic.js' ),
      ),
      'SliderFullpageBackgroundsMask'  => array(
        'dependencies' => array( 'arts-fullpage-slider' ),
        'files'        => array(
          array(
            'type' => 'script',
            'src'  => esc_url( ARTS_THEME_URL . '/js/components/SliderFullpageBase.js' ),
            'id'   => 'slider-fullpage-base-js',
          ),
        ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/SliderFullpageBackgroundsMask.js' ),
      ),
      'SliderFullpageBackgroundsSlide' => array(
        'dependencies' => array( 'arts-fullpage-slider' ),
        'files'        => array(
          array(
            'type' => 'script',
            'src'  => esc_url( ARTS_THEME_URL . '/js/components/SliderFullpageBase.js' ),
            'id'   => 'slider-fullpage-base-js',
          ),
        ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/SliderFullpageBackgroundsSlide.js' ),
      ),
      'SliderTestimonials'             => array(
        'dependencies' => array( 'arts-fullpage-slider' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/SliderTestimonials.js' ),
      ),
      'InfiniteList'                   => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/InfiniteList.js' ),
      ),
      'CurtainsBase'                   => array(
        'dependencies' => array( 'curtains' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/CurtainsBase.js' ),
      ),
      'SplitCounter'                   => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/SplitCounter.js' ),
      ),
      'MarqueeHeader'                  => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/MarqueeHeader.js' ),
      ),
      'MarqueeHeadingsHover'           => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/MarqueeHeadingsHover.js' ),
      ),
      'ScreensWall'                    => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/ScreensWall.js' ),
      ),
      'RotatingButton'                 => array(
        'dependencies' => array( 'circle-type' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/RotatingButton.js' ),
      ),
      'ArcImages'                      => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/ArcImages.js' ),
      ),
      'Scroll'                         => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Scroll.js' ),
      ),
      'AJAX'                           => array(
        'dependencies' => array( 'barba' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/AJAX.js' ),
      ),
      'Masthead'                       => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Masthead.js' ),
      ),
      'Content'                        => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Content.js' ),
      ),
      'Parallax'                       => array(
        'dependencies' => array( 'arts-parallax' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Parallax.js' ),
      ),
      'HorizontalScroll'               => array(
        'dependencies' => array( 'arts-horizontal-scroll' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/HorizontalScroll.js' ),
      ),
      'CursorFollower'                 => array(
        'dependencies' => array( 'arts-cursor-follower' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/CursorFollower.js' ),
      ),
      'PSWP'                           => array(
        'dependencies' => array( 'photoswipe' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/PSWP.js' ),
      ),
      'GMap'                           => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Gmap.js' ),
      ),
      'FormAJAX'                       => array(
        'dependencies' => array( 'pristine', 'bootstrap-modal' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/FormAJAX.js' ),
      ),
      'Grid'                           => array(
        'dependencies' => array( 'isotope' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Grid.js' ),
      ),
      'AutoScrollNext'                 => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/AutoScrollNext.js' ),
      ),
      'FixedHeader'                    => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/FixedHeader.js' ),
      ),
      'FixedWall'                      => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/FixedWall.js' ),
      ),
      'CounterUp'                      => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/CounterUp.js' ),
      ),
      'SliderImages'                   => array(
        'dependencies' => array( 'arts-infinite-list' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/SliderImages.js' ),
      ),
      'ClickAndHold'                   => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/ClickAndHold.js' ),
      ),
      'Mask'                           => array(
        'dependencies' => array(),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Mask.js' ),
      ),
      'Gui'                            => array(
        'dependencies' => array( 'dat-gui', 'barba' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Gui.js' ),
      ),
      'Comments'                       => array(
        'dependencies' => array( 'pristine' ),
        'file'         => esc_url( ARTS_THEME_URL . '/js/components/Comments.js' ),
      ),
    )
  );
}

# ▶️️️️️ Step 4.

Enqueue the template JS assets.









































 


<?php

/**
 * Enqueue Theme JS Files
 */
add_action( 'wp_enqueue_scripts', 'arts_enqueue_js', 50 );
function arts_enqueue_js() {
  // GSAP libraries
  $gsap_libraries_version = '3.12.2';
  $vendor_scripts_path    = ARTS_THEME_URL . '/js/vendor/';

  wp_enqueue_script( 'gsap', $vendor_scripts_path . 'gsap.min.js', array(), $gsap_libraries_version, true );
  wp_enqueue_script( 'drawsvg-plugin', $vendor_scripts_path . 'DrawSVGPlugin.min.js', array( 'gsap' ), $gsap_libraries_version, true );
  wp_enqueue_script( 'morphsvg-plugin', $vendor_scripts_path . 'MorphSVGPlugin.min.js', array( 'gsap' ), $gsap_libraries_version, true );
  wp_enqueue_script( 'scroll-to-plugin', $vendor_scripts_path . 'ScrollToPlugin.min.js', array( 'gsap' ), $gsap_libraries_version, true );
  wp_enqueue_script( 'split-text', $vendor_scripts_path . 'SplitText.min.js', array( 'gsap' ), $gsap_libraries_version, true );
  wp_enqueue_script( 'scrolltrigger', $vendor_scripts_path . 'ScrollTrigger.min.js', array( 'gsap' ), $gsap_libraries_version, true );

  wp_enqueue_script( 'deepmerge', $vendor_scripts_path . 'deepmerge.min.js', array(), ARTS_THEME_VERSION, true );
  wp_enqueue_script( 'distribute-by-position', $vendor_scripts_path . 'distributeByPosition.js', array(), ARTS_THEME_VERSION, true );
  wp_enqueue_script( 'lazy-load', $vendor_scripts_path . 'lazyload.min.js', array(), ARTS_THEME_VERSION, true );

  wp_enqueue_script(
    'asli-framework',
    ARTS_THEME_URL . '/js/framework.js',
    array(
      'gsap',
      'drawsvg-plugin',
      'morphsvg-plugin',
      'scroll-to-plugin',
      'split-text',
      'scrolltrigger',
      'deepmerge',
      'distribute-by-position',
      'lazy-load',
    ),
    ARTS_THEME_VERSION,
    true
  );

  wp_enqueue_script( 'asli-app', ARTS_THEME_URL . '/js/app.js', array( 'asli-framework' ), ARTS_THEME_VERSION, true );
}

# ▶️️️️️ Step 5.

If you did everything correctly, we should now have two global variables outputed before asli-app script: asli_theme_assets and asli_theme_components. They hold data for the template assets, including their absolute URLs to the files.

Now open the template main frontend file 📄 HTML/js/app.js and replace built-it maps for assets and components as follows:

window.app = {

  // Theme assets URLs
  assets: asli_theme_assets,

  // Theme components schema
  components: asli_theme_components
}

This implementation will work even if you change the domain name later on since all assets paths will be updated thanks to ARTS_THEME_URL constant.