{"id":1339,"date":"2020-03-23T10:01:00","date_gmt":"2020-03-23T03:01:00","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1339"},"modified":"2020-06-21T09:36:38","modified_gmt":"2020-06-21T02:36:38","slug":"what-is-actions-and-filters","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/what-is-actions-and-filters\/","title":{"rendered":"What are Hooks, Filters, and Actions? (Simple Guide)"},"content":{"rendered":"\n<p>Have you seen function like <code>add_filter()<\/code> or <code>add_action()<\/code> scattered across your Theme files?<\/p>\n\n\n\n<p>They are called Hooks and we will learn what exactly those are.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. What are Hooks?<\/h2>\n\n\n\n<p>The main idea is that if you want to customize a plugin, you should not change the files directly because <strong>your changes will be overwritten <\/strong>when you update that plugin.<\/p>\n\n\n\n<p>The same logic goes to WordPress core files.<\/p>\n\n\n\n<p>Luckily, plugin maker can add Hooks so we can customize them within our own code.<\/p>\n\n\n\n<p>There are two types of Hook:<\/p>\n\n\n\n<ul><li><strong>Filter <\/strong>&#8211; to change the value of a variable.<\/li><li><strong>Action <\/strong>&#8211; to run a function at a certain place.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. Creating a Filter<\/h2>\n\n\n\n<p>Let&#8217;s assume we have created an eCommerce plugin. The default currency is &#8220;$&#8221; and we want it to be customizable:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$currency = apply_filters( 'my_currency', '$' );\n\n\/\/ 1st param is the name of the filter\n\/\/ 2nd param is the default value<\/code><\/pre>\n\n\n\n<p>Hooking into that filter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_filter( 'my_currency', function( $currency ) {\n  return '\u20ac';\n} );\n\n\/\/ Or in older PHP syntax:\n\nadd_filter( 'my_currency', 'change_currency' );\nfunction change_currency( $currency ) {\n  return '\u20ac';\n}<\/code><\/pre>\n\n\n\n<p>Now the currency is changed to \u20ac (Euro).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Creating an Action<\/h2>\n\n\n\n<p>We have a Header template and we want developers to be able to add extra elements in before or after the navigation menu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;header class=\"site-header\">\n  &lt;?php do_action( 'before_nav' ); ?>\n  &lt;nav> ... &lt;\/nav>\n  &lt;?php do_action( 'after_nav' ); ?>\n&lt;\/header><\/code><\/pre>\n\n\n\n<p>Hooking into that action:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/\/ Logo before nav\nadd_action( 'before_nav', function() {\n  echo '&lt;img class=\"logo\" src=\"...\">';\n} );\n\n\/\/ Breadcrumb after nav\nadd_action( 'after_nav', function() {\n  echo '&lt;div class=\"breadcrumb\"> ... &lt;\/div>';\n} );<\/code><\/pre>\n\n\n\n<p>With the snippet above, we added Logo before navigation, and Breadcrumb after it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Hook Priority<\/h2>\n\n\n\n<p>A filter and action can be <strong>hooked multiple times<\/strong>. It will run them in the order of their priority ascendingly.<\/p>\n\n\n\n<p>By default, the priority is 10 and you can change it by adding 3rd parameter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">\/\/ These codes follow the scenario from No.3\n\nadd_action( 'after_nav', function() {\n  echo '&lt;div class=\"breadcrumb\"> ... &lt;\/div>';\n} );\n\nadd_action( 'after_nav', function() {\n  echo '&lt;div class=\"search-bar\"> ... &lt;\/div>';\n}, 5 );<\/code><\/pre>\n\n\n\n<p>The breadcrumb&#8217;s hook doesn&#8217;t have 3rd param, so the priority is 10.<\/p>\n\n\n\n<p>Meanwhile, the search bar&#8217;s hook is set to 5 so <strong>it will appear first<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Multiple Hook Parameters<\/h2>\n\n\n\n<p>You can pass in more than 1 variable when creating a filter or action. In that case, you need to define how many as the 4th parameter.<\/p>\n\n\n\n<p><strong>EXAMPLE<\/strong>:<\/p>\n\n\n\n<p>We have a Core Filter called <code><a rel=\"noreferrer noopener\" aria-label=\"the_title (opens in a new tab)\" href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/the_title\/\" target=\"_blank\">the_title<\/a><\/code>. It is used to modify the post title and passed in 2 variables: the current title and post ID.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"315\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/hooks-the-title-2.jpg\" alt=\"\" class=\"wp-image-1353\" srcset=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/hooks-the-title-2.jpg 750w, https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/05\/hooks-the-title-2-480x202.jpg 480w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption>Documentation of <code>the_title<\/code> filter in wordpress.org<\/figcaption><\/figure>\n\n\n\n<p>If you want to use the ID, you need to add 4th parameter in your <code>add_filter()<\/code> like shown below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_filter( 'the_title', function( $title, $id ) {\n  $thumbnail = get_the_post_thumbnail( $id );\n  return $thumbnail . $title;\n}, 10, 2 );<\/code><\/pre>\n\n\n\n<p>Now the title will have its featured image before it.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Hook allows you to modify Plugin or Core files within your own code. So when the Plugin or WordPress is updated, your changes still stay intact.<\/p>\n\n\n\n<p>Although the code samples given are very short, I believe they are powerful enough to teach all you need to get started.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Let me know in comment if there are some part that you need more explanation \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Have you seen function like add_filter() or add_action() scattered across your Theme files? They are called Hooks and we will learn what exactly those are.<\/p>\n","protected":false},"author":1,"featured_media":1355,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[31],"class_list":["post-1339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-php"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1339"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1339\/revisions"}],"predecessor-version":[{"id":1646,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1339\/revisions\/1646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1355"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}