[{"data":1,"prerenderedAt":390},["ShallowReactive",2],{"blog-tag-wordpress":3,"blog-tag-posts-wordpress":32},{"id":4,"count":5,"description":6,"link":7,"name":8,"slug":8,"taxonomy":9,"meta":10,"_links":11},18,6,"","https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fwordpress\u002F","wordpress","post_tag",[],{"self":12,"collection":18,"about":21,"wp:post_type":24,"curies":27},[13],{"href":14,"targetHints":15},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F18",{"allow":16},[17],"GET",[19],{"href":20},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[22],{"href":23},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[25],{"href":26},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=18",[28],{"name":29,"href":30,"templated":31},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",true,[33,111,176,231,287,340],{"id":34,"date":35,"date_gmt":35,"guid":36,"modified":38,"modified_gmt":38,"slug":39,"status":40,"type":41,"link":42,"title":43,"content":45,"excerpt":48,"author":50,"featured_media":51,"comment_status":52,"ping_status":52,"sticky":47,"template":6,"format":53,"meta":54,"categories":55,"tags":56,"class_list":58,"post_image_original":68,"devto_meta":69,"_links":71},77,"2026-05-14T12:35:54",{"rendered":37},"https:\u002F\u002Flab.aiarnob.com\u002F?p=77","2026-05-17T10:09:48","how-to-set-up-an-existing-wordpress-vip-site-locally-on-macos","publish","post","https:\u002F\u002Flab.aiarnob.com\u002Fhow-to-set-up-an-existing-wordpress-vip-site-locally-on-macos\u002F",{"rendered":44},"How to Set Up an Existing WordPress VIP Site Locally on macOS",{"rendered":46,"protected":47},"\n\u003Ch1 class=\"wp-block-heading\">\u003C\u002Fh1>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">A quick guide to cloning a live WordPress VIP site to your MacBook for local development. Follow these commands in order.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 1: Install the Required Tools\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Install Docker Desktop and VIP-CLI:\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>brew install --cask docker\nnpm install -g @automattic\u002Fvip\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">After installing Docker, open it from your Applications folder so it starts running in the background.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Verify all tools are installed:\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip -v && node -v && npm -v && docker --version\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cblockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Please skip Step 2 & Step 3 if you are setting up an existing WordPress VIP site from a backup instead of cloning the WPVIP GitHub repository.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 2: Log In to VIP-CLI\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip logout   # in case of stale session\nvip login\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The \u003Ccode>logout\u003C\u002Fcode> command clears any old session. \u003Ccode>vip login\u003C\u002Fcode> opens a browser window to authenticate with your VIP account.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 3: Clone the Site Repository\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>cd ~\u002FSites\ngit clone git@github.com:wpcomvip\u002Fyour-site-name.git\ncd your-site-name\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Replace \u003Ccode>your-site-name\u003C\u002Fcode> with the actual repository name from your VIP application.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 4: Create the Local Environment\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env create --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">You can name –slug anything unique you want but follow the rules lowercase letters, numbers, and hyphens only. No spaces, no underscores, no special characters. Common conventions: \u003Ccode>wp-vip-test-site\u003C\u002Fcode>.\u003Cbr>\u003Cbr>A setup wizard will appear. Match production for PHP version, WordPress version, and multisite settings. When asked for the application code source, choose \u003Cstrong>Local folder\u003C\u002Fstrong> and provide the path to your cloned repo.\u003C\u002Fp>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Site title\u003C\u002Fstrong>: anything\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Multisite\u003C\u002Fstrong>: match production\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>PHP version\u003C\u002Fstrong>: match production\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>WordPress version\u003C\u002Fstrong>: match production\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Source for application code\u003C\u002Fstrong>: choose \u003Cstrong>Local folder\u003C\u002Fstrong> and give it the absolute path to your cloned repo (e.g. \u003Ccode>\u002FUsers\u002Fyou\u002FSites\u002Fyour-site-name\u003C\u002Fcode>)\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Source for mu-plugins\u003C\u002Fstrong>: \u003Ccode>auto\u003C\u002Fcode> (pulls VIP’s mu-plugins automatically)\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Source for VIP MU plugins\u003C\u002Fstrong>: \u003Ccode>auto\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 5: Start the Environment\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env start --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Once started, you’ll see the local site URL, login credentials, and an auto-login link. Save these for later.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 6: Import the Database\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env import sql \u002Fpath\u002Fto\u002Ffile.sql --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Replace \u003Ccode>\u002Fpath\u002Fto\u002Ffile.sql\u003C\u002Fcode> with the actual path to your SQL dump on your Mac.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 7: Import Media Files\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env import media \u002Fpath\u002Fto\u002Fwp-content\u002Fuploads --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Replace \u003Ccode>\u002Fpath\u002Fto\u002Fwp-content\u002Fuploads\u003C\u002Fcode> with the path to the uploads folder on your Mac. The folder should contain year-numbered subfolders (\u003Ccode>2023\u002F\u003C\u002Fcode>, \u003Ccode>2024\u002F\u003C\u002Fcode>, etc.).\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Done\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Your local copy of the VIP site is now running. Open the site URL shown after \u003Ccode>vip dev-env start\u003C\u002Fcode> and log in with the credentials provided.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Day-to-Day Useful Commands\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Once your environment is set up, these are the commands you’ll use most often.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode># List all your local environments\nvip dev-env list\n\n# Check status, URLs, and credentials\nvip dev-env info --slug=your-site\n\n# Start the environment\nvip dev-env start --slug=your-site\n\n# Stop the environment (frees up RAM and CPU)\nvip dev-env stop --slug=your-site\n\n# Run any WP-CLI command inside the container\nvip dev-env exec --slug=your-site -- wp plugin list\nvip dev-env exec --slug=your-site -- wp cache flush\nvip dev-env exec --slug=your-site -- wp user list\n\n# Create a new admin user\nvip dev-env exec --slug=your-site -- wp user create yourname you@example.com --role=administrator\n\n# Check site URL after import\nvip dev-env exec --slug=your-site -- wp option get siteurl\nvip dev-env exec --slug=your-site -- wp option get home\n\n# Search and replace URLs in the database\nvip dev-env exec --slug=your-site -- wp search-replace 'old-url' 'new-url' --skip-columns=guid\n\n# Delete all manually imported media files (host path - faster)\nrm -rf ~\u002F.local\u002Fshare\u002Fvip\u002Fdev-environment\u002Fyour-site\u002Fuploads\u002F*\n\n# Delete all manually imported media files (container path - alternative)\nvip dev-env exec --slug=your-site -- rm -rf \u002Fwp\u002Fwp-content\u002Fuploads\u002F*\n\n# Destroy the environment completely\nvip dev-env destroy --slug=your-site\n\n# Update tooling to the latest version\nnpm update -g @automattic\u002Fvip\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">For official documentation, visit \u003Ca href=\"https:\u002F\u002Fdocs.wpvip.com\u002Fvip-local-development-environment\u002F\">docs.wpvip.com\u002Fvip-local-development-environment\u003C\u002Fa>.\u003C\u002Fp>\n",false,{"rendered":49,"protected":47},"\u003Cp>A quick guide to cloning a live WordPress VIP site to your MacBook for local development. Follow these commands in order. Step 1: Install the Required Tools Install Docker Desktop and VIP-CLI: After installing Docker, open it from your Applications folder so it starts running in the background. Verify all tools are installed: Please skip […]\u003C\u002Fp>\n",1,79,"open","standard",{"footnotes":6},[50],[4,57],35,[59,41,60,61,62,63,64,65,66,67],"post-77","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-wordpress","tag-wpvip","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2026\u002F05\u002Fsetup-wordpress-vip-on-local.jpg",{"edited_at":70,"published_at":70,"reactions":70,"comments":70,"reading_time":70,"body_markdown":70},null,{"self":72,"collection":77,"about":80,"author":83,"replies":86,"version-history":89,"predecessor-version":93,"wp:featuredmedia":97,"wp:attachment":100,"wp:term":103,"curies":109},[73],{"href":74,"targetHints":75},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F77",{"allow":76},[17],[78],{"href":79},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[81],{"href":82},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[84],{"embeddable":31,"href":85},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[87],{"embeddable":31,"href":88},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=77",[90],{"count":91,"href":92},2,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F77\u002Frevisions",[94],{"id":95,"href":96},83,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F77\u002Frevisions\u002F83",[98],{"embeddable":31,"href":99},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F79",[101],{"href":102},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=77",[104,107],{"taxonomy":105,"embeddable":31,"href":106},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=77",{"taxonomy":9,"embeddable":31,"href":108},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=77",[110],{"name":29,"href":30,"templated":31},{"id":112,"date":113,"date_gmt":113,"guid":114,"modified":116,"modified_gmt":116,"slug":117,"status":40,"type":41,"link":115,"title":118,"content":120,"excerpt":122,"author":50,"featured_media":124,"comment_status":52,"ping_status":52,"sticky":31,"template":6,"format":53,"meta":125,"categories":126,"tags":127,"class_list":130,"post_image_original":134,"devto_meta":135,"_links":141},39,"2026-02-09T18:43:22",{"rendered":115},"https:\u002F\u002Flab.aiarnob.com\u002Fhow-wordpress-is-preparing-for-the-ai-era\u002F","2026-05-12T21:03:29","how-wordpress-is-preparing-for-the-ai-era",{"rendered":119},"How WordPress is Preparing for the AI Era",{"rendered":121,"protected":47},"\u003Cp>We know WordPress is powerful, because of its thousands of plugins, APIs & functions but they are scattered. As a human we understand this ecosystem because we read docs to know how they works, features etc. But AI doesn’t work on this way. Because its not possible to know all the available WordPress plugins working procedure top to bottom. So the WordPress core AI team is taking a much smarter approach to use AI within the WordPress project. This approach is called AI Building Blocks for WordPress. The goal of the AI Building Blocks is Simple: Give AI a clear, secure, and standardized way to understand what WordPress can do and to do it safely.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>They are working on the three core technologies that work together:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>PHP AI Client SDK & WordPress AI Client\u003C\u002Fli>\n\u003Cli>Abilities API\u003C\u002Fli>\n\u003Cli>MCP Adapter\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"php-ai-client-sdk\" href=\"#php-ai-client-sdk\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  PHP AI Client SDK:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Currently there are many AI providers (OpenAI, Anthropic, Gemini, etc.) in the market and each has its own API & configurations process. If a developer want to enable AI features to their own plugins they need to implement the API integration from scratch. Also the developers need to implement each providers separately for their plugins. Developers rebuilds the same infrastructure: provider integrations, API key management. Admin enter the same credentials multiple time and multiple places for each separate plugins. \u003C\u002Fp>\n\u003Cp>On the other hand, the PHP AI Client SDK creates one unified PHP interface that works with multiple AI models. To use the SDK everything will be centralizes, one credentials system for all plugins. The WordPress site admins choose which AI services they want to configure & use from a single place. So, developers can focus on building AI features, not AI infrastructure. Developers don’t lock themselves into a single AI provider.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"wordpress-ai-client\" href=\"#wordpress-ai-client\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  WordPress AI Client:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>An AI client and API for WordPress to communicate with any generative AI models of various capabilities using a uniform API. Built on top of the PHP AI Client, adapted for the WordPress ecosystem while following WordPress Coding Standards and best practices. Features of the WordPress AI Client:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>WP Prompt Builder\u003C\u002Fstrong> – A WordPress-friendly way to create and manage AI prompts using PHP, following WordPress coding standards.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Admin Settings Page\u003C\u002Fstrong> – A WordPress Admin settings screen to store AI provider API keys.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Auto API Key Setup\u003C\u002Fstrong> – Automatically uses API keys saved in WordPress settings.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Standard HTTP Client\u003C\u002Fstrong> – Uses the WordPress HTTP API in a PSR-compatible way.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>JavaScript API\u003C\u002Fstrong> – Front-end JS prompt builder that talks with the server through the WP REST APIs.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"abilities-api\" href=\"#abilities-api\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Abilities API:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>A typical WordPress website might could have lots of plugins installed & activated, each introducing unique functionality. But there’s no standardized way for these components to express their capabilities. An AI assistant has no systematic way to discover that. To solve this problem, the Abilities API establishes a standardized format for registering the capabilities of plugins and themes in a common structure, something like below:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>What the plugin or feature does.\u003C\u002Fli>\n\u003Cli>What inputs it needs.\u003C\u002Fli>\n\u003Cli>What output it returns.\u003C\u002Fli>\n\u003Cli>Which permission require to run it.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>This makes it easier for AI to automatically discover WordPress features. It transforms WordPress from an isolated collection of functionalities and plugins into an interconnected, discoverable system.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"mcp-adapter\" href=\"#mcp-adapter\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  MCP Adapter:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Once WordPress knows its own abilities by Abilities API, the next step is letting AI assistants use them. That’s the job of the MCP Adapter. \u003Cbr \u002F>\nMCP (Model Context Protocol) is an open standard that defines how applications expose tools to AI models. The MCP Adapter translates WordPress abilities into a format that AI assistants like ChatGPT, Claude or Gemini can understand. AI assistants can discover, understand, and execute actions like creating posts, managing media, and moderating comments, all through the standardized protocol. So, Content creators can manage their WordPress sites conversationally, while developers can automate complex workflows across systems. Agencies can build sophisticated integrations, from content migration to performance optimization.\u003C\u002Fp>\n\u003Ch4>\n  \u003Ca name=\"these-three-ai-building-blocks-work-together-by-the-following-way\" href=\"#these-three-ai-building-blocks-work-together-by-the-following-way\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  These three AI Building Blocks work together by the following way:\u003Cbr \u002F>\n\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>PHP\u002FWordPress AI Client SDK talks to AI models.\u003C\u002Fli>\n\u003Cli>Abilities API defines what WordPress can do.\u003C\u002Fli>\n\u003Cli>MCP Adapter exposes those abilities to AI assistants safely.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>\n  \u003Ca name=\"ai-experiments\" href=\"#ai-experiments\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  AI Experiments\u003Cbr \u002F>\n\u003C\u002Fh4>\n\u003Cp>If you want to experiments all the AI Building Blocks in one place then you can try \u003Ca href=\"https:\u002F\u002Fmake.wordpress.org\u002Fai\u002F2025\u002F07\u002F17\u002Fai-experiments-plugin\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">AI Experiments Plugin\u003C\u002Fa>. It serves as both a powerful tool for users and a reference implementation for developers, demonstrating how the PHP AI Client SDK, Abilities API, and MCP Adapter work together in practice.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fquillbot.com\u002Fai-content-detector?certificate=cert_698a307475429bb716cad000\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cbr \u002F>\n  \u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fassets.quillbot.com%2Fimages%2Ftheme%2Flight%2FcontentCertification%2Fbadge.png\" alt=\"Human Written Content Certified\" loading=\"lazy\" width=\"290\" height=\"240\">\u003Cbr \u002F>\n\u003C\u002Fa>\u003C\u002Fp>\n",{"rendered":123,"protected":47},"\u003Cp>We know WordPress is powerful, because of its thousands of plugins, APIs & functions but they are scattered. As a human we understand this ecosystem because we read docs to know how they works, features etc. But AI doesn’t work on this way. Because its not possible to know all the available WordPress plugins working procedure top to bottom…\u003C\u002Fp>\n",40,{"footnotes":6},[50],[128,129,4],19,20,[131,41,60,61,62,63,64,65,132,133,66],"post-39","tag-ai","tag-mcp","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2026\u002F02\u002Fdevto-3244339-cover.webp",{"edited_at":136,"published_at":137,"reactions":91,"comments":138,"reading_time":139,"body_markdown":140},"2026-02-19T07:38:42Z","2026-02-09T18:43:22Z",0,3,"We know WordPress is powerful, because of its thousands of plugins, APIs & functions but they are scattered. As a human we understand this ecosystem because we read docs to know how they works, features etc. But AI doesn't work on this way. Because its not possible to know all the available WordPress plugins working procedure top to bottom. So the WordPress core AI team is taking a much smarter approach to use AI within the WordPress project. This approach is called AI Building Blocks for WordPress. The goal of the AI Building Blocks is Simple: Give AI a clear, secure, and standardized way to understand what WordPress can do and to do it safely.\n\n**They are working on the three core technologies that work together:**\n- PHP AI Client SDK & WordPress AI Client\n- Abilities API\n- MCP Adapter\n\n## PHP AI Client SDK:\nCurrently there are many AI providers (OpenAI, Anthropic, Gemini, etc.) in the market and each has its own API & configurations process. If a developer want to enable AI features to their own plugins they need to implement the API integration from scratch. Also the developers need to implement each providers separately for their plugins. Developers rebuilds the same infrastructure: provider integrations, API key management. Admin enter the same credentials multiple time and multiple places for each separate plugins. \n\nOn the other hand, the PHP AI Client SDK creates one unified PHP interface that works with multiple AI models. To use the SDK everything will be centralizes, one credentials system for all plugins. The WordPress site admins choose which AI services they want to configure & use from a single place. So, developers can focus on building AI features, not AI infrastructure. Developers don’t lock themselves into a single AI provider.\n\n### WordPress AI Client: \nAn AI client and API for WordPress to communicate with any generative AI models of various capabilities using a uniform API. Built on top of the PHP AI Client, adapted for the WordPress ecosystem while following WordPress Coding Standards and best practices. Features of the WordPress AI Client:\n- **WP Prompt Builder** – A WordPress-friendly way to create and manage AI prompts using PHP, following WordPress coding standards.\n- **Admin Settings Page** – A WordPress Admin settings screen to store AI provider API keys.\n- **Auto API Key Setup** – Automatically uses API keys saved in WordPress settings.\n- **Standard HTTP Client** – Uses the WordPress HTTP API in a PSR-compatible way.\n- **JavaScript API** – Front-end JS prompt builder that talks with the server through the WP REST APIs.\n\n## Abilities API:\nA typical WordPress website might could have lots of plugins installed & activated, each introducing unique functionality. But there’s no standardized way for these components to express their capabilities. An AI assistant has no systematic way to discover that. To solve this problem, the Abilities API establishes a standardized format for registering the capabilities of plugins and themes in a common structure, something like below:\n- What the plugin or feature does.\n- What inputs it needs.\n- What output it returns.\n- Which permission require to run it.\n\nThis makes it easier for AI to automatically discover WordPress features. It transforms WordPress from an isolated collection of functionalities and plugins into an interconnected, discoverable system.\n\n## MCP Adapter:\nOnce WordPress knows its own abilities by Abilities API, the next step is letting AI assistants use them. That’s the job of the MCP Adapter. \nMCP (Model Context Protocol) is an open standard that defines how applications expose tools to AI models. The MCP Adapter translates WordPress abilities into a format that AI assistants like ChatGPT, Claude or Gemini can understand. AI assistants can discover, understand, and execute actions like creating posts, managing media, and moderating comments, all through the standardized protocol. So, Content creators can manage their WordPress sites conversationally, while developers can automate complex workflows across systems. Agencies can build sophisticated integrations, from content migration to performance optimization.\n\n#### These three AI Building Blocks work together by the following way:\n- PHP\u002FWordPress AI Client SDK talks to AI models.\n- Abilities API defines what WordPress can do.\n- MCP Adapter exposes those abilities to AI assistants safely.\n\n#### AI Experiments\nIf you want to experiments all the AI Building Blocks in one place then you can try [AI Experiments Plugin](https:\u002F\u002Fmake.wordpress.org\u002Fai\u002F2025\u002F07\u002F17\u002Fai-experiments-plugin\u002F). It serves as both a powerful tool for users and a reference implementation for developers, demonstrating how the PHP AI Client SDK, Abilities API, and MCP Adapter work together in practice.\n\n\u003Ca href=\"https:\u002F\u002Fquillbot.com\u002Fai-content-detector?certificate=cert_698a307475429bb716cad000\" target=\"_blank\" aria-label=\"Verified Human Content\">\n  \u003Cimg src=\"https:\u002F\u002Fassets.quillbot.com\u002Fimages\u002Ftheme\u002Flight\u002FcontentCertification\u002Fbadge.png\" alt=\"Human Written Content Certified\" width=\"60\" height=\"60\" style=\"max-width: 60px; height: auto;\" \u002F>\n\u003C\u002Fa>\n\n\n",{"self":142,"collection":147,"about":149,"author":151,"replies":153,"version-history":156,"predecessor-version":159,"wp:featuredmedia":163,"wp:attachment":166,"wp:term":169,"curies":174},[143],{"href":144,"targetHints":145},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F39",{"allow":146},[17],[148],{"href":79},[150],{"href":82},[152],{"embeddable":31,"href":85},[154],{"embeddable":31,"href":155},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=39",[157],{"count":91,"href":158},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F39\u002Frevisions",[160],{"id":161,"href":162},72,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F39\u002Frevisions\u002F72",[164],{"embeddable":31,"href":165},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F40",[167],{"href":168},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=39",[170,172],{"taxonomy":105,"embeddable":31,"href":171},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=39",{"taxonomy":9,"embeddable":31,"href":173},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=39",[175],{"name":29,"href":30,"templated":31},{"id":177,"date":178,"date_gmt":178,"guid":179,"modified":178,"modified_gmt":178,"slug":181,"status":40,"type":41,"link":180,"title":182,"content":184,"excerpt":186,"author":50,"featured_media":138,"comment_status":52,"ping_status":52,"sticky":47,"template":6,"format":53,"meta":188,"categories":189,"tags":190,"class_list":194,"post_image_original":70,"devto_meta":199,"_links":203},41,"2025-11-13T15:30:19",{"rendered":180},"https:\u002F\u002Flab.aiarnob.com\u002Fhow-to-migrate-your-local-wordpress-site-to-a-vito-web-panel-server\u002F","how-to-migrate-your-local-wordpress-site-to-a-vito-web-panel-server",{"rendered":183},"How to Migrate Your Local WordPress Site to a Vito Web Panel Server",{"rendered":185,"protected":47},"\u003Cp>Follow this step-by-step guide to migrate your local WordPress website to a live server using the Vito Web Panel.\u003C\u002Fp>\n\u003Chr>\n\u003Ch2>\n  \u003Ca name=\"1-add-your-ssh-key-to-the-vito-server\" href=\"#1-add-your-ssh-key-to-the-vito-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>1. Add Your SSH Key to the Vito Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>First, generate an SSH key on your device and add it to the \u003Cstrong>SSH Settings\u003C\u002Fstrong> section inside the Vito server panel.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"2-create-a-wordpress-site-in-vito\" href=\"#2-create-a-wordpress-site-in-vito\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>2. Create a WordPress Site in Vito\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Create a new WordPress site from the Vito Web Panel.\u003Cbr \u002F>\nFor example, assume your live domain is:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp-site.com\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"3-connect-to-the-vito-server-via-ssh\" href=\"#3-connect-to-the-vito-server-via-ssh\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>3. Connect to the Vito Server via SSH\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Open your terminal and log in to your server using the following command:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>ssh vito@\u003Cspan class=\"o\">{\u003C\u002Fspan>your.server.ip\u003Cspan class=\"o\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Once logged in, you will be at the server’s root directory.\u003Cbr \u002F>\nTo list your created websites, run:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>\u003Cspan class=\"nb\">ls \u003C\u002Fspan>or \u003Cspan class=\"nb\">ls\u003C\u002Fspan> \u003Cspan class=\"nt\">-la\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"4-navigate-to-your-website-directory\" href=\"#4-navigate-to-your-website-directory\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>4. Navigate to Your Website Directory\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Enter your WordPress site directory:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>\u003Cspan class=\"nb\">cd \u003C\u002Fspan>wp-site.com\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"5-remove-the-existing-wpcontent-folder\" href=\"#5-remove-the-existing-wpcontent-folder\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>5. Remove the Existing wp-content Folder\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Delete the default \u003Ccode>wp-content\u003C\u002Fcode> directory:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>\u003Cspan class=\"nb\">rm\u003C\u002Fspan> \u003Cspan class=\"nt\">-rf\u003C\u002Fspan> wp-content\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"6-prepare-your-local-raw-wpcontent-endraw-for-upload\" href=\"#6-prepare-your-local-raw-wpcontent-endraw-for-upload\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>6. Prepare Your Local \u003Ccode>wp-content\u003C\u002Fcode> for Upload\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Create a ZIP file of your local site’s \u003Ccode>wp-content\u003C\u002Fcode> folder.\u003C\u002Fp>\n\u003Cp>Before uploading, open the folder in a code editor and perform a \u003Cstrong>search & replace\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cp>Replace all instances of: \u003Ccode>local-wp-site.test\u003C\u002Fcode> with \u003Ccode>wp-site.com\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Then replace: \u003Ccode>http:\u002F\u002Fwp-site.com\u003C\u002Fcode> with \u003Ccode>https:\u002F\u002Fwp-site.com\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"7-upload-the-raw-wpcontent-endraw-zip-to-the-server\" href=\"#7-upload-the-raw-wpcontent-endraw-zip-to-the-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>7. Upload the \u003Ccode>wp-content\u003C\u002Fcode> ZIP to the Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Use SCP to upload the zipped folder to your server:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>scp ~\u002FHerd\u002Flocal-wp-site\u002Fwp-content.zip vito@ \u003Cspan class=\"o\">{\u003C\u002Fspan>your.server.ip\u003Cspan class=\"o\">}\u003C\u002Fspan>:\u002Fhome\u002Fvito\u002Fwp-site.com\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"8-unzip-the-uploaded-file\" href=\"#8-unzip-the-uploaded-file\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>8. Unzip the Uploaded File\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>From your project root directory, unzip the file:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>unzip wp-content.zip\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Now your site files are ready.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"9-export-your-local-database\" href=\"#9-export-your-local-database\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>9. Export Your Local Database\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Run the following command to export your local database:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>mysqldump \u003Cspan class=\"nt\">-u\u003C\u002Fspan> root \u003Cspan class=\"nt\">-p\u003C\u002Fspan> local_site_db \u003Cspan class=\"o\">>\u003C\u002Fspan> local_site_db.sql\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"10-upload-the-database-to-the-server\" href=\"#10-upload-the-database-to-the-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>10. Upload the Database to the Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Upload the exported SQL file:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>scp ~\u002FHerd\u002Flocal-wp-site\u002Flocal_site_db.sql vito@ \u003Cspan class=\"o\">{\u003C\u002Fspan>your.server.ip\u003Cspan class=\"o\">}\u003C\u002Fspan>:\u002Fhome\u002Fvito\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"11-import-the-database-into-the-live-server\" href=\"#11-import-the-database-into-the-live-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>11. Import the Database Into the Live Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Run the following command to import your SQL file into the live database:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>mysql \u003Cspan class=\"nt\">-u\u003C\u002Fspan> db_user_name \u003Cspan class=\"nt\">-p\u003C\u002Fspan> wp_site_db < \u002Fhome\u002Fvito\u002Flocal_site_db.sql\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>You will be prompted for the database password. Enter it, and the import will proceed.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"12-update-urls-using-wpcli\" href=\"#12-update-urls-using-wpcli\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>12. Update URLs Using WP-CLI\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Navigate back to your project’s root directory and run the following WP-CLI commands:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>wp search-replace \u003Cspan class=\"s1\">'local-wp-site.test'\u003C\u002Fspan> \u003Cspan class=\"s1\">'wp-test.com'\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>wp search-replace \u003Cspan class=\"s1\">'http:\u002F\u002Fwp-test.com'\u003C\u002Fspan> \u003Cspan class=\"s1\">'https:\u002F\u002Fwp-test.com'\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>This ensures all old local URLs are correctly replaced with the live domain URLs.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>Your migration is now complete!\u003C\u002Fp>\n",{"rendered":187,"protected":47},"\u003Cp>Follow this step-by-step guide to migrate your local WordPress website to a live server using the…\u003C\u002Fp>\n",{"footnotes":6},[50],[191,192,193,4],21,23,22,[195,41,60,61,62,64,65,196,197,198,66],"post-41","tag-migration","tag-ssh","tag-transfer",{"edited_at":200,"published_at":201,"reactions":138,"comments":138,"reading_time":91,"body_markdown":202},"2025-11-13T15:36:47Z","2025-11-13T15:30:19Z","Follow this step-by-step guide to migrate your local WordPress website to a live server using the Vito Web Panel.\n\n---\n\n## **1. Add Your SSH Key to the Vito Server**\n\nFirst, generate an SSH key on your device and add it to the **SSH Settings** section inside the Vito server panel.\n\n## **2. Create a WordPress Site in Vito**\n\nCreate a new WordPress site from the Vito Web Panel.\nFor example, assume your live domain is:\n\n```\nwp-site.com\n```\n\n## **3. Connect to the Vito Server via SSH**\n\nOpen your terminal and log in to your server using the following command:\n\n```bash\nssh vito@{your.server.ip}\n```\n\nOnce logged in, you will be at the server’s root directory.\nTo list your created websites, run:\n\n```bash\nls or ls -la\n```\n\n## **4. Navigate to Your Website Directory**\n\nEnter your WordPress site directory:\n\n```bash\ncd wp-site.com\n```\n\n## **5. Remove the Existing wp-content Folder**\n\nDelete the default `wp-content` directory:\n\n```bash\nrm -rf wp-content\n```\n\n## **6. Prepare Your Local `wp-content` for Upload**\n\nCreate a ZIP file of your local site’s `wp-content` folder.\n\nBefore uploading, open the folder in a code editor and perform a **search & replace**:\n\n- Replace all instances of: `local-wp-site.test` with `wp-site.com`\n\n- Then replace: `http:\u002F\u002Fwp-site.com` with `https:\u002F\u002Fwp-site.com`\n\n## **7. Upload the `wp-content` ZIP to the Server**\n\nUse SCP to upload the zipped folder to your server:\n\n```bash\nscp ~\u002FHerd\u002Flocal-wp-site\u002Fwp-content.zip vito@ {your.server.ip}:\u002Fhome\u002Fvito\u002Fwp-site.com\u002F\n```\n\n## **8. Unzip the Uploaded File**\n\nFrom your project root directory, unzip the file:\n\n```bash\nunzip wp-content.zip\n```\n\nNow your site files are ready.\n\n## **9. Export Your Local Database**\n\nRun the following command to export your local database:\n\n```bash\nmysqldump -u root -p local_site_db > local_site_db.sql\n```\n\n## **10. Upload the Database to the Server**\n\nUpload the exported SQL file:\n\n```bash\nscp ~\u002FHerd\u002Flocal-wp-site\u002Flocal_site_db.sql vito@ {your.server.ip}:\u002Fhome\u002Fvito\u002F\n```\n\n## **11. Import the Database Into the Live Server**\n\nRun the following command to import your SQL file into the live database:\n\n```bash\nmysql -u db_user_name -p wp_site_db \u003C \u002Fhome\u002Fvito\u002Flocal_site_db.sql\n```\n\nYou will be prompted for the database password. Enter it, and the import will proceed.\n\n## **12. Update URLs Using WP-CLI**\n\nNavigate back to your project’s root directory and run the following WP-CLI commands:\n\n```bash\nwp search-replace 'local-wp-site.test' 'wp-test.com'\n```\n\n```bash\nwp search-replace 'http:\u002F\u002Fwp-test.com' 'https:\u002F\u002Fwp-test.com'\n```\n\nThis ensures all old local URLs are correctly replaced with the live domain URLs.\n\n---\n\nYour migration is now complete!",{"self":204,"collection":209,"about":211,"author":213,"replies":215,"version-history":218,"wp:attachment":221,"wp:term":224,"curies":229},[205],{"href":206,"targetHints":207},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F41",{"allow":208},[17],[210],{"href":79},[212],{"href":82},[214],{"embeddable":31,"href":85},[216],{"embeddable":31,"href":217},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=41",[219],{"count":138,"href":220},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F41\u002Frevisions",[222],{"href":223},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=41",[225,227],{"taxonomy":105,"embeddable":31,"href":226},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=41",{"taxonomy":9,"embeddable":31,"href":228},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=41",[230],{"name":29,"href":30,"templated":31},{"id":232,"date":233,"date_gmt":233,"guid":234,"modified":233,"modified_gmt":233,"slug":236,"status":40,"type":41,"link":235,"title":237,"content":239,"excerpt":241,"author":50,"featured_media":138,"comment_status":52,"ping_status":52,"sticky":47,"template":6,"format":53,"meta":243,"categories":244,"tags":245,"class_list":249,"post_image_original":70,"devto_meta":254,"_links":259},43,"2024-09-16T17:18:55",{"rendered":235},"https:\u002F\u002Flab.aiarnob.com\u002Fa-beginners-guide-to-global-state-management-in-wordpress-gutenberg\u002F","a-beginners-guide-to-global-state-management-in-wordpress-gutenberg",{"rendered":238},"A Beginner’s Guide to Global State Management in WordPress Gutenberg",{"rendered":240,"protected":47},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\u003C\u002Fp>\n\u003Cp>If you’re new to managing global state or using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\u003C\u002Fp>\n\u003Cp>\u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"key-concepts-in-raw-wordpressdata-endraw-\" href=\"#key-concepts-in-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Key Concepts in \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>To understand how to use \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"actions\" href=\"#actions\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Actions:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>An action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\u003C\u002Fp>\n\u003Col>\n\u003Cli>A type that indicates what kind of change is happening (e.g., add, remove, update).\u003C\u002Fli>\n\u003Cli>A payload that contains the data needed for that change (e.g., which item to add).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Here’s an example of how actions might look in our cart example:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the item to add to the cart\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the ID of the item to remove\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> Actions tell the reducer what needs to change in the state.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"reducers\" href=\"#reducers\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Reducers:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\u003C\u002Fp>\n\u003Cp>What does a reducer do? It takes the current state and an action, then returns a new state based on the action.\u003Cbr \u002F>\nHere’s an example of a simple reducer that manages a shopping cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan> \u003Cspan class=\"p\">},\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Keep the existing state\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Add the new item to the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Remove the item from the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the unchanged state for unknown actions\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> The reducer defines how the state changes when specific actions are dispatched.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"selectors\" href=\"#selectors\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Selectors:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\u003C\u002Fp>\n\u003Cp>For example, a selector to get all the cart items might look like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the cart items from the state\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>In a component, you would use this selector to access the cart data like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> A selector is a helper function that lets you access specific data from the state.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\" href=\"#step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step by Step Guide to Implement Global State in Gutenberg with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Now that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We’ll set up a simple store with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, manage some state, and use actions and selectors to interact with that state.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Step 1: Define Your Initial State\u003C\u002Fstrong>\u003Cbr \u002F>\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 2: Create Actions\u003C\u002Fstrong>\u003Cbr \u002F>\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 3: Create the Reducer\u003C\u002Fstrong>\u003Cbr \u002F>\nThe reducer listens for dispatched actions and updates the state accordingly. Here’s our reducer, which updates the cart when actions are dispatched:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 4: Create Selectors\u003C\u002Fstrong>\u003Cbr \u002F>\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 5: Create and Register the Store\u003C\u002Fstrong>\u003Cbr \u002F>\nFinally, we’ll create and register the store with the \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> package. This will make the store globally accessible across your WordPress site.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">register\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">store\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">reducer\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">actions\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">selectors\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n\u003Cspan class=\"p\">});\u003C\u002Fspan>\n\n\u003Cspan class=\"nf\">register\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">store\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 6: Using the Store in Components\u003C\u002Fstrong>\u003Cbr \u002F>\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useDispatch\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">addToCart\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useDispatch\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan> \u003Cspan class=\"na\">id\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">1\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"na\">name\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">Sample Item\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan> \u003Cspan class=\"p\">});\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>To fetch the items in the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useSelect\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"conclusion\" href=\"#conclusion\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Conclusion\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>By understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\u003C\u002Fp>\n\u003Cp>With \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\u003C\u002Fp>\n",{"rendered":242,"protected":47},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently…\u003C\u002Fp>\n",{"footnotes":6},[50],[246,247,248,4],24,25,26,[250,41,60,61,62,64,65,251,252,253,66],"post-43","tag-gutenberg","tag-javascript","tag-redux",{"edited_at":255,"published_at":256,"reactions":139,"comments":138,"reading_time":257,"body_markdown":258},"2024-09-16T17:28:07Z","2024-09-16T17:18:55Z",4,"When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where `@wordpress\u002Fdata` comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\n\nIf you’re new to managing global state or using `@wordpress\u002Fdata`, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\n\n`@wordpress\u002Fdata` provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\n\n## Key Concepts in `@wordpress\u002Fdata`\nTo understand how to use `@wordpress\u002Fdata`, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\n\n### Actions:\nAn action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\n\n1. A type that indicates what kind of change is happening (e.g., add, remove, update).\n2. A payload that contains the data needed for that change (e.g., which item to add).\n\nHere’s an example of how actions might look in our cart example:\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART', \u002F\u002F Action type\n            item \u002F\u002F Payload: the item to add to the cart\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART', \u002F\u002F Action type\n            itemId \u002F\u002F Payload: the ID of the item to remove\n        };\n    }\n};\n```\n**In short:** Actions tell the reducer what needs to change in the state.\n\n### Reducers:\nA reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\n\nWhat does a reducer do? It takes the current state and an action, then returns a new state based on the action.\nHere’s an example of a simple reducer that manages a shopping cart:\n\n```js\nconst reducer = (state = { cart: [] }, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state, \u002F\u002F Keep the existing state\n                cart: [...state.cart, action.item] \u002F\u002F Add the new item to the cart\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId) \u002F\u002F Remove the item from the cart\n            };\n        default:\n            return state; \u002F\u002F Return the unchanged state for unknown actions\n    }\n};\n```\n**In short:** The reducer defines how the state changes when specific actions are dispatched.\n\n### Selectors:\nA selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\n\nFor example, a selector to get all the cart items might look like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart; \u002F\u002F Return the cart items from the state\n    }\n};\n```\nIn a component, you would use this selector to access the cart data like this:\n\n```js\nconst cartItems = useSelect((select) => select('my-store').getCartItems());\n```\n**In short:** A selector is a helper function that lets you access specific data from the state.\n\n## Step by Step Guide to Implement Global State in Gutenberg with `@wordpress\u002Fdata`\n\nNow that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We'll set up a simple store with `@wordpress\u002Fdata`, manage some state, and use actions and selectors to interact with that state.\n\n**Step 1: Define Your Initial State**\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\n```js\nconst DEFAULT_STATE = {\n    cart: []\n};\n```\n\n**Step 2: Create Actions**\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART',\n            item\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART',\n            itemId\n        };\n    }\n};\n```\n\n**Step 3: Create the Reducer**\nThe reducer listens for dispatched actions and updates the state accordingly. Here's our reducer, which updates the cart when actions are dispatched:\n\n```js\nconst reducer = (state = DEFAULT_STATE, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state,\n                cart: [...state.cart, action.item]\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId)\n            };\n        default:\n            return state;\n    }\n};\n```\n\n**Step 4: Create Selectors**\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart;\n    }\n};\n```\n\n**Step 5: Create and Register the Store**\nFinally, we’ll create and register the store with the `@wordpress\u002Fdata` package. This will make the store globally accessible across your WordPress site.\n\n```js\nimport { createReduxStore, register } from '@wordpress\u002Fdata';\n\nconst store = createReduxStore('my-cart-store', {\n    reducer,\n    actions,\n    selectors,\n});\n\nregister(store);\n```\n\n**Step 6: Using the Store in Components**\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\n```js\nimport { useDispatch } from '@wordpress\u002Fdata';\n\nconst { addToCart } = useDispatch('my-cart-store');\naddToCart({ id: 1, name: 'Sample Item' });\n```\n\nTo fetch the items in the cart:\n\n```js\nimport { useSelect } from '@wordpress\u002Fdata';\n\nconst cartItems = useSelect((select) => select('my-cart-store').getCartItems());\n```\n\n## Conclusion\nBy understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using `@wordpress\u002Fdata`. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\n\nWith `@wordpress\u002Fdata`, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\n",{"self":260,"collection":265,"about":267,"author":269,"replies":271,"version-history":274,"wp:attachment":277,"wp:term":280,"curies":285},[261],{"href":262,"targetHints":263},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43",{"allow":264},[17],[266],{"href":79},[268],{"href":82},[270],{"embeddable":31,"href":85},[272],{"embeddable":31,"href":273},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=43",[275],{"count":138,"href":276},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions",[278],{"href":279},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=43",[281,283],{"taxonomy":105,"embeddable":31,"href":282},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=43",{"taxonomy":9,"embeddable":31,"href":284},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=43",[286],{"name":29,"href":30,"templated":31},{"id":288,"date":289,"date_gmt":289,"guid":290,"modified":289,"modified_gmt":289,"slug":292,"status":40,"type":41,"link":291,"title":293,"content":295,"excerpt":297,"author":50,"featured_media":138,"comment_status":52,"ping_status":52,"sticky":47,"template":6,"format":53,"meta":299,"categories":300,"tags":301,"class_list":304,"post_image_original":70,"devto_meta":308,"_links":312},44,"2024-08-13T19:04:37",{"rendered":291},"https:\u002F\u002Flab.aiarnob.com\u002Fhow-to-implement-a-woocommerce-ajax-direct-buy-now-button\u002F","how-to-implement-a-woocommerce-ajax-direct-buy-now-button",{"rendered":294},"How to Implement a WooCommerce AJAX Direct “Buy Now” Button",{"rendered":296,"protected":47},"\u003Cp>When you’re running an online store using WooCommerce, making the purchasing process as seamless as possible is crucial. One effective way to do this is by adding a “Buy Now” button that allows customers to directly purchase a product without navigating through multiple pages. This blog will walk you through creating a WooCommerce AJAX “Buy Now” button using the provided code snippets.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"step-1-add-the-buy-now-button\" href=\"#step-1-add-the-buy-now-button\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 1: Add the “Buy Now” Button\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>First, you need to add a custom “Buy Now” button on your WooCommerce product pages. We’ll do this by hooking into the woocommerce_after_add_to_cart_button action, which places our button right after the standard “Add to Cart” button.\u003C\u002Fp>\n\u003Cp>Here’s the PHP code snippet:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight php\">\u003Ccode>\u003Cspan class=\"nf\">add_action\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'woocommerce_after_add_to_cart_button'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'add_content_after_addtocart'\u003C\u002Fspan> \u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003Cspan class=\"k\">function\u003C\u002Fspan> \u003Cspan class=\"n\">add_content_after_addtocart\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nv\">$current_product_id\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">get_the_ID\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n    \u003Cspan class=\"nv\">$product\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">wc_get_product\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"nv\">$current_product_id\u003C\u002Fspan> \u003Cspan class=\"p\">);\u003C\u002Fspan>\n\n    \u003Cspan class=\"k\">if\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"nv\">$product\u003C\u002Fspan>\u003Cspan class=\"o\">->\u003C\u002Fspan>\u003Cspan class=\"nf\">is_type\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'simple'\u003C\u002Fspan> \u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">){\u003C\u002Fspan>\n        \u003Cspan class=\"k\">echo\u003C\u002Fspan> \u003Cspan class=\"s1\">'<button data-id=\"'\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"nv\">$current_product_id\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"s1\">'\" class=\"buy-now button\"><i class=\"matico-icon-toys\"><\u002Fi>'\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">__\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"s1\">'Buy Now'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'woocommerce'\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"s1\">'<\u002Fbutton>'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Explanation:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>We use the \u003Ccode>woocommerce_after_add_to_cart_button\u003C\u002Fcode> hook to insert our “Buy Now” button right after the “Add to Cart” button.\u003C\u002Fli>\n\u003Cli>The \u003Ccode>get_the_ID()\u003C\u002Fcode> function retrieves the current product ID, and \u003Ccode>wc_get_product()\u003C\u002Fcode> gets the product details.\u003C\u002Fli>\n\u003Cli>We check if the product is of type simple and then render the button with the appropriate data-id attribute and a custom icon.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"step-3-enqueue-the-script\" href=\"#step-3-enqueue-the-script\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 3: Enqueue the Script\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Next, you need to enqueue the script in your theme to ensure it’s loaded properly on your WooCommerce pages. Here’s how to do it:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight php\">\u003Ccode>\u003Cspan class=\"nf\">wp_enqueue_script\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"s1\">'matico-child-script'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nf\">get_stylesheet_directory_uri\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"mf\">.\u003C\u002Fspan> \u003Cspan class=\"s1\">'\u002Fassets\u002Fjs\u002Fscript.js'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"k\">array\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'jquery'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'scrollfix-script'\u003C\u002Fspan> \u003Cspan class=\"p\">),\u003C\u002Fspan>  \u003Cspan class=\"nv\">$matico_version\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\n\u003Cspan class=\"nf\">wp_localize_script\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'matico-child-script'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'matico_child_script_obj'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"k\">array\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \n        \u003Cspan class=\"s1\">'checkout_page_url'\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">wc_get_checkout_url\u003C\u002Fspan>\u003Cspan class=\"p\">(),\u003C\u002Fspan>\n    \u003Cspan class=\"p\">)\u003C\u002Fspan>\n\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Explanation:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Ccode>wp_enqueue_script()\u003C\u002Fcode> is used to load our custom script file (\u003Ccode>script.js\u003C\u002Fcode>), which contains the jQuery code.\u003C\u002Fli>\n\u003Cli>\n\u003Ccode>wp_localize_script()\u003C\u002Fcode> passes PHP data to the script, such as the checkout page URL, allowing us to use it within the script.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"step-2-handle-the-ajax-request\" href=\"#step-2-handle-the-ajax-request\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 2: Handle the AJAX Request\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Finally, we’ll handle the button click event using jQuery. The jQuery script sends an AJAX request to WooCommerce, which adds the product to the cart and then redirects the user directly to the checkout page.\u003C\u002Fp>\n\u003Cp>Here’s the jQuery code snippet:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">$\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"kd\">var\u003C\u002Fspan> \u003Cspan class=\"nx\">MaticoChildThemeConfig\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"na\">init\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">bindEvents\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n        \u003Cspan class=\"p\">},\u003C\u002Fspan>\n        \u003Cspan class=\"na\">bindEvents\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"nf\">$\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nb\">document\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">on\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">click\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">.buy-now\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">handleBuyNowClick\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n        \u003Cspan class=\"p\">},\u003C\u002Fspan>\n        \u003Cspan class=\"na\">handleBuyNowClick\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">event\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">event\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">preventDefault\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n\n            \u003Cspan class=\"kd\">var\u003C\u002Fspan> \u003Cspan class=\"nx\">$button\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">$\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">),\u003C\u002Fspan>\n                \u003Cspan class=\"nx\">quantity\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">parseFloat\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">$button\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">closest\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">.quantity\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">find\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">.qty\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">val\u003C\u002Fspan>\u003Cspan class=\"p\">())\u003C\u002Fspan> \u003Cspan class=\"o\">||\u003C\u002Fspan> \u003Cspan class=\"mi\">1\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"nx\">productID\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">$button\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">data\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">id\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\n            \u003Cspan class=\"kd\">var\u003C\u002Fspan> \u003Cspan class=\"nx\">data\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"na\">product_id\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">productID\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">quantity\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">quantity\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n\n            \u003Cspan class=\"nx\">$\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">ajax\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan>\n                \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">POST\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">url\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">wc_add_to_cart_params\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">wc_ajax_url\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">toString\u003C\u002Fspan>\u003Cspan class=\"p\">().\u003C\u002Fspan>\u003Cspan class=\"nf\">replace\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">%%endpoint%%\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">add_to_cart\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">),\u003C\u002Fspan>\n                \u003Cspan class=\"na\">data\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">data\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">dataType\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">json\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">beforeSend\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                    \u003Cspan class=\"nx\">$button\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">addClass\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">loading\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n                \u003Cspan class=\"p\">},\u003C\u002Fspan>\n                \u003Cspan class=\"na\">success\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                    \u003Cspan class=\"k\">if \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">error\u003C\u002Fspan> \u003Cspan class=\"o\">&&\u003C\u002Fspan> \u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">product_url\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                        \u003Cspan class=\"nb\">window\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">location\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">href\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">product_url\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n                    \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">else\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                        \u003Cspan class=\"nb\">window\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">location\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">href\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">matico_child_script_obj\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">checkout_page_url\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n                    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n                \u003Cspan class=\"p\">}\u003C\u002Fspan>\n            \u003Cspan class=\"p\">});\u003C\u002Fspan>\n        \u003Cspan class=\"p\">}\u003C\u002Fspan>\n    \u003Cspan class=\"p\">};\u003C\u002Fspan>\n\n    \u003Cspan class=\"nx\">MaticoChildThemeConfig\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">init\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n\u003Cspan class=\"p\">})(\u003C\u002Fspan>\u003Cspan class=\"nx\">jQuery\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Explanation:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>When the “Buy Now” button is clicked, we prevent the default action to avoid page reload.\u003C\u002Fli>\n\u003Cli>We gather the product ID and quantity from the current product page.\u003C\u002Fli>\n\u003Cli>An AJAX request is sent to WooCommerce’s add_to_cart endpoint, which adds the product to the cart.\u003C\u002Fli>\n\u003Cli>If the product is successfully added, we redirect the user to the checkout page. If there’s an error (e.g., the product is no longer available), the user is redirected to the product page.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"conclusion\" href=\"#conclusion\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Conclusion\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>By implementing the above steps, you can create a “Buy Now” button that streamlines the purchasing process for your customers. This feature is particularly useful in boosting conversions by reducing the number of clicks and pages a customer needs to navigate before completing a purchase.\u003C\u002Fp>\n",{"rendered":298,"protected":47},"\u003Cp>When you’re running an online store using WooCommerce, making the purchasing process as seamless as…\u003C\u002Fp>\n",{"footnotes":6},[50],[302,303,4],28,27,[305,41,60,61,62,64,65,306,307,66],"post-44","tag-php","tag-woocommerce",{"edited_at":309,"published_at":310,"reactions":139,"comments":138,"reading_time":139,"body_markdown":311},"2024-08-13T19:06:11Z","2024-08-13T19:04:37Z","When you're running an online store using WooCommerce, making the purchasing process as seamless as possible is crucial. One effective way to do this is by adding a \"Buy Now\" button that allows customers to directly purchase a product without navigating through multiple pages. This blog will walk you through creating a WooCommerce AJAX \"Buy Now\" button using the provided code snippets.\n\n## Step 1: Add the \"Buy Now\" Button\nFirst, you need to add a custom \"Buy Now\" button on your WooCommerce product pages. We'll do this by hooking into the woocommerce_after_add_to_cart_button action, which places our button right after the standard \"Add to Cart\" button.\n\nHere's the PHP code snippet:\n```php\nadd_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );\nfunction add_content_after_addtocart() {\n    $current_product_id = get_the_ID();\n    $product = wc_get_product( $current_product_id );\n\n    if( $product->is_type( 'simple' ) ){\n        echo '\u003Cbutton data-id=\"'.$current_product_id.'\" class=\"buy-now button\">\u003Ci class=\"matico-icon-toys\">\u003C\u002Fi>'.__('Buy Now', 'woocommerce').'\u003C\u002Fbutton>';\n    }\n}\n```\n**Explanation:**\n- We use the `woocommerce_after_add_to_cart_button` hook to insert our \"Buy Now\" button right after the \"Add to Cart\" button.\n- The `get_the_ID()` function retrieves the current product ID, and `wc_get_product()` gets the product details.\n- We check if the product is of type simple and then render the button with the appropriate data-id attribute and a custom icon.\n\n## Step 3: Enqueue the Script\nNext, you need to enqueue the script in your theme to ensure it's loaded properly on your WooCommerce pages. Here's how to do it:\n```php\nwp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '\u002Fassets\u002Fjs\u002Fscript.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);\n\nwp_localize_script( 'matico-child-script', 'matico_child_script_obj',\n    array( \n        'checkout_page_url' => wc_get_checkout_url(),\n    )\n);\n```\n**Explanation:**\n- `wp_enqueue_script()` is used to load our custom script file (`script.js`), which contains the jQuery code.\n- `wp_localize_script()` passes PHP data to the script, such as the checkout page URL, allowing us to use it within the script.\n\n## Step 2: Handle the AJAX Request\nFinally, we'll handle the button click event using jQuery. The jQuery script sends an AJAX request to WooCommerce, which adds the product to the cart and then redirects the user directly to the checkout page.\n\nHere's the jQuery code snippet:\n```javascript\n(function ($) {\n    var MaticoChildThemeConfig = {\n        init: function () {\n            this.bindEvents();\n        },\n        bindEvents: function () {\n            $(document).on('click', '.buy-now', this.handleBuyNowClick);\n        },\n        handleBuyNowClick: function (event) {\n            event.preventDefault();\n\n            var $button = $(this),\n                quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,\n                productID = $button.data('id');\n\n            var data = {\n                product_id: productID,\n                quantity: quantity,\n            };\n\n            $.ajax({\n                type: 'POST',\n                url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),\n                data: data,\n                dataType: 'json',\n                beforeSend: function () {\n                    $button.addClass('loading');\n                },\n                success: function (res) {\n                    if (res.error && res.product_url) {\n                        window.location.href = res.product_url;\n                    } else {\n                        window.location.href = matico_child_script_obj.checkout_page_url;\n                    }\n                }\n            });\n        }\n    };\n\n    MaticoChildThemeConfig.init();\n})(jQuery);\n```\n**Explanation:**\n- When the \"Buy Now\" button is clicked, we prevent the default action to avoid page reload.\n- We gather the product ID and quantity from the current product page.\n- An AJAX request is sent to WooCommerce's add_to_cart endpoint, which adds the product to the cart.\n- If the product is successfully added, we redirect the user to the checkout page. If there's an error (e.g., the product is no longer available), the user is redirected to the product page.\n\n## Conclusion\nBy implementing the above steps, you can create a \"Buy Now\" button that streamlines the purchasing process for your customers. This feature is particularly useful in boosting conversions by reducing the number of clicks and pages a customer needs to navigate before completing a purchase.\n",{"self":313,"collection":318,"about":320,"author":322,"replies":324,"version-history":327,"wp:attachment":330,"wp:term":333,"curies":338},[314],{"href":315,"targetHints":316},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F44",{"allow":317},[17],[319],{"href":79},[321],{"href":82},[323],{"embeddable":31,"href":85},[325],{"embeddable":31,"href":326},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=44",[328],{"count":138,"href":329},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F44\u002Frevisions",[331],{"href":332},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=44",[334,336],{"taxonomy":105,"embeddable":31,"href":335},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=44",{"taxonomy":9,"embeddable":31,"href":337},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=44",[339],{"name":29,"href":30,"templated":31},{"id":341,"date":342,"date_gmt":342,"guid":343,"modified":342,"modified_gmt":342,"slug":345,"status":40,"type":41,"link":344,"title":346,"content":348,"excerpt":350,"author":50,"featured_media":138,"comment_status":52,"ping_status":52,"sticky":47,"template":6,"format":53,"meta":352,"categories":353,"tags":354,"class_list":356,"post_image_original":70,"devto_meta":359,"_links":362},51,"2024-08-10T12:41:39",{"rendered":344},"https:\u002F\u002Flab.aiarnob.com\u002Fhow-to-install-wordpress-and-essential-plugins-using-wp-cli\u002F","how-to-install-wordpress-and-essential-plugins-using-wp-cli",{"rendered":347},"How to Install WordPress and Essential Plugins Using WP-CLI",{"rendered":349,"protected":47},"\u003Cp>Setting up a WordPress site can be time-consuming if done manually, but with \u003Ca href=\"https:\u002F\u002Fwp-cli.org\u002F#installing\" target=\"_blank\" rel=\"noopener noreferrer\">WP-CLI\u003C\u002Fa>, the process becomes much faster and more efficient. In this tutorial, I’ll show you how to install WordPress along with a few essential plugins using a single command sequence.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"step-1-download-wordpress-core\" href=\"#step-1-download-wordpress-core\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 1: Download WordPress Core\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>First, you’ll need to download the WordPress core files. This command will download WordPress to a directory called \u003Ccode>mywebsite\u003C\u002Fcode>.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp core download --path=mywebsite\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-2-create-the-configuration-file\" href=\"#step-2-create-the-configuration-file\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 2: Create the Configuration File\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Navigate into the newly created \u003Ccode>mywebsite\u003C\u002Fcode> directory, and create the \u003Ccode>wp-config.php\u003C\u002Fcode> file with your database credentials:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>cd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-3-create-the-database\" href=\"#step-3-create-the-database\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 3: Create the Database\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Now, create the database using the following command:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp db create\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-4-install-wordpress\" href=\"#step-4-install-wordpress\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 4: Install WordPress\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Install WordPress using your local URL, site title, and admin credentials:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-5-install-and-activate-plugins\" href=\"#step-5-install-and-activate-plugins\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 5: Install and Activate Plugins\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Finally, install and activate the necessary plugins. In this example, we’ll install WooCommerce and Dokan Lite:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"allinone-command-sequence\" href=\"#allinone-command-sequence\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  All-in-One Command Sequence\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>For your convenience, here’s the entire process in one continuous block of code. Just copy and paste the code below into your terminal to install WordPress and a few plugins with a single command.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp core download --path=mywebsite\ncd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\nwp db create\nwp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\nwp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Prerequisite:\u003C\u002Fstrong> Install \u003Ca href=\"https:\u002F\u002Fwp-cli.org\u002F#installing\" target=\"_blank\" rel=\"noopener noreferrer\">WP-CLI\u003C\u002Fa> to you machine.\u003C\u002Fp>\n",{"rendered":351,"protected":47},"\u003Cp>Setting up a WordPress site can be time-consuming if done manually, but with WP-CLI, the process…\u003C\u002Fp>\n",{"footnotes":6},[50],[302,4,355],31,[357,41,60,61,62,64,65,306,66,358],"post-51","tag-wpcli",{"edited_at":70,"published_at":360,"reactions":257,"comments":138,"reading_time":91,"body_markdown":361},"2024-08-10T12:41:39Z","Setting up a WordPress site can be time-consuming if done manually, but with [WP-CLI](https:\u002F\u002Fwp-cli.org\u002F#installing), the process becomes much faster and more efficient. In this tutorial, I'll show you how to install WordPress along with a few essential plugins using a single command sequence.\n\n### Step 1: Download WordPress Core\nFirst, you'll need to download the WordPress core files. This command will download WordPress to a directory called `mywebsite`.\n```\nwp core download --path=mywebsite\n```\n\n### Step 2: Create the Configuration File\nNavigate into the newly created `mywebsite` directory, and create the `wp-config.php` file with your database credentials:\n```\ncd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\n```\n\n### Step 3: Create the Database\nNow, create the database using the following command:\n```\nwp db create\n```\n\n### Step 4: Install WordPress\nInstall WordPress using your local URL, site title, and admin credentials:\n```\nwp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\n```\n\n### Step 5: Install and Activate Plugins\nFinally, install and activate the necessary plugins. In this example, we'll install WooCommerce and Dokan Lite:\n```\nwp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n```\n\n### All-in-One Command Sequence\nFor your convenience, here’s the entire process in one continuous block of code. Just copy and paste the code below into your terminal to install WordPress and a few plugins with a single command.\n```\nwp core download --path=mywebsite\ncd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\nwp db create\nwp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\nwp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n```\n**Prerequisite:** Install [WP-CLI](https:\u002F\u002Fwp-cli.org\u002F#installing) to you machine.\n",{"self":363,"collection":368,"about":370,"author":372,"replies":374,"version-history":377,"wp:attachment":380,"wp:term":383,"curies":388},[364],{"href":365,"targetHints":366},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F51",{"allow":367},[17],[369],{"href":79},[371],{"href":82},[373],{"embeddable":31,"href":85},[375],{"embeddable":31,"href":376},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=51",[378],{"count":138,"href":379},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F51\u002Frevisions",[381],{"href":382},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=51",[384,386],{"taxonomy":105,"embeddable":31,"href":385},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=51",{"taxonomy":9,"embeddable":31,"href":387},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=51",[389],{"name":29,"href":30,"templated":31},1781010865594]