Tabular Demo

Description Color Size Units Sold Price
Product #1 Red Small 23 $23.50
Product #2 Green Medium 45 $34.75
Product #3 Orange Large 34 $39.88
Product #4 Blue XL 34 $45.88
Product #5 Violet XXL 34 $55.88

Generated Table HTML

As you can see from the code below, Tabular generates semantic HTML automatically. No manual coding is necessary!

<table class="tabular zebra-3-template">
  <thead>
    <tr>
      <th>Description</th>
      <th>Color</th>
      <th>Size</th>
      <th>Units Sold</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product #1</td>
      <td>Red</td>
      <td>Small</td>
      <td>23</td>
      <td>$23.50</td>
    </tr>
    <tr>
      <td>Product #2</td>
      <td>Green</td>
      <td>Medium</td>
      <td>45</td>
      <td>$34.75</td>
    </tr>
    <tr>
      <td>Product #3</td>
      <td>Orange</td>
      <td>Large</td>
      <td>34</td>
      <td>$39.88</td>
    </tr>
    <tr>
      <td>Product #4</td>
      <td>Blue</td>
      <td>XL</td>
      <td>34</td>
      <td>$45.88</td>
    </tr>
    <tr>
      <td>Product #5</td>
      <td>Violet</td>
      <td>XXL</td>
      <td>34</td>
      <td>$55.88</td>
    </tr>
  </tbody>
</table>

SVG Flags Demo

Demo page for the SVG Flags WordPress plugin.

Aspect Ratio


All flags are SVG files, and each one is available in 4:3 or 1:1 (i.e. square) aspect ratios.

  (4:3)

  (1:1)

Headings


h1 (4:3) (1:1)

h2 (4:3) (1:1)

h3 (4:3) (1:1)

h4 (4:3) (1:1)

h5 (4:3) (1:1)

Span Elements


This is just some text inside a span tag with the flag to the left.

Here is another span with the flag to the right and sized to be slightly smaller.

Paragraphs


It’s easy to add flags to <p> tags too!

Change the dimensions of the flag to better fit in with the paragraph text.

We can also use vertical alignment inside block level elements. This paragraph is middle aligned.

Div Elements


Div tags are no problem either.
Vertical alignment works just the same too making formatting flags alongside text very easy.

Tables


Adding flags to a table is very simple. Just add HTML markup for an individual flag to each table cell.

Sizing


(20×15)

(40×30)

(60×45)

(80×60)

(100×75)

(160×120)

(320×240)

Because the flags are SVG images then they look great at any size. Go as big as you like! Just make sure to keep the width/height equal for 1×1 SVG flags, and at a 4×3 aspect ratio for the 4×3 SVG flags. e.g. 20×15, 40×30, 60×45, 80×60 are all valid sizes for any 4×3 flag to display at the best possible size.

Example Usage


This is a heading

Code:  

(4:3)

Code:  

(1:1)

Code:  

(160×120)

Code:  

List Categories (Taxonomy Terms)

List Categories (taxonomy terms)

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
Use this shortcode to display a hierarchical list of post taxonomy terms (e.g. categories). There are flexible shortcode attributes to customise output such as:

  • Comma separated list of taxonomy term IDs to include in the sitemap.
  • Comma separated list of taxonomy term IDs to exclude from the sitemap.
  • Show post count next to each taxonomy term.
  • Order taxonomy terms however you want (e.g. by name, ID, date etc.)
  • Optionally hide taxonomy terms with no associated posts.
  • Control hierarchy depth of terms listed.
  • Only show child terms of a specific parent term.
  • Examples:
    [simple-sitemap-tax]
    [simple-sitemap-tax taxonomy="wpgo_portfolio_group" show_count="1"]

Portfolio Groups

Nofollow Sitemap Links

Nofollow Sitemap Links

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
If you need your sitemap links to be nofollow then no problem! Simply use the nofollow="1" shortcode attribute. Inspect the code for the sitemap below. Each link includes the rel="nofollow" HTML attribute.

Example:
[simple-sitemap nofollow="1"]


List Posts by Taxonomy

List Posts by Taxonomy

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
Use this shortcode to display posts from ANY post type grouped by taxonomy. You can also easily combine other shortcode attributes to customise output, such as removing bullet points and adding the featured image to each post.

Examples:
[simple-sitemap-group type="wpgo_portfolio" tax="wpgo_portfolio_group"]
[simple-sitemap-group list_icon="false" image="true" type="wpgo_portfolio" tax="wpgo_portfolio_group"]

List Posts by Category

List Posts by Category

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
Use this shortcode to display posts grouped by category.

Example:
[simple-sitemap-group]

Posts

Grandchild Category

Post Formats


Column Layout

Column Layout

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
You can layout sitemaps side-by-side rather than in one long list by using simple styles. If you have more than two sitemaps (e.g. three columns) then you can add wrapping (flex-wrap:wrap;) to make your sitemap responsive!

Example:
<div style="display:flex;justify-content:space-around;">[simple-sitemap types="page"][simple-sitemap types="post"]</div>



Sitemap with Excerpt

Sitemap with Excerpt

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
This sitemap is the same as the standard sitemap example but with the post excerpt (if defined) added underneath.

Example:
[simple-sitemap excerpt="true"]


Horizontal Sitemap

Horizontal Sitemap

This is one of many demos of our Simple Sitemap Pro WordPress plugin. Click here to see more examples.
This is an example of a horizontal sitemap. Specify the post type(s) to be rendered, and the separator character, which can be whatever you want. You can also use other shortcode attributes such as the post featured image!

Here are some examples demonstrating different separator characters:

[simple-sitemap types="post" horizontal="true" horizontal_separator=" / "]

[simple-sitemap types="page" horizontal="true" horizontal_separator=", "]

[simple-sitemap types="wpgo_testimonial" horizontal="true" horizontal_separator=" | "]

[simple-sitemap types="wpgo_slide" horizontal="true" horizontal_separator=", "]

[simple-sitemap image='true' types="wpgo_portfolio" horizontal="true" horizontal_separator=" - "]