Skip to content
Starter theme for your website
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
build fixed webpack svg loaders Mar 4, 2019
framework-customizations code changes for theme generator Mar 14, 2019
template-parts New version Nov 20, 2018
vendor-custom aq_resizer update to 1.2.2 Feb 26, 2019
.babelrc added lock files,dev functions refactor Oct 5, 2018
.editorconfig added php composer support Feb 12, 2019
.gitignore added php composer support Feb 12, 2019
404.php New version Nov 20, 2018
LICENSE license update Jan 5, 2019
comments.php New version Nov 20, 2018
composer.json added minimum php version to composer.json Mar 6, 2019
footer.php added comments to remove ComposerLayout using Generator Mar 14, 2019
functions.php added php composer support Feb 12, 2019
index.php media tweaks + add readme media functions describtion Mar 1, 2019
package-lock.json Widgets : Code refactoring Feb 12, 2019
package.json remstered webpack config ( not finished ) Jan 7, 2019
page-tpl-no-sidebar.php Bootstrap theme v1 Sep 28, 2018
page.php Code refactoring : classes name case Feb 13, 2019
screenshot.png {copyright} Dec 17, 2018
single.php Code refactoring : classes name case Feb 13, 2019
webpack.config.js remstered webpack config ( not finished ) Jan 7, 2019


Starter Kit Theme

TotalDownloads Release GitHub Issues License Last Commit


  1. PHP5.6+
  2. NodeJs (v10 +) (optional)

StarterKit Generator

