{"id":36353,"date":"2026-01-31T14:38:34","date_gmt":"2026-01-31T07:38:34","guid":{"rendered":"https:\/\/dps.media\/huong-dan-cai-dat-va-su-dung-skill-wordpress-playground-wp-playground-cong-cu-ai-agent-dinh-cao\/"},"modified":"2026-01-31T16:14:10","modified_gmt":"2026-01-31T09:14:10","slug":"huong-dan-cai-dat-va-su-dung-skill-wordpress-playground-wp-playground-cong-cu-ai-agent-dinh-cao","status":"publish","type":"post","link":"https:\/\/dps.media\/en\/huong-dan-cai-dat-va-su-dung-skill-wordpress-playground-wp-playground-cong-cu-ai-agent-dinh-cao\/","title":{"rendered":"Installation and Usage Guide for WordPress Playground Skill (wp-playground) \u2013 The Ultimate AI Agent Tool"},"content":{"rendered":"<p class=\"wp-block-paragraph\">In the era of modern web development, setting up a local WordPress environment is often associated with familiar names such as XAMPP, WAMP, LocalWP, or Docker. However, all of these solutions share one weakness: they require software installation, database configuration, port handling, and consume significant computer resources.<\/p><p class=\"wp-block-paragraph\">What if I told you that you could run a \u201cspotlessly clean\u201d WordPress instance in just 3 seconds, right in your browser, without installing anything, and most importantly... your AI Agent could automatically use it to test code? Welcome to <a href=\"https:\/\/github.com\/Automattic\/agent-skills\" rel=\"nofollow noopener\" target=\"_blank\"><strong>WordPress Playground<\/strong> and the skill <code data-no-translation=\"\">wp-playground<\/code>.<\/a><\/p><p class=\"wp-block-paragraph\">In this article, we will take a deep dive into understanding, installing, and harnessing the power of this amazing tool.<\/p><h2 class=\"wp-block-heading\">What Is WordPress Playground and Why Is It So \u201cHot\u201d?<\/h2><h3 class=\"wp-block-heading\">WebAssembly (Wasm) Technology<\/h3><p class=\"wp-block-paragraph\">WordPress Playground is neither a hosting service nor a traditional server emulation software. It uses <strong>WebAssembly (Wasm)<\/strong> to run PHP, MySQL (SQLite), and a Web Server directly in your browser (or in a Node.js environment).<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/dps.media\/wp-content\/uploads\/mcp\/2026\/01\/wasm_architecture_1769849436860.jpg\" alt=\"WebAssembly Architecture Diagram\" title=\"\"><\/figure><p class=\"wp-block-paragraph\"><\/p><p class=\"wp-block-paragraph\">This means:<\/p><ul class=\"wp-block-list\">\n<li><strong>No Server:<\/strong> Your computer does not need to run Apache or Nginx.<\/li>\n\n\n\n<li><strong>No Database:<\/strong> There is no need to install MySQL or MariaDB. All data is stored in memory or in an SQLite file.<\/li>\n\n\n\n<li><strong>Complete Isolation (Sandbox):<\/strong> Every time you turn it off and back on, everything disappears (unless you configure persistence). This is absolutely fantastic for testing.<\/li>\n<\/ul><h3 class=\"wp-block-heading\">Skill <code data-no-translation=\"\">wp-playground<\/code> for AI Agent<\/h3><p class=\"wp-block-paragraph\">For developers who use AI (such as Claude, ChatGPT, or Gemini) to write code, <code data-no-translation=\"\"><a href=\"https:\/\/github.com\/Automattic\/agent-skills\" rel=\"nofollow noopener\" target=\"_blank\">wp-playground<\/a><\/code> it acts as the AI's \u201chands\u201d. Instead of AI simply giving you code and saying \u201cgive it a try\u201d, it can launch Playground itself, install the code, check whether it runs, and fix errors automatically if any occur.<\/p><h2 class=\"wp-block-heading\">Detailed Installation Guide<\/h2><p class=\"wp-block-paragraph\">To use this skill, you need a Node.js environment.<\/p><h3 class=\"wp-block-heading\">1. Prepare the Environment<\/h3><p class=\"wp-block-paragraph\">Make sure your computer has <strong>Node.js<\/strong> installed (version 20 or higher is recommended). You can check by opening a terminal and typing:<\/p><pre class=\"wp-block-code\" data-no-translation=\"\"><code data-no-translation=\"\">node -v\n<\/code><\/pre><p class=\"wp-block-paragraph\">If you do not have it, download it from the official website <a href=\"https:\/\/nodejs.org\/\" rel=\"dofollow noopener\" target=\"_blank\">nodejs.org<\/a>.<\/p><h3 class=\"wp-block-heading\">2. Install the Agent Skill Package<\/h3><p class=\"wp-block-paragraph\">Skill <code data-no-translation=\"\">wp-playground<\/code> is part of the WordPress community's skill collection. To install it, open a terminal in your project directory and run the command:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/dps.media\/wp-content\/uploads\/mcp\/2026\/01\/terminal_install_1769849453963.jpg\" alt=\"Installation Command Terminal\" title=\"\"><\/figure><p class=\"wp-block-paragraph\"><\/p><pre class=\"wp-block-code\" data-no-translation=\"\"><code data-no-translation=\"\">npx openskills install WordPress\/agent-skills\n<\/code><\/pre><p class=\"wp-block-paragraph\">This command will download the skills into the directory <code data-no-translation=\"\">.claude\/skills<\/code> (or a similar location depending on your configuration).<\/p><h3 class=\"wp-block-heading\">3. Synchronize (Sync)<\/h3><p class=\"wp-block-paragraph\">After downloading, you need to let your AI Agent know that this skill is available:<\/p><pre class=\"wp-block-code\" data-no-translation=\"\"><code data-no-translation=\"\">npx openskills sync\n<\/code><\/pre><p class=\"wp-block-paragraph\">That's it! Your AI Agent has now \u201clearned\u201d a new skill.<\/p><h2 class=\"wp-block-heading\">How to Use WordPress Playground (Hands-on)<\/h2><p class=\"wp-block-paragraph\">You can run Playground directly from your terminal. There are two main methods depending on the operating system you are using.<\/p><h3 class=\"wp-block-heading\">Method 1: Use the CLI Command (Recommended for Windows)<\/h3><p class=\"wp-block-paragraph\">If you are using Windows (PowerShell or CMD), the simplest way is to call the Playground CLI directly.<\/p><p class=\"wp-block-paragraph\">Imagine you are in the project directory (<code data-no-translation=\"\">e:GITHUBwordpress<\/code>) and want to run a test. Execute the command:<\/p><pre class=\"wp-block-code\" data-no-translation=\"\"><code data-no-translation=\"\">npx @wp-playground\/cli server --login --auto-mount .\/wp-content\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>Parameter explanations:<\/strong><\/p><ul class=\"wp-block-list\">\n<li><code data-no-translation=\"\">npx @wp-playground\/cli server<\/code>: Calls the CLI to start the server.<\/li>\n\n\n\n<li><code data-no-translation=\"\">--login<\/code>: Automatically logs you into the Admin Dashboard with the highest privileges. You will not need to enter a username\/password manually.<\/li>\n\n\n\n<li><code data-no-translation=\"\">--auto-mount .\/wp-content<\/code>: This is the most important parameter. It tells Playground: \u201cTake my <code data-no-translation=\"\">.\/wp-content<\/code> current directory and mount it to the directory <code data-no-translation=\"\">wp-content<\/code> of the virtual WordPress installation\u201d. As a result, all the plugins and themes you are developing will appear in WordPress.<\/li>\n<\/ul><h3 class=\"wp-block-heading\">Method 2: Use a Shell Script (Linux \/ macOS \/ WSL)<\/h3><p class=\"wp-block-paragraph\">If you use Mac or WSL (Windows Subsystem for Linux), the skill provides a more convenient script:<\/p><pre class=\"wp-block-code\" data-no-translation=\"\"><code data-no-translation=\"\">.\/scripts\/start-server.sh --login --auto-mount .\/wp-content\n<\/code><\/pre><h3 class=\"wp-block-heading\">Default Login Information<\/h3><p class=\"wp-block-paragraph\">If the auto-login feature does not work, or you want to log in manually in another browser, use the following information:<\/p><ul class=\"wp-block-list\">\n<li><strong>Username:<\/strong> <code data-no-translation=\"\">admin<\/code><\/li>\n\n\n\n<li><strong>Password:<\/strong> <code data-no-translation=\"\">password<\/code><\/li>\n<\/ul><h2 class=\"wp-block-heading\">Example: Build a \u201cBook Management\u201d Plugin in 5 Minutes<\/h2><p class=\"wp-block-paragraph\">To see the power of this workflow clearly, let's try creating a new feature.<\/p><p class=\"wp-block-paragraph\"><strong>Step 1: Create the Directory Structure<\/strong><br>Create the directory <code data-no-translation=\"\">wp-content\/plugins\/test-plugin<\/code> and file <code data-no-translation=\"\">test-plugin.php<\/code>.<\/p><p class=\"wp-block-paragraph\"><strong>Step 2: Write the Code (or Ask AI to Write It)<\/strong><br>We will register a Custom Post Type called \u201cBook\u201d:<\/p><pre class=\"wp-block-code\" data-no-translation=\"\"><code data-no-translation=\"\"><?php\n\/*\nPlugin Name: My First Book Plugin\nDescription: Qu\u1ea3n l\u00fd s\u00e1ch \u0111\u01a1n gi\u1ea3n.\n*\/\n\nadd_action('init', function() {\n    register_post_type('book', [\n        'labels' => ['name' => 'Books', 'singular_name' => 'Book'],\n        'public' => true,\n        'has_archive' => true,\n        'menu_icon' => 'dashicons-book',\n        'supports' => ['title', 'editor', 'thumbnail'],\n    ]);\n});\n<\/code><\/pre><p class=\"wp-block-paragraph\"><strong>Step 3: Run a Test<\/strong><br>Run the CLI command above. A browser will open.<br>Go to the <strong>Plugins<\/strong>, and activate \u201cMy First Book Plugin\u201d.<br>Immediately, you will see the <strong>Books<\/strong> menu appear on the left.<\/p><p class=\"wp-block-paragraph\"><strong>Step 4: Fix Errors and Update<\/strong><br>Want to change the book icon to something else? Modify the line <code data-no-translation=\"\">'menu_icon' => 'dashicons-book'<\/code> to <code data-no-translation=\"\">'menu_icon' => 'dashicons-media-document'<\/code>.<br>Save the file.<br>Return to the browser and press <strong>F5<\/strong>. The icon has changed! No need to restart the server or deploy.<\/p><h2 class=\"wp-block-heading\">Comparison with Other Solutions<\/h2><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/dps.media\/wp-content\/uploads\/mcp\/2026\/01\/wp_playground_vs_traditional_comparison_1769850469643.jpg\" alt=\"WP Playground vs Traditional Development\" title=\"\"><\/figure><p class=\"wp-block-paragraph\"><\/p><h2 class=\"wp-block-heading\">Why Is This the Future of WordPress Development?<\/h2><p class=\"wp-block-paragraph\">WebAssembly technology is changing the way we think about software. With <code data-no-translation=\"\">wp-playground<\/code>, the barrier to getting started with WordPress development is almost zero.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/dps.media\/wp-content\/uploads\/mcp\/2026\/01\/books_menu_ui_1769849470103.jpg\" alt=\"Demo Plugin Books Menu\" title=\"\"><\/figure><p class=\"wp-block-paragraph\"><\/p><ol class=\"wp-block-list\">\n<li><strong>For Education:<\/strong> Instructors can send a link, and students can click it to get an instant hands-on environment, without spending an entire session installing XAMPP.<\/li>\n\n\n\n<li><strong>For Client Demos:<\/strong> You can send a working plugin demo that runs directly in the browser, without the client needing a server.<\/li>\n\n\n\n<li><strong>CI\/CD Testing:<\/strong> Integrate it into GitHub Actions to automatically test code whenever there is a new commit, extremely quickly.<\/li>\n<\/ol><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Read More:<\/strong> To better understand how AI Agents interact with WordPress, don't miss the article <a href=\"https:\/\/dps.media\/en\/wp-mcp-connect-all-in-one-solution-connecting-ai-agents-with-wordpress\/\">WP MCP Connect: \u201cAll-in-One\u201d Solution Connecting AI Agents with WordPress<\/a>.<\/p>\n<\/blockquote><h2 class=\"wp-block-heading\">Conclusion<\/h2><p class=\"wp-block-paragraph\">Skill <code data-no-translation=\"\">wp-playground<\/code> it is not just a new tool, it is a new mindset in the development workflow. It makes WordPress development much lighter, more flexible, and much more enjoyable. If you haven't tried it yet, install it today and experience the difference. Surely you (and your AI Agent too) will love it!<\/p>","protected":false},"excerpt":{"rendered":"<p>In the modern web development era, setting up a local WordPress environment is usually associated with familiar names like XAMPP, WAMP, LocalWP, or Docker. However, all of these solutions share a common weakness: they require software installation and configuration [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,1209,1204],"tags":[],"class_list":["post-36353","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-ai-marketing","category-wordpress-marketing"],"acf":[],"rankmath_keywords":{"primary":"","secondary":[""]},"yoast_keywords":{"primary":"","secondary":[]},"yoast_focuskw":"","rankmath_focuskw":"","seo_keywords":{"primary":"","secondary":[""]},"_links":{"self":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/36353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/comments?post=36353"}],"version-history":[{"count":0,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/36353\/revisions"}],"wp:attachment":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/media?parent=36353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/categories?post=36353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/tags?post=36353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}