FAQs

List of theme that are dependent to this theme

AIO Starter Theme Child
AgentPro Themes
AIX Themes

Template Hierarchy

Assets
- Css
  - defaults.min.css
  - global.css
  - homepage.css
- js
  - scripts.js
- Fonts
- Image
inc
- Widgets
- Func
- Hooks
- Enqueue
templates
- partials
- fullwidth.php
- left-sidebar.php

How to Automatically Require Modules

Please insert the following code function into the file “inc/hooks.php,” specifically after line 39 and before line 246:

php


function ai_starter_theme_require_modules() {
    $modules = array(
        'module1',
        'module2',
        'module3'
        // Add your module folder names here
    );
 
    foreach ($modules as $module) {
        $module_path = get_stylesheet_directory() . '/modules/' . $module;
 
        if (file_exists($module_path . '/module.php')) {
            require_once($module_path . '/module.php');
        }
 
        if (file_exists($module_path . '/shortcodes.php')) {
            require_once($module_path . '/shortcodes.php');
        }
    }
}
add_action('init', 'ai_starter_theme_require_modules');

In this code, replace ‘module1’, ‘module2’, ‘module3’ with the actual names of your module folders. This approach is more secure as it avoids using glob and manually specifies the modules to be required.

Next, add the following hook to the file “inc/hooks.php,” precisely beneath the “__construct” function on line 81.

php


add_action( 'after_setup_theme', [$this, 'ai_starter_theme_require_modules'] );

How to Enqueue CSS and JS Custom Page

Please insert the following code function into the file “inc/enqueue.php,” under ai_starter_theme_enqueue_assets function:

php


/* 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');
}

For not real estate client

For clients who are not in the real estate industry, please replace the following line of code with the provided alternative. Note that the initial setup is not required to make this starter theme.

Original Code:

php


<?php
    if ( ! is_home() && !is_page_template( 'template-homepage.php' ) && is_custom_field_banner( get_queried_object() ) && is_active_sidebar('aios-inner-pages-banner')) {
    dynamic_sidebar('aios-inner-pages-banner');
    }
?>

Alternative Code:

php


<?php
    if ( ! is_home() ) {
        dynamic_sidebar('aios-inner-pages-banner');
    }
?>

Under templates > partials remove the code below under content-page.php, content-post.php

php


    <?php
        $aios_metaboxes_banner_title_layout = get_option( 'aios-metaboxes-banner-title-layout', '' );
        if ( ! is_custom_field_banner( get_queried_object() ) || $aios_metaboxes_banner_title_layout[1] != 1 ) {
            $aioscm_used_custom_title   = get_post_meta( get_the_ID(), 'aioscm_used_custom_title', true );
            $aioscm_main_title          = get_post_meta( get_the_ID(), 'aioscm_main_title', true );
            $aioscm_sub_title           = get_post_meta( get_the_ID(), 'aioscm_sub_title', true );
            $aioscm_title               = $aioscm_used_custom_title == 1 ? $aioscm_main_title . '<span>' . $aioscm_sub_title . '</span>' : get_the_title();
            echo '<h1 className="entry-title ' . ($aioscm_used_custom_title == 1 ? 'entry-custom-title' : '') . '">' . $aioscm_title . '</h1>';
        }
    ?>

For Node Base Development

To use this theme you will need :

node.js version 18
npm
local web server
wordpress installed

Clone

Repository

Clone with SSH

terminal


git clone [email protected]:ai-product-dev/aios-starter-theme-pack.git

Clone with HTTp

terminal


git clone https://gitlab.forge99.com/ai-product-dev/aios-starter-theme-pack.git

If you prefere to clone the Github repository, go head and do so

terminal


cd [path/to/your/wp-folder]/wp-content/themes

Install dependencies

In the freshly installed theme folder run the command below

terminal


npm install

Minified Version.

terminal


npm run dev

terminal


npm run build

terminal


npm run watch

Unminified for homepage.css

terminal


npm run build-dev

What “Mobile First” Means

Mobile-first is a design and development approach where you start building for the smallest screen size (mobile), then progressively enhance the design for larger screens (tablet, desktop).

Default styles = mobile (small screens).
Media queries = only for larger breakpoints (not smaller).
Why? Because most users browse on mobile first, and it forces you to keep layouts simple and lightweight.

How It Works in CSS

Instead of starting with desktop styles and then overriding them for mobile, you flip it:

How to Convert a Desktop-First Site into Mobile-First

Start from your base CSS:

Remove all “desktop” assumptions as defaults. Write default styles for mobile (single column, smaller paddings, stacked layouts). Flip your media queries: Replace @media (max-width: …) with @media (min-width: …).

Example:

desktop.css


    @media (max-width: 768px) { … } 
    → @media (min-width: 768px) { … }

Simplify defaults:

Typography: smaller font sizes by default.
Layout: stacked / vertical by default.
Spacing: tighter margins/paddings by default.
Progressively enhance:
Add columns, grids, sidebars only when screen is wide enough.
Use min-width breakpoints to scale up.

Example Conversion

Desktop-first code:

desktop.css


.card {
  display: flex;
  gap: 2rem;
}
 
/* Adjust for mobile */
@media (max-width: 600px) {
  .card {
    display: block;
    gap: 1rem;
  }
}

Converted to mobile-first:

mobile.css


.card {
  display: block;
  gap: 1rem;  // Mobile default
}
 
@media (min-width: 600px) {
  .card {
    display: flex;
    gap: 2rem; // Bigger screens
  }
}