Where do I find the functions triggered within a hook?

Question

I'm new to WP, but have used other CMSs in the past.

I wanted to make a simple Woo-commerce store, for practice. I installed WP, Woo-commerce and the Woo-commerce Store Front theme and all went fine.

Now I want to start customising the theme. First thing I wanted to change was put a new logo in the header. I opened header.php in the Storefront theme directory and found the div that encompasses where the logo image should be but all I see is:

do_action( 'storefront_header' );

I've dug around in the directory but can't find any storefront_header files or functions.

So, what am I meant to do here? Is there any guides or map to find each individual elements function or PHP file?

How do I find, within the template structure, the elements I want to work on?

Answer 1

Looking at the current version of Storefront's header.php:

/**
 * Functions hooked into storefront_header action
 *
 * @hooked storefront_skip_links                       - 0
 * @hooked storefront_social_icons                     - 10
 * @hooked storefront_site_branding                    - 20
 * @hooked storefront_secondary_navigation             - 30
 * @hooked storefront_product_search                   - 40
 * @hooked storefront_primary_navigation_wrapper       - 42
 * @hooked storefront_primary_navigation               - 50
 * @hooked storefront_header_cart                      - 60
 * @hooked storefront_primary_navigation_wrapper_close - 68
 */
do_action( 'storefront_header' ); ?>

That comment block outlines all of the callback functions (with priorities) hooked to the storefront_header action.

If you do a search for text within the files of the storefront directory for the string 'storefront_header', you can find these functions. There is no standard way of organizing where these functions appear, but you would be able to track them down manually starting at functions.php and following all of the code from there. Searching is more efficient though.

storefront_site_branding is the function that handles how the logo is displayed. It's located in storefront/inc/storefront-template-functions.php.

Answer 2

do_action is not directly related to the template hierarchy, it is basically a trigger for observers that want to observe when the specific action is triggered.

Best way to find out the observers is to do a code search for the name of the action (storefront_header in this case). In this case it is limited to the theme files but if you work on a theme that "requires" plugins you will probably want to search the plugin's code as well.

A frequent gotcha (especially in core code) is action which are dynamically created by combining strings, so in case a search for storefront_header do not give results you might want to try search for the prefix or suffix of the action

Answer 3

Look in these 2 files:
wp-content\themes\MyTheme\inc\storefront-template-functions.php wp-content\themes\MyTheme\inc\woocommerce\storefront-woocommerce-template-functions.php

They have the functions that are hooked into storefront_header. Then search each hook individually. For example Search for storefront_header_container which is top of the commented out list. It finds this function:

if ( ! function_exists( 'storefront_header_container' ) ) {
/**
 * The header container
 */
function storefront_header_container() {
    echo '<div class="col-full">';
}
}

All that function does is basically add the HTML <div class="col-full">

So you can replace replicate unhook and work with as you wish

Answer 4

Once you know where you want to hook on, then use the add_action for storefront_header and position (60 in my case)

functions.php inside your child theme:

<?php
add_action( 'storefront_header', function() {
echo '<div class="my-account">MY ACCOUNT</div>';
}, 60 );

After this you can style with CSS whatever you need