Simple Blog Profile for ProcessWire

This profile offers a simple and responsive blog which doesn't require any third-party modules. It works exclusively based on some template files. This profile consists of template files I published in an earlier post and also includes my simple search and simple contact form. This site profile is also available in the ProcessWire module directory and on github.com.

Installation
This site profile is intended for use with a fresh installation of ProcessWire.

  1. Download ProcessWire, extract all files and folders and upload it into your web server folder.
  2. Download the site profile (link at the bottom of this post), extract the "site-simple-blog" folder and upload it into the same folder.
  3. Start the installation.
  4. When prompted for Site Installation Profile select "Simple Blog Profile for ProcessWire 3x" and continue with installation.

Setup
There are no settings for this blog. Everything is ready after installation. You just have to fill it with content and maybe create some new pages.

Structure
The whole blog consists mainly from the following pages:

  1. Home page (Template: simple-blog-home)
    This page shows the latest 5 posts below the content.
  2. Posts page (Template: simple-blog-posts)
    This page lists all published posts. Hidden posts are not listed. Posts are sorted by published date. The latest posts are shown first in the list. All posts are paginated to 10 posts per page.
  3. Post page (Template: simple-blog-post)
    This page shows the content and a comment list with comment form provided by the FieldtypeComments which is shipped with ProcessWire.
  4. Categories page (Template: simple-blog-categories)
    This page lists all categories which have posts.
  5. Category page (Template: simple-blog-category)
    This page lists all posts in this category. Hidden posts are not listed.
  6. Archive page (Template: simple-blog-archive)
    This page lists all published posts in a tree structure sorted by published date. Hidden posts are not listed.
  7. Search page (Template: simple-search)
    This page offers a search form.
  8. Contact page (Template: simple-contact-form)
    This page offers a contact form.

Add a new post
Open the page structure, select "Posts" and click "New".

Make sure that "simple-blog-post" is selected as Template.

Set the featured graphic
The post list shows a featured graphic in front of every post. This graphic is taken from the first available image in the image field of the respective post. Note that you can change the order of images in the image field by dragging it to another position. The image should have the dimension of 96x96px.

Create and select categories
Before you can select categories you have to create it. Open the page structure, select "Categories" and click "New".

Make sure that "simple-blog-category" is selected as Template. The page title specifies the category name.

Open your post and click on "Add" in the Categories field and select a category.

Sidebars
Each page can have a sidebar regardless of the page type. Just open the page, click in the sidebar field and fill it with content. The sidebar is displayed on right from the body content if the browser window is 700px or wider. If smaller than 700px the sidebar will be displayed below the body content.

Pagination
Post lists are sorted by published date and paginated to 10 posts per page.

Contact form

Before you can use the contact form you have to specify the receiver email address. Open the page structure, select "Contact" and click "Edit". Enter the email address in the "E-Mail Address" field. You can also specify a Recaptcha-Site-Key and Recaptcha-Secret-Key to protect the form with Recaptcha.

Theme
The theme can easily customized to your requirement. The header graphic is located in /site/templates/images/header.jpg. This graphic is stretched to the whole header size. The logo is located in /site/templates/images/logo.png. The height of the logo also specifies the height of the header if the browser window is 700px or wider. If smaller than 700px the height is reduced to 60px. The main style is located in /site/templates/styles/main.css.

Download:

Change log:

  • Version 1.0: Initial version
Published: 18. Mar 2021
Categories: ProcessWire CMS PHP