If you\u2019re ready, we can now get started with our tutorial on how to create our WordPress Settings page.<\/p>\n
Project Structure<\/h4>\nFirst, we are going to create and organize the files required:<\/p>\n
\r\n.\r\n|-- package.json\r\n|-- settings-page.php\r\n|-- src\r\n |-- index.js\r\n |-- App.js\r\n |-- styles.scss\r\n<\/pre>\nWe have the src<\/code> directory containing the source files, stylesheet, and JavaScript files, which will contain the app components and the styles. We also created settings-page.php<\/code>, which contains the WordPress plugin header<\/a> so that we can load our code as a plugin in WordPress. Lastly, we have package.json<\/code> so we can install some NPM packages.<\/p>\n
NPM Packages<\/h4>\nNext, we are going to install the @syntatis\/kubrick<\/code> package for our UI components, as well as a few other packages that it depends on and some that we need to build the page: @wordpress\/api-fetch<\/code>, @wordpress\/dom-ready<\/code>, react<\/code>, and react-dom<\/code>.<\/p>\n
\r\nnpm i @syntatis\/kubrick @wordpress\/api-fetch @wordpress\/dom-ready react react-dom\r\n<\/pre>\nAnd the @wordpress\/scripts<\/code> package as a development dependency, to allow us to compile the source files easily.<\/p>\n
\r\nnpm i @wordpress\/scripts -D\r\n<\/pre>\nRunning the Scripts<\/h4>\nWithin the package.json<\/code>, we add a couple of custom scripts, as follows:<\/p>\n
\r\n{\r\n \"scripts\": {\r\n \"build\": \"wp-scripts build\",\r\n \"start\": \"wp-scripts start\"\r\n }\r\n}\r\n<\/pre>\nThe build<\/code> script will allow us to compile the files within the src<\/code> directory into files that we will load on the Settings Page. During development, we are going to run the start<\/code> script.<\/p>\n
\r\nnpm run start\r\n<\/pre>\nAfter running the script, you should find the compiled files in the build<\/code> directory:<\/p>\n
\r\n.\r\n|-- index.asset.php\r\n|-- index.css\r\n|-- index.js\r\n<\/pre>\nCreate the Settings Page<\/h4>\nThere are several steps we are going to do and tie together to create the Settings Page.<\/p>\n
First, we are going to update our settings-page.php<\/code> file to register our settings page in WordPress, and register the settings and the options for the page.<\/p>\n
\r\nadd_action('admin_menu', 'add_submenu');\r\n\r\nfunction add_submenu() {\r\n add_submenu_page( \r\n 'options-general.php', \/\/ Parent slug.\r\n 'Kubrick Settings',\r\n 'Kubrick',\r\n 'manage_options',\r\n 'kubrick-setting',\r\n function () { \r\n ?>\n <div class=\"wrap\">\n <h1><?php echo esc_html(get_admin_page_title()); ?><\/h1>\n <div id=\"kubrick-settings\"><\/div>\n <noscript>\n <p>\n <?php esc_html_e('This settings page requires JavaScript to be enabled in your browser. Please enable JavaScript and reload the page.', 'settings-page-example'); ?>\n <\/p>\n <\/noscript>\n <\/div>\n <?php\r\n },\r\n );\r\n}\r\n\r\nfunction register_settings() {\r\n register_setting( 'kubrick_option_group', 'admin_footer_text', [\r\n 'type' => 'string', \r\n 'sanitize_callback' => 'sanitize_text_field',\r\n 'default' => 'footer text',\r\n 'show_in_rest' => true,\r\n ] ); \r\n}\r\n\r\nadd_action('admin_init', 'register_settings');\r\nadd_action('rest_api_init', 'register_settings');\r\n<\/pre>\nHere, we are adding a submenu page under the Settings<\/strong> menu in WordPress Admin. We also register the settings and options for the page. The register_setting<\/code> function is used to register the setting, and the show_in_rest<\/code> parameter is set to true<\/code>, which is important to make the setting and the option available in the WordPress \/wp\/v2\/settings<\/code> REST API.<\/p>\n
The next thing we are going to do is enqueue the stylesheet and JavaScript files that we have compiled in the build<\/code> directory. We are going to do this by adding an action hook to the admin_enqueue_scripts<\/code> action.<\/p>\n
\r\nadd_action('admin_enqueue_scripts', function () {\r\n $assets = include plugin_dir_path(__FILE__) . 'build\/index.asset.php';\r\n\r\n wp_enqueue_script(\r\n 'kubrick-setting', \r\n plugin_dir_url(__FILE__) . 'build\/index.js',\r\n $assets['dependencies'], \r\n $assets['version'],\r\n true\r\n );\r\n\r\n wp_enqueue_style(\r\n 'kubrick-setting', \r\n plugin_dir_url(__FILE__) . 'build\/index.css',\r\n [], \r\n $assets['version']\r\n );\r\n});\r\n<\/pre>\nIf you load WordPress Admin, you should now see the new submenu under Settings<\/strong>. On the page of this submenu, we render a div<\/code> with the ID root<\/code> where we are going to render our React application.<\/p>\n
![\"WordPress](\"https:\/\/upprofits.net\/wp-content\/uploads\/2024\/10\/wp-admin-settings-screenshot.jpg\")
<\/figure>\nAt this point, there\u2019s nothing to see on the page just yet. We will need to create a React component and render it on the page.<\/p>\n
Creating a React component<\/h5>\n
To create the React application, we first add the App function component in our App.js<\/code> file. We also import the index.css<\/code> from the @syntatis\/kubrick<\/code> package within this file to apply the basic styles to some of the components.<\/p>\n
\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n \r\nexport const App = () => {\r\n return <p>Hello World from App<\/p>;\r\n};\r\n<\/pre>\nIn the index.js<\/code>, we load and render our App<\/code> component with React.<\/p>\n
\r\nimport domReady from '@wordpress\/dom-ready';\r\nimport { createRoot } from 'react-dom\/client';\r\nimport { App } from '.\/App';\r\n\r\ndomReady( () => {\r\n const container = document.querySelector( '#root' );\r\n if ( container ) {\r\n createRoot( container ).render( <App \/> );\r\n }\r\n} );\r\n<\/pre>\n![](\"https:\/\/upprofits.net\/wp-content\/uploads\/2024\/10\/kubrick-settings-page.jpg\")
<\/figure>\nUsing the UI components<\/h5>\n
In this example, we\u2019d like to add a text input on the Settings Page which will allow the user to set the text that will be displayed in the admin footer.<\/p>\n
Kubrick UI currently offers around 18 components. To create the example mentioned, we can use the TextField<\/a><\/code> component to create an input field for the \u201cAdmin Footer Text\u201d<\/strong> setting, allowing users to modify the text displayed in the WordPress admin footer. The Button component is used to submit the form and save the settings. We also use the Notice<\/a><\/code> component to show feedback to the user, such as when the settings are successfully saved or if an error occurs during the process. The code fetches the current settings on page load and updates them via an API call when the form is submitted.<\/p>\n
\r\nimport { useEffect, useState } from 'react';\r\nimport apiFetch from '@wordpress\/api-fetch';\r\nimport { Button, TextField, Notice } from '@syntatis\/kubrick';\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n\r\nexport const App = () => {\r\n const [status, setStatus] = useState(null);\r\n const [statusMessage, setStatusMessage] = useState(null);\r\n const [values, setValues] = useState();\r\n\r\n \/\/ Load the initial settings when the component mounts.\r\n useEffect(() => {\r\n apiFetch({ path: '\/wp\/v2\/settings' })\r\n .then((data) => {\r\n setValues({\r\n admin_footer_text: data?.admin_footer_text,\r\n });\r\n })\r\n .catch((error) => {\r\n setStatus('error');\r\n setStatusMessage('An error occurred. Please try to reload the page.');\r\n console.error(error);\r\n });\r\n }, []);\r\n\r\n \/\/ Handle the form submission.\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n const data = new FormData(e.target);\r\n\r\n apiFetch({\r\n path: '\/wp\/v2\/settings',\r\n method: 'POST',\r\n data: {\r\n admin_footer_text: data.get('admin_footer_text'),\r\n },\r\n })\r\n .then((data) => {\r\n setStatus('success');\r\n setStatusMessage('Settings saved.');\r\n setValues(data);\r\n })\r\n .catch((error) => {\r\n setStatus('error');\r\n setStatusMessage('An error occurred. Please try again.');\r\n console.error(error);\r\n });\r\n };\r\n\r\n if (!values) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\n {status && <Notice level={status} isDismissable onDismiss={() => setStatus(null)}>{statusMessage}<\/Notice>}\n <form method=\"POST\" onSubmit={handleSubmit}>\n <table className=\"form-table\" role=\"presentation\">\n <tbody>\n <tr>\n <th scope=\"row\">\n <label\n htmlFor=\"admin-footer-text\"\n id=\"admin-footer-text-label\"\n >\n Admin Footer Text\n <\/label>\n <\/th>\n <td>\n <TextField\n aria-labelledby=\"admin-footer-text-label\"\n id=\"admin-footer-text\"\n className=\"regular-text\"\n defaultValue={values?.admin_footer_text}\n name=\"admin_footer_text\"\n description=\"This text will be displayed in the admin footer.\"\n \/>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <Button type=\"submit\">Save Settings<\/Button>\n <\/form>\n <\/>\r\n );\r\n};\r\n\r\nexport default App; \r\n<\/pre>\nConclusion<\/h4>\nWe\u2019ve just created a simple custom settings page in WordPress using React components and the Kubrick UI library.<\/p>\n
Our Settings Page here is not perfect, and there are still many things we could improve. For example, we could add more components to make the page more accessible or add more features to make the page more user-friendly. We could also add more error handling or add more feedback to the user when the settings are saved. Since we\u2019re working with React, you can also make the page more interactive and visually appealing.<\/p>\n
I hope this tutorial helps you get started with creating a custom settings page in WordPress using React components. You can find the source code for this tutorial on GitHub<\/a>, and feel free to use it as a starting point for your own projects.<\/p>\n
The post How to Create a WordPress Settings Page with React<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
We have the src<\/code> directory containing the source files, stylesheet, and JavaScript files, which will contain the app components and the styles. We also created settings-page.php<\/code>, which contains the WordPress plugin header<\/a> so that we can load our code as a plugin in WordPress. Lastly, we have package.json<\/code> so we can install some NPM packages.<\/p>\n
NPM Packages<\/h4>\nNext, we are going to install the @syntatis\/kubrick<\/code> package for our UI components, as well as a few other packages that it depends on and some that we need to build the page: @wordpress\/api-fetch<\/code>, @wordpress\/dom-ready<\/code>, react<\/code>, and react-dom<\/code>.<\/p>\n
\r\nnpm i @syntatis\/kubrick @wordpress\/api-fetch @wordpress\/dom-ready react react-dom\r\n<\/pre>\nAnd the @wordpress\/scripts<\/code> package as a development dependency, to allow us to compile the source files easily.<\/p>\n
\r\nnpm i @wordpress\/scripts -D\r\n<\/pre>\nRunning the Scripts<\/h4>\nWithin the package.json<\/code>, we add a couple of custom scripts, as follows:<\/p>\n
\r\n{\r\n \"scripts\": {\r\n \"build\": \"wp-scripts build\",\r\n \"start\": \"wp-scripts start\"\r\n }\r\n}\r\n<\/pre>\nThe build<\/code> script will allow us to compile the files within the src<\/code> directory into files that we will load on the Settings Page. During development, we are going to run the start<\/code> script.<\/p>\n
\r\nnpm run start\r\n<\/pre>\nAfter running the script, you should find the compiled files in the build<\/code> directory:<\/p>\n
\r\n.\r\n|-- index.asset.php\r\n|-- index.css\r\n|-- index.js\r\n<\/pre>\nCreate the Settings Page<\/h4>\nThere are several steps we are going to do and tie together to create the Settings Page.<\/p>\n
First, we are going to update our settings-page.php<\/code> file to register our settings page in WordPress, and register the settings and the options for the page.<\/p>\n
\r\nadd_action('admin_menu', 'add_submenu');\r\n\r\nfunction add_submenu() {\r\n add_submenu_page( \r\n 'options-general.php', \/\/ Parent slug.\r\n 'Kubrick Settings',\r\n 'Kubrick',\r\n 'manage_options',\r\n 'kubrick-setting',\r\n function () { \r\n ?>\n <div class=\"wrap\">\n <h1><?php echo esc_html(get_admin_page_title()); ?><\/h1>\n <div id=\"kubrick-settings\"><\/div>\n <noscript>\n <p>\n <?php esc_html_e('This settings page requires JavaScript to be enabled in your browser. Please enable JavaScript and reload the page.', 'settings-page-example'); ?>\n <\/p>\n <\/noscript>\n <\/div>\n <?php\r\n },\r\n );\r\n}\r\n\r\nfunction register_settings() {\r\n register_setting( 'kubrick_option_group', 'admin_footer_text', [\r\n 'type' => 'string', \r\n 'sanitize_callback' => 'sanitize_text_field',\r\n 'default' => 'footer text',\r\n 'show_in_rest' => true,\r\n ] ); \r\n}\r\n\r\nadd_action('admin_init', 'register_settings');\r\nadd_action('rest_api_init', 'register_settings');\r\n<\/pre>\nHere, we are adding a submenu page under the Settings<\/strong> menu in WordPress Admin. We also register the settings and options for the page. The register_setting<\/code> function is used to register the setting, and the show_in_rest<\/code> parameter is set to true<\/code>, which is important to make the setting and the option available in the WordPress \/wp\/v2\/settings<\/code> REST API.<\/p>\n
The next thing we are going to do is enqueue the stylesheet and JavaScript files that we have compiled in the build<\/code> directory. We are going to do this by adding an action hook to the admin_enqueue_scripts<\/code> action.<\/p>\n
\r\nadd_action('admin_enqueue_scripts', function () {\r\n $assets = include plugin_dir_path(__FILE__) . 'build\/index.asset.php';\r\n\r\n wp_enqueue_script(\r\n 'kubrick-setting', \r\n plugin_dir_url(__FILE__) . 'build\/index.js',\r\n $assets['dependencies'], \r\n $assets['version'],\r\n true\r\n );\r\n\r\n wp_enqueue_style(\r\n 'kubrick-setting', \r\n plugin_dir_url(__FILE__) . 'build\/index.css',\r\n [], \r\n $assets['version']\r\n );\r\n});\r\n<\/pre>\nIf you load WordPress Admin, you should now see the new submenu under Settings<\/strong>. On the page of this submenu, we render a div<\/code> with the ID root<\/code> where we are going to render our React application.<\/p>\n
<\/figure>\nAt this point, there\u2019s nothing to see on the page just yet. We will need to create a React component and render it on the page.<\/p>\n
Creating a React component<\/h5>\n
To create the React application, we first add the App function component in our App.js<\/code> file. We also import the index.css<\/code> from the @syntatis\/kubrick<\/code> package within this file to apply the basic styles to some of the components.<\/p>\n
\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n \r\nexport const App = () => {\r\n return <p>Hello World from App<\/p>;\r\n};\r\n<\/pre>\nIn the index.js<\/code>, we load and render our App<\/code> component with React.<\/p>\n
\r\nimport domReady from '@wordpress\/dom-ready';\r\nimport { createRoot } from 'react-dom\/client';\r\nimport { App } from '.\/App';\r\n\r\ndomReady( () => {\r\n const container = document.querySelector( '#root' );\r\n if ( container ) {\r\n createRoot( container ).render( <App \/> );\r\n }\r\n} );\r\n<\/pre>\n <\/figure>\nUsing the UI components<\/h5>\n
In this example, we\u2019d like to add a text input on the Settings Page which will allow the user to set the text that will be displayed in the admin footer.<\/p>\n
Kubrick UI currently offers around 18 components. To create the example mentioned, we can use the TextField<\/a><\/code> component to create an input field for the \u201cAdmin Footer Text\u201d<\/strong> setting, allowing users to modify the text displayed in the WordPress admin footer. The Button component is used to submit the form and save the settings. We also use the Notice<\/a><\/code> component to show feedback to the user, such as when the settings are successfully saved or if an error occurs during the process. The code fetches the current settings on page load and updates them via an API call when the form is submitted.<\/p>\n
\r\nimport { useEffect, useState } from 'react';\r\nimport apiFetch from '@wordpress\/api-fetch';\r\nimport { Button, TextField, Notice } from '@syntatis\/kubrick';\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n\r\nexport const App = () => {\r\n const [status, setStatus] = useState(null);\r\n const [statusMessage, setStatusMessage] = useState(null);\r\n const [values, setValues] = useState();\r\n\r\n \/\/ Load the initial settings when the component mounts.\r\n useEffect(() => {\r\n apiFetch({ path: '\/wp\/v2\/settings' })\r\n .then((data) => {\r\n setValues({\r\n admin_footer_text: data?.admin_footer_text,\r\n });\r\n })\r\n .catch((error) => {\r\n setStatus('error');\r\n setStatusMessage('An error occurred. Please try to reload the page.');\r\n console.error(error);\r\n });\r\n }, []);\r\n\r\n \/\/ Handle the form submission.\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n const data = new FormData(e.target);\r\n\r\n apiFetch({\r\n path: '\/wp\/v2\/settings',\r\n method: 'POST',\r\n data: {\r\n admin_footer_text: data.get('admin_footer_text'),\r\n },\r\n })\r\n .then((data) => {\r\n setStatus('success');\r\n setStatusMessage('Settings saved.');\r\n setValues(data);\r\n })\r\n .catch((error) => {\r\n setStatus('error');\r\n setStatusMessage('An error occurred. Please try again.');\r\n console.error(error);\r\n });\r\n };\r\n\r\n if (!values) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\n {status && <Notice level={status} isDismissable onDismiss={() => setStatus(null)}>{statusMessage}<\/Notice>}\n <form method=\"POST\" onSubmit={handleSubmit}>\n <table className=\"form-table\" role=\"presentation\">\n <tbody>\n <tr>\n <th scope=\"row\">\n <label\n htmlFor=\"admin-footer-text\"\n id=\"admin-footer-text-label\"\n >\n Admin Footer Text\n <\/label>\n <\/th>\n <td>\n <TextField\n aria-labelledby=\"admin-footer-text-label\"\n id=\"admin-footer-text\"\n className=\"regular-text\"\n defaultValue={values?.admin_footer_text}\n name=\"admin_footer_text\"\n description=\"This text will be displayed in the admin footer.\"\n \/>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <Button type=\"submit\">Save Settings<\/Button>\n <\/form>\n <\/>\r\n );\r\n};\r\n\r\nexport default App; \r\n<\/pre>\nConclusion<\/h4>\nWe\u2019ve just created a simple custom settings page in WordPress using React components and the Kubrick UI library.<\/p>\n
Our Settings Page here is not perfect, and there are still many things we could improve. For example, we could add more components to make the page more accessible or add more features to make the page more user-friendly. We could also add more error handling or add more feedback to the user when the settings are saved. Since we\u2019re working with React, you can also make the page more interactive and visually appealing.<\/p>\n
I hope this tutorial helps you get started with creating a custom settings page in WordPress using React components. You can find the source code for this tutorial on GitHub<\/a>, and feel free to use it as a starting point for your own projects.<\/p>\n
The post How to Create a WordPress Settings Page with React<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
NPM Packages<\/h4>\nNext, we are going to install the @syntatis\/kubrick<\/code> package for our UI components, as well as a few other packages that it depends on and some that we need to build the page: @wordpress\/api-fetch<\/code>, @wordpress\/dom-ready<\/code>, react<\/code>, and react-dom<\/code>.<\/p>\n
\r\nnpm i @syntatis\/kubrick @wordpress\/api-fetch @wordpress\/dom-ready react react-dom\r\n<\/pre>\nAnd the @wordpress\/scripts<\/code> package as a development dependency, to allow us to compile the source files easily.<\/p>\n
\r\nnpm i @wordpress\/scripts -D\r\n<\/pre>\nRunning the Scripts<\/h4>\nWithin the package.json<\/code>, we add a couple of custom scripts, as follows:<\/p>\n
\r\n{\r\n \"scripts\": {\r\n \"build\": \"wp-scripts build\",\r\n \"start\": \"wp-scripts start\"\r\n }\r\n}\r\n<\/pre>\nThe build<\/code> script will allow us to compile the files within the src<\/code> directory into files that we will load on the Settings Page. During development, we are going to run the start<\/code> script.<\/p>\n
\r\nnpm run start\r\n<\/pre>\nAfter running the script, you should find the compiled files in the build<\/code> directory:<\/p>\n
\r\n.\r\n|-- index.asset.php\r\n|-- index.css\r\n|-- index.js\r\n<\/pre>\nCreate the Settings Page<\/h4>\nThere are several steps we are going to do and tie together to create the Settings Page.<\/p>\n
First, we are going to update our settings-page.php<\/code> file to register our settings page in WordPress, and register the settings and the options for the page.<\/p>\n
\r\nadd_action('admin_menu', 'add_submenu');\r\n\r\nfunction add_submenu() {\r\n add_submenu_page( \r\n 'options-general.php', \/\/ Parent slug.\r\n 'Kubrick Settings',\r\n 'Kubrick',\r\n 'manage_options',\r\n 'kubrick-setting',\r\n function () { \r\n ?>\n <div class=\"wrap\">\n <h1><?php echo esc_html(get_admin_page_title()); ?><\/h1>\n <div id=\"kubrick-settings\"><\/div>\n <noscript>\n <p>\n <?php esc_html_e('This settings page requires JavaScript to be enabled in your browser. Please enable JavaScript and reload the page.', 'settings-page-example'); ?>\n <\/p>\n <\/noscript>\n <\/div>\n <?php\r\n },\r\n );\r\n}\r\n\r\nfunction register_settings() {\r\n register_setting( 'kubrick_option_group', 'admin_footer_text', [\r\n 'type' => 'string', \r\n 'sanitize_callback' => 'sanitize_text_field',\r\n 'default' => 'footer text',\r\n 'show_in_rest' => true,\r\n ] ); \r\n}\r\n\r\nadd_action('admin_init', 'register_settings');\r\nadd_action('rest_api_init', 'register_settings');\r\n<\/pre>\nHere, we are adding a submenu page under the Settings<\/strong> menu in WordPress Admin. We also register the settings and options for the page. The register_setting<\/code> function is used to register the setting, and the show_in_rest<\/code> parameter is set to true<\/code>, which is important to make the setting and the option available in the WordPress \/wp\/v2\/settings<\/code> REST API.<\/p>\n
The next thing we are going to do is enqueue the stylesheet and JavaScript files that we have compiled in the build<\/code> directory. We are going to do this by adding an action hook to the admin_enqueue_scripts<\/code> action.<\/p>\n
\r\nadd_action('admin_enqueue_scripts', function () {\r\n $assets = include plugin_dir_path(__FILE__) . 'build\/index.asset.php';\r\n\r\n wp_enqueue_script(\r\n 'kubrick-setting', \r\n plugin_dir_url(__FILE__) . 'build\/index.js',\r\n $assets['dependencies'], \r\n $assets['version'],\r\n true\r\n );\r\n\r\n wp_enqueue_style(\r\n 'kubrick-setting', \r\n plugin_dir_url(__FILE__) . 'build\/index.css',\r\n [], \r\n $assets['version']\r\n );\r\n});\r\n<\/pre>\nIf you load WordPress Admin, you should now see the new submenu under Settings<\/strong>. On the page of this submenu, we render a div<\/code> with the ID root<\/code> where we are going to render our React application.<\/p>\n
<\/figure>\nAt this point, there\u2019s nothing to see on the page just yet. We will need to create a React component and render it on the page.<\/p>\n
Creating a React component<\/h5>\n
To create the React application, we first add the App function component in our App.js<\/code> file. We also import the index.css<\/code> from the @syntatis\/kubrick<\/code> package within this file to apply the basic styles to some of the components.<\/p>\n
\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n \r\nexport const App = () => {\r\n return <p>Hello World from App<\/p>;\r\n};\r\n<\/pre>\nIn the index.js<\/code>, we load and render our App<\/code> component with React.<\/p>\n
\r\nimport domReady from '@wordpress\/dom-ready';\r\nimport { createRoot } from 'react-dom\/client';\r\nimport { App } from '.\/App';\r\n\r\ndomReady( () => {\r\n const container = document.querySelector( '#root' );\r\n if ( container ) {\r\n createRoot( container ).render( <App \/> );\r\n }\r\n} );\r\n<\/pre>\n <\/figure>\nUsing the UI components<\/h5>\n
In this example, we\u2019d like to add a text input on the Settings Page which will allow the user to set the text that will be displayed in the admin footer.<\/p>\n
Kubrick UI currently offers around 18 components. To create the example mentioned, we can use the TextField<\/a><\/code> component to create an input field for the \u201cAdmin Footer Text\u201d<\/strong> setting, allowing users to modify the text displayed in the WordPress admin footer. The Button component is used to submit the form and save the settings. We also use the Notice<\/a><\/code> component to show feedback to the user, such as when the settings are successfully saved or if an error occurs during the process. The code fetches the current settings on page load and updates them via an API call when the form is submitted.<\/p>\n
\r\nimport { useEffect, useState } from 'react';\r\nimport apiFetch from '@wordpress\/api-fetch';\r\nimport { Button, TextField, Notice } from '@syntatis\/kubrick';\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n\r\nexport const App = () => {\r\n const [status, setStatus] = useState(null);\r\n const [statusMessage, setStatusMessage] = useState(null);\r\n const [values, setValues] = useState();\r\n\r\n \/\/ Load the initial settings when the component mounts.\r\n useEffect(() => {\r\n apiFetch({ path: '\/wp\/v2\/settings' })\r\n .then((data) => {\r\n setValues({\r\n admin_footer_text: data?.admin_footer_text,\r\n });\r\n })\r\n .catch((error) => {\r\n setStatus('error');\r\n setStatusMessage('An error occurred. Please try to reload the page.');\r\n console.error(error);\r\n });\r\n }, []);\r\n\r\n \/\/ Handle the form submission.\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n const data = new FormData(e.target);\r\n\r\n apiFetch({\r\n path: '\/wp\/v2\/settings',\r\n method: 'POST',\r\n data: {\r\n admin_footer_text: data.get('admin_footer_text'),\r\n },\r\n })\r\n .then((data) => {\r\n setStatus('success');\r\n setStatusMessage('Settings saved.');\r\n setValues(data);\r\n })\r\n .catch((error) => {\r\n setStatus('error');\r\n setStatusMessage('An error occurred. Please try again.');\r\n console.error(error);\r\n });\r\n };\r\n\r\n if (!values) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\n {status && <Notice level={status} isDismissable onDismiss={() => setStatus(null)}>{statusMessage}<\/Notice>}\n <form method=\"POST\" onSubmit={handleSubmit}>\n <table className=\"form-table\" role=\"presentation\">\n <tbody>\n <tr>\n <th scope=\"row\">\n <label\n htmlFor=\"admin-footer-text\"\n id=\"admin-footer-text-label\"\n >\n Admin Footer Text\n <\/label>\n <\/th>\n <td>\n <TextField\n aria-labelledby=\"admin-footer-text-label\"\n id=\"admin-footer-text\"\n className=\"regular-text\"\n defaultValue={values?.admin_footer_text}\n name=\"admin_footer_text\"\n description=\"This text will be displayed in the admin footer.\"\n \/>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <Button type=\"submit\">Save Settings<\/Button>\n <\/form>\n <\/>\r\n );\r\n};\r\n\r\nexport default App; \r\n<\/pre>\nConclusion<\/h4>\nWe\u2019ve just created a simple custom settings page in WordPress using React components and the Kubrick UI library.<\/p>\n
Our Settings Page here is not perfect, and there are still many things we could improve. For example, we could add more components to make the page more accessible or add more features to make the page more user-friendly. We could also add more error handling or add more feedback to the user when the settings are saved. Since we\u2019re working with React, you can also make the page more interactive and visually appealing.<\/p>\n
I hope this tutorial helps you get started with creating a custom settings page in WordPress using React components. You can find the source code for this tutorial on GitHub<\/a>, and feel free to use it as a starting point for your own projects.<\/p>\n
The post How to Create a WordPress Settings Page with React<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"