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

HTML demo page for the SVG Flags WordPress plugin.

The examples below show how to add flags to your content directly via HTML. The plugin now also supports a [svg-flags] shortcode to make it easier to add SVG flags to the new block editor in WordPress 5.0 and above. See plugin settings page for more details.

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. You can display all categories or just a subset of the ones you want using the include_terms and exclude_terms shortcode attributes. See the plugin documentation for more details.

Examples:
[simple-sitemap-group]
[simple-sitemap-group include_terms="Edge Case, Latest Posts, Media"]PRO

This sitemap displays all post categories.

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 class="simple-sitemap-wrapper">[simple-sitemap types="page"][simple-sitemap types="post"]</div>

Then add this CSS:
.simple-sitemap-wrapper { display:flex;justify-content:space-around; }
@media only screen and (max-width: 600px) { .simple-sitemap-wrapper { flex-direction: column; } }



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"]

Posts

  • Welcome to the Flexr Blog!
    With the Flexr theme having a blog is totally optional!
  • (no title)
    This post has no title, but it still must link to the single post view somehow. This is typically done by placing the permalink on the post date.
  • Another Featured Image Example
    This post displays another featured image on the main post archive view. You can set this on the post editor using any image from the media library.
  • Edge Case: Many Categories
    This post has many categories.
  • Edge Case: Many Tags
    This post has many tags.
  • Featured Image Example
    This post displays a featured image on the main post archive view. Set this on the post editor using any image from the media library.
  • Markup: HTML Tags and Formatting
    Heading Examples Just a quick selection of all six heading types available. Header one Header two Header three Header four Header five Header six
  • Markup: Text Alignment
    This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it…
  • Media: Twitter Embeds
    Really cool to read through and find so much awesomeness added to WordPress 3.6 while I was gone. I should take three weeks off more often. — Andrew Nacin (@nacin) April 3, 2013 This post tests WordPress’ Twitter Embeds feature.
  • Post With Comments
    This is a standard post with plenty of comments. Take a peek at the single post view to see how beautiful the comments look! 🙂
  • Standard Post
    All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this.
  • Template: Excerpt Defined
    This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages.
  • Template: More Tag
    This content is before the more tag. Right after this sentence should be a “continue reading” button of some sort.
  • Template: Paginated
    Post Page 1
  • Protected: Template: Password Protected (the password is “enter”)
    There is no excerpt because this is a protected post.

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=" - "]