{"id":72962,"date":"2024-10-21T21:00:56","date_gmt":"2024-10-21T13:00:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=72962"},"modified":"2024-10-29T18:57:31","modified_gmt":"2024-10-29T10:57:31","slug":"wordpress-settings-page-with-react","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/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<h2>Project Structure<\/h2>\n<p>First, we are going to create and organize the files required:<\/p>\n<pre>\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<h2>NPM Packages<\/h2>\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>\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>\r\nnpm i @wordpress\/scripts -D\r\n<\/pre>\n<h2>Running the Scripts<\/h2>\n<p>Within the <code>package.json<\/code>, we add a couple of custom scripts, as follows:<\/p>\n<pre>\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>\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>\r\n.\r\n|-- index.asset.php\r\n|-- index.css\r\n|-- index.js\r\n<\/pre>\n<h2>Create the Settings Page<\/h2>\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>\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            &lt;div class=\"wrap\"&gt;\n                &lt;h1&gt;&lt;?php echo esc_html(get_admin_page_title()); ?&gt;&lt;\/h1&gt;\n                &lt;div id=\"kubrick-settings\"&gt;&lt;\/div&gt;\n                &lt;noscript&gt;\n                    &lt;p&gt;\n                        &lt;?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'); ?&gt;\n                    &lt;\/p&gt;\n                &lt;\/noscript&gt;\n            &lt;\/div&gt;\n            &lt;?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>\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>\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><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg\" alt=\"WordPress Settings Page with React.js\" width=\"750\" height=\"480\"><\/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<h3>Creating a React component<\/h3>\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>\r\nimport '@syntatis\/kubrick\/dist\/index.css';\r\n    \r\nexport const App = () => {\r\n    return &lt;p&gt;Hello World from App&lt;\/p&gt;;\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>\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( &lt;App \/&gt; );\r\n    }\r\n} );\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/kubrick-settings-page.jpg\" width=\"750\" height=\"480\"><\/figure>\n<h3>Using the UI components<\/h3>\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>\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        &lt;&gt;\n            {status && &lt;Notice level={status} isDismissable onDismiss={() =&gt; setStatus(null)}&gt;{statusMessage}&lt;\/Notice&gt;}\n            &lt;form method=\"POST\" onSubmit={handleSubmit}&gt;\n                &lt;table className=\"form-table\" role=\"presentation\"&gt;\n                    &lt;tbody&gt;\n                        &lt;tr&gt;\n                            &lt;th scope=\"row\"&gt;\n                                &lt;label\n                                    htmlFor=\"admin-footer-text\"\n                                    id=\"admin-footer-text-label\"\n                                &gt;\n                                    Admin Footer Text\n                                &lt;\/label&gt;\n                            &lt;\/th&gt;\n                            &lt;td&gt;\n                                &lt;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                                \/&gt;\n                            &lt;\/td&gt;\n                        &lt;\/tr&gt;\n                    &lt;\/tbody&gt;\n                &lt;\/table&gt;\n                &lt;Button type=\"submit\"&gt;Save Settings&lt;\/Button&gt;\n            &lt;\/form&gt;\n        &lt;\/&gt;\r\n    );\r\n};\r\n\r\nexport default App;    \r\n<\/pre>\n<h2>Conclusion<\/h2>\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>","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 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&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a WordPress Settings Page with React - Hongkiat<\/title>\n<meta name=\"description\" content=\"While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to using PHP and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a WordPress Settings Page with React\" \/>\n<meta property=\"og:description\" content=\"While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to using PHP and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-21T13:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-29T10:57:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Create a WordPress Settings Page with React\",\"datePublished\":\"2024-10-21T13:00:56+00:00\",\"dateModified\":\"2024-10-29T10:57:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/\"},\"wordCount\":896,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-settings-page-with-react\\\/wp-admin-settings-screenshot.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/\",\"name\":\"How to Create a WordPress Settings Page with React - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-settings-page-with-react\\\/wp-admin-settings-screenshot.jpg\",\"datePublished\":\"2024-10-21T13:00:56+00:00\",\"dateModified\":\"2024-10-29T10:57:31+00:00\",\"description\":\"While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to using PHP and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-settings-page-with-react\\\/wp-admin-settings-screenshot.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/wordpress-settings-page-with-react\\\/wp-admin-settings-screenshot.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wordpress-settings-page-with-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a WordPress Settings Page with React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a WordPress Settings Page with React - Hongkiat","description":"While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to using PHP and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a WordPress Settings Page with React","og_description":"While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to using PHP and","og_url":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2024-10-21T13:00:56+00:00","article_modified_time":"2024-10-29T10:57:31+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Create a WordPress Settings Page with React","datePublished":"2024-10-21T13:00:56+00:00","dateModified":"2024-10-29T10:57:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/"},"wordCount":896,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg","articleSection":["WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/","url":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/","name":"How to Create a WordPress Settings Page with React - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg","datePublished":"2024-10-21T13:00:56+00:00","dateModified":"2024-10-29T10:57:31+00:00","description":"While building some plugins, I figured creating dynamic applications in WordPress Admin is much easier with React components compared to using PHP and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/wordpress-settings-page-with-react\/wp-admin-settings-screenshot.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/wordpress-settings-page-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a WordPress Settings Page with React"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-iYO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/72962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=72962"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/72962\/revisions"}],"predecessor-version":[{"id":73003,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/72962\/revisions\/73003"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=72962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=72962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=72962"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=72962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}