{"id":2713,"date":"2026-06-15T23:36:33","date_gmt":"2026-06-15T23:36:33","guid":{"rendered":"https:\/\/localwp.com\/?p=2713&#038;post_type=help&#038;preview_id=2713"},"modified":"2026-06-15T23:56:17","modified_gmt":"2026-06-15T23:56:17","slug":"content-hooks","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/building-your-add-on\/content-hooks\/","title":{"rendered":"Content Hooks"},"content":{"rendered":"\n<div class=\"wp-block-group help-doc-toc\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Table of Contents:<\/p>\n\n\n<nav aria-label=\"Table of Contents\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#available-content-hooks\">Available Content Hooks<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#examples\">Examples<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#adding-a-react-component-source\">Adding a React Component (source)<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#adding-a-route-source\">Adding a Route (source)<\/a><\/li><\/ol><\/li><\/ol><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#environment-content-hooks\">Environment Content Hooks<\/a><\/li><\/ol><\/nav><\/div><\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Content Hooks allow you to inject React components into various location in Local&#8217;s UI. With Content Hooks you can do anything from adding additional buttons, table rows, or even new pages and routes.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"available-content-hooks\" class=\"wp-block-heading has-text-color has-link-color wp-elements-4467b1650d13250b25fd423ae1d971d8\" style=\"color:#000000\"><strong>Available Content Hooks<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-left\" data-align=\"left\">Hook Name<\/th><th class=\"has-text-align-left\" data-align=\"left\">Parameters<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>stylesheets<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoDatabase<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoDatabase_TableList<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoDatabase_TableList_TableListRow[Connect]:Before<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoOverview<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoOverview:Before<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoOverview_TableList<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoOverview_TableList:Before<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfo_TabNav_Items<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfo_Top_TopRight<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><strong><code><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/code> <code><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#sitestatus\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#sitestatus\">siteStatus<\/a><\/code><\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SitesSidebar_SitesSidebarSites:Before<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SitesSidebar_SitesSidebarSites<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoSSL<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoSSL_TableList<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoUtilities<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoUtilities_TableList<\/code><\/td><td class=\"has-text-align-left\" data-align=\"left\"><code><strong><a href=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\" data-type=\"link\" data-id=\"https:\/\/localwp.com\/help-docs\/building-your-add-on\/common-parameters\/#site\">site<\/a><\/strong><\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>routesRoot<\/code>Accepts React Router <code>\\&lt;Route \/&gt;<\/code> components<\/td><td class=\"has-text-align-left\" data-align=\"left\"><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>routes\\[main]<\/code>Accepts React Router <code>\\&lt;Route \/&gt;<\/code> components<\/td><td class=\"has-text-align-left\" data-align=\"left\"><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>routes\\[site-info]<\/code>Accepts React Router <code>\\&lt;Route \/&gt;<\/code> components<\/td><td class=\"has-text-align-left\" data-align=\"left\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 id=\"examples\" class=\"wp-block-heading has-text-color has-link-color wp-elements-365c03e30037a363670bec49354f5548\" style=\"color:#000000\"><strong>Examples<\/strong><\/h3>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 id=\"adding-a-react-component-source\" class=\"wp-block-heading has-text-color has-link-color wp-elements-aace557b4b7a9d76dd56513f0b030608\" style=\"color:#000000\"><strong>Adding a React Component <a href=\"https:\/\/github.com\/getflywheel\/local-addon-volumes\/blob\/master\/src\/renderer.jsx#L9-L10\">(<\/a><\/strong><a href=\"https:\/\/github.com\/getflywheel\/local-addon-volumes\/blob\/master\/src\/renderer.jsx#L9-L10\"><strong>source<\/strong><\/a><strong><a href=\"https:\/\/github.com\/getflywheel\/local-addon-volumes\/blob\/master\/src\/renderer.jsx#L9-L10\">)<\/a><\/strong><\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism undefined-numbers lang-js\" data-lang=\"JavaScript\"><code>hooks.addContent(&#39;SiteInfoOverview&#39;, (site) =&gt; {\n    return (\n        &lt;Notes key=&quot;notes&quot; site={site} \/&gt;\n    );\n});<\/code><\/pre><\/div>\n\n\n<div id=\"help-step-block_f4aa305526e2b521cc31f4d8d9f86206\" class=\"help-note-container help-type-info\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p>Content Hooks are added to an array of React Components. This means all components need to have a <code>key<\/code> prop.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 id=\"adding-a-route-source\" class=\"wp-block-heading has-text-color has-link-color wp-elements-b11162d79caa17be45e1320dfcbdea88\" style=\"color:#000000\"><strong>Adding a Route <a href=\"https:\/\/github.com\/getflywheel\/local-addon-stats\/blob\/master\/src\/renderer.js#L13-L15\">(source)<\/a><\/strong><\/h4>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism undefined-numbers lang-plain\"><code>hooks.addContent(&#39;routesSiteInfo&#39;, () =&gt; {\n    return (\n        &lt;Route \n            key=&quot;site-info-stats&quot; \n            path=&quot;\/site-info\/:siteID\/stats&quot; \n            component={SiteInfoStats}\n        \/&gt;\n    );\n});<\/code><\/pre><\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"environment-content-hooks\" class=\"wp-block-heading has-text-color has-link-color wp-elements-3a858269d746799dee13b6c8d43cac91\" style=\"color:#000000\"><strong>Environment Content Hooks<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The following Content Hooks are meant to be used by Environments such as the Preferred and Custom Environment.<\/p>\n\n\n<div id=\"help-step-block_ccd9f1ff3a57f1acadc52da9dfe9f1a1\" class=\"help-note-container help-type-warning\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm0 336a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm0-256c18.2 0 32.7 15.5 31.4 33.7l-7.4 104c-.9 12.6-11.4 22.3-23.9 22.3-12.6 0-23-9.7-23.9-22.3l-7.4-104C223.3 143.5 237.8 128 256 128z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p><code>ENV_ID<\/code> and <code>ENV_VERSION<\/code> are for illustrative purposes only and should be replaced with a static value or variable.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>ENV_ID<\/code> and <code>ENV_VERSION<\/code> are in the hook name to allow for multiple Environments to be loaded at the same time and to cut down on the number of conditionals required.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-left\" data-align=\"left\">Hook Name<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>NewSiteEnvironment[ENV_ID][ENV_VERSION]_AddSiteContent_Inner<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SaveBlueprintPage[ENV_ID][ENV_VERSION]_SettingsPane_TableList<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SettingsNewSiteDefaults[ENV_ID][ENV_VERSION]<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoEnvironmentMySQL[ENV_ID][ENV_VERSION]<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoEnvironmentPHP[ENV_ID:ENV_VERSION]<\/code><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\"><code>SiteInfoEnvironmentWebServer[ENV_ID][ENV_VERSION]<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:90px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents: Content Hooks allow you to inject React components into various location in Local&#8217;s UI. With Content Hooks you can do anything from adding additional buttons, table rows, or even new pages and routes. Available Content Hooks Hook Name Parameters stylesheets SiteInfoDatabase site SiteInfoDatabase_TableList site SiteInfoDatabase_TableList_TableListRow[Connect]:Before site SiteInfoOverview site SiteInfoOverview:Before site SiteInfoOverview_TableList site&#8230;<\/p>\n","protected":false},"author":78,"parent":2696,"menu_order":4,"template":"","tags":[],"helpcategories":[69],"class_list":["post-2713","help","type-help","status-publish","hentry","helpcategories-building-your-add-on"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc"}],"about":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/types\/help"}],"author":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/users\/78"}],"version-history":[{"count":0,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2713\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/2696"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=2713"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=2713"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=2713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}