JATheme

Dependencies

WordPress Dependencies

• WordPress – Tested up to 5.2.4
• PHP – Tested up to 7.1

Node Version Manager (NVM)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

This command will add the snippet below to ~/.bashrc or ~/.bash_rc or ~/.bash_profile or ~/.zshrc

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Open a new terminal window and run the command below to confirm that it’s installed

nvm -v

FInd the latest LTS of node (https://nodejs.org/en/) and run the following commands. Replace (Node_version) with the latest LTS node version

nvm install (node_version)
nvm use (node_version)

NPM

Install the latest NPM using the following command

npm install npm@latest -g

Installation Instructions

Open terminal and cd into the themes folder

cd wp-content/themes/372theme/

Install node_modules

npm install

Compiling JavaScript and SCSS

This project uses webpack to compile both JavaScript and SCSS. Follow the instructions below to get developing.

Compiling JS

JS is in the folder

wp-content
- wp-content
     - themes
         - 372-theme
             - js
                 - src - **Where you write your JS**
                 - dist - **Where JS is compiled into**

Change directory to the theme’s directory

cd wp-content/themes/372theme/

To build and watch while developing run the following command. This will have have the JS map enabled to make it easier when debugging in the browser.

npm run watch or
npm run build-dev

or to build for production run

npm run build-prod

Compiling SCSS to CSS

SCSS is in the css folder

- wp-content
     - themes
         - 372-theme
             - css
                 - scss
                    - style.scss

Change directory to the theme’s directory

cd wp-content/themes/372theme/

To build and watch while developing run the following command. This will have have the SCSS map enabled to make it easier when debugging in the browser.

npm run watch or
npm run build-dev

or to build for production run

npm run build-prod

Custom Modules/Plugins used in the JA Theme

This theme is reliant on custom plugins to separate the functionality from the template files.

JATheme Slider

Slider built and styled using FlexSlider and configured to be dynamic with custom fields. See below for location of plugin and how to add the slider to your theme.

- wp-content
     - plugins
         - ja-theme-slider

PHP for the slider is located in the folder view/front.php. To render the slider in the theme, add the following shortcode.

<?php echo do_shortcode(["slider"]); ?>

JATheme Breadcrumb Navigation

Custom breadcrumb navigation migrated from the 372-theme. Plugin location is shown below.

- wp-content
     - plugins
         - ja-theme-breadcrumbs

Frontend for the breadcrumbs is in view/BreadCrumbs.php and you can perform any optimisations you need to match the design for your build. Add the shortcode to your template using the shortcode below.

<?php echo do_shortcode(["breadcrumbs"]); ?>

JATheme Flexible Layout Modules

This theme is highly configured to use a flexible layout for “Directional pages”. The location of the modules is show below.

- wp-content
     - plugins
         - ja-theme-modules

The modules that are available in the theme are.

• Events Block
• Partnership Tiles
• Social Feed With CTA
• Two Column CTA
• Three Column Tiles
• Two Column Tiles
• Four Column Tiles

All the modules use shortcode as well. To get the shortcode to use the module, look in the main PHP file within the ja-theme-modules folder and at the bottom of the file you will see something like.

add_shortcode('events_block', 'renderEventsBlock');

The first item in the add_shortcode function is the shortcode used to render the module.

Adding New Module Layouts

If you need a new module layout for your build. Create a new folder under ja-theme-modules and add a PHP file with the same name as the folder you created.

Make sure the layout of the PHP file for the module layout follows the structure below. Make sure you are using a custom shortcode to render and use wp_reset_postdata at the end of the PHP file to ensure any WordPress quirks are minimised.

<?php 
function renderYourModuleName()
{
?>

...Enter your HTML/PHP for the module here

<?php
}
wp_reset_postdata();
add_shortcode('shortcode_name', 'renderYourModuleName');
?>

Then add you will need to require the file in the plugins main index.php file at

- wp-content
     - plugins
         - ja-theme-modules
            - index.php

Next to add the SCSS for this new module. Create a new folder under Features showing in the directory below.

- wp-content
     - theme
         - 372-theme
            - css
                - scss
                    - features

Make sure the folder and scss file name is the same name as the module. Then include this new scss file in

- wp-content
     - theme
         - 372-theme
            - css
                - scss
                    - style.scss

Please make sure to have the styles for this module flexible enough, so that it can be used anywhere within the theme without needing too many style modifications for specific templates.

Removing Module Layouts

If there any module layouts that you don’t need for the build. First search for the shortcode of the module you are wishing to remove and remove the call from the templates and then once all calls to the module are removed. Simply move the module to an _unused folder and then delete the custom fields that it is using.