Adding New Templates

Step 1 Read the instructions carefully

• Make sure to read the instructions before starting in case there are other requests that are not on the COMP.
• Always check the COMP. Make sure to double-check what version of the COMP to use.

Step 2 Slice or crop the images

Options to crop/slice the images:

• Slice - https://www.geeksforgeeks.org/photoshop-slice-tool/ 
• Crop - https://www.uab.edu/cas/home/images/images/resources/photoshop-how-to-crop.pdf 
• Trim - https://www.awesomescreenshot.com/video/14042580?key=c14145bdaf2fe7a7a15d0c6d9be5d34b 

We prefer Trim because we need to get the images without the excess space. Adding a solid background to the duplicated layer helps to remove the excess space.

• Save the images for web: https://snipboard.io/MhX3nm.jpg , https://snipboard.io/wTQ9gM.jpg 
• If the images are not transparent, save them as JPG to minimize the file size.
• Separate the filters, texts, etc. from the images: https://snipboard.io/vLtzWq.jpg .
• Add them through CSS (::before/::after). We do this so that the photos can be easily replaced, and the filters/accents will still be there.
• If icons are available here: https://aios-resources.forge99.com/icon-font , please use font icons.

Step 3 Set up your site locally

• It is advisable to work locally, so you’ll only need to push your conversion once you’re done. You can follow these steps to set up the site you’ll work on on your local device: Locally running a Bedrock site

Step 4 Header and Footer

• Usually, the header and footer are the same as the homepage.
• In case it’s different from the existing header and footer, confirm it with the task creator if it’s intentional. It might also be an outdated copy of the comp. You can use the updated header and footer in that case.

Step 5 Ensure that the theme uses Vite before proceeding.

• vite.config.js https://snipboard.io/Ejv3dt.jpg  is typically present on Vite themes.
• To set up Vite, follow documentation How to update AIOS Vite to latest version?.

Step 6 Create your php, css and js file.

They should have the same file name. For example:

• Template file: about.php

  1. Create this inside the templates folder web/app/themes/site-folder/templates/about.php.
  2. Add template name to it: https://snipboard.io/wGsc5i.jpg . You need this so you can easily see it on the page backend.

• CSS file: about.scss

  1. Create this under web/app/themes/site-folder/src/css/custom-page/about.scss
  2. Vite will compile this to web/app/themes/site-folder/assets/css/custom-page/about.css.
  3. This is the read-only file that you must enqueue in Step 7.

• JS file: about.js

  1. Create this under web/app/themes/site-folder/src/js/custom-page/about.js
  2. Vite will compile this to web/app/themes/site-folder/assets/js/custom-page/about.js.
  3. This is the read-only file that you must enqueue in Step 7.
  Note

  Make sure the style and scripts are only taking effect on your custom page. No pages should be affected by your custom styles and scripts.

Step 7 Enqueueing the template

Enqueue the custom template’s CSS and script on inc/enqueue.php: https://snipboard.io/wbKkOu.jpg 

• Sample: https://snipboard.io/6GEwTJ.jpg 

    /* Custom for Page template Enqueue */
    if ( is_page_template( 'templates/your_custom_template_name.php' ) ) {
        wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true);
        wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '1.0.0');
    }

Step 8 Set the template to the WP backend page

The created template should show under Template, and you can now choose your custom template: https://snipboard.io/gbXWtj.jpg 

Step 9 Start converting the inner page

• Upload your images to the staging WP media for optimization purposes. The Product Dev team recommends this.
• Make sure HTML is validated. You can test it here for local sites: https://validator.w3.org/#validate_by_input .
• If it’s on the staging site, you can test it here: https://html5.validator.nu/ 
• Always add an H1 to the page, even if it’s hidden. Double-check if there’s already an existing H1 on the page. It can only be used once per page.
• Use the shortcodes from the AIOS All In One > Site Info: AIOS Initial Setup Shortcodes

Step 10 Check the mobile layout

• All sections must be responsive and should display decently on all screen resolutions.
• Check on the following resolutions: 2560px, 1920px, 1600px, 1440px, 1366px, 1280px, 1199px, 992px, 991px, 767px, 480px, 320px
• If there’s no COMP for the mobile, it’s the developers decision how it would look like on the mobile. Make sure it looks good. From 991px, all items can be stacked.