Plugin: Storefront Hooks Customizer

While working with Storefront over the past years, one common request I see is that folks need a way to “insert” other content into areas that might not always have a Widget or content area.  I wanted to make a solution that was more friendly, especially to folks that might not be comfortable with writing

Usually, my suggestion would involve writing up some code to help someone hook into a Filter, something like this:

	<?php
	// Hooking into the storefront_product_categories_args hook
	add_filter( 'storefront_product_categories_args', 'marce_filter_homepage_product_categories_storefront', 11 );
	// We're changing the values of limit, columns, and title for the Product Categories homepage section.
	function marce_filter_homepage_product_categories_storefront( $args ) {
	$args['limit'] = 1;
	$args['columns'] = 4;
	$args['title'] = 'Shop Categories';
	return $args;
	}

view raw storefront-homepage-product-categories.php hosted with ❤ by GitHub

In the example above, we’re using an add_filter to hook into a filter in Storefront, and then calling our own function: marce_filter_homepage_product_categories_storefront which modifies the output of the Product Categories section.
Hooks can be super powerful!

But, what if you just want to add an image or some text somewhere?  Maybe your telephone number above the header, or an image just above the footer?  Instead of having to edit templates, you can use a hook!   Here’s an example of how to add simple text above the header:

	<?php
	add_filter('storefront_before_header', function() {
	echo 'Hello';
	});

view raw storefront-before-header-hook.php hosted with ❤ by GitHub

While that’s simple on one level, it can be complicated to maintain many functions that all do different things, keep them all organized, and know which Storefront hook to use and when to use it.

Enter the Storefront Hooks Customizer.

I made this plugin so you don’t have to write php code, you don’t have to know what the hooks are called, and so that you can easily add content via the Customizer!

Here’s what it looks like:

This plugin adds a Panel, aptly named “Storefront Hooks” if you have Storefront or a Storefront child-theme active.  Inside that Panel, you’ll see the different sections:  Header Hooks, Content Hooks, Homepage Template Hooks, and Footer Hooks.

Header Hooks:  These are a few hooks to allow you to add content to the Header!

Content Hooks: These hooks let you add content into the main body content, like Before the content, After the content, and into Pages.  These can be handy if you want to add a banner or notification into the main body section everywhere on your site.

Homepage Template Hooks: These are specific to the Homepage Template, if you are using that! These hooks let you add content in and around all the specific areas that this template adds:  “After Product Categories”, “Before On Sale Products”, etc.

Footer Hooks: You guessed it!  You can add content into the Footer!

When you add some content into the Customizer, save the changes, and refresh, you’ll see your content appear:

Note: Live Previews are not working for this plugin yet.  It’s in the works for a future release! 🙂

There you have it!  An easy way to add content to different parts of your Storefront-powered site.

If you have any feedback or suggestions, feel free to leave comments!
You can download the plugin from WordPress.org:  Storefront Hooks Customizer
For bug reports or contributions: https://github.com/mikeyarce/storefront-hooks-customizer