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 footer, a grid of posts, a header within an article, a section 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 the Instance

Before building components, you should boot the general script which enqueues the styles, scripts and some general settings for displaying the components.

Default usage:

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

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

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

There are a couple of other configurations available:

$components = new MakeitWorkPress\WP_Components\Boot( [
    'css'           => true,            // Loads the default css. Defaults to true.
    'js'            => true,            // Loads the default js. Defaults to true.
    'fontawesome'   => true,            // Loads the FontAwesome css. Defaults to true.
    'tinyslider'    => true,            // Loads the TinySlider js and css. Defaults to true.
    'scrollreveal'  => true,            // Loads the ScrollReveal JS. Defaults to true.
    'hover'         => false,           // Whether to load hover.css or not. Defaults to false.
    'animate'       => false,           // Whether to load animate.css or not. Defaults to false.
    'maps'          => '',              // Add a Google Maps API key here, which will enable the use of the map atom.
    'language'      => 'wp-components'  // The default language domain
] );

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.

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] );

There is also a shorter function available:

wpc_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] );

There is also a shorter function available:

wpc_molecule( 'header', ['fixed' => true, 'transparent' => true] );

Common Properties

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.

Compatibility

WP Components works with PHP 7.4+ and is tested with WordPress 5.9 and higher. WP Components also uses FontAwesome 5 for displaying its icons.