Listing UIkit components function (output)

print_uikit_components is very handy to figure out what is actually used on / for a page, but is there a way to get the output at the bottom of the page?

Hey J.C.

You could simply append it to the body as such:

add_action( 'beans_body_append_markup', 'example_print_uikit_components' );

function example_print_uikit_components() {

 global $_beans_uikit_enqueued_items;

  print '<pre>';
  print_r( $_beans_uikit_enqueued_items );
  print '</pre>';

}

You could even become more fancy and make it a bit slicker and replace the snippet above with the following:

add_action( 'beans_body_append_markup', 'example_fancy_uikit_components' );

function example_fancy_uikit_components() {

  // Stop here if Beans is not in dev mode.
 if ( !get_option( 'beans_dev_mode', false ) ) {
   return;
 }

 global $_beans_uikit_enqueued_items;

  ?>
  <a href="#example-uikit-list" class="uk-button-text uk-float-right uk-margin-right uk-margin-bottom" data-uk-offcanvas=""><i class="uk-icon-cog uk-margin-small-right"></i>UIkit components</a>
 <div id="example-uikit-list" class="uk-offcanvas">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
      <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
       <li class="uk-nav-header">UIkit components</li>
       <li class="uk-parent uk-active">
          <a href="#">Core</a>
          <ul class="uk-nav-sub">
           <?php foreach ( $_beans_uikit_enqueued_items['components']['core'] as $core ) : ?>
              <li><a href="#"><?php echo $core; ?></a></li>
           <?php endforeach; ?>
                    </ul>
                </li>
                <li class="uk-parent uk-active">
          <a href="#">Add-ons</a>
         <ul class="uk-nav-sub">
           <?php foreach ( $_beans_uikit_enqueued_items['components']['add-ons'] as $addons ) : ?>
             <li><a href="#"><?php echo $addons; ?></a></li>
           <?php endforeach; ?>
                    </ul>
                </li>
      </ul>
   </div>
  </div>
  <?php

}

This will add a link at the bottom right of the page and show all the UIkit components used on the current page in an offcanvas only when Beans dev mode is enabled. Cool huh?

Happy coding,

Heh, damn nifty indeed. So even that function is made with magic beans 🙂