{"id":2547,"date":"2024-10-21T13:00:56","date_gmt":"2024-10-21T13:00:56","guid":{"rendered":"http:\/\/suimy.me\/?p=2547"},"modified":"2024-10-23T17:08:00","modified_gmt":"2024-10-23T17:08:00","slug":"how-to-create-a-wordpress-settings-page-with-react","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/10\/21\/how-to-create-a-wordpress-settings-page-with-react\/","title":{"rendered":"How to Create a WordPress Settings Page with React"},"content":{"rendered":"<p>While building some plugins, I figured creating <strong>dynamic applications in WordPress Admin<\/strong> is much easier with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/react.dev\/\">React<\/a> components compared to using PHP and jQuery like back in the old days. However, integrating React components with WordPress Admin can be a bit challenging, especially when it comes to styling and accessibility. This led me to create <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kubrick.syntatis.com\">Kubrick UI<\/a>.<\/p>\n<p>Kubrick UI is a React-based library offering pre-built, customizable components that seamlessly integrate with the WordPress admin area. It improves both visual consistency and accessibility, making it easier for you to create clean, dynamic interfaces in WordPress Admin, such as creating a <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.wordpress.org\/plugins\/settings\/custom-settings-page\/\">Custom Settings Pages<\/a><\/strong>.<\/p>\n<p>Before we go further, I\u2019d assume that you\u2019re already familiar with how WordPress plugins work. You\u2019re also familiar with JavaScript, React, and how to install Node.js packages with NPM as we won\u2019t dig into these fundamentals in this tutorial. Otherwise, check out our articles below to help you get up to speed.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-wordpress-plugin-development\/\">Beginner\u2019s Guide to WordPress Plugin Development<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-react-js\/\">Getting Started with React.js<\/a><\/li>\n<\/ul>\n<p>If you\u2019re ready, we can now get started with our tutorial on how to create our WordPress Settings page.<\/p>\n<h4>Project Structure<\/h4>\n<p>First, we are going to create and organize the files required:<\/p>\n<pre class=\"terminal\">\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>\n<p>We have the <code>src<\/code> directory containing the source files, stylesheet, and JavaScript files, which will contain the app components and the styles. We also created <code>settings-page.php<\/code>, which contains the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.wordpress.org\/plugins\/plugin-basics\/header-requirements\/\">WordPress plugin header<\/a> so that we can load our code as a plugin in WordPress. Lastly, we have <code>package.json<\/code> so we can install some NPM packages.<\/p>\n<h4>NPM Packages<\/h4>\n<p>Next, we are going to install the <code>@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: <code>@wordpress\/api-fetch<\/code>, <code>@wordpress\/dom-ready<\/code>, <code>react<\/code>, and <code>react-dom<\/code>.<\/p>\n<pre class=\"terminal\">\r\nnpm i @syntatis\/kubrick @wordpress\/api-fetch @wordpress\/dom-ready react react-dom\r\n<\/pre>\n<p>And the <code>@wordpress\/scripts<\/code> package as a development dependency, to allow us to compile the source files easily.<\/p>\n<pre class=\"terminal\">\r\nnpm i @wordpress\/scripts -D\r\n<\/pre>\n<h4>Running the Scripts<\/h4>\n<p>Within the <code>package.json<\/code>, we add a couple of custom scripts, as follows:<\/p>\n<pre class=\"terminal\">\r\n{\r\n    \"scripts\": {\r\n        \"build\": \"wp-scripts build\",\r\n        \"start\": \"wp-scripts start\"\r\n    }\r\n}\r\n<\/pre>\n<p>The <code>build<\/code> script will allow us to compile the files within the <code>src<\/code> directory into files that we will load on the Settings Page. During development, we are going to run the <code>start<\/code> script.<\/p>\n<pre class=\"terminal\">\r\nnpm run start\r\n<\/pre>\n<p>After running the script, you should find the compiled files in the <code>build<\/code> directory:<\/p>\n<pre class=\"terminal\">\r\n.\r\n|-- index.asset.php\r\n|-- index.css\r\n|-- index.js\r\n<\/pre>\n<h4>Create the Settings Page<\/h4>\n<p>There are several steps we are going to do and tie together to create the Settings Page.<\/p>\n<p>First, we are going to update our <code>settings-page.php<\/code> file to register our settings page in WordPress, and register the settings and the options for the page.<\/p>\n<pre class=\"terminal\">\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            ?&gt;\n            <div class=\"wrap\">\n                <h1><\/h1>\n                <div id=\"kubrick-settings\"><\/div>\n                \n                    <p>\n                        \n                    <\/p>\n                \n            <\/div>\n             'string', \r\n        'sanitize_callback' =&gt; 'sanitize_text_field',\r\n        'default' =&gt; 'footer text',\r\n        'show_in_rest' =&gt; 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>\n<p>Here, we are adding a submenu page under the <strong>Settings<\/strong> menu in WordPress Admin. We also register the settings and options for the page. The <code>register_setting<\/code> function is used to register the setting, and the <code>show_in_rest<\/code> parameter is set to <code>true<\/code>, which is important to make the setting and the option available in the WordPress <code>\/wp\/v2\/settings<\/code> REST API.<\/p>\n<p>The next thing we are going to do is enqueue the stylesheet and JavaScript files that we have compiled in the <code>build<\/code> directory. We are going to do this by adding an action hook to the <code>admin_enqueue_scripts<\/code> action.<\/p>\n<pre class=\"terminal\">\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>\n<p>If you load WordPress Admin, you should now see the new submenu under <strong>Settings<\/strong>. On the page of this submenu, we render a <code>div<\/code> with the ID <code>root<\/code> where we are going to render our React application.<\/p>\n<figure data-lazy=\"\"><span class=\"img-ratio-placeholder\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"WordPress Settings Page with React.js\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2024\/10\/wp-admin-settings-screenshot.jpg\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"WordPress Settings Page with React.js\" width=\"750\" height=\"480\" data-lazy-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2024\/10\/wp-admin-settings-screenshot.jpg\" class=\"lazyload\" data-src=\"image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"><span class=\"img-ratio-placeholder__fill\" style=\"padding-bottom:64%;max-width:750px\"><\/span><\/span> <\/figure>\n<p>At 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<h5>Creating a React component<\/h5>\n<p>To create the React application, we first add the App function component in our <code>App.js<\/code> file. We also import the <code>index.css<\/code> from the <code>@syntatis\/kubrick<\/code> package within this file to apply the basic styles to some of the components.<\/p>\n<pre class=\"terminal\">\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n    \r\nexport const App = () =&gt; {\r\n    return <p>Hello World from App<\/p>;\r\n};\r\n<\/pre>\n<p>In the <code>index.js<\/code>, we load and render our <code>App<\/code> component with React.<\/p>\n<pre class=\"terminal\">\r\nimport domReady from '@wordpress\/dom-ready';\r\nimport { createRoot } from 'react-dom\/client';\r\nimport { App } from '.\/App';\r\n\r\ndomReady( () =&gt; {\r\n    const container = document.querySelector( '#root' );\r\n    if ( container ) {\r\n        createRoot( container ).render(  );\r\n    }\r\n} );\r\n<\/pre>\n<figure data-lazy=\"\"><span class=\"img-ratio-placeholder\"><img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" class=\"lazyload\" data-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2024\/10\/kubrick-settings-page.jpg\"><img loading=\"lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"750\" height=\"480\" data-lazy-src=\"http:\/\/suimy.me\/wp-content\/uploads\/2024\/10\/kubrick-settings-page.jpg\" class=\"lazyload\" data-src=\"image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"><span class=\"img-ratio-placeholder__fill\" style=\"padding-bottom:64%;max-width:750px\"><\/span><\/span> <\/figure>\n<h5>Using the UI components<\/h5>\n<p>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<p>Kubrick UI currently offers around 18 components. To create the example mentioned, we can use the <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kubrick.syntatis.com\/components\/text-field\/\">TextField<\/a><\/code> component to create an input field for the <strong>\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 <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/kubrick.syntatis.com\/components\/notice\/\">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<pre class=\"terminal\">\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 = () =&gt; {\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(() =&gt; {\r\n        apiFetch({ path: '\/wp\/v2\/settings' })\r\n            .then((data) =&gt; {\r\n                setValues({\r\n                    admin_footer_text: data?.admin_footer_text,\r\n                });\r\n            })\r\n            .catch((error) =&gt; {\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) =&gt; {\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) =&gt; {\r\n                setStatus('success');\r\n                setStatusMessage('Settings saved.');\r\n                setValues(data);\r\n            })\r\n            .catch((error) =&gt; {\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 &amp;&amp;  setStatus(null)}&gt;{statusMessage}}\n            \n                <table role=\"presentation\">\n                    <tbody>\n                        <tr>\n                            <th scope=\"row\">\n                                <label id=\"admin-footer-text-label\">\n                                    Admin Footer Text\n                                <\/label>\n                            <\/th>\n                            <td>\n                                \n                            <\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n                <Button type=\"submit\">Save Settings<\/Button>\n            \n        \r\n    );\r\n};\r\n\r\nexport default App;    \r\n<\/pre>\n<h4>Conclusion<\/h4>\n<p>We\u2019ve just created a simple custom settings page in WordPress using React components and the Kubrick UI library.<\/p>\n<p>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<p>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 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/wp-settings-page-react\">GitHub<\/a>, and feel free to use it as a starting point for your own projects.<\/p>\n<p>The post <a href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/\">How to Create a WordPress Settings Page with React<\/a> appeared first on <a href=\"https:\/\/www.hongkiat.com\/blog\">Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2549,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2547"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=2547"}],"version-history":[{"count":3,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2547\/revisions"}],"predecessor-version":[{"id":2552,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/2547\/revisions\/2552"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/2549"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=2547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=2547"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=2547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}