WordPress Plugin API<\/a> that we can utilize to extend WordPress. The other being actions which are outside of the scope of this article but will be discussed in a future article.<\/p>\n\n\n\nSo what are hooks? Hooks are events\/functions that fire at specific times when the page you’re viewing is being rendered. WordPress is jam packed with hooks that fire throughout every single page load, and it’s these hooks that we want to target or mimic.<\/p>\n\n\n\n
Practical Uses For WordPress Filters To Extend Your Plugin\/Theme<\/h3>\n\n\n\n Filters are different from actions in the what they do and how they’re supposed to be used. An example of a standard WordPress filter would be the body_class<\/span> filter which allows you to add classes to the <body><\/span> of the website.<\/p>\n\n\n\nadd_filter( 'body_class', 'my_filter_manipulator' );\nfunction my_filter_manipulator( $classes ){\n\t$classes .= ' my_really_cool_class ';\n\treturn $classes;\n}\n<\/code><\/pre>\n\n\n\nSo what just happened? Well first we hooked into the body_class<\/span> filter and provided a callback function to be executed.<\/p>\n\n\n\nadd_filter( 'body_class', 'my_filter_manipulator' );\n<\/code><\/pre>\n\n\n\nThe callback function my_filter_manipulator()<\/span> is where we manipulate the body_class<\/span> filter. Now it’s important to understand that every WordPress filter requires an argument to be passed into our function. This is exactly what we did when we added the $classes<\/span> variable to our my_filter_manipulator()<\/span> function. The variable $classes<\/span> is not defined anywhere because it is supplied to us via the body_class<\/span> hook, and $classes<\/span> is the data we will be manipulating through our function.<\/p>\n\n\n\nfunction my_filter_manipulator( $classes ) {\n}\n<\/code><\/pre>\n\n\n\nBy default the body_class<\/span> filter contains many previously hooked classes provided by WordPress so we don’t want to override them all. Instead we want to add our classes to it by concatenating our classes to the $classes<\/span> string.<\/p>\n\n\n\nOn a side note, not all of the arguments we filter will be strings. In many cases they will come in as integers, or arrays, but for the sake of this specific filter, it’s a string.<\/p>\n\n\n\n
function my_filter_manipulator( $classes ){\n\t$classes .= ' my_body_class_1 my_body_class_2 ';\n\treturn $classes;\n}\n<\/code><\/pre>\n\n\n\nIn the example above we added 2 classes to the <body><\/span> of our site, but what if we only want to add it on a specific page or post type? Well this is where WordPress filters can be really handy.<\/p>\n\n\n\nfunction my_filter_manipulator( $classes ){\n\tif( is_page('about') || is_post_type( 'lessons' ) ) {\n\t\t$classes .= ' my_body_class_1 my_body_class_2'';\n\t}\n\treturn $classes;\n}\n<\/code><\/pre>\n\n\n\nIn summary we added the classes to the about page and the lessons post type pages only, and we returned the argument back to the filter. It’s important to note that if we don’t return the data, nothing will happen.<\/p>\n\n\n\n
Creating WordPress Filters<\/h2>\n\n\n\n Now that we understand what WordPress filters are and how we can use them to extend WordPress’ default functionality, it’s time to learn how we can create our own filters.<\/p>\n\n\n\n
For the sake of this article I’ll show you how to create a new filter that mimics the functionality of the body_class<\/span> filter which can be used in multiple areas.<\/p>\n\n\n\nFirst off let’s imagine that we want to apply a set of classes to multiple html elements so that we can target those elements specifically depending on the page we’re on. The perfect example would be to have a different header and footer for the homepage, pages, posts, etc. What we need to do first is create a function that will contain all of our logic.<\/p>\n\n\n\n
function theme_classes() {\n}\n<\/code><\/pre>\n\n\n\nNext we can begin adding classes based on the page we’re on, and then imploding them into a string to be output.<\/p>\n\n\n\n
function theme_classes() {\n\tif( is_front_page() ) {\n\t\t$class_array[] = 'front-page';\n\t} elseif ( is_single() ) {\n\t\t$class_array[] = 'single';\n\t} elseif ( is_archive() ) {\n\t\t$class_array[] = 'archive';\n\t} else {\n\t\t$class_array[] = 'page';\n\t}\n\treturn sprintf( 'class=\"%1$s\"', implode( ' ', $class_array ) );\n}\n<\/code><\/pre>\n\n\n\nNow is the fun part. Let’s create a new filter that will allow us to add more classes after the the default classes have been added. The filter we will create will be theme_classes<\/span>.<\/p>\n\n\n\nfunction theme_classes() {\n\tif( is_front_page() ) {\n\t\t$class_array[] = 'front-page';\n\t} elseif ( is_single() ) {\n\t\t$class_array[] = 'single';\n\t} elseif ( is_archive() ) {\n\t\t$class_array[] = 'archive';\n\t} else {\n\t\t$class_array[] = 'page';\n\t}\n\n\t\/**\n\t * theme_classes filter\n\t * \n\t * @var array $class_array\n\t *\/\n\t$class_array = apply_filters( 'theme_classes', $class_array );\n\n\treturn sprintf( 'class=\"%1$s\"', implode( ' ', $class_array ) );\n}\n<\/code><\/pre>\n\n\n\nThe theme_classes filter now allows us to hook into this function and add new array items to the $class_array<\/span> variable like so.<\/p>\n\n\n\nadd_action( 'theme_classes', 'add_new_classes' );\nfunction add_new_classes( $class_array ){\n\t$class_array[] = 'some_new_class';\n\treturn $class_array;\n}\n<\/code><\/pre>\n\n\n\nPage Specific WordPress Filters<\/h3>\n\n\n\n Now getting back to the filter we created. It allows us to add classes to the overall $class_array<\/span>, but what if we just wanted to modify one of the specific page classes that we had defined earlier? Well we could do that by adding more if statements to the add_new_classes()<\/span> function, or we could add new filters to the default classes in our theme_classes()<\/span> function to prevent having to add more if\/else statements.<\/p>\n\n\n\nif( is_front_page() ) {\n\n\t$class_array[] = apply_filters( 'theme_frontpage_classes', 'front-page' );\n\n} elseif ( is_single() ) {\n\n\t$class_array[] = apply_filters( 'theme_single_classes', 'single' );\n\n} elseif ( is_archive() ) {\n\n\t$class_array[] = apply_filters( 'theme_archive_classes', 'archive' );\n\n} else {\n\n\t$class_array[] = apply_filters( 'theme_page_classes', 'page' );\n\n}\n<\/code><\/pre>\n\n\n\nSo now we’ve created 4 new filters; theme_frontpage_classes<\/span>, theme_single_classes<\/span>, theme_archive_classes<\/span>, and theme_page_classes<\/span>. By default all of these new filters provide a string, so whenever we hook into them we also need to provide a string.<\/p>\n\n\n\nNow instead of adding a class to all of the pages we can specify any of the default pages with our new filters. Let’s add a class to the frontpage!<\/p>\n\n\n\n
add_filter( 'theme_frontpage_classes', function( $class ){\n\t$class = ' my_page_classes ';\n\treturn $class;\n});\n<\/code><\/pre>\n\n\n\nUsing The Filters In Our HTML Markup<\/h3>\n\n\n\n Now that we’ve got our function setup all we have to do is echo it wherever we want these classes to display. In this case we’ll just add it to the header and footer.<\/p>\n\n\n\n
<header id=\"main\" <?php echo theme_classes(); ?> ><\/header>\n<footer id=\"main\" <?php echo theme_classes(); ?> ><\/footer><\/code><\/pre>\n\n\n\nAnd that’s it! Now all we have to do is hook into our filters and the classes we add will be added to both our header and footer.<\/p>\n\n\n\n
Final Thoughts<\/h3>\n\n\n\n Now that you know the basics of filters I hope you’ll use them more throughout your plugins and themes. Not everything needs to be filterable, but the things that you do choose to allow filters for will definitely help you and other developers extend your code. Lastly, If you enjoyed this tutorial I hope you’ll subscribe and share it. I’ll be posting more like this with time.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress filters are one of the major contributors to WordPress’ over all success. They allow developers to extend WordPress tremendously in themes and plugins, which is the main reason why so many developers like myself have adopted the platform. So what are WordPress filters and how can I use them in my next theme? In […]<\/p>\n","protected":false},"author":1,"featured_media":109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[8],"tags":[28,27,26],"yoast_head":"\n
Getting Started With WordPress Filters - Carlos Rios<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n \n\t \n\t \n\t \n