Project Scaffolding

Globals

Primary Colors

Lightest
primary-lightest
Lighter
primary-lighter
Light
primary-light
Primary
primary
Dark
primary-dark
Darkest
primary-darkest

Secondary Colors

Lightest
secondary-lightest
Lighter
secondary-lighter
Light
secondary-light
Secondary
secondary
Dark
secondary-dark
Darkest
secondary-darkest

Tertiary Colors

Lightest
tertiary-lightest
Lighter
tertiary-lighter
Light
tertiary-light
Tertiary
tertiary
Dark
tertiary-dark
Darkest
tertiary-darkest

Quaternary Colors

Lightest
quaternary-lightest
Lighter
quaternary-lighter
Light
quaternary-light
Quaternary
quaternary
Dark
quaternary-dark
Darkest
quaternary-darkest

Spacing

px

0

1

2

4

6

8

12

16

20

24

32

40

48

56

64

68

72

76

80

192

Fonts

font-roboto-slab: "Roboto Slab", sans-serif

font-raleway: "Raleway", sans-serif

font-code: monospace

Icons

SVG

Description:

Display inline SVGs.

Parameters:

$args (required) Configuration arguments.

Arguments:

icon (required) The SVG icon file name. Default none

title (optional) The title of the icon. Default: none

desc (optional) The description of the icon. Default: none

fill (optional) The fill color of the icon. Default: none

height (optional) The height of the icon. Default: none

width (optional) The width of the icon. Default: none

Usage:

<?php gbh_display_svg( array(
				'icon'   => 'facebook',
				'title'  => 'Facebook Icon',
				'desc'   => 'Facebook social icon svg',
				'height' => '50',
				'width'  => '50',
				'fill'   => '#20739a',
			) ); ?>

HTML Output:

	<svg
	 height="50" width="50" fill="#20739a"		class="icon facebook"
	 aria-labelledby="title-facebook-icon-29169 desc-facebook-icon-29169"		role="img">
		<title id="title-facebook-icon-29169">
			Facebook Icon		</title>

					<desc id="desc-facebook-icon-29169">
				Facebook social icon svg			</desc>
		
					<use xlink:href="#facebook"></use>
		
	</svg>

	

Buttons

Button

Description:

Display a button.

Usage:

<button class="gbh-button" href="#">Click Me</button>

HTML Output:

<button class="gbh-button">Click Me</button>

Forms

Search Form

Description:

Display the search form.

Usage:

<?php get_search_form(); ?>

HTML Output:

<form method="get" class="gbh-search-form" action="https://goldenblossomhoney.com/">
	<label for="gbh-search-form-input-538112255">
		<span class="screen-reader-text">To search this site, enter a search term</span>
		<input class="gbh-search-form-input" id="gbh-search-form-input-538112255" type="text" name="s" value="" aria-required="false" autocomplete="off" placeholder="Search" />
	</label>
	<input type="submit" id="gbh-search-submit" class="gbh-button gbh-search-form-button" value="Submit" />
</form>

Input

Description:

Display a normal input.

Usage:

<input type="text">

HTML Output:

<input type="text">

Default Select

Description:

Display default select.

Usage:

<select><option value="option1">Option 1</option><option value="option2">Option 2</option></select>

HTML Output:

<select><option value="option1">Option 1</option><option value="option2">Option 2</option></select>

Checkboxes

Description:

Display checkboxes.

Usage:

				<p>
					<label><input type="checkbox" name="checkboxes" value="check_1"> Radio 1</label><br />
					<label><input type="checkbox" name="checkboxes" value="check_2"> Radio 2</label><br />
					<label><input type="checkbox" name="checkboxes" value="check_3"> Radio 3</label>
				</p>
			

HTML Output:

				<p>
					<label><input type="checkbox" name="checkboxes" value="check_1"> Radio 1</label><br />
					<label><input type="checkbox" name="checkboxes" value="check_2"> Radio 2</label><br />
					<label><input type="checkbox" name="checkboxes" value="check_3"> Radio 3</label>
				</p>
			



Radio boxes

Description:

Display radio boxes.

Usage:

				<p>
					<label><input type="radio" name="radio_button" value="check_1"> Radio 1</label><br />
					<label><input type="radio" name="radio_button" value="check_2"> Radio 2</label><br />
					<label><input type="radio" name="radio_button" value="check_3"> Radio 3</label>
				</p>
			

