True Market Boilerplate

Every new project begins with the boilerplate. It’s a collection of code that is constantly updated and revised. You can find these steps in greater details on our Git Workflow document, but here is an abbreviated version.

Getting Started

Local Setup

1. Download the latest version of the boilerplate from this Google Drive folder. Always make sure to ask the lead developer if a more recent version exists, just in case the latest version has not yet been uploaded.
2. Drag and drop the boilerplate zip into your Local window.
3. Once imported, Change the Local site name, domain and path if necessary and click Continue.
4. Open VS Code and navigate to the theme folder, e.g., D:\Local Sites\project-name\app\public\wp-content\themes\truemarket.
5. Delete everything inside the truemarket folder: rm -rf {*,.*}.
   1. You can use the VS Code integrated terminal for this, or your computer’s terminal. Either way, just make sure you are in the truemarket folder.

Bitbucket

1. Login to Bitbucket and navigate to the project repository you are working on.
2. Click Clone in the top right corner and copy the link.
3. Paste the link and add a period at the end, e.g., https://yourusername@bitbucket.org/truemarket/project-name.git . in your terminal open in the truemarket project folder.
   1. The period will ensure that the files are cloned in the root folder, instead of creating a sub folder.
4. Once the repo is cloned, you may run npm install and then npm run watch to start working on the project.

Pushing Changes

To learn how to start committing and pushing your changes to the repo, please read through our Git Workflow document

Boilerplate Folder Structure

I’m not going to go over every single file/folder here, but below is a brief explanation of the important ones.

acf-json

Where all the ACF data is stored in JSON format. Important: When pushing code to staging/production, make sure to sync the ACF JSON with the database. To do so, go to the site’s WordPress backend > ACF. If there are fields to sync, you should see a sync button in the header next to the filters (All, Active, Trash)

assets

All the styles, JavaScript and images are stored in this folder.

• dist
  • You will never need to touch this folder as all your SCSS and JavaScript gets automatically compiled in their respective files.
• fonts
  • At the beginning of every project, you will be given an export containing all the fonts you will need for the project. Those fonts go in that folder. See the comments in /src/fonts.scss to learn how to generate a font-face from the fonts and start using them.
• images
  • All the images that the theme requires go in this folder. This includes icons, styling vectors and any other image that is used to build the project. Please do not place media library images (images that can be changed by the client) in this folder.
• src
  • You will be spending a lot of time in this folder. The src folder contains all your source SCSS and JS files.
  • scripts
    • Your JavaScript components go in this folder and imported in the main.js file. See the components section to learn more about this.
  • styles
    • The components folder contains all of your SCSS components. Feel free to create as many as needed to keep your code readable. Just don’t forget to import the stylesheet in main.scss, e.g., @import "components/your-component";
    • The layouts folder contains any file used for layout (obviously). I typically never add any files in that folder, but feel free to do so if it makes sense.
    • You really shouldn’t ever need to add any files in the mixins folder. It only contains the _breakpoints.scss file, which handles all the @import rules. Feel free to add breakpoints if necessary.

pages

• All unique pages that contain unique code should go in this folder. For example, if you create a landing page template, it would make sense to create a landing-page.scss file and add it in the pages folder.

functions

• To keep functions.php clean, I created this folder to house all unique functions.
• When creating a function, simply create a new file in the functions folder and import it in the functions.php file. For example: get_template_part('functions/your-function');

inc

• All the includes for the project. These are the PHP components used throughout the project.  Feel free to be pretty liberal with the amount of includes you create, I can’t stress readability enough.

templates

• • This is the folder that stores all custom templates. For instance, if I re-use my example from above and create a landing page template, you would put landing-page.php in this folder
  • flexible-layout.php is the file that handles our SHMUPT (Section Handling Multi User Page template), I know, quite the acronym, here is a document that goes over all our different terms that will hopefully help clarify things.

I believe every other file in here is fairly self-explanatory, but they are basically required WordPress files. There should be a link to the different WordPress templates documentation within each of these files.

ACF

We lean a lot on ACF to build dynamic sites here at True Market. If you are not familiar with this plugin, no worries, it’s very easy to learn. There are tons of great resources to learn from on YouTube and ACF’s documentation.

 

Plugins

The required plugins True Market leverages for every project.

• Admin Site Enhancements (ASE) Pro
  • This is a modular plugin that covers a lot of features. We mainly use it for the media library folder system, the “view as” role manager, webp image conversion, search engine visibility status, admin menu organizer, and more.
  • Some other noteworthy modules include:
    • SMTP configurations
    • Custom Code (useful when adding client GA4 tracking codes)
    • Content duplication
    • SVG Upload
  • Feel free to explore its various modules, odds are, if you need to extend WordPress’ functionality, this plugin can most like handle it.
• ACF Pro
  • We heavily rely on ACF for building unique and dynamic sites for each client. Our SHMUPT is built using ACF.
• ACF Extended
  • This is the plugin that allows us to show ACF instruction texts into tooltips and showing the options in a modal and a lot more.
• Better Search Replace
  • Deactivated by default. We only use it after a site launch to replace all instances of an old URL to a new one. For example, replacing https://staging.clientdomain.io/ to https://clientdomain.com/.
  • Can be removed after a site is fully launched.
• Duplicator
  • The plugin we use to launch a website.
  • Can be removed after a site is fully launched.
• Forminator
  • Handles contact forms, newsletters (integrates seemlessly with MailChimp), login forms, etc.
  • Please remove this plugin if the project does not require any forms.
• LiteSpeed Cache
  • Deactivated by default during development. Please activate this plugin during site launch.
• Members
  • Handles creating custom user roles. Use this plugin to create the client admin role.
• Query Monitor
  • Development plugin that helps with debugging and troubleshooting various issues.
  • Can be removed after a site is fully launched.
• Redirection
  • Deactivated by default. Please activate during site launch to handle any redirection from an old site to a new one.
  • If this is a brand new site, please remove this plugin during launch.
• The SEO Framework
  • Handles all our SEO needs.
• UpdraftPlus
  • Handles automatic backups to Dropbox.
• Wordfence
  • Handles site security.
• WP-Sweep
  • Handles database cleanup. It’s a good idea to clean up the database after website launch.

Optional Plugins

• WP Migrate Lite
  • Very handy when needing to clone a live site locally.