Download the PHP package devgeniem/tms-theme-base without Composer

On this page you can find all versions of the php package devgeniem/tms-theme-base. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package tms-theme-base

TMS Base Theme

Installation

Install the theme manually by cloning the repository under your WordPress themes directory and then removing the git tracking

Setup

First you need to install required npm packages to start developing. In your theme root run:

Namespacing

The theme is namespaced as \TMS\Theme\Base. WordPress does not support namespaces for template files and thus they do not adhere to the namespace.

Translations and textdomain

Translations and the theme textdomain are loaded from under the /lang directory. Replace the tms-theme-base string with your theme textdomain within all project files with a case sensitive search and replace. Then rename the .pot file under the /lang directory with the new theme textdomain.

Polylang

The theme has built-in support for Polylang. If Polylang has been installed and is active, a language switcher will automatically show up in the main nav.

Advanced Custom Fields

If Advanced Custom Fields is installed and active, theme settings will be available. Examples of things that can be changed in the theme settings are logos and footer content.

Language specific theme settings are available when both Advanced Custom Fields and Polylang.

Bulma and Bulmally

The theme has been designed to make use of the Bulma CSS Framework and the Bulmally accessibility-ready frontend component framework. Refer to that repository for modals, accordions, tabs and other dynamic components.

Theme info

Make sure to change theme and author info in style.css.

Theme directory structure

The DustPress Theme consists of the following directories:

Partial directory structure

The partials in The DustPress Theme have been organized in the following way:

Feel free to change the partial structure in any way you wish.

Theme development guide

Post types

All post types defined in the theme should be written in the PostType directory in a class implementing the TMS\Theme\Base\Interfaces\PostType interface and registering itself in the wanted hook via hooks() method.

Default classes

The theme comes with predefined classes for WordPress' default post types. Use these to handle data for them.

Taxonomies

All taxonomies defined in the theme should be written in the Taxonomy directory in a class implementing the TMS\Theme\Base\Interfaces\Taxonomy interface and registering itself in the wanted hook via hooks() method.

Users and roles

Please use our devgeniem/wp-geniem-roles package to modify Users and roles.

Advanced Custom Fields

The ACFController class handles the loading of the ACF fields from the lib/ACF directory. The files in the directory are only required by the controller, so all the logic must be implemented by the developer themself.

Templates and models

The theme contains a base model BaseModel that has a default submodel binding.

Logging

\TMS\Theme\Base\Logger handles logging in syslog compatible logging levels.

The logged messages are finally passed to error_log() function, which in part uses configured logging destination.

To control what is finally outputted to the log, you can change GENIEM_LOG_LEVEL environment variable. Below is a quick table for level (used to control the logging level), class method, and description when to use in your code.

Level Method Description
100 debug() Debug-level messages.
200 info() Informational messages.
250 notice() Normal but significant conditions.
300 warning() When something's missing, or uses deprecated option.
400 error() Something's gone wrong, but code can still continue.
500 critical() Something has gone critically wrong.
550 alert() A condition that should be corrected immediately.
600 emergency() System is unusable. Crash and burn.

The Easiest way to use the logger is like this:

Assets and Webpack

webpack is used to compile the assets. Use npm to install packages and require JavaScript files in assets/scripts/main.js and import SCSS files in assets/styles/main.scss. The directory under which the assets are build is assets/dist.

You should only enqueue files that are under assets/dist in your theme's PHP code! To use node modules, import them into your theme scripts.

The URL to be used with the assets has been defined in /lib/Setup.php with the DPT_ASSET_URI constant. It points to https://{site_domain}/{path_to_themes_folder}/themename/dist by default. To use another source for assets this value can be changed by defining the constant for example in the wp-config.php file with a custom URI.

Asset versioning

The style and script files are automatically enqueued with the current theme version. To bust browser cache on asset updates change the theme version in the style.css file comments.

Development

Run webpack in the theme root in your local environment.

Run with the npm script:

These commands will compile unminified versions of your assets.

Production

Build minified versions for production with the npm script:

This command will compile minified versions of your assets.

Testing with Browsersync

The project includes a BrowserSync setup that will proxy your site to localhost:3000, and an IP address on your local network. This enables you to develop and test your project simultaneously with multiple browsers and devices with a scroll and click synchronisation. The settings for Browsersync are in webpack.config.js.