HTML Output:

				<p>
					<label><input type="radio" name="radio_button" value="check_1"> Radio 1</label><br />
					<label><input type="radio" name="radio_button" value="check_2"> Radio 2</label><br />
					<label><input type="radio" name="radio_button" value="check_3"> Radio 3</label>
				</p>
			



Textarea

Description:

Display a textarea.

Usage:

<textarea id="text_area"></textarea>

HTML Output:

<textarea id="text_area"></textarea>

Generic Elements

Numeric Pagination

Description:

Display numeric pagination.

Usage:

gbh_display_numeric_pagination()

HTML Output:

				<nav class="gbh-pagination">
					<a class="prev page-numbers" href="#>«</a>
					<a class="page-numbers" href="#">1</a>
					<span aria-current="page" class="page-numbers current">2</span>
					<a class="page-numbers" href="#">3</a>
					<a class="next page-numbers" href="#">»</a>
				</nav>
			

Entree Recipe

Recipe Card

Description:

Used to display recipes or other posts in a card.

Usage:

				<?php
				gbh_display_recipe_card(
					array(
						'heading_level' => 'h3',
						'title'         => get_the_title( $post ),
						'subtitle'      => 'Entree Recipe',
						'image'         => get_post_thumbnail_id( get_the_ID() ),
						'image_size'    => 'large',
						'url'           => get_the_permalink( $post ),
					)
				); ?>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Product Card

Description:

Used to display products in a card.

Usage:

				<?php
				gbh_display_product_card(
					array(
						'heading_level' => 'h3',
						'title'         => get_the_title( $post ),
						'body'          => get_the_excerpt( $post ),
						'image'         => get_post_thumbnail_id( get_the_ID() ),
						'image_size'    => 'large',
						'url'           => get_the_permalink( $post ),
					)
				); ?>

Entry Content - Typography

H1

Description:

Display an H1

Usage:

<h1>This is a Headline</h1> or <div class="h1">This is a Headline</div>

HTML Output:

<h1>This is a Headline One</h1>

This is a Headline One

H2

Description:

Display an H2

Usage:

<h2>This is a Headline</h2> or <div class="h2">This is a Headline</div>

HTML Output:

<h2>This is a Headline Two</h2>

This is a Headline Two

H3

Description:

Display an H3

Usage:

<h3>This is a Headline</h3> or <div class="h3">This is a Headline</div>

HTML Output:

<h3>This is a Headline Three</h3>

This is a Headline Three

H4

Description:

Display an H4

Usage:

<h4>This is a Headline</h4> or <div class="h4">This is a Headline</div>

HTML Output:

<h4>This is a Headline Four</h4>

This is a Headline Four

H5

Description:

Display an H5

Usage:

<h5>This is a Headline</h5> or <div class="h5">This is a Headline</div>

HTML Output:

<h5>This is a Headline Five</h5>
This is a Headline Five

H6

Description:

Display an H6

Usage:

<h6>This is a Headline</h6> or <div class="h6">This is a Headline</div>

HTML Output:

<h6>This is a Headline Six</h6>
This is a Headline Six

Paragraph

Description:

Display a paragraph

Usage:

<p>Elementum faucibus vehicula id neque magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.</p>

HTML Output:

<p>Elementum faucibus vehicula id neque magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.</p>

Elementum faucibus vehicula id neque magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.

Table

Description:

Display a table

Usage:

				<table title="A simple data table" aria-label="A simple data table">
					<thead>
						<tr>
							<th scope="col">Table Header 1</th>
							<th scope="col">Table Header 2</th>
							<th scope="col">Table Header 3</th>
							<th scope="col">Table Header 4</th>
							<th scope="col">Table Header 5</th>
							<th scope="col">Table Header 6</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Division 1</td>
							<td>Division 2</td>
							<td>Division 3</td>
							<td>Division 4</td>
							<td>Division 5</td>
							<td>Division 6</td>
						</tr>
						<tr>
							<td>Division 1</td>
							<td>Division 2</td>
							<td>Division 3</td>
							<td>Division 4</td>
							<td>Division 5</td>
							<td>Division 6</td>
						</tr>
						<tr>
							<td>Division 1</td>
							<td>Division 2</td>
							<td>Division 3</td>
							<td>Division 4</td>
							<td>Division 5</td>
							<td>Division 6</td>
						</tr>
					</tbody>
				</table>
			

