Function: Grid shortcode is used to align content in a grid pattern.
Note: It is best practice to keep the number of columns in a given row to a reasonable number, typically three. The more columns you put in a row, the more cramped your content will be. Additionally, not all page formats (Ex. pages with side bars versus pages without side bars) will support having several columns in a given row as there isn’t enough space on the page.
*This recipe is displayed on a no sidebar page due to the nature of one of the options you can choose for grid shortcode.
Step 1: Have the content that you wish to put in a grid pattern
Again, you can really put anything into a grid pattern using the grid shortcode. For the purposes of this tutorial, we will be using cards. Go to the cards recipe for the shortcodes and tutorial. The following is how cards would appear to your external user before adding in the grid shortcode to put the content in a grid pattern. Notice how they expand to fill the entire width of the page.
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Step 2: Put your content into the grid shortcode framework
Think of grid shortcode as a framework. For every row you want, begin it with [row] followed by [col class="col-sm"]. After inserting your content you then want to close the column with [/col] before starting a new column with [col class="col-sm"]. When you are done putting content in your particular row close it all off with [/row]. Repeat the process until all of your desired content is in your desired grid pattern.
Remember, do not overload a row with columns. You can always add another row to accommodate your content.
The grid shortcode without content appears as follows:
[row][col class="col-sm"]
*CONTENT*
[/col]
[col class="col-sm"]
*CONTENT*
[/col]
[/row] [row]
[col class="col-sm"]
*CONTENT*
[/col]
[col class="col-sm"]
*CONTENT*
[/col]
[/row]
This is what it would look like with card shortcode inserted:
[row][col class="col-sm"]
[uw_card style="inset" color="gold" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Something goes here…[/uw_card]
[/col]
[col class="col-sm"]
[uw_card style="inset" color="purple" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/uw_card]
[/col]
[/row] [row]
[col class="col-sm"]
[uw_card style="inset" color="white" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Something goes here…[/uw_card]
[/col]
[col class="col-sm"]
[uw_card style="inset" color="gold" align="right" title="Add a title!" button="Add button text!" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#"]Something goes here…[/uw_card]
[/col]
[/row]
Here’s what it would look like to your external users:
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Step 3 (Optional): Aligning the bottoms of your content
You may have noticed up above at the end of Step 2 that the heights of the cards are not all even. To achieve this add the attribute height=equal to the insides of all your [row] [/row] codes.
Attribute code: height=equal
Before
[row][/row]
After
[row height=equal][/row]
By adding this, your cards will now look like this:
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Step 4 (Optional): Additional attributes available for Grid Shortcode
Want to get fancier with your grid shortcode? The following attributes are ways that you can customize your grid shortcode even more. Just like in Step 3, the corresponding attribute for each of the below options should be added within the brackets of the row you want to implement the attribute. (This is with the exception of the id attribute, which can be applied to both rows and columns.) You can have multiple attributes in any given [row] [/row] depending on your needs. This will be important for some of the available style attributes.
Attributes available for Grid Shortcode
- height: To make the bottoms of your content, such as cards, line up use height=equal as laid out in Step 3 above.
- background: This will change the color of the background of the row you’ve implemented it on. The currently available options are gold, purple, gray and light-gray. Please see the color background options section below for visual examples.
- image: This attribute sets an image as the background of whatever you’ve put into grid shortcode. Please see the image background option section below for further details.
- width: To make the containers within your grid shortcode expand to the full width of your page, use width=full-width. Please note that there are additional guidances for this particular grid shortcode modification in the full-width option section.
- id: IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.
Example of how to implement one of the color backgrounds in a row
Before
[row][/row]
After
[row background=purple][/row]
Color Background Options
Color options: purple, gold, gray, light-gray
Attribute code: background=Insert color option here
Notice that for some of the colors the text automatically changes color to create an accessible reading experience for the text. This is also how you would go about changing the text color if using the image background attribute and your text is hard to read in the standard black.
Purple background example
Gold background example
Gray background example
Light-gray background example
Image Background Option
Attribute code: image=insert image URL
This attribute sets an image as the background of whatever you’ve put into grid shortcode. Recommended image size is 1920px x 1280px.
*As said previously, use the background color attribute in tandem with this attribute code to change text color if needed.
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Full-Width Option
Attribute code: width=full-width
Only use this on a page with no sidebar, you will have strange results otherwise. With this option, you’ll notice that the containers span the full-width of the screen, thus allowing whatever is in the containers to do so. Insert this attribute into the [row][/row] code just as you would do with the color background and the image background.
Before
[row][/row]
After
[row width=full-width][/row]
Both the color background option and/or the image background option can be used with the full-width option, essentially creating a shortcode version of the flexible media blocks in storytelling modules.
*Because this causes your content to go full-width, you may get undesired results like in Example 2 below. To resolve this, you’ll need to add padding around whatever content you may have in a given container. This is done by changing the column class to “p-5” like you see below.
Before
[col class="col-sm"][/col]
After
[col class="col-sm p-5"][/col]
Example 1:
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Add a title!
![cupcakes](https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/193/2022/09/22101945/w-day-cupcakes-300x200-1.jpeg)
Something goes here…
Example 2:
Content such as text and shortcodes can be inserted here
Note: If doing just text you’ll notice in this example that the text also spans the full-width. To correct this, use the Bootstrap code as said previously in these instructions.
Example 3 (after adding in padding to Example 2):
Content such as text and shortcodes can be inserted here
Note: If doing just text you’ll notice in this example that the text also spans the full-width. To correct this, use the Bootstrap code as said previously in these instructions.
Needing more assistance? Check out the resource below for more information on how Bootstrap works and how it can be modified. (Due to the fact that the grid shortcode is essentially bootstrap, the attributes and modifications for Bootstrap should work with this shortcode.)