You should change at least the wpProjectUrl constant to point to your local development server. By default, Browsersync monitors CSS, JS, PHP and Dust files for changes and reloads all browsers automatically. For more information on available settings etc, read the webpack plugin documentation and the Browsersync documentation.

JavaScript development guide

The theme's Webpack config uses Babel to compile ES6 into ES5. Thus, we use classes and other cool features introduced in ES6. See the full list of ES6 features here.

Enable Babel compiling

If you add npm packages using ES6 features, remember to include them for the Babel loader in the webpack.config.js file!

TerserJS will most likely produce an error when trying to minify an ES6 script that is not included for the Babel loader while running npm run build!

Theme scripts

The theme's main JS file theme.js holds the main theme class. The Theme class runs other theme JS classes automatically on the document ready event. To enable autoloading on JS side define your template scripts as follows:

  1. Create a separate script file for each WordPress template, for example page-frontpage.js. You can also create script files that are loaded anyway regardless of the template.

  2. Define a JS class mimicking your DustPress model and export the class reference, for example export default class PageFrontpage {}.

  3. The document's html element will automatically get a class from your main model, for example <html class="PageFrontpage">. If you add more scripts for a specific template, add the corresponding class names into the html element's classlist with dustpress/document_class filter.

  4. Import your scripts in theme.js and add them into the appropriate controller lists. The order of the scripts is essential if you need to access methods from other script classes.

  5. The Theme class will then automatically run a method called docReady when the document is ready. Remember to define it in your template class!

The Theme class

The Theme class controls the theme script classes. The class instance is accessible globally and thus Theme is a reserved JavaScript object name in our themes. Theme holds all scripts under corresponding class properties.

Global scripts are under _globalControllers and template specific scripts are under _templateControllers. These properties are hash maps meaning each controller is under a key defined with the class name:

The controller classes are instantiated by the set methods (setGlobalControllers and setTemplateControllers) run by the main.js. Thus, an instance of a class is created and accessible before the document is ready and loaded. Template controllers are instantiated only if the corresponding style class name is defined for the html element in the DOM. If the template controller class is not instantiated, you can still access it statically by calling Theme.{ClassName}.

This class is not to be modified! Use other script files to do the magic in you theme!

Accessing controllers

To access a class instance for example in some inline script, fetch it as follows:

To access a class reference, fetch it as follows:

Class references are useful if you need global static methods. For instance, you might create a static global Vanilla JS query selector under common.js:

...and then use it as follows:

docReady methods

If you manipulate the DOM dynamically and need to rerun all docReady methods for the current template (controlled by the current html element classlist), run it with the class method:

Alternatively you can run the docReady for a single controller instance:

init methods

The Theme class runs a method called init for all the global scripts, and the currently defined template scripts after all scripts are instantiated. If you want access other script classes on the class constructor, they might not be accessible yet due to the require order. By running your scripts on the init method all other script classes are already loaded and instantiated. Here is an example usage:

The Common class

The theme assets include a default common script class called Common. Use this as the default class for all of your global methods and properties. For instance, you might handle the main menu in the Common class.

Do not bloat this class! Do not be afraid to introduce more global controller classes if your script files get too long! What ever you do, D.R.Y!

Useful methods under Common

stop

This static method enables you to safely stop the default event on event listener callbacks. Use it as follows:

**$**

This static method wraps the querySelectorAll function and lets you select a list of matching elements. To optimize the query add a context element and only query under it.

$1

This static method wraps the querySelector functions to select a single element from the DOM. To optimize the query add a context element and only query under it.

Global event listener and data-cmd attributes

Theme class adds global click event listener which you can use by adding data-cmd and data-ctrl attributes to your html element, where data-ctrl defines the JavaScript controller class and data-cmd the method to be called.

The method receives two parameters. The first parameter is the event, and the second is the actual element that has the data-cmd and data-ctrl attributes.

So in the Class MyAwesomeController we could have a method like this:

External libraries

jQuery

All scripts rely on WordPress enqueueing jQuery as an external library. WordPress exposes jQuery as a public library under the global context. To use the $ shorthand, add following to the beginning of your script file:

Lodash

Lodash is a modern JavaScript utility library delivering modularity, performance & extras. See the documentation for usage guide. To import Lodash, add the following to the beginning of your script file:

Contributors


All versions of tms-theme-base with dependencies

PHP Build Version
Package Version
Requires php Version ^8.1
devgeniem/dustpress Version >=1.33.0
composer/installers Version ^1.0.12
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package devgeniem/tms-theme-base contains the following files

Loading the files please wait ....