Your local project

Once the project is installed locally and you open it in Visual Studio Code, it can feel overwhelming at first, so the key is knowing where each type of work lives.

---

Location of files

Components

You’ll find components organized by category in the root of the project.

components/
  └── cards/
      ├── c--card-a.php
      ├── c--card-b.php
      └── g--card-01.php
   └── ctas/
      ├── c--cta-a.php
      └── c--cta-b.php

• Frontend work is hardcoded (HTML / CSS / JS)
• Backend work makes the same components dynamic using PHP

SCSS

When making the scss of a component or module, please locate it in:

src/
  └── scss/
      └── framework/
         └── components/
            └── cards/
               ├── _c--card-a.scss
               ├── _c--card-b.scss
               └── _g--card-01.scss
            └── ctas/
               ├── _c--cta-a.scss
               └── _c--cta-b.scss

Remember

Add the .scss file to the list in style.scss (located inside src/scss) in the corresponding category and alphabetically organized.

Learn more about this in Frontend Basics or in the style.scss guide.

Modules

flexible/
   └── heros/
      └── hero-simple.php
   └── modules/
         └── cards-with-icon.php
         └── testimonials.php

• We usually work with one hero and multiple modules per page.
• Module names are not random and must match the names defined in Figma
• Frontend makes modules hardcoded, backend makes them dynamic

Scripts

If a component or module requires JavaScript:

src/
  └── js/
      └── modules/
         └── AccordionA.js

Pages (templates)

• Pages are located in the root of the project.
• They are used to assemble modules and components together.
• Create a page template (for example, page-andres) for your testing.
• Each page must include: the template name, header and footer.

<?php
/*
Template Name: Insert here a name that'll help you locate it
*/
?>

<?php get_header(); ?>

// Your Content Here

<?php get_footer(); ?>

• Whatever you add between the header and footer will be visible in your local WordPress site when using that page template.

---

Video

It’s important to watch this video to have full context of the explained topics. If the video doesn’t load or stops with an error, you can watch it directly on Loom.

---

Learn More

• Components
• Modules
• Start working in your local project
• Understand WP local