Home

Welcome to the WP Components Wiki

WP Components contains common components that may be used in WordPress development. This helps to speed up development greatly, because the components have not to be redeveloped time over time.

The components are separated into two classes, namely atoms which are single components and molecules which are consisting of multiple atoms.

• An atom is, for example, a set of sharing buttons, a title, a button, a search field, breadcrumbs and so forth.
• A molecule is, for example, a site header, a grid of posts, a header within an article, and so forth.

Usage

Require the Ajax.php, Boot.php and Build.php files in your theme functions.php or a custom plugin. Additionally, you could also use an autoloader or include it as a repository using Composer.

Booting Components

Before building components, you should boot the general script which enqueues the styles and scripts of the components.

$components = new MakeitWorkPress\WP_Components\Boot();

If you don't want to include the scripts (which breaks some of the components), you can insert configurations in the component like this:

$components = new MakeitWorkPress\WP_Components\Boot( ['css' => false, 'js' => false] );

Rendering an atom

If you want to render an atom, you have to utilize the Build class, the name of the atom, the properties and eventually if you want to return instead of echo. Probably, we might write a shorter function for this in future versions.

MakeitWorkPress\WP_Components\Build::atom( string $name, array $properties, boolean $return = false );

For example, rendering a lazyloading image molecule, where the attachment ID of the image is 71, is done in the following manner:

MakeitWorkPress\WP_Components\Build::atom( 'image', ['image' => 71, 'lazyload' => true] );

Rendering a molecule

If you want to render a molecule, you have to utilize the Build class and use the name of the molecule, the properties and eventually if you want to return instead of echo.

MakeitWorkPress\WP_Components\Build::molecule( string $name, array $properties, boolean $return = false );

For example, rendering the header molecule is done in the following manner:

MakeitWorkPress\WP_Components\Build::molecule( 'header', ['fixed' => true, 'transparent' => true] );

Each component (either atom or molecule) can have custom properties and has a set of predefined properties, such as alignment, attributes, background, border, colour, float, height, parallax, rounded, width and so forth. These properties are explained in the Common Properties Wiki Chapter.