We already discussed the importance of using child themes to customize and extend theme templates. Using the WordPress filter and action hooks is another way of customizing theme features. We will mainly use these hooks to extend the functions provided by the theme. However, we can use some of the filter and action hooks to change parts of templates without needing to replace them completely.
Once we choose a theme, we can explore the actions and filters within the theme to understand its extendable features and locations. The simplest way to identify these actions and filters is to use the directory or project search feature in your code editor. Most quality code editors provide this feature by default. You should use the term apply_filters to search for filters in the theme, and do_action to find out the actions defined in it. You may find a small number of these hooks in free themes and hundreds in premium themes. These hooks consist of built-in WordPress hooks as well as theme-specific hooks. As a developer, you need to have a thorough knowledge of the common built-in WordPress hooks in themes. Let's take a look at some of the common filters and actions used in themes:
- the_content: This is the most commonly used filter in themes, intended to modify the post content. We can either modify the entire post content or add dynamic content before or after a post. Usually, this is used to display additional data for posts such as related posts, advertisements, and social sharing buttons. Consider the following code for adding custom content after each post. This code should be placed in the functions.php file of the child theme:
add_filter( 'the_content', 'wpquickstart_add_custom_text_single_posts' );
function wpquickstart_add_custom_text_single_posts( $content ) {
if ( is_single() && in_the_loop() && is_main_query() ) {
return $content . "Custom Text After Post";
}
return $content;
}
- The post content is passed as a parameter to this function. Here, we use the is_single template tag to make sure that the custom content is only applied to individual posts, and not to archives. The other two conditions restrict this text from applying to posts outside the main query and loop. This is a very basic illustration of the functionality of the the_content filter. You can add more content and different conditions to handle various requirements.
- the_permalink: This filters the display of the permalink for the current post. You can use code similar to the preceding example for modifying a post link.
- the_title: This filters the title of the post. Used for modifying a post title based on certain conditions.
- comment_form_default_fields: This filters the fields of a comment form. By default, the comment form contains fields for comment, name, email, and website. The fields are passed as an array type parameter to this filter. You can use this filter to add new fields or remove existing fields from the comment form. The following code removes the website field from the comment form using this filter:
function wpquickstart_remove_website_field($fields) {
unset($fields['url']);
return $fields;
}
add_filter('comment_form_default_fields', 'wpquickstart_remove_website_field');
- wp_nav_menu_item_custom_fields: The name suggests that this as a filter, but it's actually an action executed in WordPress. The process of adding custom fields to menu items is one of the common tasks for features such as menu item-specific CSS and menu item restrictions. In such cases, we can use this action to add custom fields, as shown in the following code:
add_action( 'wp_nav_menu_item_custom_fields', 'wpquickstart_menu_button_fields', 10, 4 );
function wpquickstart_menu_button_fields( $item_id, $item, $depth, $args ) { ?>
<div class="fusion-menu-options-container">
<div class="option-details">
<h3><?php _e( 'Menu Class', 'wpquickstart' ); ?></h3>
<p class="description"><?php _e( 'Add custom css class.', 'wpquickstart' ); ?></p>
</div>
<div class="">
<input type="text" id="wpquick-menu-class" name="wpquick-menu-class" value="" />
</div>
</div>
<?php } ?>
- The preceding code will add a new text field named Menu Class to menu items in the backend menu.
These are some of the frequently used ones, among hundreds of possible WordPress actions and filters. You should explore these hooks by using various WordPress themes in order to identify the necessary ones for your implementations.
The filters and actions discussed in the preceding section are used for common WordPress purposes and hence can be used in any theme. Theme-specific actions and filters, on the other hand, are designed for advanced theme features. Most of these actions and filters cannot be used in other themes. We can easily identify theme-specific hooks by looking at the prefix used for hook names. The Twenty Seventeen theme uses twentyseventeen_ as the prefix for theme-specific hooks. Let's consider one of the filters that's available in the Twenty Seventeen theme to understand the use of theme-specific hooks:
apply_filters( 'twentyseventeen_content_width', $content_width );
This filter is used to customize the width of the page based on page layout. Let's see how we can implement this filter to modify the width:
add_filter( 'twentyseventeen_content_width', 'wpquickstart_content_width' );
function wpquickstart_content_width($content_width){
if(is_page()) {
$content_width = "800";
}
return $content_width;
}
In the preceding code, we changed the width of pages in the Twenty Seventeen theme by using the theme-specific filter. We can add more conditions to change the width and display different types of layouts.