Advertisement
  1. Code
  2. Creative Coding
Code

How to Modify the Parent Theme Behavior Within the Child Theme

by
Languages:

What are child themes? Child themes are a useful WordPress feature that allows developers to build a new template without starting from scratch, but by taking advantage of all the features already available in an existing theme.

Sometimes however, the parent theme we have chosen for our site may have some features that we don't need (or we need to customize to best suit our needs), for example custom post types with a different slug, Shortcodes, JavaScript libraries, image sizes that we don't use and so on...


Customize the Theme in Two Ways

While it could be easy to achieve what we want by editing the theme directly, it is also true that everytime the theme will be updated we'll have to do all the customizations again. This can be frustrating, so there's another option: we can create a child theme and use the >functions.php> file to modify the parent theme features. In this way we can upgrade the parent theme everytime a new version is released without losing our customizations.

Before we step into more specific details, a brief note about the theme appearance: we can modify colors, backgrounds, typography and the layout through the style.css file of the child theme by importing the parent style.css and overriding the styles we want to change.

For more control on the layout, we can also follow how Abbas Suterwala suggests in his post and clone the parent custom template files in our child theme:

Then the child theme could optionally override other template files like author.php, category.php, etc. The WordPress framework first looks for a template file in the child theme directory and then if not found will pick it up from the parent directory.


What We Can Modify

Through the child theme's functions.php file we can deal with:

  • Theme features
  • Custom post types and taxonomies
  • Menus and sidebars
  • Widgets
  • Shortcodes
  • Additional image sizes
  • Metaboxes
  • JavaScript and CSS
  • Parent theme actions and filters

So, let's say we have this web site structure:

  • htdocs OR www
    • wp-content
      • themes
        • foo-theme (directory of the parent theme - it will not be modified)
          • functions.php
          • header.php
          • style.css
          • other template files...
        • foo-theme-child (directory of our child theme)
          • functions.php (the file we will use to customize the parent theme)
          • header.php (overrides header.php for the parent theme)
          • style.css (this is a required file in a child theme and must be named style.css)

Let's get started: create an empty functions.php file in the /wp-content/themes/foo-theme-child/ directory.

For the most part we will use a generic wp_tuts_remove_features() function, hooked to the WordPress after_setup_theme action. We also set 10 as a third parameter (priority), so we are sure that the function is triggered before the parent one.


1. Remove Theme Features

Some parent themes add features to WordPress through the add_theme_support function.

Available features are:

  • post-formats
  • post-thumbnails
  • custom-background
  • custom-header
  • automatic-feed-links

So to remove them, we can modify the remove_parent_theme_features() function in the functions.php file.


2. Remove Custom Post Types and Taxonomies

Removing custom post types and custom taxonomies is easy: if the parent functions.php file adds a Movie custom post type, through a parent_movie_add_post_type() function:

... we can customize it thanks to our child functions.php file:

We can also remove only certain features without unregistering the post type, for example if we want to replace the excerpt field with a post featured image, we can modify the function in this way:

You can find a complete list of removable features under remove_post_type_support in the WordPress Codex.

Similar to custom post types, you can remove a custom taxonomy added in the parent theme by a parent_taxonomy() function, in this way:


3. Remove Menus

We can remove a parent theme's menu through the unregister_nav_menu() function. This function takes one parameter, the menu location identifier slug used in the register_nav_menu() function.

If the parent theme registers a Header Menu:

We can remove it in this way:

To identify registered menus, we can search the parent theme code for register_nav_menu() calls. The first argument of the function represents the menu ID we can use to unregister (in this case header-menu).


4. Remove Widgets and Sidebars

WordPress comes with some default Widgets that we can deactivate. Also, our parent theme could add its own widgets, so we can search in the theme files looking for where they are declared and take note of their name. Usually they are declared in a PHP class that extends the WP_Widget class:

So, to unregister the widget, we use the class name ParentWidgetName:

For sidebars the action is similar:

To identify registered sidebars, we can search the parent theme's code for register_sidebar() calls.

All we need is to take note of the sidebar ID:


5. Remove Shortcodes

Overriding or removing shortcodes is easy, we only need to modify our function in this way:

To identify registered shortcodes, we can search the parent theme code for add_shortcode() calls. The first parameter is the one we're after ;-).


6. Remove Additional Image Sizes

If the parent theme adds new image sizes that we don't use in our child theme, we can search the parent theme code for add_image_size() calls. In this case they are: custom_size_parent_1 and custom_size_parent_2. We reset them in this way:

This is useful because every time the user uploads an image, WordPress will not create additional image sizes that we don't use.

To create custom image sizes we can add this in our child functions.php file:


7. Remove Metaboxes

Through the remove_meta_box() function we can remove both default WordPress and parent theme metaboxes.

A list of WordPress default metaboxes is available under remove_meta_box() in the WordPress Codex. The function has three arguments: the metabox ID, the page it will be removed from, the editing context (normal, advanced, side).

If the parent theme adds metaboxes in the post editing screen, we can disable them in this way:

We can identify parent metaboxes by searching the parent theme code for add_meta_box or add_meta_boxes() calls.

The ID of the metabox to remove is the first argument of the add_meta_box() function.


8. Remove JavaScripts and CSS Stylesheets

If the parent theme adds JavaScript and CSS styles that we don't need:

We can remove them in this way:

To identify registered JavaScripts and CSS styles, we can search the parent theme code for wp_enqueue_script() and wp_enqueue_style() calls.

The first argument of the function is what we can use in the wp_deregister_script() or wp_deregister_style() functions.


9. Remove Parent Theme Actions and Filters

Some themes, like Thematic provide several hooks to modify the theme behavior without altering the theme files. In this case, Thematic provides a thematic_header action that loads other actions:

  • thematic_brandingopen()
  • thematic_blogtitle()
  • thematic_blogdescription()
  • thematic_brandingclose()
  • thematic_access()

We will not examine in detail what these functions do, probably some of them print some info in the blog header: name, description, and so on... In this case we can deactivate the thematic_blogdescription() function in this way:

In these cases it can be hard to understand the structure of the parent theme and how it works. My advice is to choose a parent theme that ships with detailed documentation, a good support forum, and makes hooks available throughout the code.

This surely makes us lose less developement time and make the customization of the child theme easier.


References

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.