You can include / exclude functional using online generator tool


  1. clone repo

  2. run npm i or yarn command (setup node depencies)

  3. to replace names use command

    • npm run replaceNames - doing replacement by config object (edit first in gulpfile.js)

  4. to run webpack use next commands

    • npm run prod or yarn prod - build minified assets

    • npm run dev or yarn dev- build assets with source maps (for development)

    • npm run watch or yarn watch- start watcher

    • npm run browser-sync or yarn browser-sync - to start watcher with broser sync

    • To use browser sync make sure that you copied build/broswer-sync.config.js.sample to build/broswer-sync.config.js - and configured your local domain


  • app/ – main theme files
    • Controller/
      • Backend.php – wp-admin functions
      • Front.php – front-end functions
      • HTTP2.php – HTTP2 support
      • Init.php – theme initialization
      • LazyLoad.php – lazy load for images
      • Menu.php – menu registration hooks and methods
      • OAuth.php – Oauth support
      • Optimization.php – removes unnecessary tags
      • PostTypes.php – registering custom post types
      • Shortcodes.php – registering shortcodes
      • VisualComposer.php – settings for Page Builder
      • WalkerBootstrap.php – add bootstrap menu walker
    • Helper/ – Helpers classes
      • Front.php - front-end page helpers
      • Media.php - media helpers
      • Utils.php - other useful functions
    • Model/ – models to work with database
      • Database.php - DB model
      • Layout.php - page layout model
      • News.php - posts model
      • Post.php - news post type model
      • Shortcode.php - shortcode model
    • Shortcodes/ – shortcodes library (works with/without WPBakery Page Builder)
      • Alert - alert block (icon, styling)
      • Button - button element (icon, link, layout, styling)
      • Contact Form - form and form elements (checkbox, email, file uploader, text, datepicker and other)
      • Google Map
      • Heading - heading h1,h2,h3,h4,h5,h6 (font styling, layout)
      • Menu - custom menu with desktop and mobile devices support
      • News - news block
      • Posts - posts block (pagination, styling)
      • Pricing Table - pricing table (price settings, styling)
      • Social Login - login using social networks Facebook, Twitter, Google
      • Tabs - tabs shortcode
      • Toggles - accordion shortcode
    • View/ – templates (included in controller)
    • Widgets/ – widgets (included in controller)
  • assets/ – theme assets
    • css/
    • fonts/
    • images/
    • js/
    • libs/
  • build - webpack configs
  • framework-customizations/ – Unyson customization (see
  • template-parts/ – default WordPress templates (included in files below)
  • vendor-custom/ – third-party development
  • 404.php
  • comments.php
  • footer.php
  • functions.php
  • gulpfile.js
  • header.php
  • index.php
  • package.json
  • page.php
  • page-tpl-no-sidebar.php
  • postcss.config.css
  • screenshot.png
  • sidebar.php
  • single.php
  • style.css
  • webpack.config.js

Naming conventions

shortcodes | widgets

  1. all styles and scripts files should be in {Shortcodes|Widgets}/assets - folder

  2. styles should be named - style.scss

  3. JS files should be named - scripts.js

  4. enqueue in shortcode - style.css and scritps.min.js


Shortcodes in the shortcodes folder are loaded with the autoloader. That is, you can simply create a folder of a new shortcode with the necessary files and this shortcode will be automatically available.

Each shortcode has its view files, its assets directory, which contains its own, individual css, js, images, fonts, etc. (these attachments need to be connected via wp_enqueue_style and wp_enqueue_script in the shortcode.php file, they are not automatically connected). This is necessary to ensure that shortcode shortcuts are loaded only when the shortcode is active and that you can transfer the shortcodes by simply copying the shortcode folder.

In the future, you can connect the plugin combining styles and scripts to optimize the number of requests (or connect scripts via defer).  The folder structure can be any, you can add your files, but here are two files ajax.php and shortcode.php - loaded autoloader

   File structure

  • assets/ – all assets (styles, scripts, fonts, etc)
    • assets/style.scss - styles
    • assets/scripts.js - scripts
    • assets/images/ - images
  • childs/ – nested shortcodes, have the same structure as another shortcodes
  • view/ – shortcode templates
  • ajax.php – backend for ajax queries (optional)
  • config.php – shortcode config
  • shortcode.php – shortcode controller
  • vc.php - WPBakery Page Builder support

Helpers usage


Media helper contains functions for working with images.


The img_resize() function returns a link to the modified image according to the passed parameters. You can see examples in index.php.


 <img src="<?php echo Media::img_resize( $url, $width, $height, $crop ); ?>" >
  • $url - URL to image file to resize
  • $width - width value, integer
  • $height - height value, integer
  • $crop - bool flag crop or not

Returns: string resized image path


use StarterKit\Helper\Media;

<img src="<?php echo Media::img_resize( get_the_post_thumbnail_url( get_the_ID(), 'full' ), 380, 250, false ); ?>" >


Function the_img() is universal and can print a full <img> tag with various attributes. All parameters are optional. The function is friendly with built-in theme Lazy Load controller. Lazy Load needs to know image sizes (width & height or data-width & data-height or [width]x[height] in the image file name)


Media::the_img( $image_atts = array(), $func_atts = array() );
  • $image_atts - array of <img> tag attributes
    • src - URL to image file, string, the system tries to fill automatically from global $post featured image
    • width - width value, integer, not used if empty
    • height - height value, integer, not used if empty
    • title - title attribute, string, not used if empty
    • alt - alt attribute, string, the system tries to fill automatically
    • id- id attribute, string, not used if empty
    • class - class attribute, string, not used if empty
    • ... - You can add any custom attribute to use in <img> tag
  • $func_atts - array of functional attributes - needs to prepare image
    • attachment_id - WP media id, integer, the system tries to fill automatically from global $post featured image
    • hdmi - default true, srcset flag, boolean
    • size - default 'full', WP image sizes, string, 'thumbnail', 'medium', 'large', 'full' or custom
    • crop - default false, bool flag crop or not
    • upscale - default false, resizes smaller images, boolean
    • resize - default true, do resize or not, boolean

Returns: echo string image tag or return false if error


You can call it in posts loop without parameters and function will print featured image from Post in 'full' size (function use global $post when image src and attachment_id is empty)

use StarterKit\Helper\Media;



With different parameters:

Print image with sizes atts and with srcset

Media::the_img(array('width' => 380, 'height' => 250) );

Print image without strong sizes, but with lazy load and with srcset

Media::the_img(array('data-width' => 380, 'data-height' => 250) );

An example how to print image tag without srcset

Media::the_img(array('data-width' => 380, 'data-height' => 250), array('hdmi' => false) );

With different and custom attributes

Media::the_img(array('width' => 380, 'height' => 250, 'class' => 'image-class', 'data-my-attr' => $my-attr-value), array('attachment_id' => $attachment_id) );

With no attributes, only standart WP size in post

Media::the_img(array(), array('size' => 'medium') );
You can’t perform that action at this time.