HTML Output:

				<table title="A simple data table" aria-label="A simple data table">
					<thead>
						<tr>
							<th scope="col">Table Header 1</th>
							<th scope="col">Table Header 2</th>
							<th scope="col">Table Header 3</th>
							<th scope="col">Table Header 4</th>
							<th scope="col">Table Header 5</th>
							<th scope="col">Table Header 6</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Division 1</td>
							<td>Division 2</td>
							<td>Division 3</td>
							<td>Division 4</td>
							<td>Division 5</td>
							<td>Division 6</td>
						</tr>
						<tr>
							<td>Division 1</td>
							<td>Division 2</td>
							<td>Division 3</td>
							<td>Division 4</td>
							<td>Division 5</td>
							<td>Division 6</td>
						</tr>
						<tr>
							<td>Division 1</td>
							<td>Division 2</td>
							<td>Division 3</td>
							<td>Division 4</td>
							<td>Division 5</td>
							<td>Division 6</td>
						</tr>
					</tbody>
				</table>
			
Table Header 1 Table Header 2 Table Header 3 Table Header 4 Table Header 5 Table Header 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6
Division 1 Division 2 Division 3 Division 4 Division 5 Division 6

Ordered List

Description:

Display an ordered list.

Usage:

				<ol>
					<li>ordered item</li>
					<li>ordered item</li>
					<li>ordered item</li>
				</ol>
			

HTML Output:

				<ol>
					<li>ordered item</li>
					<li>ordered item</li>
					<li>ordered item</li>
				</ol>
			
  1. ordered item
  2. ordered item
  3. ordered item

Unordered List

Description:

Display an unordered list.

Usage:

				<ul>
					<li>unordered item</li>
					<li>unordered item</li>
					<li>unordered item</li>
				</ul>
			

HTML Output:

				<ul>
					<li>unordered item</li>
					<li>unordered item</li>
					<li>unordered item</li>
				</ul>
			
  • unordered item
  • unordered item
  • unordered item

Blockquote

Description:

Display a blockquote.

Usage:

<blockquote><p>Stay hungry. Stay foolish.</p></blockquote>

HTML Output:

<blockquote><p>Stay hungry. Stay foolish.</p></blockquote>

Stay hungry. Stay foolish.

Code Tag

Description:

Display a code tag.

Usage:

<code>word-wrap: break-word;</code>

HTML Output:

<p>You will learn later on in these tests that <code>word-wrap: break-word;</code> will be your best friend.</p>

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Emphasize Tag

Description:

Display an <em> tag.

Usage:

<em>italicize</em>

HTML Output:

The emphasize tag should <em>italicize</em> text.
The emphasize tag should italicize text.

Strong Tag

Description:

Display bold text.

Usage:

<strong>bold<strong>

HTML Output:

<p>This tag shows <strong>bold<strong> text.</strong></strong></p>

This tag shows bold text.

Abbreviation Tag

Description:

Display an abbreviation.

Usage:

<abbr title="Seriously">srsly</abbr>

HTML Output:

<p>The abbreviation <abbr title="Seriously">srsly</abbr> stands for "seriously".</p>

The abbreviation srsly stands for "seriously".

Cite Tag

Description:

Display a citation.

Usage:

<cite>Automattic</cite>

HTML Output:

<p>"Code is poetry." —<cite>Automattic</cite></p>

"Code is poetry." —Automattic

Strikeout Text

Description:

Display strikeout text.

Usage:

<s>strikeout text</s>

HTML Output:

<p>This tag will let you <s>strikeout text</s>.</p>

This tag will let you strikeout text.

Delete Text

Description:

Display the edited content of a text string.

Usage:

<del>_s</del>

HTML Output:

<p>We use <del>_s</del> wd_s to build themes.</p>

We use _s wd_s to build themes.

Preformatted tag.

Description:

This tag styles large blocks of code.

Usage:

				<pre>.post-title {
					margin: 0 0 5px;
					font-weight: bold;
					font-size: 38px;
					line-height: 1.2;
				}</pre>
			

HTML Output:

				<pre>.post-title {
					margin: 0 0 5px;
					font-weight: bold;
					font-size: 38px;
					line-height: 1.2;
				}</pre>
			
.post-title {
					margin: 0 0 5px;
					font-weight: bold;
					font-size: 38px;
					line-height: 1.2;
				}

Keyboard Tag

Description:

To display a key.

Usage:

<kbd>Shift/kbd>

HTML Output:

