Gaelen Norman

Wordpress Developer / Racer

Folder Structure

One of the many things I’m passionate about is that making things easy to not only find but also to update. How you structure your files is a big part of this for me and I have noticed that it comes into play in a large way when you’re working with other developers.

I’m using a starter theme that I made for myself as an example of this:

When it comes to the initial setup I usually start with my assets folders (css, js, img). The CSS and JS include a src folder which is where I break down the SASS files into their useful folders. I start out with a global and init folder.

The global folder contains everything that is set for global use. I use this for things like layout structure and typography but can also include things like comments and buttons depending on the complexity of each. By breaking out these files it makes things easy to find as well as as when changes happen they are not causing conflicts in bulk files.

The init folder contains all of my one time run scripts, I use it for reset or normalize SASS files and anything else that needs to get included once only and never really used again. This folder also contains my variables file with sets up things like my fonts, breakpoints and anything else that I begin to use across a site like colors or transition effects.

If you’d like to check out the base theme you can find it here: https://github.com/GaelenN/wp-starter

Pages

The further I get into development will explain some of the structure choices I made when it comes to the Pages folder under assets/css.

What I do here is use a php script to scna the director for any files and add them automatically as a registered stylesheet for use later.

    // CSS Pages
    $files = scandir( get_stylesheet_directory() . '/assets/css/pages/' );
    foreach($files as $file) {
        if (strpos($file, '.css') !== false) {
            wp_register_style( 'starter-css-pages-' . str_replace('.css', '', $file), get_stylesheet_directory_uri() . '/assets/css/pages/' . $file, array(), filemtime(get_stylesheet_directory() . '/assets/css/pages/' . $file) );
        }
    }

By doing this I give myself the ability to use these on any page and always having them generated once they are compiled available for use.

wp_print_styles( array( 'starter-css-pages-page' ) );

Here is the script I use to load the CSS file on the generic page php. This helps me control when stylesheets are loaded and used to keep the sizes down so less things are global.

This is the beginning of my basic setup of a theme for development.

If you have any questions feel free to ask and I will help out if I can!

Join The Conversation

Your email address will not be published. Required fields are marked *

  • frolep rotrem http://www.froleprotrem.com/

    Wow! This can be one particular of the most beneficial blogs We've ever arrive across on this subject. Basically Wonderful. I'm also an expert in this topic so I can understand your hard work.

Lets Get Started!

If you have a project in mind or just need some help getting some ideas off the ground, I'm here to help!

Say Hi!

We use cookies to track your movement and actions within the website for general information and ways to improve your epxerience. Click accept to say you understand this and accept it.

Accept