hp-shortcodes

hpLine Shortcode

[hpLine]

Colour Options: [hpLine color=’x’] (will accept ‘color’ or ‘colour’)

• [hpLine color=’red’]
• [hpLine color=’green’]
• [hpLine color=’blue’]
• [hpLine color=’brown’]
• [hpLine color=’black’]
• [hpLine color=’gray’] (accepts ‘gray’ or ‘grey’)

Margin Options: [hpLine margin=’n’] (any integer, defaults to 40 if no value given)

• [hpLine margin=’5’]
• [hpLine margin=’100’]

hpButton Shortcode

[hpButton url=’https://www.hobbsparker.co.uk’ text=’The Text’]

The Text

Colour Options: [hpButton color=’x’] (will accept ‘color’ or ‘colour’)

• [hpButton color=’blue’] (Default color if no color value assigned)
blue
• [hpButton color=’red’]
red
• [hpButton color=’green’]
green
• [hpButton color=’black’]
black
• [hpButton color=’brown’]
brown
• [hpButton color=’gray’] (accepts ‘gray’ or ‘grey’)
gray

Size Options: [hpButton size=’x’]

• [hpButton size=’small’]
small
• [hpButton] (for default ‘medium’ no size attribute required)
medium
• [hpButton size=’large’]
large

Rel: [hpButton rel=’…’] Allows David to attach rel=”nofollow” on certain external links where required for SEO

• [hpButton rel=’nofollow’]
External Link with nofollow

hpCircle Shortcode

For custom content: [hpCircle img=’https://res.cloudinary.com/hobbsparker/image/fetch/c_scale,dpr_auto,f_auto,fl_lossy,q_auto,w_970/https://images.hobbsparker.co.uk/wp-content/uploads/2015/08/Square-Sheep.jpg’ text=’The Heading’ alt=’The Image Alt’ url=’https://www.hobbsparker.co.uk’]

• department Do not include this value if you want a custom hpCircle. A value given for ‘department’ will populate the options behind the scenes and ignore any of the below values.
• text The heading text
• img The absolute url to the desired image
• size (eg: size=’50’) is the percentage width of the image in relation to it’s container, allowed values are multiples of 10 (default is 60 if no value given)
• alt The ‘alt’ attribute for the image
• url The link location when this is clicked
• style The style of the output

The Heading List

The Heading Defauls

hpVideo Shortcode

[hpVideo vendor=x url=’y’]

• vendor is a required value and can currently only be either youtube or vimeo Do not put single quote marks around the vendor value in your short code, it currently prevents it from working as expected; so do this: vendor=youtube instead of this: vendor=’youtube’.
• url is a required value. This can be found when you choose to share the video from either YouTube or Vimeo, it will look something like… https://youtu.be/YVgc2PQd_bo

Example: [hpVideo vendor=youtube url=’https://youtu.be/YVgc2PQd_bo’]

By default, an embedded video will be responsive and will fill the width of its column. You can choose to switch off this behaviour and just show the video at its native size by adding the optional [hpVideo responsive=false]

Example: [hpVideo responsive=false vendor=youtube url=’https://youtu.be/YVgc2PQd_bo’]

hpSpace Shortcode

Add vertical space between elements with the [hpSpace] shortcode.

Example [hpSpace height=’100’]. Enter any numeric value for height, if left blank will default to 30.

Element 1

Element 2

hpContactPerson Shortcode

Output a block of contact information for selected staff members using the [hpContactPerson] shortcode. Select members of staff using the ‘names’ parameter. These names must exactly match the individuals name in their ‘people’ post.

Example: [hpContactPerson names=’Roger Lightfoot, David Shaw, Bill Lightfoot’]

Example: [hpContactPerson names=’Roger Lightfoot’]

Further information