{"id":5865,"date":"2016-11-20T05:23:14","date_gmt":"2016-11-20T13:23:14","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=5865"},"modified":"2016-11-20T05:30:14","modified_gmt":"2016-11-20T13:30:14","slug":"wordpress-hooks-beaver-builder-theme","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/wordpress-hooks-beaver-builder-theme\/","title":{"rendered":"A Lay Man&#8217;s Guide to WordPress Hooks &#038; Beaver Builder Theme"},"content":{"rendered":"<p>Hooks are one of my favorite WordPress Features. It allows developers to easily extend the code. When I first started WordPress development, I had not idea what a &#8220;Hook&#8221; meant.\u00a0So, here&#8217;s my post describing what a Hook means and how useful it is.<\/p>\n<h3>What is a WordPress Hook?<\/h3>\n<p>Instead of writing a technical jargon, I will keep it simple. We all have a Wardrobe and every wardrobe consists of hangers, hooks, racks, and drawers. Why do we use Hooks? We use hooks to hang our clothes and\u00a0arrange them.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9937\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook3.jpg\" alt=\"Hook\" width=\"800\" height=\"591\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook3.jpg 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook3-300x222.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook3-768x567.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p style=\"text-align: center;\">We use Hooks in our Kitchen to hang \/ organize stuff too.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9936\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook2.jpg\" alt=\"Hook\" width=\"800\" height=\"533\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook2.jpg 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook2-300x200.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook2-768x512.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p style=\"text-align: center;\">Or we can use them to hang a picture in our living area.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9935\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook1.jpg\" alt=\"Hook\" width=\"800\" height=\"533\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook1.jpg 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook1-300x200.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/hook1-768x512.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><em>Does that give you a hint?<\/em><br \/>\nHooks are used to &#8220;add\/insert\/move\/organize&#8221; our stuff. The same is used for WordPress too.\u00a0Hooks are the places inside the existing theme \/ plugin code where you can inject your code.<\/p>\n<h3>WordPress Hooks in Beaver Builder Theme<\/h3>\n<p>Beaver Builder theme provides several hooks\u00a0allowing you to easily add your custom code in various locations. Davinder at Pro Beaver has put up this amazing <a href=\"http:\/\/probeaver.com\/beaver-theme-hooks\/\" target=\"_blank\" rel=\"noopener\">Visual Guide<\/a>\u00a0which exposes all the WordPress hooks present in Beaver Builder Theme and their locations.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9938\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/beaver-builder-theme-hooks.jpg\" alt=\"beaver-builder-theme-hooks\" width=\"800\" height=\"409\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/beaver-builder-theme-hooks.jpg 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/beaver-builder-theme-hooks-300x153.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/beaver-builder-theme-hooks-768x393.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3>How to use a WordPress Hook?<\/h3>\n<p>Now that we know what a <strong>WordPress\u00a0Hook<\/strong> is and how useful it is. Let&#8217;s take a look at how we can use it.\u00a0To use a hook, we need to first create a PHP function. It\u00a0can be something like this<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/psahalot\/ca04d9afbb770009251d54c5866f055d.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/psahalot\/ca04d9afbb770009251d54c5866f055d\" target=\"_blank\" rel=\"noopener\">Gist<\/a>.<\/noscript><\/div>\n<p>The first part\u00a0<strong>bb_hook_example\u00a0<\/strong>is the function that contains our code \/ HTML content that we want to place at\u00a0<strong>fl_page_open\u00a0<\/strong>location in the Beaver Builder Theme.<\/p>\n<p>In this example, I have simply added an output for\u00a0<strong>Hello World.\u00a0<\/strong><\/p>\n<p>Next, we use\u00a0<strong>add_action() function\u00a0<\/strong>to tell WordPress about the location where we want to place our\u00a0<strong>bb_hook_example()\u00a0<\/strong>function&#8217;s code \/ output.\u00a0The first parameter of this function is the built-in hook location and the\u00a0second parameter has our function name.<\/p>\n<p>Here&#8217;s what the output looks like<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9939\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/bb-theme-hook-example.png\" alt=\"bb-theme-hook-example\" width=\"800\" height=\"249\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/bb-theme-hook-example.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/bb-theme-hook-example-300x93.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/11\/bb-theme-hook-example-768x239.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>So, that&#8217;s all about using WordPress Hooks. Isn&#8217;t that easy?<\/p>\n<p>We have another amazing tutorial describing how you can use <a href=\"https:\/\/wpbeaveraddons.com\/\">PowerPack Beaver Builder\u00a0Addons&#8217;<\/a> Modal Box module to <a href=\"https:\/\/wpbeaveraddons.com\/site-wide-popup-box-beaver-builder\/\">add a Subscribe form for your site<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hooks are one of my favorite WordPress Features. It allows developers to easily extend the code. When I first started WordPress development, I had not idea what a &#8220;Hook&#8221; meant.\u00a0So, here&#8217;s my post describing what a Hook means and how useful it is. What is a WordPress Hook? Instead of writing a technical jargon, I&hellip;<\/p>\n","protected":false},"author":1,"featured_media":9936,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/5865"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=5865"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/5865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/9936"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=5865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=5865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=5865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}