Volt Blog can be used for many different things, like a blog for writing news articles, a FAQ page, or a product catalog.

Tutorial Video

Requirements

Following requirements are necessary for being able to use the blog:

• The page must be a .php page.
• The project must have Clean Page URLs activated. Note: This will change your folder and page structure.
  • The blog can be either placed on the root page /index.php, or a subpage like /blog/index.php

Blog Bric

In order to install a Volt Blog, search for the Volt Blog Bric and add it to the page. You can have multiple blogs per project, and one blog per page.

There are different settings available for the blog. The main settings are:

• Blog ID: You can have several blogs per project, and one per page. The ID defines the blog.
• Items per page: How many blog posts are shown per page, before the pagination starts to move to the next page.
• Layout: Different column layouts are available, from 1 to 2, 3, 4 columns.
• Date pattern: Date pattern format, see PHP date format. Examples:
  • d.m.Y H:i for 21.07.2020 21:00
  • Y-m-d for 2020-07-21
  • Empty string for no date display
• Hide future posts: Don't show future posts. Remember this is controlled by the server time, so check for possible time zone differences. When logged in, all future posts are shown regardless of this setting.

Text and Labels:

• Labels for author, category, tag, separator . Is also allowed to be empty.
• Button texts for read more, back, previous / next post, previous / next page.

RSS and SEO Settings:

• Replace SEO Metadata: When opening a blog post in detail view, header metadata for different meta tags are automatically set, like
  • Description, title
  • Twitter tags
  • Open graph / facebook tags
  • Canonical link
  • Preview image (image in header data will be used therefore)
  • Structured data in JSON-LD format
• Pretty URLs with htaccess rewrite: All links will be generated without post URL parameter like domain.com/blog/title instead of domain.com/blog/?post=title. Therefore, a htaccess rewrite rule is necessary. Replace htaccess with the name of the subfolder of the blog page.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule htaccess/author/(.*) /htaccess/index.php?author=$1 [L,NC,QSA]
RewriteRule htaccess/category/(.*) /htaccess/index.php?category=$1 [L,NC,QSA]
RewriteRule htaccess/date/(.*) /htaccess/index.php?date=$1 [L,NC,QSA]
RewriteRule htaccess/search/(.*) /htaccess/index.php?search=$1 [L,NC,QSA]
RewriteRule htaccess/tag/(.*) /htaccess/index.php?tag=$1 [L,NC,QSA]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule htaccess/(.*) /htaccess/index.php?post=$1 [L,NC,QSA]

• Publisher, title, description: Metadata for the RSS feed
• Language: Use language code like en-us or de-de
• Image URL: Full qualified URL to a RSS image, starting with http(s)://

Editor Bloc

Add the Volt Blog Editor bloc (not bric) to the page. This is a modal UI only visible on the published server when logged in.

When both Volt Blog bric and Volt Blog Editor bloc are placed on the page, you will get a new (add) button when logged in for adding a new blog post. Selecting this add button will open the editor modal UI.

The editor has different input fields and content areas:

• Title: Required. Title of post. Will form the permalink.
• Slug / Short title: When the title is to long and you want to have a shorter permalink, use a slug.
• Date / Time: Required. The blog posts will be sorted by date and time descending. If you don't want to display the full timestamp or none of it, either hide it with CSS, or use an adjusted or empty date pattern in the blog bric.
• Check if draft: Draft posts will be hidden and only displayed when logged in.
• Authors, categories: Comma separated list
• Description: Will be used for SEO metadata.
• Header Content: Content area for placing a hero banner image.
• Summary Content: Content area, which will be displayed in list view.
• Main Content: Content area, which will be displayed in detail view.

When logged in, each post will get 3 buttons for editing, deleting, or copying the post.

Styling

The blog layout can be styled with supplied CSS classes. Here is a reference:

• volt-blog-list: list of posts
• volt-blog-item: post item
  • volt-blog-item-detail: post item detail view
  • volt-blog-item-list: post item list view
• volt-blog-item-header: header content
  • volt-blog-item-header-detail: header content detail view
  • volt-blog-item-header-list: header content list view
• volt-blog-item-body: body content
  • volt-blog-item-body-detail: body content detail view (main content)
  • volt-blog-item-body-list: body content list view (summary content)
• volt-blog-item-title: title
  • volt-blog-item-title-detail: title detail view
  • volt-blog-item-title-list: title list view
  • volt-blog-item-title-link: Use this for title list view if volt-blog-item-title or volt-blog-item-title-list does not work.
• volt-blog-item-metadata: metadata (date, categories, authors)
  • volt-blog-item-metadata-detail: metadata detail view
  • volt-blog-item-metadata-list: metadata list view
• volt-blog-item-date: metadata date
  • volt-blog-item-date-detail: metadata date detail view
  • volt-blog-item-date-list: metadata date list view
• volt-blog-item-category: metadata category
  • volt-blog-item-category-detail: metadata category detail view
  • volt-blog-item-category-list: metadata category list view
• volt-blog-item-author: metadata author
  • volt-blog-item-author-detail: metadata author detail view
  • volt-blog-item-author-list: metadata author list view
• volt-blog-item-share-detail: share icons detail view
• volt-blog-btn: buttons (read more, back, post and page navigation)
• volt-blog-item-back: around back button
  • volt-blog-btn-back: back button
• volt-blog-item-readmore: around read more button
  • volt-blog-btn-readmore: read more button
• volt-blog-nav-post: post navigation
  • volt-blog-nav-post-prev: around previous post button
    • volt-blog-btn-post-prev: previous post button
  • volt-blog-nav-post-counter: post counter
  • volt-blog-nav-post-next: around next post button
    • volt-blog-btn-post-next: next post button
• volt-blog-nav-page: page navigation
  • volt-blog-nav-page-prev: around previous page button
    • volt-blog-btn-page-prev: previous page button
  • volt-blog-nav-page-counter: page counter
  • volt-blog-nav-page-next: around next page button
    • volt-blog-btn-page-next: next page button

Share Icons

Add the Volt Blog Share bloc to the page.

The share icons will be hidden by default and only be displayed in detail view. If you change the icon colours or remove an icon, make sure the CSS class volt-blog-share is still available inside the structure.

Search and Sort

For adding a search and sort option, add the Volt Blog Search bloc to the page.

You can remove either the torch or sort if not required, and style it accordingly.

RSS Feed and Sitemap

For opening the RSS feed, add the URL parameter feed=rss. Example: https://blocsaddons.com/volt-cms-tutorial/?feed=rss

For opening the sitemap, which can be entered in Google Search Console, add the URL parameter feed=sitemap. Example: https://blocsaddons.com/volt-cms-tutorial/?feed=sitemap