logo
Roman Kovalchik
Contact
Development

WP-Starter. WordPress theme starter template.

May 24, 2022
17
  1. Quick start
  2. Introduction
  3. Back-end
  4. Front-end
  5. Conclusions

Quick start

1. Download WP-Starter

2. Change the name of the theme (the folder itself, global variable $GLOBALS[‘theme_name’] inside the functions.php file and modify theme information inside style.css). Upload the theme to the themes folder of the WordPress project and activate it.

3. Install npm packages through the editor’s terminal, previously change the current directory in terminal to dev, in which the package.json file is located:

cd dev
npm install

4. Provide url to the local server in the dev/settings.js file

exports.urlToPreview = 'wpstarter.local/' // url to the local project

5. For development:

gulp watch

6. For release:

gulp build

Introduction

In this article I want to share my experience in organizing file structure and describe the front-end development process creating a new theme for CMS WordPress.

The main question the I will try to answer is “How not to turn another WordPress project into a heavily maintained, slow💩”.

WordPress is a great, feature-packed tool that provides great opportunities for creating high quality websites, you just need to learn how to do it.

To easily maintain the code of any project in any programming language, it should be written using modules in order to separate functionality. This is what we are going to discuss right now.

Let’s take a look at the key concepts behind the WP-Starter template.

Back-end

The root directory of the WP-Starter template looks like following:

WP-Starter Template Root Directory

The functions.php file contains only global variables and code for including all PHP files from subdirectories of the includes folder. This means that each created file in the specified subdirectories will be included automatically.

The main mistake of beginners (and not only) is the constant scaling of the functions.php file, and as a result, sooner or later it turns into a headache.

Directory ‘includes’

Speaking about the server side files, this directory is about to scale quickly. In my case, it usually contains following subdirectories:

The includes directory of the WP-Starter template

WP-Starter uses the following rule – each hook is written in a separate file, as well as a function, class, shortcode, ajax request and so on.

Let’s take a closer look at the existing files in the hooks subdirectory, since it initially contains a lot of starter template code.

hook-ai1wm-exclude-content-from-export.php

This file contains the hook of the All-in-One WP Migration plugin, which excludes dev directory from the migration file of the project. This directory is needed exclusively during the development process and should be excluded from the release.

hook-init.php

In this hook I exclude the default CSS and some standard WordPress markup. Let me remind you that the code with comments can be viewed on GitHub by clicking the Source code button.

hook-wp-enqueue-scripts.php

This is where custom theme scripts and styles are included and some default WordPress scripts and styles are disabled.

hook-wp-head.php | hook-get-header.php

These hooks in my case are initially responsible for customizing the appearance of the admin panel. The panel becomes smaller and translucent if not interacted with. Also, the admin panel stops breaking the markup if there is a sticky header or other elements that it affects.

Based on these examples, you can easily guess what the names and content structure of the files of the remaining subdirectories inside the includes folder will look like.

The file names are formed in this way not only to display the main functionality of the code inside it, but also to easily navigate between them inside the editor.

Navigating Inside the VS Code Editor
Navigating inside the VS Code editor (Ctrl+P keyboard shortcut for Windows)

Front-end

All files related to automating the development process are placed in a separate dev directory. And again, you can look at the template code in detail at the link on GitHub. But it’s even better to download it right away and test it yourself.

The file structure organization rule remains the same – we need to divide all the functionality into separate modules for easy writing, editing and maintaining the project. Styles and scripts also need to be divided into modules. In my case it looks like this:

WP-Starter template dev directory

Speaking about styles, for example, I always have a text.scss file in the common directory where I work with the fonts of the project and the appearance of text. The elements folder contains such elements as button, popup, form. The components folder contains more complex components, such as responsive header menu, slider, hero section.

You get the idea. A similar approach is used dealing with JS.

Gulpfile.js

In addition to a good file structure and modularity, WP-Starter is also focused on an equally important point when creating a site – optimizing its loading speed.

To do this, the starter template contains all the necessary packages and the gulpfile.js handler file with the necessary tasks.

These tools achieve the following goals.

For development:

  1. Working with styles using the SASS preprocessor.
  2. Source Maps mechanism for styles.
  3. Synchronization with browser editing *.scss, *.js, *.php files.
  4. Writing, converting and building JS with the Webpack tool.

For release:

  1. Images compression (additional option, not performed when building a release).
  2. Minification, concatenation, adding prefixes for cross-browser compatibility and removing unused style classes.
  3. JS minification.

Still, one of the most important points for optimizing the loading speed of any site is images optimization. And it’s not just about compression alone. That is why the issue of working with images when creating a theme for CMS WordPress will soon be described in a separate article.

Conclusions

The WordPress community is incredibly large, primarily because of the ability to create websites without programming skills. But these are a low quality websites most of all.

The WP-Starter template is designed for developers with programming skills in order to elevate or perhaps even standardize the approach writing a WordPress project.

That’s all. Share your experience of writing WordPress projects and tips for improving WP-Starter template in the comments.

Be kind.

May 24, 2022
Like 1

One response to WP-Starter. WordPress theme starter template.

  1. Smart Fox 🦊 says:

    Thanks for sharing 😌

Leave a Reply

Your email address will not be published.

learn-english-1024x570 Education
Sep 08, 2021
33
1

How to learn a foreign language. Practical guide.

I have studied English since the first grade of high school, attending school Olympiads. After high school, I studied English at the institute...

helpersScss Development
Sep 19, 2021
53
0

Helpers.scss. Library for comfortable CSS workflow.

Helpers.scss library adheres to the basic principles of the well-known TailwindCSS library. But on the author's opinion...

gym Sport
Nov 02, 2021
31
0

Power training of Ectomorph. Major mistakes.

Almost all my life is related with various sports. And in most of them I managed to achieve a certain result thanks to my perseverance...