Views

Views are another way to display several related information together. Mostly you can use them to list the articles which is available in your documentation. Choose the layout that suits the type of content you’re displaying.

  1. List view
  2. Grid view
  3. Categorized view

List view

In this way, you can show meta data below the title, and write some description of the article before viewing it.

  • Get Going Fast

    August 19, 2015 | 3 mins | Beginner

    A quick-start guide to all the basics you need to get up and running now. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.

  • Get a Homepage

    August 26, 2015 | 5 mins | Beginner

    Learn how to turn that blog into a static website for your business or your organization. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.

  • Get Lingo

    September 05, 2015 | 12 mins | Intermediate

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis bibendum ligula. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.


<ul class="list-view">
  <li>
    <h5><a href="#">Get Going Fast</a></h5>
    <p class="meta-data">August 19, 2015 | 3 mins | Beginner</p>
    <p>A quick-start guide to all the basics you need to get up and running now. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
  </li>

  <li>
    <h5><a href="#">Get a Homepage</a></h5>
    <p class="meta-data">August 26, 2015 | 5 mins | Beginner</p>
    <p>Learn how to turn that blog into a static website for your business or your organization. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
  </li>

  <li>
    <h5><a href="#">Get Lingo</a></h5>
    <p class="meta-data">September 05, 2015 | 12 mins | Intermediate</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis bibendum ligula. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
  </li>
</ul>

Grid view

Grid view is a great way to show several articles with a short description, or just showing available categories and a short description about its content.

  • post
    get_post

    Retrieves post data given a post ID or post object.

  • helper
    sanitize_title

    Sanitizes title or use fallback title.

  • category
    in_category

    Tests if the current post is assigned to any of the specified categories.

  • posts
    is_single

    This conditional tag checks if a single post of any post type is being displayed.

  • posts
    add_post_meta

    Adds a custom field to a specified post which could be of any post type.

  • helper
    get_bookmark

    Retrieve Bookmark data based on bookmark link ID.


<ul class="grid-view view-col-3">
  <li>
    <h6>post</h6>
    <h5><a href="#">get_post</a></h5>
    <p>Retrieves post data given a post ID or post object.</p>
  </li>

  <li>
    <h6>helper</h6>
    <h5><a href="#">sanitize_title</a></h5>
    <p>Sanitizes title or use fallback title.</p>
  </li>

  <li>
    <h6>category</h6>
    <h5><a href="#">in_category</a></h5>
    <p>Tests if the current post is assigned to any of the specified categories.</p>
  </li>

  <li>
    <h6>posts</h6>
    <h5><a href="#">is_single</a></h5>
    <p>This conditional tag checks if a single post of any post type is being displayed.</p>
  </li>

  <li>
    <h6>posts</h6>
    <h5><a href="#">add_post_meta</a></h5>
    <p>Adds a custom field to a specified post which could be of any post type.</p>
  </li>

  <li>
    <h6>helper</h6>
    <h5><a href="#">get_bookmark</a></h5>
    <p>Retrieve Bookmark data based on bookmark link ID.</p>
  </li>

</ul>

Categorized view

In this view, you can categorize you articles ot tutorials in several part and show more content in fewer space.


<ul class="categorized-view">
  <li>
    <h5>Getting started</h5>
    <a href="#">New To theDocs - Where to Start</a>
    <a href="#">theDocs in Your Language</a>
    <a href="#">Lessons</a>
    <a href="#">Tutorials</a>
    <a href="#">Frequently Asked Questions</a>
  </li>

  <li>
    <h5>Learn How to Use</h5>
    <a href="#">Creating a starter page</a>
    <a href="#">Creat your header</a>
    <a href="#">Creat a footer</a>
    <a href="#">Add links to sidebar</a>
  </li>

  <li>
    <h5>Working With Themes</h5>
    <a href="#">Theme Development</a>
    <a href="#">Design and Layout</a>
    <a href="#">Color cariations</a>
  </li>

  <li>
    <h5>Write a Plugin</h5>
    <a href="#">Writing a Plugin</a>
    <a href="#">Plugin API</a>
    <a href="#">Plugin Resources</a>
  </li>

  <li>
    <h5>Contribute to Development</h5>
    <a href="#">Developer Documentation</a>
    <a href="#">Reporting Bugs</a>
    <a href="#">Development Blog</a>
    <a href="#">FAQ Developer Documentation</a>
  </li>
</ul>