Skip to content

Getting Started

Jump to bottom
Sumner Erhard edited this page Oct 17, 2019 · 3 revisions

You just got everything installed. Congratulations.

This tutorial will walk you through the folder structure. Familiarizing yourself with how things are organized will help you understand a little more about what's going on.

The folder structure

By default, everything is set up like so:

/virtuoso
        /acf-json
        /assets
        /page-templates
        /config
	/Lib
	/dist
        ...files

99% of the work that you do with your theme will be in either the /Lib folder or /assets folder. This is pretty much where all your custom code will go if you want to change the core Virtuoso theme. If you'd like to make modifications to a specific website that doesn't alter the Virtuoso theme then please check out the guide on theme modification for Virtuoso using the Virtuoso Grandchild plugin

root

The root theme folder has several files, some of which shouldn't be edited.

  • .editorconfig - Used for configuring code editors for consistent styles. See: EditorConfig.
  • .eslintignore - Used for listing files to ignore for JS linting.
  • .eslintrc - Configuration file for JS linting.
  • .gitattributes - Attributes for Git.
  • .gitignore - Files and folders that Git should ignore when committing and pushing to a repo.
  • .stylelintignore - Used for listing files to ignore for style linting.
  • .stylelintrc - Configuration file for style linting.
  • composer.json - Used for listing Composer dependencies.
  • functions.php - Functions file first called by WordPress to bootstrap the theme.
  • index.php - Unused fallback template that's required in WP's system.
  • package-lock.json - Used by NPM to lock dependencies (don't edit).
  • package.json - Setup for node scripts and dependencies (used by NPM and Yarn).
  • readme.md - Readme file used by GitHub and other systems to describe the theme.
  • screenshot.png - A 4:3 screenshot image of the theme.
  • style.css - Needed by WP to know this is a theme. We use this for configuration, essentially.
  • webpack.mix.js - Handles the Laravel Mix configuration.

/acf-json

This project relies on Advanced Custom Fields Pro and this folder is where all of the ACF fields are stored

/assets

The /assets folder is where much of the magic of theme development will happen. This is essentially the stuff that you will be editing the vast majority of the time when modifying the theme.

  • fonts - Font files.
  • images - PNG, JPG, and most other image files.
  • js - JavaScript files.
  • sass - SCSS/CSS files.

/config

This is where you can add customizer settings

/Lib

The /Lib folder is where your "app" lives. This is the PHP code for your theme. The /Lib folder is using PSR-4 Autoloading and each class should be written in accordance to those standards. This is the same layout/coding standard that Laravel uses.

/dist

The /dist folder is for holding our compiled assets for distribution. These files should not be edited directly. The sub-folders are organized on par with the sub-folders in /assets.

  • scripts - Holds the compiled scripts.
  • styles - Holds the compiled stylesheets.

Clone this wiki locally