HTML

WP Bones provides a great alternative to HTML markup writing in your view. If you wish to use object-oriented programming, then the Html class is for you. Inside a view file, you may use the Html class to create, manage, and display HTML tags.

For example, if you would like to display a button, you may use a code such as:

<div class="wrap">
  <?php echo WPKirk\Html::button( "Hello, world!" ) ?>
</div>

Also, the Html class works like a facade and provides a fluent behavior. For example, the above code can be written as:

<div class="wrap">
  <?php WPKirk\Html::button( "Hello, world!" )
        ->html() ?>
</div>

or

<div class="wrap">
  <?php 
     $button = WPKirk\Html::button( "Hello, world!" );
     echo $button; // or $button->render();	
  ?>
</div>

Every HTML tag provides its HTML interface to set the attributes. For example, let’s see how to set some button attributes:

<div>
  <?php echo WPKirk\Html::button( "Hello, world!" )
        ->class( 'button') ?>
</div>
 
<div>
  <?php echo WPKirk\Html::button( "Hello, world!" )
        ->class( 'button button-primary') ?>
</div>
 
<div>
  <?php echo WPKirk\Html::button( "Hello, world!" )
        ->class( [ 'button', 'button-primary' ]) ?>
</div>
 
<div>
  <?php echo WPKirk\Html::button( [ 'content' => "Hello, world!", 'class' => 'button button-hero' ] ) ?>
</div>

Of course, there are some attributes with a dash character like accept-charset. In this case, you have to use a camel version of attributes to set it fluently:

<?php echo WPKirk\Html::form()->acceptcharset('ISO-8859-1') ?>

If you prefer an array, then you can use the original attribute name:

<?php echo WPKirk\Html::form(['accept-charset' => 'ISO-8859-1']) ?>

Custom attributes

Of course, you may wish to add your own custom attribute. You can do this by using the attributes method. For example:

<?php echo WPKirk\Html::button('Click me!')
      ->attributes('hello', 'world') ?>

You’ll see it looks like

<button hello="world">Click me!</button>

Currently HTML tags

• Html::a
• Html::button
• Html::checkbox
• Html::datetime
• Html::fieldset
• Html::form
• Html::input
• Html::label
• Html::optgroup
• Html::option
• Html::select
• Html::textarea

See HTML in action

Click below to see the Html class in action in the WP Bones Demo plugin.