Shortcodes

The following shortcodes are available for content team. When referring to them below, you will notice nomenclature like “attribute” or “key” and “value”. An attribute is something like class and it is used like href=”https://example.com/” inside an element (typically the anchor tag). These can be used in any order within an element. Breaking it down, the “key” refers to href while “value” is https://example.com/ in the previous example.

When using shortcodes, you can also use these handlebar variables to save time / make URLs more readable. Note that there is an alternative syntax for use with the spinner, to prevent conflicts:

  • {{uploads}} OR ||uploads||
  • {{site}} OR ||site||

Grid

The grid is composed of a grid wrapper + one to infinity columns. You can create easy layouts with this shortcode. The key is the width attribute. These widths are separated by spaces in the wdac-column shortcode and control what widths are used for that column. Keep in mind that layouts are MOBILE FIRST, so numbers without the “@” symbol means the smallest size / the default size. Typically this is 100. When you see @d, that means “at desktop”. You can also use @s, @l, @xl, and @j (small, large, extra large, and jumbo).

Grid columns and the grid itself also support classes as an attribute key. You will see in the example below that the second column has a margin top only on mobile. This is done so that the stacked columns don’t touch each other (there is a small gap). Classes for the grid itself are small, medium, large, jumbo. These control the “gutter” between columns but has no effect on the gap between the top and bottom of them.

Note: you cannot have a grid within a grid or a column within a column. This is a WordPress limitation. If you have need to do this, you will need to use raw HTML.

This is one column with some content.
This is another column with some other content.

This is one column with some content.
This is another column with some other content.


Button

The button is a replacement for manually creating an anchor tag. You Should use this any time you need a link that is NOT a simple text link / inline content link. This shortcode accepts our special {{site}} shortcuts as shown below. Most common attributes are supported like: href, rel, target, class. It also supports special attributes prepend and append for adding icons before or after content. An example is below.

[wdac-buttone href="{{site}}/404/" class="small-padding small" append="ion-more"]My Button[/wdac-button]
    


Phone Number

This is not developed yet but you can still use this while we work on it. Simply add this shortcode whenever you need to refer to our phone number. This WILL eventually create a link. To make it NOT a link, add the attribute key / value pair link=”false” to the shortcode.

[wdac-phone]
    


Accordion

This is useful for hiding long content and for things like “FAQ”s. The syntax is fairly simple, with the most complicated part being the need to make sure “like” accordions have the same group. You want them to have the same group so that when you open one, the others of the same group close (default behavior).

First Accordion

Hidden content here.

Second Accordion

More Content Here

Third Accordion

Content here and stuff and things you know.

First Accordion

Hidden content here.

Second Accordion

More Content Here

Third Accordion

Content here and stuff and things you know.

Image

Used instead of raw HTML. It’s important to use this tag because it enables us to lazy load images to save on initial page load speed. You can use {{uploads}} and {{site}} special codes here.

Super cool image
    

Super cool image

Table of Contents

This is based off of Burger Law’s code, so it should be familiar to you.

First you have the Table of Contents itself:

Table of contents

Table of contents

Then you have your bookmarks. These are invisible but are critical if you want a scroll point the ToC shortcode can locate.

Page Bookmark

Page Bookmark

Video

For embedded videos (not YouTube) you can use the following shortcode. Note that it’s advised that these videos exist in the media gallery for quick loading.


    

The “atts” attribute stands for attributes and this can be excluded if you want the video to be muted. For normal video behavior, use the following: “controls” and nothing else. The video will start paused and will have controls.


Review Quote Block

Used to quickly reference a review about us on a page. For ID, use the ID of a review on the back-end of the site. Limit_text is optional for controlling how much is shown.

The last web team you’ll need

“Exceptional Website Design and SEO company. I have years of experience in working with these types of companies, and these folks are the real deal. David Kley, Emily, Brittany and their other staff are professional, provide personal attention and know their stuff. Unlike some other companies, they back up their promises and marketing recommendations 100%. They are doing great work for my company, improving my site and SEO and affordably applying my resources for maximum efficacy.”

Image

Gary Burger

Burger Law

The last web team you’ll need

“Exceptional Website Design and SEO company. I have years of experience in working with these types of companies, and these folks are the real deal. David Kley, Emily, Brittany and their other staff are professional, provide personal attention and know their stuff. Unlike some other companies, they back up their promises and marketing recommendations 100%. They are doing great work for my company, improving my site and SEO and affordably applying my resources for maximum efficacy.”

Image

Gary Burger

Burger Law


Slider

Used to … slide things. This one is kinda complicated and is made up of 4 shortcodes in total:

  • Container – Sets up the boundary for the slider + the slider controls
  • Slider – The slider itself
  • Controls – The arrows
  • Slide – each individual slide inside the slider.

Here’s an example of what that looks like:

Content can go here.

Card Title
This is slide 1
Card Title
This is slide 2
Card Title
This is slide 3
Card Title
This is slide 4
Card Title
This is slide 5

Content can go here.

Content can go here.

Card Title

This is slide 1
Card Title

This is slide 2
Card Title

This is slide 3
Card Title

This is slide 4
Card Title

