{"id":37578919,"url":"https://github.com/pierodetomi/ngwp-theme-kit","last_synced_at":"2026-01-16T09:36:45.240Z","repository":{"id":57141265,"uuid":"456305457","full_name":"pierodetomi/ngwp-theme-kit","owner":"pierodetomi","description":"NgWP Theme Kit is an Angular library that enables the creation of WordPress themes using Angular.","archived":false,"fork":false,"pushed_at":"2022-02-24T12:13:51.000Z","size":2631,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-18T14:50:24.605Z","etag":null,"topics":["angular","headless-wordpress","wordpress"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierodetomi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-07T00:03:29.000Z","updated_at":"2024-08-15T06:54:21.000Z","dependencies_parsed_at":"2022-09-05T01:21:25.994Z","dependency_job_id":null,"html_url":"https://github.com/pierodetomi/ngwp-theme-kit","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/pierodetomi/ngwp-theme-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierodetomi%2Fngwp-theme-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierodetomi%2Fngwp-theme-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierodetomi%2Fngwp-theme-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierodetomi%2Fngwp-theme-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierodetomi","download_url":"https://codeload.github.com/pierodetomi/ngwp-theme-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierodetomi%2Fngwp-theme-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular","headless-wordpress","wordpress"],"created_at":"2026-01-16T09:36:45.160Z","updated_at":"2026-01-16T09:36:45.227Z","avatar_url":"https://github.com/pierodetomi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**NgWP Theme Kit** is an Angular library that enables the creation of **WordPress** themes using **Angular**.\n\nIt follows the principle of _headless cms_, using the **WordPress REST APIs**.\n\n# Getting Started\n\n## Prerequisites\nIn order to make use of this module you need (of course) an Angular application.\nTherefore you should create an app (if you hadn't already):\n\n```bash\n$ ng new my-app --routing\n```\n\n## Installing the library\nYou can install **NgWP Theme Kit** with **npm**:\n\n```bash\n$ npm i ngwp-theme-kit\n```\n\n## Importing the Angular module\nNow you must import the ```NgwpThemeKitModule``` in your main module (usually ```app.module.ts```).\n\nAn example:\n\n```js\n...\n\nimport { NgwpThemeKitModule } from 'ngwp-theme-kit';\n\n...\n\n@NgModule({\n  ...\n  imports: [\n    ...\n\n    NgwpThemeKitModule\n\n    ...\n  ],\n  ...\n})\n```\n\n## Configuring page \u0026 post templates\nIn order to correctly bind to the page \u0026 post (single) WordPress templates, you must create to dedicated components: one component that will render the page content and one that will render the post content.\n\nOnce you have these two components, you must call the static registration methods provided by the ```NgwpThemeKitModule``` module, as follows:\n\n```Typescript\nNgwpThemeKitModule.setPageTemplate(PageComponent);\nNgwpThemeKitModule.setPostTemplate(PostComponent);\n```\n\nYou must do this registration as soon as possible in your application lifecycle. The suggested position is just before the declaration of your application's main module.\n\n## Adding a ```themeconfig.json``` Configuration File\nThis is the configuration file that the custom build tool will use to generate the WordPress theme.\n\nHere you specify some key information about your theme (such as its ```name```, ```author``` and a ```description```) along with supported **theme features** (e.g. ```post-thumbnails```) and the **customizer options**.\n\nFor example, here is the content of the [```themeconfig.json```](https://github.com/pierodetomi/ngwp-theme-kit/blob/master/angular/demo-theme/themeconfig.json) of the [**Demo Theme**](https://github.com/pierodetomi/ngwp-theme-kit/tree/master/angular/demo-theme) sample application that you can find in the repository of the library:\n\n```json\n{\n  \"name\": \"Demo Theme\",\n  \"description\": \"A WordPress template developed with Angular frontend\",\n  \"author\": \"Piero De Tomi\",\n  \"themeFeatures\": [\n    \"menus\"\n  ],\n  \"menus\": [{\n    \"location\": \"header-menu\",\n    \"description\": \"Header\",\n    \"initialName\": \"Header Menu\",\n    \"initialEntries\": [ \"Home\", \"Blog\", \"About Us\", \"Privacy\" ],\n    \"onlyRegisterLocation\": false\n  },{\n    \"location\": \"footer-menu\",\n    \"description\": \"Footer\",\n    \"initialName\": \"Footer Menu\",\n    \"initialEntries\": [ \"Footer Item 1\", \"Footer Item 2\", \"Footer Item 3\", \"Footer Item 4\" ],\n    \"onlyRegisterLocation\": false\n  },{\n    \"location\": \"sidebar-menu\",\n    \"description\": \"Sidebar Menu\",\n    \"onlyRegisterLocation\": true\n  }],\n  \"sections\": [{\n    \"id\": \"main\",\n    \"name\": \"Main Config\",\n    \"description\": \"Main configuration parameters\",\n    \"settings\": [{\n      \"id\": \"title\",\n      \"label\": \"Title\",\n      \"description\": \"The title of this blog\",\n      \"defaultValue\": null,\n      \"controlType\": \"text\"\n    },{\n      \"id\": \"author\",\n      \"label\": \"Author\",\n      \"description\": \"The author of this blog\",\n      \"defaultValue\": null,\n      \"controlType\": \"text\"\n    },{\n      \"id\": \"logo\",\n      \"label\": \"Logo\",\n      \"description\": \"The website logo\",\n      \"defaultValue\": null,\n      \"controlType\": \"image\"\n    }]\n  }],\n  \"widgetAreas\": [{\n      \"id\": \"header-widgets\",\n      \"name\": \"Header Widgets\",\n      \"description\": \"Widgets that will appear in the header of the page\"\n    },\n    {\n      \"id\": \"sidebar-widgets\",\n      \"name\": \"Sidebar Widgets\",\n      \"description\": \"Widgets that will appear in the sidebar of the website\"\n    }\n  ]\n}\n```\n\n## Adding the Custom Build Script to ```package.json```\nThe last step is to modify the ```package.json``` file in order to add the scripts that will bundle up your WordPress theme.\n\nEdit the ```build``` script inside the ```package.json``` file of your Angular project:\n\n```json\n{\n  ...\n\n  \"scripts\": {\n    ...\n\n    \"build\": \"ng build \u0026\u0026 \\\"./node_modules/ngwp-theme-kit/bin/NgWP.ThemeBuilder.exe\\\" {{dist-path}} {{path-to-themeconfig.json}}\",\n    \n    ...\n  }\n\n  ...\n}\n```\n\nHere you'll have to replace:\n- The ```{{dist-path}}``` token with your actual application's dist path (usually ```dist/\u003capplication name\u003e```)\n- The ```{{path-to-themeconfig.json}}``` token with the actual file path of your ```themeconfig.json``` configuration file\n\n## Develop the theme\nNow you can develop your Wordpress theme using Angular, just as you would develop any other Angular application.\n\nYou can make use of the services provided by the library, that will allow you to access Wordpress information (using WordPress REST API + some custom PHP API code).\n\nFor example, you can retrieve the first 10 posts with the following code:\n\n```Typescript\nexport class Sample implements OnInit {\n  public posts: IPost[] = [];\n\n  constructor(private _postService: PostService) { }\n\n  ngOnInit(): void {\n    this._postService\n      .get(1, 10)\n      .subscribe((posts) =\u003e {\n        this.posts = posts;\n      });\n  }\n}\n```\n\nYou can view some more example usages on the ```demo-theme``` application inside this repository.\n\n## Test the theme (locally)\nYou can test some of the functionality of your theme locally with ```ng serve```.\nYou just need to update the ```siteUrl``` property in the ```main.ts``` file (in the \"Local testing mode\" section) setting it to your WordPress development environment.\n\n```Typescript\n// Local testing mode\n  (window as any)._wpConfiguration = {\n    siteUrl: '\u003c\u003cyour_wp_site_url_here\u003e\u003e',\n    auth: {\n      isAuthenticated: false,\n      userId: 0,\n      nonce: ''\n    },\n    demo: true\n  };\n```\n\nYou'll be able to read \"public\" information as posts and categories, but you will **NOT** be able to access theme settings and more advanced information.\nTo do this you'll need to install \u0026 test your theme directly into WordPress (please read on for this).\n\n## Build the theme package\nIn order to build your theme and make it ready for WordPress, you just need to run the command that you previously added to ```package.json``` file:\n\n```bash\nnpm run build\n```\n\nHowever, you can rename this script as you like. You know... it's only an npm script after all.\n\n## Install in WordPress\nAfter building the theme, the ```dist``` folder of your application ({{application-name}} will be your application name) will contain your theme ready to be installed in WordPress as any other theme.\n\nThe package will contain a default theme thumbnail (the ```screenshot.png``` file) that you can always replace with your own if you wish.\n\n## See your theme in action\nNow it's time to see your theme in action! Open your WordPress website and have fun :)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierodetomi%2Fngwp-theme-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierodetomi%2Fngwp-theme-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierodetomi%2Fngwp-theme-kit/lists"}