logo
Roman Kovalchik
Contact
Development

WP-Starter. WordPress theme starter template

May 24, 2022
60
  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. It is important to note that I disable the default jquery library inside the theme and include it myself using the import statement inside the JS files, having previously installed it as an npm package.

But what if we have plugins which are dependent on jquery?

Let’s go in order. First disable jquery:

wp_deregister_script('jquery');

Then we connect jquery again, but leave the path to the script empty:

wp_register_script('jquery', '', NULL, '1.0', true);

Now plugin scripts that use jquery will be included but will not work because the library itself is not included. But since we have the npm package installed, we can make the library visible globally inside JS:

import $ from 'jquery'
window.jQuery = $ // make jQuery visible at global scope

It remains to make sure that the theme script is included before the plugin scripts that use jquery. To do this, inside the wp_enqueue_scripts action hook, we set the third argument which is priority for executing this hook. In my case I usually set value 5. From my experience, I can say that this priority is enough for the theme script to be connected before the plugin scripts:

add_action('wp_enqueue_scripts', function() {

  /* exclude/include css and js here */

}, 5, 0);

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 2

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.

formjs Development
Oct 12, 2021
61
0

Form.js. jQuery library for working with forms via AJAX

Form.js is a tiny library that makes it much easier to work with forms asynchronously on the client side.

bowl-with-food-682x1024 Nutrition
Aug 30, 2021
55
0

How to gain weight for an ectomorph? Even on a vegetarian diet

Long story short, an ectomorph is a skinny person with pretty thin bones, a minimal percentage of subcutaneous...

girl-with-keyboard Education
Sep 13, 2021
67
0

Blind typing. Right way to learn

Blind typing is a way to input text using the keyboard without looking at the keys. The main advantage of this method is speed. The learning process itself...