TopShop Hooks for developers

We’re planning to make TopShop even more flexible and easier for developers to be able to customize the theme to suit their own or their clients needs… so in TopShop version 10.2.0 we’ve added hooks for developers to hook onto and be able to add any extra functionality or coding needed.

To get an understanding of how to use hooks please refer to the WordPress Plugin API Codex on WordPress.org.

If you’re looking for an easy way to find the hooks in a WordPress theme then we recommend you have a look at the “Simply Show Hooks” plugin

List of WordPress hooks added to TopShop:

Header Hooks:

<?php do_action ( 'topshop_before_header' ); ?>

This hook sits between the opening body tag and the header tag, and inside of the .site-boxed setting if it is enabled.

hook-right-before-header


<?php do_action ( 'topshop_after_header' ); ?>

This hook site just after the closing header tag and above the home page slider or opening .site-content div.

hook-right-after-header


<?php do_action ( 'topshop_inside_top_bar_left_left' ); ?>

This hook sits inside the top bar left div, just before the top bar left contents.

hook-top-bar-left-left


<?php do_action ( 'topshop_inside_top_bar_left_right' ); ?>

This hook sits inside the top bar left div, just after the top bar left contents.

hook-top-bar-left-right


<?php do_action ( 'topshop_inside_top_bar_right_left' ); ?>

This hook sits inside the top bar right div, just on the left of the top bar left contents.

hook-top-bar-right-left


<?php do_action ( 'topshop_inside_top_bar_right_right' ); ?>

This hook sits inside the top bar right div, just on the right of the top bar right contents.

hook-top-bar-right-right


<?php do_action ( 'topshop_after_default_slider' ); ?>

This hook is placed right after the default TopShop slider.

hook-right-after-slider


Footer Hooks:

<?php do_action ( 'topshop_before_footer' ); ?>

This hook is situated before the site footer after all of the page content.

hook-before-footer


<?php do_action ( 'topshop_inside_footer_before_widgets' ); ?>

This hook is situated inside the TopShop footer just before the Widgets.

hook-inside-footer-before-widgets


<?php do_action ( 'topshop_inside_footer_after_widgets' ); ?>

This hook is placed after the footer widgets, above the footer bottom bar.

hook-inside-footer-after-widgets


<?php do_action ( 'topshop_after_footer' ); ?>

And one at the end of the website, but still inside the .site-boxed div if it is enabled.

hook-after-footer

For custom work on the themes we recommend contacting Codeable.