# Implementing Template to a CMS
If you'd like to 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 throughout 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 the help of the ARTS_THEME_URL constant. Also, note the 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 outputted before the 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-in 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 the ARTS_THEME_URL constant.