Using the List Posts Shortcode

Another useful shortcode is used to list posts on any page or post. This can make a list of news stories or articles appear in any place on your WordPress website.

[list-posts posts_per_page=2]

This simplest usage above will display a list of the two most resent posts published for your website with the date.

  • June 9, 2016 at 8:53 am
    Download these files for training. Click on the following image to see the larger version and download this image for training. [caption id="attachment_396" align="alignnone" width="220"]Elkins Hall Elkins Hall[/caption]
  • January 17, 2013 at 2:48 pm
    On January 14th, 2013 we had a casual meeting with many of our department website editors, the university Website Manager, and staff from the Office of University Relations. The two main topics discussed were about the recent Nicholls Website redesign and changes introduced during the recent WordPress 3.5 upgrade. To give more information for meeting attendees and editors that were unable to attend two articles have been written about our meeting topics. Be sure to check out the Website Editor Checklist & Notes for useful information about maintaining content on the Nicholls websites. If you have additional questions you should contact the Website Manager, or leave a public comment below.
[list-posts posts_per_page=2 qs_content=100 qs_thumbnail='100x50' qs_container_class='list-posts-nicholls-news' qs_template='%title% { %content% %thumbnail% }']

This example has various advanced options to do thumbnails and format the output.

  • Download these files for training. WP Training File (pdf) Click on the following image to see the larger version and download this image for training....
  • On January 14th, 2013 we had a casual meeting with many of our department website editors, the university Website Manager, and staff from the Office of University Relations. The two main topics discussed were about the recent Nicholls Website redesign and changes introduced during the recent WordPress 3.5 upgrade. To give more information for meeting attendees and editors that were unable to attend two articles have been written about our meeting topics. WordPress 3.5 Media Management 2012 Nicholls Website Redesign New Theme Information Be sure to check out the Website Editor Checklist & Notes for useful information about maintaining content…...
[list-posts qs_title_tag='h4' posts_per_page=10 qs_content=240 qs_thumbnail='100' qs_container_class='list-posts-nicholls-news']

The list posts shortcode only has a couple of attributes to manipulate the display of the posts.

  • qs_title_tag – The tag used around the title of each post (default is DIV).
  • qs_more – Can be used so the more separator can be used to create a a lead in (experimental).
  • qs_content -Used to set the number of characters to display below the date.
  • qs_thumbnail -Used to set whether to use the featured image of the post as the thumbnail (default is 0). Thumbnail size can be indicated using number height and width like 120 or 100×150 or using a predefined thumbnail size name like medium.
  • qs_container_style – Can be used to override the styles using a style attribute on the container.
  • qs_container_class – Can be used to set an HTML CSS class on the container.
  • qs_template – Can be used to set the layout and ordering for the elements in each post item. { = <div>, } = </div> and use terms %title%, %date%, %thumbnail%, %content%. Default is “%title% %date% %thumbnail% %content%”
  • posts_per_page – Sets the number of posts to display (default is -1 all posts).
  • tag – Can be set to display posts having specified tags. Multiple tags can be separated by commas.
  • cat -Can be set to display posts in specified categories. Multiple categories can be separated by commas.
  • category_name – Can display posts specified by one category name.

Using the List Pages Shortcode

The list pages shortcode is designed to allow you to put a list of pages into a page or post. This can create a table of contents to show child pages or a list of child pages for a particular page. The page list created dynamically so the links and page titles should always be updated to the content saved in WordPress.

The simplest example is to just use the following shortcode on a page that has sub-pages or child pages. This will create a simple list with a Contents header.

[list-pages]

The page list can be manipulated with some attributes to do more complicated page lists.

[list-pages child_of=17 toc_title_text="Procedures"]

The list is more complicated, and you may need help to determine the proper ID number, but this can be useful to list pages without having to manually create links. Here is a list of the attributes and short descriptions.

  • show_date – Shows the date the page was published.
  • date_format – Sets the date for show_date.
  • depth -Hierarchy depth (default of 0 is infinite).
  • child_of -The page ID to use as the main parent (default is the current page).
  • exclude -List of page ID numbers separated by commas to exclude.
  • include – List of page ID numbers spearated by commas to include.
  • title_li – Puts a line of text and an additional list wrapped around the page list.
  • authors – To show pages by a certain author.
  • sort_column – Sets the order of the pages (default is page order then alphabetically by title).
  • link_before – Adds extra text or HTML before links.
  • link_after – Adds extra text or HTML after links.
  • exclude_tree – List of page ID numbers separated by commas that will exclude the parent and all child pages of that parent.
  • toc_container_tag – Sets the container HTML tag for the whole page list (default is a DIV).
  • toc_container_class – Sets the HTML CSS class for the container tag (default is list-pages-container).
  • toc_title_tag – Sets the HTML tag used for the title of the whole page list (default is H3).
  • toc_title_class – Sets the HTML CSS class for the title HTML tag (default is list-pages-title).
  • toc_title_text – Sets the text used as the title for the whole page list (default is Contents).
  • toc_wrapper_tag – Sets the tag wrapped around the list of pages (default is UL).

Many of these options are unnecessary for basic page lists, so make sure to contact the Website Manager about any advanced options.

Using the Column Shortcode

The [column] can be used to create build columns which can be more appropriate for displaying content than using HTML tables. These shortcodes have some special attributes that handle creating all the proper HTML needed to create a column that can be displayed properly.

Attributes

The [column] actually creates an HTML DIV container with all the proper attributes to create a simple column. Special attributes can be used to manipulate the way the column is created and displayed.

  • width – The width of the column. Height is defined by the content.
  • padding – By default this defines right gutter spacing to the next column. Should be something like 1px, 1em, or other CSS measurement.
  • style – The width and height above are normally combined to create an HTML style attribute, but a specific style attribute can be defined for knowledgeable users.
  • class – This creates the HTML class attribute. This is the preferred method at Nicholls to create columns that have been tested.

Examples

Here is the basic example of a column. This the default so is no different than using [column]My column text[/column].


[column width=0 padding=0 style=false class="column-"]
My column text
[/column]

Here is the example that creates a column that floats to the right with a red border on the left and a gray pattern background. This is one of the more complex columns.


[column class="column- float-right width-right-default border-red border-2-left pattern-light-grey"]
My Column Text
[/column]

My Column Text

This is how it looks when used. You’ll notice the complex text shown in the Class attribute. Those special classes are combined to create the column and set how it is displayed. These attributes are specific to the Nicholls WordPress websites and the classes may change depending on the theme.

2010 Nicholls Core Theme Column Classes

Here are the classes specifically for the 2010 Nicholls Core Theme.

  • column- You must include the dash at the end. It must be used by default do indicate the column.
  • float-left or float-right Indicates how the if the column is displayed on the right or left. You should be aware how the text before or after the column will wrap since the text wrapping depends on how the column is floating.
  • width-50, width-49, width-47, and width-46 are classes that define the width percentage.
  • width-default and width-right-default both define the width to line up the column with the logo. Typically used with a column that is float-right with a border that lines up with the logo’s vertical red line.
  • Some other special effects for columns can be found on the HTML & CSS Notes.