-
Notifications
You must be signed in to change notification settings - Fork 43
Attributes
Hybrid Core has a powerful attributes system built in that allows you to create filterable attributes for any element.
I know what you may be thinking. Why do I need attribute functions when I can just write them in plain HTML?
Quite often, writing out attributes as plain HTML is the better choice. I only ever use the attributes feature for elements that I might want to dynamically change based on some condition or via a child theme. Think of the use cases of body_class() and post_class(). If you have similar use cases elsewhere, that's where this feature comes in.
It's pretty powerful stuff. However, only use it when it makes sense.
The attributes feature is built from the Hybrid\Attr\Attr class if you want to peak under the hood where all the magic happens.
For theme development, you'll almost always use the Hybrid\Attr\display() or Hybrid\Attr\render() functions.
-
display()directly prints a list of HTML attributes to the page. -
render()returns a list of HTML attributes.
Both functions provide attributes in escaped format, so you can be assured they're safe for output. They both accept the same parameters as well.
In most cases, you'll use the display() function, so let's take a look at it.
display( $slug, $context = '', $attr = [] );-
$slugis a key/ID for your element. -
$contextis to provide additional context in cases where the slug isn't enough. -
$attris your array of attributes.
A good example that shows all the parameters might be a sidebar wrapper. Here's what that might look like.
<aside <?php Hybrid\Attr\display( 'sidebar', 'primary', [ 'id' => 'sidebar-primary' ] ) ?>>
<?php dynamic_sidebar( 'primary' ) ?>
</aside>
That will actually produce the following HTML.
<aside class="sidebar sidebar--primary" id="sidebar-primary">
<!-- widget markup -->
</aside>If you don't enter a class attribute, it's automatically generated from the $slug and $context parameters.
There are three filter hooks that you'll use the most:
// Hook for the default attributes.
$defaults = apply_filters( "hybrid/attr/{$name}/defaults", array $defaults, string $context, Attr $attr );
// Hook for the parsed attributes.
$attributes = apply_filters( "hybrid/attr/{$name}", array $attributes, string $context );
// Hook for the class attribute.
$classes = apply_filters( "hybrid/attr/{$name}/class", array $classes, string $context );The attributes system works perfectly alongside the existing core WP attribute and class systems and provides a compatibility layer between the two.
For example, the following will handle the body_class() function and the accompanying body_class hook so that it doesn't break plugins.
<body <?php Hybrid\Attr\display( 'body' ) ?>>
All of following work with the core functions:
// Use with the <html> element. Replaces language_attributes()
Hybrid\Attr\display( 'html' );
// Use with the <body> element. Replaces body_class()
Hybrid\Attr\display( 'body' );
// Use with the post wrapper. Replaces post_class()
Hybrid\Attr\display( 'post' );
Hybrid\Attr\display( 'entry' );
// Use with the comment wrapper. Replaces comment_class().
Hybrid\Attr\display( 'comment' );