<p>To paste copied text content stripped of formatting, use <kbd>⌘</kbd>+<kbd>Opt</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.</p>

To paste copied text content stripped of formatting, use +Opt+Shift+V.

Subscript Tag

Description:

To display a subscript.

Usage:

<sub>2</sub>

HTML Output:

<p>Getting our science styling on with H<sub>2</sub>O, which should push the "2" down.</p>

Getting our science styling on with H2O, which should push the "2" down.

Superscript Tag

Description:

To display a superscript.

Usage:

<sup>2</sup>

HTML Output:

<p>Still sticking with science and Albert Einstein's E = MC<sup>2</sup>, which should lift the "2" up.</p>

Still sticking with science and Albert Einstein's E = MC2, which should lift the "2" up.

Variable Tag

Description:

The HTML Variable element (<var>) represents the name of a variable in a mathematical expression or a programming context.

Usage:

<var>x</var>

HTML Output:

<p>A simple equation: <var>x</var> = <var>y</var> + 2 </p>

A simple equation: x = y + 2

Address Tag

Description:

To display an address.

Usage:

				<address>
					1 Infinite Loop<br>
					Cupertino, CA 95014<br>
					United States
				</address>
			

HTML Output:

				<address>
					1 Infinite Loop<br>
					Cupertino, CA 95014<br>
					United States
				</address>
			
1 Infinite Loop
Cupertino, CA 95014
United States

Definition Lists

Description:

To display defintion lists.

Usage:

				<dl>
					<dt>Definition List Title</dt>
					<dd>Definition list division.</dd>
					<dt>Startup</dt>
					<dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd>
					<dt>#dowork</dt>
					<dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd>
				</dl>
			

HTML Output:

				<dl>
					<dt>Definition List Title</dt>
					<dd>Definition list division.</dd>
					<dt>Startup</dt>
					<dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd>
					<dt>#dowork</dt>
					<dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd>
				</dl>
			
Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.

Entry Content - Media

Right-aligned Image

Description:

Display a right-aligned image.

Usage:

				<p><img class="alignright size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

HTML Output:

				<p><img class="alignright size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.

Left-aligned Image

Description:

Display a left-aligned image.

Usage:

				<p><img class="alignleft size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

HTML Output:

				<p><img class="alignleft size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.

Center-aligned Image

Description:

Display a center-aligned image.

Usage:

				<p><img class="aligncenter size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

HTML Output:

				<p><img class="aligncenter size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /></p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.

Image with Caption

Description:

Display an image with a caption.

Usage:

				<p>[caption id="" align="alignright" width="250"]<img class="size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /> Image Caption.[/caption]</p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

HTML Output:

				<p>[caption id="" align="alignright" width="250"]<img class="size-medium" src="https://via.placeholder.com/250x250.png" width="250" height="250" /> Image Caption.[/caption]</p>
				<p>Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.</p>
			

Image Caption.

Phasellus quis lacus feugiat, imperdiet urna sollicitudin, efficitur nulla. Maecenas dolor sapien, rhoncus et placerat sit amet, lobortis non diam. In porttitor risus ac malesuada mattis. In hac habitasse platea dictumst. Maecenas auctor nec dui id imperdiet. Maecenas mattis scelerisque feugiat. Maecenas faucibus neque a sapien tincidunt, sed ultrices ipsum porttitor. Praesent eleifend leo vitae purus fringilla, et rhoncus arcu tempus. Nullam euismod scelerisque dolor. Morbi quis nibh ac risus imperdiet accumsan. Nullam a ante suscipit, tincidunt sem congue, volutpat mi. Integer lacus ligula, mollis ac ullamcorper in, tincidunt et augue. Praesent bibendum tellus massa, eu interdum felis eleifend sed. Maecenas aliquet sapien et sapien sagittis, quis faucibus risus vulputate. Cras eleifend iaculis erat ut facilisis. Curabitur eget commodo lorem.

Youtube Embed

Description:

Display a youtube video.

Usage:

[embed]https://www.youtube.com/watch?v=72xdCU__XCk[/embed]

HTML Output:

<iframe title="Introducing WordPress 5.0 "Bebo"" width="640" height="360" src="https://www.youtube.com/embed/72xdCU__XCk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Vimeo Embed

Description:

Display a vimeo video.

Usage:

[embed]https://vimeo.com/259411563[/embed]

HTML Output:

<iframe title="A Love Letter to Winter" src="https://player.vimeo.com/video/259411563?dnt=1&app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"></iframe>