Stay Connected

separator
github icon linkedin icon

scroll

animated scroll icon

Project Name

TG Starter Theme

My Role

Full Stack

Year / Project Type

2022 / Theme

Tech Used

  • HTML 5
  • CSS3
  • Javascript
  • PHP

About

TG Starter Theme is the ultimate catalyst for your WordPress projects. This dynamic theme combines cutting-edge technology, unrivaled performance, and a streamlined workflow to supercharge your web development experience.

From its highly organized structure to advanced automation, TG Starter Theme empowers you to create exceptional websites that stand out from the crowd.

Unleash your creativity, optimize performance, and conquer the digital landscape with TG Starter Theme - the key to unlocking WordPress success.

TG Starter Theme

TG Starter Theme is not just a theme; it’s a game-changer in WordPress development. With its highly organized and segregated structure, code reusability reaches new heights. Say goodbye to tangled code and welcome streamlined workflows that boost productivity and make maintenance a breeze.

View on Github

Features

🛠️ Powerful Helper Functions

We've supercharged TG Starter Theme with powerful helper functions that eliminate verbosity and redundancy. Tedious processes are streamlined, giving you more time to focus on what matters most – crafting exceptional websites that leave a lasting impression.

🧩 Smart Rendering System (Component Based)

Our smart rendering mechanism takes performance to the next level. Styles and scripts are enqueued precisely when needed, optimizing your website's loading speed and enhancing the overall user experience. No more bloated code slowing you down; TG Starter Theme ensures your website flies.

🧱 Dependency Management System

Take control with our advanced dependency management system. No more globally loaded scripts and libraries. You just load what you need! Fine-tune components with precision, resulting in a seamless user interface that exceeds expectations. Embrace the power of flexibility and create websites that adapt effortlessly to your needs.

⚡️Powerful CLI

We're all about efficiency, and that's why TG Starter Theme incorporates cutting-edge automation mechanisms. Generate components, pages, archives, and singles effortlessly, saving you valuable time and effort. Our Command Line Interface (CLI) ensures smooth project management, putting you in the driver's seat.

🚀 Live Reload, compile and minify on the fly!

Performance matters, and TG Starter Theme delivers. On-the-fly compilation and minification of SASS and JavaScript guarantee optimal performance, giving your website the speed it deserves. Enjoy a seamless development experience with our built-in development server and live reload feature, keeping you in sync with your changes.

🎯 100% SEO Optimization

TG Starter Theme isn't just about development – it's about maximizing your website's potential. We follow SEO and development best practices, ensuring your website shines in search engine rankings. Experience lightning-fast load times and an enhanced user experience, earning you that coveted 100% Google PageSpeed Insights score.

📦 Webfonts Generator, Compressor and Optimisation

We believe fonts matter, too. TG Starter Theme's font optimization system allows to automatically convert any font into webfont, compressing it and generating all the css to make sure the fonts display properly. It guarantees fast and efficient loading, maintaining a visually stunning website without sacrificing performance.

Developer's Best Friend!

This theme was created with developers in mind. It makes your life easier with a powerful CLI that can save you hours of work every week.
The tg CLI comes with several commands to help you generate different types of templates for your WordPress theme:

tg start – Start watchers and the development server with live reload.
tg generate:component – Generate a new component.
tg generate:archive – Generate a new archive template.
tg generate:page – Generate a new page template.
tg generate:single – Generate a new single template.
tg generate:combo – Generate new archive and single templates.
tg optimise:fonts – Optimises all fonts inside the ./static/fonts directory.

Folder Structure

📂 components

-- 📂 hero
--- 📑 hero.php
--- 📑 hero.js
--- 📑 hero.scss

Each component lives inside its own folder and has its own .js and .scss files for component specific styles and scripts. The theme is intelligent enough to auto import all files as long as the component is generated with the theme's CLI. ( command: tg generate:component).

📂 config

