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?

  • Added an answer, but questions about third party themes and plugins are off topic here on WPSE. This page explains what kind of questions are ton topic. You can get support for the storefront theme here. Sep 18 '16 at 8:30

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.

  • Thanks. Am I right in assuming this template is "over-coded"? Everything is a function which I assume allows for easy backend customisation for non-coders.
    – MeltingDog
    Sep 18 '16 at 8:43
  • 1
    Sure! I don't think it's over-coded; it's flexible! These functions can be overridden in a child theme (the parent theme should never be modified directly). Also, these functions can be unhooked via remove_action() and re-added via child themes or plugins. Storefront has recently be rewritten, and although I have not used it in production, the source looks great to me. Sep 18 '16 at 8:47
  • Thanks again! So it just seems like a bit of guess work then? Trying to guess where the theme developer has put the elements I need. Surely there's a practice or formula people follow?
    – MeltingDog
    Sep 18 '16 at 8:50
  • Storefront is probably gong to be one of the more well organized and documented themes you'll run across. There really is no standard for organization, but the usage of an include/includes/inc directory which contains files with template hooks and template functions is commonplace. Searching for hooks and callbacks really is the way to go. @Mark Kaplun made a good point about dynamic hooks, which were not used in this case, but are definitely something to be mindful of. Sep 18 '16 at 8:56

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


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


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:

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

After this you can style with CSS whatever you need

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.