This is slide 5

Content can go here.

Classes

There’s a plethora of utility functions available to content team to work with. Below are the most common and most frequently used. We’ll expand this area as the site grows / as needed.

Widths

For controlling width of elements (for grids or for really anything) you can use the following syntax:

wdac-width--{{percentage}} wdac-width--{{percentage}}@d

Sizing is based on percentages (with some rounding) and is mobile first. That means classes without an “at” symbol go first, then the next smallest, then the next smallest, etc. Jumbo size always goes last in terms of priority, even though classes can be written in any order. Let’s see a practical example.

Super cool image
    

Super cool image

For this, the image is 1/1 (full) size. When the screen gets to desktop size (@d) it becomes 50% wide. When the screen gets to large size (@l) it becomes 33%ish wide.

There are also two special widths that can be used in combination with the grid system:

  • wdac-width–auto takes the size of its content and nothing more.
  • wdac-width–expand takes all remaining available room.

The above two are often used together when you want one side of a grid to be smaller (auto) and the other side to be whatever room is left (expand).


Text Modifiers

Heading classes (make text look like headings)

  • wdac-h1
  • wdac-h2
  • wdac-h3
  • wdac-h4
  • wdac-h5
  • wdac-h6

Alignment classes:

  • wdac-text-center
  • wdac-text-left
  • wdac-text-right

Note: You can also use @d, @l, @xl, and @j modifiers to change alignment dependent on screen size. Example for making something centered on mobile, but left on desktop: class=”wdac-text-center wdac-text-left@d”

Font Weights / Styling

  • wdac-text-normal
  • wdac-text-medium
  • wdac-text-semibold
  • wdac-text-bold
  • wdac-text-extrabold
  • wdac-text-black (note that this class is for font weight and NOT color)
  • wdac-text-italic
  • wdac-text-small
  • wdac-text-smaller

Text Colors

  • wdac-text-primary
  • wdac-text-primary-shade
  • wdac-text-white
  • wdac-text-dark-grey
  • wdac-text-grey
  • wdac-text-color-black (note that this class includes COLOR in the name to separate it from the font weight modifier)
  • wdac-text-first-line-primary (first line of text is red)

Lists

Ordered and unordered lists work as per usual. To make unordered lists look fancy, you can use the arrow list class. See example:

<ul class="wdac-arrow-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
    

  • Item 1
  • Item 2
  • Item 3

Columns

You can easily make content take up multiple columns via the grid system OR you can use these special classes:

  • wdac-col–1
  • wdac-col–2
  • wdac-col–3

See example:

<p class="wdac-col--2@d">This is a small bit of content that I wrote myself. I'm very proud. This is a small bit of content that I wrote myself. I'm very proud. This is a small bit of content that I wrote myself. I'm very proud.</p>
    

This is a small bit of content that I wrote myself. I’m very proud. This is a small bit of content that I wrote myself. I’m very proud. This is a small bit of content that I wrote myself. I’m very proud.


Padding / Margin

We have a lot of control over padding and margins via classes. The syntax is very simple and is based on percentages. For example:

<p class="wdac-bg-grey wdac-margin-top--100 wdac-margin-top--200@d wdac-padding-x--25 wdac-padding-x--50@d">This is my formatted content</p>

These classes always start with wdac-margin- or wdac-padding- and then you designate a direction. To simplify, you can use “y” for both top and bottom, and “x” for left and right, similar to the x and y axis on a graph. After that, you have TWO dashes and then the multiplier. This multiplier is based on 60px for Hexxen. So 100 means 60px, 200 means 120px, 50 means 30px, etc.

Breaking it down into parts:

  • wdac-bg-grey is a background color class. We’ll talk about that later (all it does is make the background grey).
  • wdac-margin-top–100 means for the top margin, we want it to be 100%, or 60px.
  • wdac-margin-top–200@d means for the top margin, we want it to be 200%, or 120px, but ONLY for desktop (@d means “at desktop”).
  • wdac-padding-x–25 means for left AND right padding, we want it to be 25% or 15px.
  • wdac-padding-x–50@d means for left AND right padding, we want it to be 50% or 15px, but ONLY for desktop.

This syntax is identical for both padding and margin, with some very specific exceptions that probably won’t be used by content team at all (margins can be negative). Also note: to remove margins or padding, use the zero multiplier like wdac-margin-y–0.

Fluid Padding / Fluid Margin

Take everything you know about the above Padding / Margin rules and let’s make it more dynamic. We also have more dynamic spacing options called fluid margin and fluid padding. These classes behave very similarly to the normal padding / margin, but they will grow and shrink with the viewport height.

You will notice that the padding and margins of the site will grow and shrink. This is because most of the site uses this dynamic / fluid system. Let’s modify our example.

<p class="wdac-margin-fluid-top--100 wdac-margin-fluid-top--200@d wdac-padding-fluid-x--25 wdac-padding-fluid-x--50@d">This is my formatted content</p>

Live example using these rules:

This is my formatted content

In most cases: you want to use fluid classes unless you want very fine control over the spacing.

    Contact Us Today!

    Enter your contact and project information below.


    DISCLAIMER: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.