-- 📂 scripts (do not touch unless you know what you're doing)
-- 📂 sources - Here is where all templates for the CLI template generators live
-- 📂 traits (do not touch unless you know what you're doing)
-- 📑 config.php (do not touch unless you know what you're doing)
-- 📑 custom-post-types.php - You should register your post types here.
-- 📑 custom-taxonomies.php - You should register your taxonomies here.
-- 📑 dependencies.php - Here is where you manage the theme's dependencies
-- 📑 scripts.php - Here is where you enqueue global scripts.
-- 📑 styles.php - Here is where you enqueue global styles.
-- 📑 template-functions.php - Here is where you write all your theme's functions.
-- 📑 theme-support.php - Here you can configure theme supports.

📂 languages

The folder with all language files.

📂 src

-- 📂 js - This is the folder which holds the global scripts for site wide use.
-- 📂 scss - This is where the Theme's SASS Framework lives.

📂 static

The folder where all your static assets will live.

📂 template-archives

The folder where all archive templates live.

📂 template-pages

The folder where all pages templates live.

📂 template-parts

The folder where all template parts live.

📂 template-singles

The folder where all single templates live.

Powerful helper functions!

Have you ever get confused or desperated with responsive images or SEO optimized images? ❌
Complicated srcset expressions? 🚫
Tired of boilerplate functions? ⭕


<img class="explosion" sizes="(max-width: 3840px) 100vw, 3840px" srcset="
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_200.webp'; ?> 200w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_958.webp'; ?> 958w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_1422.webp'; ?> 1422w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_1778.webp'; ?> 1778w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_2142.webp'; ?> 2142w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_2585.webp'; ?> 2585w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_3028.webp'; ?> 3028w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_3420.webp'; ?> 3420w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_3661.webp'; ?> 3661w,
<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_3840.webp'; ?> 3840w" src="<?php echo get_template_directory_uri() . '/static/img/frontpage/blue-explosion,w_3840.webp'; ?>" alt="blue explosion">        

With TG Starter Theme it is much simpler! ✅

With the powerful helper functions that this theme provides, you will never ever need to write those complicated and redundant tags again.
You just need this:

* @param int $thumbnailID The ID of the image attachment.

* @param bool $lazy Optional. Whether to load the image lazily using the `loading` attribute. Default false.

* @param array $attrs Optional. An associative array of additional attributes to add to the <img>  tag, including ‘classes’, ‘id’, and other general attributes.

TG::optimised_img($thumbnailID, $lazy = false, $attrs = array())


TG::optimised_img($image_id, true, ['classes' => 'my-cool-img', 'id' => 'my-img']);        

Re-use your code

Stop copying and pasting code! This theme works with a component based structure, which means that you can create components that have props.

See an example below:


<?php
namespace TG;
//****************************************                                      
// 🆃🅶                                     
// Wᴏʀᴅᴘʀᴇss Sᴛᴀʀᴛᴇʀ Tʜᴇᴍᴇ                  
// @𝑣𝑒𝑟𝑠𝑖𝑜𝑛 2.0.0                            
                                        
//****************************************
// COMPONENT: hero
//****************************************
//****************************************
//                PROPS                  *
//****************************************
// Define your component props here
$message = $message ?? "No message was passed to the component";
?>


<section class="hero" data-row-index="<?php echo $row_index;?>">
    <div class="container">
        <h1><?php echo $message; ?></h1>
    </div>
</section>        

<?php

// Let's call the component

TG::load_component('hero', ['message' => 'This is a message passed for the message prop']);

?>        

The explanation

All components have a proper unique instance number that identifies it. The styles and scripts of a specific component will only be loaded when and if a component is loaded in a specific page. It goes without saying that the styles and scripts for the component are only enqueued in the pages where the components are called.

When you call a component, you must feed in the component handle (name) and then an array of props, that should match the props defined inside the component.

This is very powerful, and it takes your workflow to the next level!

performance report screenshot

Lean & Powerful functions.php

This theme’s functions.php is very lean and shall not be used to write your functions as you normally do in other themes. The functions.php file in TG Starter Theme consists of a group of powerful configurations that you can easily customize to adapt to your specific needs. All your theme custom functions shall be written inside ./config/template-functions.php.


<?php
//****************************************
// 🆃🅶                                     
// Wᴏʀᴅᴘʀᴇss Sᴛᴀʀᴛᴇʀ Tʜᴇᴍᴇ                  
// @𝑣𝑒𝑟𝑠𝑖𝑜𝑛 2.0.0
//****************************************
namespace TG;

/**
 * TG Theme Functions & Definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package tg
 */

//**************************************************************/
// Theme Version
//***************************************************************/
/**
 * Change Version with every theme release
 */
if (!defined('_S_VERSION')) {
	define('_S_VERSION', '1.0.0');
}

//**************************************************************/
// Theme Text Domain
//***************************************************************/
/**
 * Define theme text domain
 */
if (!defined('THEME_TEXT_DOMAIN')) {
	define('THEME_TEXT_DOMAIN', "tg");
}

//**************************************************************/
// Use jQuery ?
//***************************************************************/
/**
 * Define if the theme should use jQuery or not
 */
if (!defined('USE_JQUERY')) {
	define('USE_JQUERY', false);
}

//**************************************************************/
// Built-in Cache System
//***************************************************************/
/**
 * Define if the theme should use efficient cache setting or not (might not work in all servers)
 */
if (!defined('USE_CACHE')) {
	define('USE_CACHE', true);
}

//**************************************************************/
// Static Assets Optimization - RENDER BLOCKING RESOURCES
//***************************************************************/
/**
 * List the Handles of any --->plugin scripts<---- that you want to optimize
 */
if (!defined('PLUGIN_SCRIPTS')) {
	define('PLUGIN_SCRIPTS', array(
		//Include the handlers for the scripts you want to optimize here
	));
}

/**
 * List the Handles of any --->plugin styles<---- that you want to optimize
 */
if (!defined('PLUGIN_STYLES')) {
	define('PLUGIN_STYLES', array(
		"classic-theme-styles",
		"woocommerce-general",
		"woocommerce-layout",
		"woocommerce-smallscreen",
		"jetpack_css"
	));
}

//**************************************************************/
// END Static Assets Optimization 
//***************************************************************/

//### GENERAL CONFIGS ############################################
require_once(get_template_directory() . "/config/config.php"); //#
//################################################################

new TG();
        

Integrated Development Server with Live Reload

Blazing fast development server with instant live reload and browser sync.

Instant SASS and JS minification & compilation

The theme automation suite automatically compiles and minifies SASS and also optimizes and minifies all your Javascript.

Lets work together!

Fill Out The Form And I Will Get In Touch With You!

You’re only one step closer to starting our amazing journey on building something special together!

    This site is protected by reCAPTCHA and the Google