Action Hooks for Rapid Development

The Responsive Child Starter theme has built in section files for each action hook to help you get started in development. When you enable action hooks, you can quickly see where it's possible to inject content outside the content area sitewide, and add your own HTML in - even if you're not a PHP developer.

Quick Start

1. Add the following to functions.php:
   • define( 'RESPONSIVE_ENABLE_ALL_DEV_HOOKS', true );
2. Identify the hook you'd like to use - for example, r_after_opening_container_inner
3. Find the matching template part in the php-dev folder: php-dev/r_after_opening_container_inner.php
   • Note: The hooks use _ underscores and the filenames use -, but are otherwise identical.
4. Write your HTML in the template part
5. Once you've decided which hooks to use, you can limit the hooks which show and remove the constant to turn all hooks on from step one
6. Finalize your code for launch

Some things to know

• Because our parent theme, Responsive Framework, is under active development, the best source of truth for available action hooks is in the Responsive Framework GitHub Repo.
  • If you see hooks that are missing, please create an issue in this repo to update the starter theme with the missing hooks.
• These section files are intended for initial development purposes only, and should be replaced with stable backend code before deploying to live/staging.
• If you see the need for a new hook, please create an issue in the Responsive Framework repo.
• All action hooks are turned off by default in the responsive-child-starter theme. Turn on only the hooks required.
• There are no default styles for action hooks and sections - those are up to you to provide.

Usage

Identify the best hook to use

When you enable all hooks, it might be tough to tell which hook at first to use. Below, several hooks show at once, and our example hook, r_after_opening_container_inner, is circled in red.

We can easily see that we want the r_after_opening_container_inner because it shows in a different spot than the other hooks on this page, above the title. But what if we were deciding between r_after_opening_container_outer and r_before_opening_container_inner?

The best thing to do is use the inspector to look at the HTML to see exactly where each of these lands in the HTML. This will help you decide which hook is best to use. Below, the hook on the page and the matching HTML are circled in red to illustrate this.

Find the matching template part

Locate the corresponding file r-after-opening-container-inner.php. Notice that the file names are the same as the hook name using hyphens - instead of underscores _.

PHP-DEV/
   ...
   r-after-opening-body-tag.php
   r-after-opening-container-inner.php
   ...

Add your HTML

In the r-after-opening-container-inner.php file add HTML code. Code CSS and SASS as usual in the css-Dev folder.

Before

<?php
/**
 * This is a file stub for rapid development.
 *
 * Replace the HTML below for rapid development.
 *
 * The filename corresponds to the action hook.
 *
 * @package responsive-child-starter
 */

global $hook_messages; // Global OK will only be used in development stage.
echo wp_kses_post( $hook_messages['r_after_opening_container_inner'] );

After

<?php
/**
 * This is a file stub for rapid development.
 *
 * Replace the HTML below for rapid development.
 *
 * The filename corresponds to the action hook.
 *
 * @package responsive-child-starter
 */
?>

<h1>HTML Markup goes here</h1>

This allows for a quick start to HTML and CSS/SASS coding for a section in the correct place within the theme.

When the section is ready, ask the developer assigned to the project to move the HTML code to a normal file and add the PHP.

Limit which hooks show

You probably don't want every hook to show once you've decide which hooks to use. Luckily, it's easy to limit these so that only the hooks you want to use show on the page.

Decide what hooks to use, for example r_after_opening_container_inner.

In php-dev/dev-functions.php, find the $hooks array and change the value for r_after_opening_container_inner to true.

	$hooks = array(
		// Branding hooks.
		'r_before_opening_wrapper'          => false,
		'r_after_opening_wrapper'           => false,
		'r_before_opening_container_outer'  => false,
		'r_after_opening_container_outer'   => false,
		'r_before_opening_container_inner'  => true,
		'r_after_opening_container_inner'   => false,

Before launch

This feature is intended for development purposes only, and should not be used in production. The following must be deleted before going live:

• In functions.php:
  • require_once 'php-dev/dev-functions.php';
  • add_filter( 'after_setup_theme', 'dev_sections' );
  • define( 'RESPONSIVE_ENABLE_ALL_DEV_HOOKS', true );
• The entire php-dev folder