30 views 
Debug WordPress hook sequence
How it works?
Add query parameter debug in URL e.g. https://<mysite>/?debug. It’ll show the list of hooks in sequence.
Code Snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Debug WordPress hook sequence. | |
| * | |
| * > How it works? | |
| * Add query parameter `debug` in URL e.g. https://<mysite>/?debug | |
| * It'll show the list of Actions in sequence. | |
| * | |
| * @todo Change `prefix_` with your own prefix. | |
| * | |
| * @since 1.0.0 | |
| */ | |
| if( ! function_exists( 'prefix_hook_sequence' ) ) { | |
| function prefix_hook_sequence() { | |
| ?> | |
| <style type="text/css"> | |
| .toggle-hooks { | |
| position: fixed; | |
| right: 40px; | |
| bottom: 40px; | |
| background: #FFC107; | |
| color: #000; | |
| font-size: 14px; | |
| padding: 10px 20px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| z-index: 999999; | |
| } | |
| .hooks-sequence-wrap { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 99999; | |
| overflow: hidden; | |
| background: #fff; | |
| } | |
| .hooks-sequence { | |
| overflow-y: auto; | |
| max-height: 100vh; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: 30px 0; | |
| } | |
| body.hooks-hidden { | |
| overflow: hidden; | |
| } | |
| .hooks-sequence li { | |
| line-height: 1.5; | |
| } | |
| .hooks-sequence ul { | |
| margin-left: 30px; | |
| list-style-type: circle; | |
| } | |
| .hooks-sequence h3 { | |
| margin: 0 0 30px 0; | |
| } | |
| .action-count { | |
| background: #f1f1f1; | |
| font-size: 10px; | |
| font-weight: bold; | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| <div class="toggle-hooks show-hooks">Show Actions</div> | |
| <div class="hooks-sequence-wrap" style="display: none;"> | |
| <div class="hooks-sequence"> | |
| <h3>Currently Executed Actions</h3> | |
| <ul> | |
| <?php | |
| foreach( $GLOBALS['wp_actions'] as $action => $count ) { | |
| echo '<li>'.$action .' <span class="action-count">' .$count. '</span></li>'; | |
| } | |
| ?> | |
| </ul> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| (function($){ | |
| $(function(){ | |
| $('.toggle-hooks').click(function() { | |
| if( $( this).hasClass( 'show-hooks' ) ) { | |
| $('body').addClass('hooks-hidden'); | |
| $( this).removeClass( 'show-hooks' ).text('Hide Actions'); | |
| $('.hooks-sequence-wrap').show(); | |
| } else { | |
| $('.hooks-sequence-wrap').hide(); | |
| $('body').removeClass('hooks-hidden'); | |
| $( this).addClass( 'show-hooks' ).text('Show Actions'); | |
| } | |
| }) | |
| }); | |
| })(jQuery); | |
| </script> | |
| <?php | |
| } | |
| // Add hook. | |
| add_action( 'shutdown', 'prefix_hook_sequence' ); | |
| } |