Please note: This article is specifically for the Sprout & Spoon theme.
Sprout & Spoon includes a unique shortcode which allows you to display a number of posts from a particular category in a grid-like layout. This feature can be helpful if you'd like to create an index page, for example, to display a sampling of your latest posts from a variety of categories.
THE CATEGORY INDEX SHORTCODE
Inserting a category index is as simple as copying and pasting a bit of shortcode in a post or page where you'd like the category grid to appear.
First, please be sure that you've installed and activated the plugin titled "Solo Pine Recipes". This plugin comes bundled with the theme and should appear in a notification banner at the top of your WordPress Dashboard requesting you to install required/recommended plugins.
The basic shortcode looks like:
[sp_index]
Simply adding the above basic shortcode to a post or page will display your 3 most recently published posts from any category.
To customize the index grid, you can apply special parameters to your category index grid. Please reference the section below for the necessary steps.
SHORTCODE PARAMETERS
The following shortcode parameters are bits of text you can insert into the basic shortcode (above) to apply specific characteristics to what your category index grid displays and how it displays it.
Below, we'll share the parameter options. In the next section, we'll demonstrate how the various parameters alter the category index grid.
Here are a list of the parameters (descriptions appear to the right of each parameter):
title="" // custom title above grid cat="" // slug name of category. leave blank to get all posts. amount="3" // # of posts to show cols="3" // number of columns. 2, 3 or 4 display_title="yes" // yes/no to display post titles display_cat="no" // yes/no to display post cat above post title display_date="yes" // yes/no to display post date display_image="yes" // yes/no to display post images cat_link="yes" // yes/no to display cat link cat_link_text="View All" // use custom cat link text offset="3" // begin displaying the 3rd most recently published post
EXAMPLES OF SHORTCODE PARAMETERS IN ACTION
TITLE
[sp_index title="breakfast"]
We've inserted the parameter title="" into the standard [sp_index] shortcode.
In this example, I've given the category index grid a title of "Breakfast".
This will apply the title of "Breakfast" above the category index grid.
CATEGORY
[sp_index cat="desserts"]
We've inserted the parameter cat="" into the standard [sp_index] shortcode.
In this example, I've given the category index grid a category of "Desserts".
This will have the category index grid only pull in the 3 latest posts from the category titled "Desserts".
When you use this category parameter, it will automatically add a "VIEW ALL" link to the right of your index grid's title.
Further below, we will go over the ways you can customize or disable this "VIEW ALL" link.
You are very welcome to apply multiple parameters to the shortcode.
For example, if you would like to apply the category AND title parameters together, it would look like:
[sp_index title="breakfast" cat="desserts"]
AMOUNT OF POSTS
[sp_index amount="4"]
We've inserted the parameter amount="" into the standard [sp_index] shortcode.
"Amount" refers to how many posts to display within this category index grid.
In this example, I've given the category index grid a post amount of "4".
You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND post amount parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" amount="4"]
COLUMNS
[sp_index cols="2"]
We've inserted the parameter cols="" into the standard [sp_index] shortcode.
"Cols" refers to how many columns the category index grid will display your posts in.
In this example, I've given the category index grid a column count of "2".
You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND post amount AND column count parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" amount="4" cols="2"]
DISPLAY POST TITLE?
[sp_index display_title="no"]
We've inserted the parameter display_title="" into the standard [sp_index] shortcode.
This will disable your post titles from appearing in the category index grid. By default, the post titles will display.
In this example, I've hidden the post titles.
You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND post amount AND column count AND post title parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_title="no"]
DISPLAY POST CATEGORIES?
[sp_index display_cat="yes"]
We've inserted the parameter display_cat="" into the standard [sp_index] shortcode.
This will disable your post categories above the post titles. By default, the post categories will not show.
In this example, I've chosen to show my posts' categories.
You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND post amount AND column count AND post categories parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_cat="yes"]
DISPLAY POST DATE?
[sp_index display_date="no"]
We've inserted the parameter display_date="" into the standard [sp_index] shortcode.
This will disable your post dates. By default, the post dates will show.
In this example, I've chosen to hide my posts' dates.
You can apply multiple parameters to the shortcode.
For example, if you would like to apply the category AND title AND post amount AND column count AND post dates parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_date="no"]
DISPLAY POST IMAGE?
[sp_index display_image="no"]
We've inserted the parameter display_image="" into the standard [sp_index] shortcode.
This will disable your post images. By default, the post images will be displayed.
In this example, I've chosen to hide my posts' images.
You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND post amount AND column count AND post image parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_image="no"]
DISPLAY CATEGORY/VIEW ALL LINK?
[sp_index cat_link="no"]
We've inserted the parameter cat_link="" into the standard [sp_index] shortcode.
This will disable the "VIEW ALL" category link. By default, if the category index grid has a category assigned to it, the "VIEW ALL" link will be displayed. It will link to the related category page.
In this example, I've chosen to hide my "VIEW ALL" category link.
You can apply multiple parameters to the shortcode.
For example, if you would like to apply the category AND title AND category link parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" cat_link="no"]
CUSTOM CATEGORY LINK TEXT
[sp_index cat_link_text="all dessert recipes"]
We've inserted the parameter cat_link_text="" into the standard [sp_index] shortcode.
This allows you to change the category link text to whatever you prefer. By default, it will say "VIEW ALL".
In this example, I've chosen to have my category link say "ALL DESSERT RECIPES" instead.
You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND category link text parameters together, it would look like:
[sp_index title="breakfast" cat="desserts" cat_link_text="all dessert recipes"]
SET POST OFFSET
[sp_index offset="3"]
By default, the shortcode will pull in your most recently published post in general or within a given category. If you would like to offset this so that the first post displayed is not the most recent post, you can use the [offset=""] parameter.
Insert the parameter offset="" into the standard [sp_index] shortcode. To offset the post feed by 2 posts (display the 3rd most recently published post), user an offset of "3".
This would look like:
[sp_index offset="3"]
To display your 2nd most recently published post, set the offset to be "1".