{"id":14955024,"url":"https://github.com/makeitworkpress/wp-components","last_synced_at":"2025-10-24T07:30:38.432Z","repository":{"id":24755936,"uuid":"91095944","full_name":"makeitworkpress/wp-components","owner":"makeitworkpress","description":"A library of the most common WordPress components, useful for theme and plugin development.","archived":false,"fork":false,"pushed_at":"2024-07-13T13:02:46.000Z","size":4244,"stargazers_count":50,"open_issues_count":3,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-29T08:33:56.504Z","etag":null,"topics":["atom","components-library","molecule","php","wordpress","wordpress-components","wordpress-development","wordpress-plugin","wordpress-theme","wp-components"],"latest_commit_sha":null,"homepage":"https://makeitwork.press/scripts/wp-components/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/makeitworkpress.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-12T13:47:05.000Z","updated_at":"2024-11-22T17:07:12.000Z","dependencies_parsed_at":"2023-11-30T12:31:04.570Z","dependency_job_id":"5ad9bc4e-3be9-4fd1-b392-062507f34177","html_url":"https://github.com/makeitworkpress/wp-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makeitworkpress%2Fwp-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makeitworkpress%2Fwp-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makeitworkpress%2Fwp-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makeitworkpress%2Fwp-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makeitworkpress","download_url":"https://codeload.github.com/makeitworkpress/wp-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237932057,"owners_count":19389560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atom","components-library","molecule","php","wordpress","wordpress-components","wordpress-development","wordpress-plugin","wordpress-theme","wp-components"],"created_at":"2024-09-24T13:10:24.492Z","updated_at":"2025-10-24T07:30:37.744Z","avatar_url":"https://github.com/makeitworkpress.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wp-components\r\nMany frameworks use a modular approach for designing applications. While developing WordPress websites, we found out we're writing similar code a lot of times, even with existing frameworks and themes. That's why we developed WP Components, a set of common components with minimal styling but many functionalities.\r\n\r\nWP Components contains common components that may be used in WordPress development. This helps to speed up development greatly, because the components doens't have to be redeveloped. It is aimed at WordPress Developers.\r\n\r\nThe components are seperated in two classes, namely atoms which are single components and molecules which are consisting of multiple atoms.\r\n* An atom is for example a set of **sharing buttons**, a **title**, a **button**, a **search field**, **breadcrumbs** and so forth.\r\n* A molecule is for example a **site header**, a **grid of posts**, a **slider**, a **header** within an article, and so forth.\r\n\r\nWP Components is maintained by [Make it WorkPress](https://makeitwork.press/scripts/wp-components/).\r\n\r\n\u0026nbsp;\r\n## Installation\r\n\r\nRequire the Ajax.php, Boot.php and Build.php files in your theme functions.php or a custom plugin. Additionaly, you could also use an autoloader or include it as a repository using Composer. You can read more about autoloading in [the readme of wp-autoload](https://github.com/makeitworkpress/wp-autoload).\r\n\r\n\u0026nbsp;\r\n## Usage\r\n\r\n### Booting Components\r\nBefore building components, you should boot the general script which enqueues the styles and scripts by the components.\r\n\r\n\r\n```php\r\n$components = new MakeitWorkPress\\WP_Components\\Boot();\r\n```\r\n\r\nIf you don't want to include the scripts (which breaks some of the components), you can insert configurations in the component like this:\r\n\r\n```php\r\n$components = new MakeitWorkPress\\WP_Components\\Boot( ['css' =\u003e false, 'js' =\u003e false] );\r\n```\r\n\r\n### Rendering an atom\r\nIf 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 render this atom or return it as a string.\r\n\r\n```php\r\nMakeitWorkPress\\WP_Components\\Build::atom( string $name, array $properties, boolean $render = true );\r\n```\r\n\r\nFor example, rendering an image atom, where the attachment ID of the image is 71, is done in the following manner:\r\n\r\n```php\r\nMakeitWorkPress\\WP_Components\\Build::atom( 'image', ['image' =\u003e 71] );\r\n```\r\n\r\nThere is also a shorter function available:\r\n\r\n```php\r\nwpc_atom( 'image', ['image' =\u003e 71] );\r\n```\r\n\r\n### Rendering a molecule\r\nIf 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 render the molecule or return it as a string.\r\n\r\n```php\r\nMakeitWorkPress\\WP_Components\\Build::molecule( string $name, array $properties, boolean $render = true );\r\n```\r\n\r\nFor example, rendering the header molecule is done in the following manner:\r\n\r\n```php\r\nMakeitWorkPress\\WP_Components\\Build::molecule( 'header', ['fixed' =\u003e true, 'transparent' =\u003e true] );\r\n```\r\n\r\nThere is also a shorter function available:\r\n\r\n```php\r\nwpc_molecule( 'header', ['fixed' =\u003e true, 'transparent' =\u003e true] );\r\n```\r\n\r\n### Common Properties\r\nEach component (atom or molecule) can have custom properties and has a set of predefined properties, such as alignment, attributes, background, border, color, float, height, parallax, rounded, width and so forth. \r\nThese are explained in [the wiki](https://github.com/makeitworkpress/wp-components/wiki/Common-Properties).\r\n\r\n\u0026nbsp;\r\n## WP Components WIKI\r\nYou can find more information on using components and all the properties that may be used for each component in [our wiki](https://github.com/makeitworkpress/wp-components/wiki).\r\n\r\n\u0026nbsp;\r\n## Compatibility\r\nWP Components works with PHP 7.3+ and is tested with WordPress 5.8.3 and higher.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakeitworkpress%2Fwp-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakeitworkpress%2Fwp-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakeitworkpress%2Fwp-components/lists"}