Creating a Site Tree – Use terminal commands to generate and structure your project files efficiently.

Generate a Site Tree:

tree -L 2 -I "node_modules"

Navigate to Theme Directory:

cd /path/to/your/wordpress/wp-content/themes/swagdrip

Check File Listings:

ls -la

Expected Theme Structure:


swagdrip/
├── assets/
│   ├── js/       (JavaScript source files)
│   ├── scss/     (SCSS stylesheets)
├── dist/         (Compiled assets go here)
│   ├── main.min.css
│   ├── main.min.js
├── footer.php
├── functions.php
├── header.php
├── index.php
├── rollup.config.js
├── package.json
├── style.css
└── templates/

Enqueue Scripts & Styles in WordPress:

function swagdrip_enqueue_assets() {
    wp_enqueue_style('theme-style', get_template_directory_uri() . '/dist/main.min.css', [], '1.0');
    wp_enqueue_script('theme-scripts', get_template_directory_uri() . '/dist/main.min.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'swagdrip_enqueue_assets');

Build Assets Using Rollup:

npm run build

Testing in Local WordPress:

1. Activate the theme in the WordPress dashboard.
2. Open DevTools (F12) and check console for "Theme Loaded".
3. Verify styles and animations apply correctly.

🎉 Your site tree is ready! Now you have a structured WordPress theme with proper asset handling. 🚀

📌 Solution: Increase the Depth Limit

Run the command with a higher depth level to see inside js and scss:

shCopyEdittree -L 3 -I "node_modules"

✅ This will show one more level deeper, revealing files inside assets/js and assets/scss.

To show the contents of the parts folder inside assets/scss, you need to increase the depth level of tree.

📌 Solution 1: Increase Depth to 4

Your current command is limiting the depth to 3 (-L 3), but parts is inside scss, which is deeper.

Run this to see inside parts:

shCopyEdittree -L 4 -I "node_modules"

✅ This will list one more level, revealing files inside parts.

📌 Solution 2: Target parts Directly

If you only want to see inside parts without increasing depth for everything:

shCopyEdittree assets/scss/parts -I "node_modules"

✅ This will only show the structure inside parts.

📌 Solution 3: No Depth Limit (Full View)

To see everything inside all folders:

shCopyEdittree -I "node_modules"

✅ This removes all depth limits, listing the full folder structure.

Solution: Hide Files Inside gsap but Keep the Folder

Run:

shCopyEdittree -L 4 -I "node_modules|gsap/*"

✅ This will:

  • Still show the gsap folder.
  • Hide everything inside the gsap folder.

Alternative: Hide gsap Completely

If you want to hide the entire gsap folder, use:

shCopyEdittree -L 4 -I "node_modules|gsap"

✅ This will:

  • Not show gsap at all.

TL;DR – Which One to Use?

CommandEffect
`tree -L 4 -I “node_modulesgsap/*”`
`tree -L 4 -I “node_modulesgsap”`

Try the first one and let me know if that works for your setup! 🚀