*** tag. - **Body Top** - This will place the content after the ***<body>*** tag starts. - **Header Before** - This will place the content before the page header i.e. before ***<header>*** tag. This can be useful to show some messages like sales or discount offers before the page header. - **Header After** - This will place the content after the page header i.e. after ***</header>*** tag. Using this, you can show some content in between the header and body content. - **Content Top** - This will place the content right after the page container starts. - **Content Bottom** - This will place the content right before the page container ends. - **Comments Before** - This will place the content before the page or post comments start. - **Comments After** - This will place the content after the page or post comment form ends. - **Sidebar Before** - This will place the content at the start of the sidebar. - **Sidebar After** - This will place the content at the bottom of the sidebar. - **Footer Before** - This will place the content before the footer starts. - **Footer After** - This will place the content after the footer ends. - **Body Bottom** - This will place the content right before the ***<script id="perfmatters-delayed-scripts-js">(function(){window.pmDC=0;window.pmDT=15;if(window.pmDT){var e=setTimeout(d,window.pmDT*1e3)}const t=["keydown","mousedown","mousemove","wheel","touchmove","touchstart","touchend"];const n={normal:[],defer:[],async:[]};const o=[];const i=[];var r=false;var a="";window.pmIsClickPending=false;t.forEach(function(e){window.addEventListener(e,d,{passive:true})});if(window.pmDC){window.addEventListener("touchstart",b,{passive:true});window.addEventListener("mousedown",b)}function d(){if(typeof e!=="undefined"){clearTimeout(e)}t.forEach(function(e){window.removeEventListener(e,d,{passive:true})});if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",s)}else{s()}}async function s(){c();u();f();m();await w(n.normal);await w(n.defer);await w(n.async);await p();document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))});window.dispatchEvent(new Event("perfmatters-allScriptsLoaded")),E().then(()=>{h()})}function c(){let o={};function e(t,e){function n(e){return o[t].delayedEvents.indexOf(e)>=0?"perfmatters-"+e:e}if(!o[t]){o[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},delayedEvents:[]};t.addEventListener=function(){arguments[0]=n(arguments[0]);o[t].originalFunctions.add.apply(t,arguments)};t.removeEventListener=function(){arguments[0]=n(arguments[0]);o[t].originalFunctions.remove.apply(t,arguments)}}o[t].delayedEvents.push(e)}function t(t,n){const e=t[n];Object.defineProperty(t,n,{get:!e?function(){}:e,set:function(e){t["perfmatters"+n]=e}})}e(document,"DOMContentLoaded");e(window,"DOMContentLoaded");e(window,"load");e(document,"readystatechange");t(document,"onreadystatechange");t(window,"onload")}function u(){let n=window.jQuery;Object.defineProperty(window,"jQuery",{get(){return n},set(t){if(t&&t.fn&&!o.includes(t)){t.fn.ready=t.fn.init.prototype.ready=function(e){if(r){e.bind(document)(t)}else{document.addEventListener("perfmatters-DOMContentLoaded",function(){e.bind(document)(t)})}};const e=t.fn.on;t.fn.on=t.fn.init.prototype.on=function(){if(this[0]===window){function t(e){e=e.split(" ");e=e.map(function(e){if(e==="load"||e.indexOf("load.")===0){return"perfmatters-jquery-load"}else{return e}});e=e.join(" ");return e}if(typeof arguments[0]=="string"||arguments[0]instanceof String){arguments[0]=t(arguments[0])}else if(typeof arguments[0]=="object"){Object.keys(arguments[0]).forEach(function(e){delete Object.assign(arguments[0],{[t(e)]:arguments[0][e]})[e]})}}return e.apply(this,arguments),this};o.push(t)}n=t}})}function f(){document.querySelectorAll("script[type=pmdelayedscript]").forEach(function(e){if(e.hasAttribute("src")){if(e.hasAttribute("defer")&&e.defer!==false){n.defer.push(e)}else if(e.hasAttribute("async")&&e.async!==false){n.async.push(e)}else{n.normal.push(e)}}else{n.normal.push(e)}})}function m(){var o=document.createDocumentFragment();[...n.normal,...n.defer,...n.async].forEach(function(e){var t=e.getAttribute("src");if(t){var n=document.createElement("link");n.href=t;if(e.getAttribute("data-perfmatters-type")=="module"){n.rel="modulepreload"}else{n.rel="preload";n.as="script"}o.appendChild(n)}});document.head.appendChild(o)}async function w(e){var t=e.shift();if(t){await l(t);return w(e)}return Promise.resolve()}async function l(t){await v();return new Promise(function(e){const n=document.createElement("script");[...t.attributes].forEach(function(e){let t=e.nodeName;if(t!=="type"){if(t==="data-perfmatters-type"){t="type"}n.setAttribute(t,e.nodeValue)}});if(t.hasAttribute("src")){n.addEventListener("load",e);n.addEventListener("error",e)}else{n.text=t.text;e()}t.parentNode?t.parentNode.replaceChild(n,t):e()})}async function p(){r=true;await v();document.dispatchEvent(new Event("perfmatters-DOMContentLoaded"));await v();window.dispatchEvent(new Event("perfmatters-DOMContentLoaded"));await v();document.dispatchEvent(new Event("perfmatters-readystatechange"));await v();if(document.perfmattersonreadystatechange){document.perfmattersonreadystatechange()}await v();window.dispatchEvent(new Event("perfmatters-load"));await v();if(window.perfmattersonload){window.perfmattersonload()}await v();o.forEach(function(e){e(window).trigger("perfmatters-jquery-load")})}async function v(){return new Promise(function(e){requestAnimationFrame(e)})}function h(){window.removeEventListener("touchstart",b,{passive:true});window.removeEventListener("mousedown",b);i.forEach(e=>{if(e.target.outerHTML===a){e.target.dispatchEvent(new MouseEvent("click",{view:e.view,bubbles:true,cancelable:true}))}})}function E(){return new Promise(e=>{window.pmIsClickPending?g=e:e()})}function y(){window.pmIsClickPending=true}function g(){window.pmIsClickPending=false}function L(e){e.target.removeEventListener("click",L);C(e.target,"pm-onclick","onclick");i.push(e),e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();g()}function b(e){if(e.target.tagName!=="HTML"){if(!a){a=e.target.outerHTML}window.addEventListener("touchend",A);window.addEventListener("mouseup",A);window.addEventListener("touchmove",k,{passive:true});window.addEventListener("mousemove",k);e.target.addEventListener("click",L);C(e.target,"onclick","pm-onclick");y()}}function k(e){window.removeEventListener("touchend",A);window.removeEventListener("mouseup",A);window.removeEventListener("touchmove",k,{passive:true});window.removeEventListener("mousemove",k);e.target.removeEventListener("click",L);C(e.target,"pm-onclick","onclick");g()}function A(e){window.removeEventListener("touchend",A);window.removeEventListener("mouseup",A);window.removeEventListener("touchmove",k,{passive:true});window.removeEventListener("mousemove",k)}function C(e,t,n){if(e.hasAttribute&&e.hasAttribute(t)){event.target.setAttribute(n,event.target.getAttribute(t));event.target.removeAttribute(t)}}})();</script></body>*** tag. - **Wp Footer** - This will place the content between ***</footer>*** and ***</body>*** tags. 5. Then you need to set the priority of the specific hook from the **Priority** field. Lower the number earlier will be the execution of the hook. 6. Once done, click on the **Next** button. 7. On the next screen, you have to set the appropriate display conditions. From the **Include In** dropdown, you have to select where the template will be visible. Then, from the **Exclude From** dropdown, you can set where the template won’t show. In both sections, you will find the same location options that are available in the [header template](https://nexterwp.com/docs/create-header-template-in-wordpress/). 8. Once done, then click on the **Create** button. 9. Then it will open the WordPress editor, where you can use the WordPress blocks or Elementor to create the actual layout and content of the template. 10. Once done, publish the template. Now your template will be created and will show as per the set display conditions. Also, read [How to add Code Snippets for FREE in WordPress](https://nexterwp.com/docs/add-code-snippets-in-wordpress/).

--- title: "How to Add an Action & Filter Hook in WordPress Website?" url: https://nexterwp.com/docs/add-action-filter-hook-in-wordpress/ date: 2023-04-24 modified: 2026-03-31 author: "Aditya Sharma" description: "Hooks are an essential part of WordPress development as they provide a way to modify the functionality of a theme or plugin without editing the original code. It allows users..." image: https://nexterwp.com/wp-content/uploads/2024/05/add-action-filter-hook-in-wordpress-1024x519.jpg word_count: 675 --- # How to Add an Action & Filter Hook in WordPress Website? ## Key Takeaways - Hooks in WordPress allow users to modify theme or plugin functionality without altering original code. - Nexter Extension (Free) plugin provides predefined hooks for adding content without extensive coding knowledge. - Nexter Theme Builder enables users to select various hook locations, such as Html Before and Wp Footer, for content placement. - Users can set display conditions and priorities for templates created in the Nexter Theme Builder before publishing. Hooks are an essential part of WordPress development as they provide a way to modify the functionality of a theme or plugin without editing the original code. It allows users to add custom code or content to a specific location within WordPress, such as adding a social sharing button to a blog post or displaying custom content in the header section. ***Requirement – This is a feature of Nexter Extension (Free) plugin, make sure its installed & activated to enjoy all its powers.*** You need to know custom coding to utilize the power of hooks, but the Nexter Theme Builder has many predefined hooks that you can use to add content to various locations of your website. This feature makes it possible for you to add custom code or content without the need for extensive coding knowledge. To add content through hooks using the Nexter Theme Builder, follow the steps – 1. From the Dashboard, go to **Nexter Extension** > **Theme Builder** > **Add New Template**. 2. In the popup, select **Hooks** from the **Select Template** dropdown. 3. Then, in the **Name of Template** field, add the template name. 4. After that, you can click on the **Additional Settings** link. From the **Actions Hooks** dropdown, you have to select the hook. - **Html Before** - This will place the content right at the top of the HTML page. It will be placed before the ****** code begins. - **Head Top** - This will place the content right after the ****** tag. It is ideal for adding some meta tags. - **Head Bottom** - This will place the content right before the ****** tag on the HTML page. This can be used to add some additional CSS or js on the site. - **Wp Head** - This will place the content before the ****** tag. - **Body Top** - This will place the content after the ***<body>*** tag starts. - **Header Before** - This will place the content before the page header i.e. before ***<header>*** tag. This can be useful to show some messages like sales or discount offers before the page header. - **Header After** - This will place the content after the page header i.e. after ***</header>*** tag. Using this, you can show some content in between the header and body content. - **Content Top** - This will place the content right after the page container starts. - **Content Bottom** - This will place the content right before the page container ends. - **Comments Before** - This will place the content before the page or post comments start. - **Comments After** - This will place the content after the page or post comment form ends. - **Sidebar Before** - This will place the content at the start of the sidebar. - **Sidebar After** - This will place the content at the bottom of the sidebar. - **Footer Before** - This will place the content before the footer starts. - **Footer After** - This will place the content after the footer ends. - **Body Bottom** - This will place the content right before the ***<script id="perfmatters-delayed-scripts-js">(function(){window.pmDC=0;window.pmDT=15;if(window.pmDT){var e=setTimeout(d,window.pmDT*1e3)}const t=["keydown","mousedown","mousemove","wheel","touchmove","touchstart","touchend"];const n={normal:[],defer:[],async:[]};const o=[];const i=[];var r=false;var a="";window.pmIsClickPending=false;t.forEach(function(e){window.addEventListener(e,d,{passive:true})});if(window.pmDC){window.addEventListener("touchstart",b,{passive:true});window.addEventListener("mousedown",b)}function d(){if(typeof e!=="undefined"){clearTimeout(e)}t.forEach(function(e){window.removeEventListener(e,d,{passive:true})});if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",s)}else{s()}}async function s(){c();u();f();m();await w(n.normal);await w(n.defer);await w(n.async);await p();document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))});window.dispatchEvent(new Event("perfmatters-allScriptsLoaded")),E().then(()=>{h()})}function c(){let o={};function e(t,e){function n(e){return o[t].delayedEvents.indexOf(e)>=0?"perfmatters-"+e:e}if(!o[t]){o[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},delayedEvents:[]};t.addEventListener=function(){arguments[0]=n(arguments[0]);o[t].originalFunctions.add.apply(t,arguments)};t.removeEventListener=function(){arguments[0]=n(arguments[0]);o[t].originalFunctions.remove.apply(t,arguments)}}o[t].delayedEvents.push(e)}function t(t,n){const e=t[n];Object.defineProperty(t,n,{get:!e?function(){}:e,set:function(e){t["perfmatters"+n]=e}})}e(document,"DOMContentLoaded");e(window,"DOMContentLoaded");e(window,"load");e(document,"readystatechange");t(document,"onreadystatechange");t(window,"onload")}function u(){let n=window.jQuery;Object.defineProperty(window,"jQuery",{get(){return n},set(t){if(t&&t.fn&&!o.includes(t)){t.fn.ready=t.fn.init.prototype.ready=function(e){if(r){e.bind(document)(t)}else{document.addEventListener("perfmatters-DOMContentLoaded",function(){e.bind(document)(t)})}};const e=t.fn.on;t.fn.on=t.fn.init.prototype.on=function(){if(this[0]===window){function t(e){e=e.split(" ");e=e.map(function(e){if(e==="load"||e.indexOf("load.")===0){return"perfmatters-jquery-load"}else{return e}});e=e.join(" ");return e}if(typeof arguments[0]=="string"||arguments[0]instanceof String){arguments[0]=t(arguments[0])}else if(typeof arguments[0]=="object"){Object.keys(arguments[0]).forEach(function(e){delete Object.assign(arguments[0],{[t(e)]:arguments[0][e]})[e]})}}return e.apply(this,arguments),this};o.push(t)}n=t}})}function f(){document.querySelectorAll("script[type=pmdelayedscript]").forEach(function(e){if(e.hasAttribute("src")){if(e.hasAttribute("defer")&&e.defer!==false){n.defer.push(e)}else if(e.hasAttribute("async")&&e.async!==false){n.async.push(e)}else{n.normal.push(e)}}else{n.normal.push(e)}})}function m(){var o=document.createDocumentFragment();[...n.normal,...n.defer,...n.async].forEach(function(e){var t=e.getAttribute("src");if(t){var n=document.createElement("link");n.href=t;if(e.getAttribute("data-perfmatters-type")=="module"){n.rel="modulepreload"}else{n.rel="preload";n.as="script"}o.appendChild(n)}});document.head.appendChild(o)}async function w(e){var t=e.shift();if(t){await l(t);return w(e)}return Promise.resolve()}async function l(t){await v();return new Promise(function(e){const n=document.createElement("script");[...t.attributes].forEach(function(e){let t=e.nodeName;if(t!=="type"){if(t==="data-perfmatters-type"){t="type"}n.setAttribute(t,e.nodeValue)}});if(t.hasAttribute("src")){n.addEventListener("load",e);n.addEventListener("error",e)}else{n.text=t.text;e()}t.parentNode?t.parentNode.replaceChild(n,t):e()})}async function p(){r=true;await v();document.dispatchEvent(new Event("perfmatters-DOMContentLoaded"));await v();window.dispatchEvent(new Event("perfmatters-DOMContentLoaded"));await v();document.dispatchEvent(new Event("perfmatters-readystatechange"));await v();if(document.perfmattersonreadystatechange){document.perfmattersonreadystatechange()}await v();window.dispatchEvent(new Event("perfmatters-load"));await v();if(window.perfmattersonload){window.perfmattersonload()}await v();o.forEach(function(e){e(window).trigger("perfmatters-jquery-load")})}async function v(){return new Promise(function(e){requestAnimationFrame(e)})}function h(){window.removeEventListener("touchstart",b,{passive:true});window.removeEventListener("mousedown",b);i.forEach(e=>{if(e.target.outerHTML===a){e.target.dispatchEvent(new MouseEvent("click",{view:e.view,bubbles:true,cancelable:true}))}})}function E(){return new Promise(e=>{window.pmIsClickPending?g=e:e()})}function y(){window.pmIsClickPending=true}function g(){window.pmIsClickPending=false}function L(e){e.target.removeEventListener("click",L);C(e.target,"pm-onclick","onclick");i.push(e),e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();g()}function b(e){if(e.target.tagName!=="HTML"){if(!a){a=e.target.outerHTML}window.addEventListener("touchend",A);window.addEventListener("mouseup",A);window.addEventListener("touchmove",k,{passive:true});window.addEventListener("mousemove",k);e.target.addEventListener("click",L);C(e.target,"onclick","pm-onclick");y()}}function k(e){window.removeEventListener("touchend",A);window.removeEventListener("mouseup",A);window.removeEventListener("touchmove",k,{passive:true});window.removeEventListener("mousemove",k);e.target.removeEventListener("click",L);C(e.target,"pm-onclick","onclick");g()}function A(e){window.removeEventListener("touchend",A);window.removeEventListener("mouseup",A);window.removeEventListener("touchmove",k,{passive:true});window.removeEventListener("mousemove",k)}function C(e,t,n){if(e.hasAttribute&&e.hasAttribute(t)){event.target.setAttribute(n,event.target.getAttribute(t));event.target.removeAttribute(t)}}})();</script></body>*** tag. - **Wp Footer** - This will place the content between ***</footer>*** and ***</body>*** tags. 5. Then you need to set the priority of the specific hook from the **Priority** field. Lower the number earlier will be the execution of the hook. 6. Once done, click on the **Next** button. 7. On the next screen, you have to set the appropriate display conditions. From the **Include In** dropdown, you have to select where the template will be visible. Then, from the **Exclude From** dropdown, you can set where the template won’t show. In both sections, you will find the same location options that are available in the [header template](https://nexterwp.com/docs/create-header-template-in-wordpress/). 8. Once done, then click on the **Create** button. 9. Then it will open the WordPress editor, where you can use the WordPress blocks or Elementor to create the actual layout and content of the template. 10. Once done, publish the template. Now your template will be created and will show as per the set display conditions. Also, read [How to add Code Snippets for FREE in WordPress](https://nexterwp.com/docs/add-code-snippets-in-wordpress/).