Ncmaz-frontend plugin project development

In the Ncmaz theme, there are many components and pages rendered by React and Graphql

Example: Post cards, Gutenberg blocks, archive pages, search pages...

And all of them are developed in the ncmaz-frontend plugin. The Ncmaz-core plugin is only responsible for registering and developing Gutenberg blocks on the dashboard side.

So, if you are a web developer, then the below document will help you to customize the theme by developing with the ncmaz-frontend plugin.

1, Install node_module and enqueue development mode

Note: Ncmaz-frontend plugin attached to the Ncmaz theme has removed src folders to reduce the size, so to develop the plugin you need to clone the plugin again from the repo GitHub and replace it.

First, you need to open the ncmaz-frontend folder (full directory), then open the terminal and run the following commands to install node_module:

1. yarn install - install node_module

2. yarn dev - start running in development mode

3. Open file "ncmaz-frontend/inc/ncmaz-enqueue-scripts.php"

4. Comment on the line of code at line (188): add_action('wp_enqueue_scripts', 'ncmazFe_registerScripts');

5. Cancel comment on the line (222) : add_action('wp_enqueue_scripts', 'ncmaz_frontend_enqueue_script');

6. You can now open your WordPress theme in development mode. (open the console tab in dev tool f12 and you will see it)

7. After the development is done, you run the command "yarn build" to rebuild the plugin

8. Undo steps 4 and 5 above.

9. The plugin is ready.

2, Author page development example

Here is a guide on how the plugin works for author page development (Other pages, and other components will also be similar)

1, Create a div as an anchor to react render to

The ncmaz-frontend plugin is a React project, created by CRA, and the working principle is to use the React portal to render components to the anchor points that are declared in the PHP files. So you understand that, if you want to create any additional components, first you need to create a div as an anchor point and then in React you will render that component into that anchor div.

How to make a div as an anchor? You need to specify which page you want to develop on, then you will access that PHP page (eg single.php, author.php, archive.php, search.php ...) then select the location to render and add anchor div.

You can create your own anchor, or you can follow the generic way that I developed before,

// author.php

```php
<div data-is-react-component="PageArchiveAuthor" data-component-props="<?php echo esc_attr(json_encode($PageArchiveDateProps)); ?>"></div>
```

Where attr data-is-react-component must be unique (this is the attr anchor that will be searched by querySelector), attr data-component-props is the object props that will be passed to the React component.

// Here is an example to create and pass PageArchiveProps props

```php
     		$PageArchiveProps = (object)[];
		$PageArchiveProps->termId = get_queried_object_id();
		$PageArchiveProps->termData = $graphql['data']['termNode']; 
		$PageArchiveProps->isCategory = is_category();
		$PageArchiveProps->isTag = is_tag();
		$PageArchiveProps->isFormatVideo = false;
		$PageArchiveProps->isFormatAudio = false;
		$PageArchiveProps->sectionCategoriesTrending = ncmazGetOptionForSectionTrendingArchivePage();
		
		```php
		<div data-is-react-component="PageArchive" data-component-props="<?php echo esc_attr(json_encode($PageArchiveProps)); ?>"></div>
		```
```

2, Create React component in ncmaz-frontend and render to anchor div

First, you need to create your React component (YourComponent.tsx) and it can be placed in the folder ncmaz-frontend/src/components

Then add the switch-case section in the src/containers/FactoryComponents/FactoryComponents.tsx file

FactoryComponents.tsx

Here, the case is the attr data-is-react-component="..." that you declared in the anchor div in the PHP file

That's it, now you can save and check the rendered component (go to the author page and navigate to the anchor declaration location to see it)

3, This example if you want to customize (develop) the author page

Currently, the author page is fully rendered by React, so if you want to develop anything further you can follow this tutorial

1. In the theme folder, find the file theme/ncmaz/author.php, and check the $PageArchiveDateProps variable, this is the variable that contains all the object props to pass into the react component PageArchiveAuthor.tsx

2. Find the file src/containers/PageArchive/PageArchiveAuthor.tsx, this file renders the entire author page.
3. In this PageArchiveAuthor.tsx file, you can take a closer look and customize what you want. Here, we use the global window.frontendObject variable to check the settings in the theme options, and use Graphql to get the data and render them.

4. Customize and save and then you can see the change in your author page (open f12 dev tool and you will see react running)... Once everything is done, it's time to update the theme version and re-upload it to your hosting - remember to run "yarn build" and re-enqueue and upload to hosting. You will need to update the version of both the theme and the ncmaz-frontend plugin. Hope can help. Good luck !!!

video - Ncmaz-frontend plugin project development

41MB

recording-2024-01-30-09-40-06.mp4