Modifying the RapidWeaver Blog


RapidWeaver has always included a basic blog page type. It's ideal to use if your blogging requirements are very simple and you plan to only publish new blog articles from within RapidWeaver on an infrequent basis. If you want to blog remotely (outside) of RapidWeaver, then other CMS-derived solutions exist (available to purchase from other companies). These might be better to use and get typically get good reviews from our theme customers.

The blog page type supplied with RapidWeaver is very basic, but this article will walk you through a couple of safe 'hacks' or modifications that can be made to make the blog even better.

Adding headings to blog sidebars

One aspect of the blog page type (that can be a bit of a let-down) are the links generated in the sidebar, on blog pages. To an end user, they can sometimes prove a bit non-descriptive; as to what they do or where they lead. It would be great if we could add some basic section headings to provide a little more information about the links. Indeed, this is something that can be achieved, using some relatively simple CSS code. The screenshot below shows a blog (published using the Wilderness theme) without blog sidebar headings.

Blog without sidebar headings

This is the CSS code to use for adding blog sidebar headings:

#blog-categories:before {
content: "Blog Categories";
display: block;
font-size: 120%;
}

#blog-archives:before {
content: "Blog Archive";
display: block;
font-size: 120%;
}

.blog-tag-cloud:before {
content: "Tag Cloud";
display: block;
font-size: 120%;
}

#blog-rss-feeds:before {
content: "RSS Links";
display: block;
font-size: 120%;
}


Strictly speaking, we do not normally use CSS for setting content (this is normally the role of HTML). However there's no other method to get these headings into the blog sidebar. CSS provides a useful ':before' pseudo selector. This can be combined with the 'content' property to inject the desired headings into the blog sidebar.

This is the end result, with blog sidebar headings applied:

Blog sidebar headings afterwards

Blog Enhancement Kit (BEK)

This is an opensource code snippet (available from GitHub) that gets added to the custom Javascript box, in the RapidWeaver Page Inspector. BEK is a small plugin which adds the following optional features to your blog:

Any image added to a blog entry named main.jpg or main.png will get appended to the FreeStyle banner container, at the top of the page
Display buttons (using Font Awesome icons) below each blog entry, for people to share the current article link with their friends or followers via Google+, Facebook, Twitter, LinkedIn or email
Display the reading time below the blog entry date (like Medium does) so readers can gauge its estimated reading time
Automatically convert MP3 links into embedded HTML5 audio players
Automatically convert MP4 links into embedded HTML5 video players
Append additional content (like an email newsletter subscription signup forms, or links) below every blog entry
Add support for Muut commenting, as an alternative to Disqus
Display the word count of the blog article, below the blog entry date

RapidWeaver Blog Enhancement Kit

The source code is completely opensource. This permits you to open BEK in your preferred code editor. You can delete or comment-out parts of the plugin you do not want to use and configure the bits you do want to use.
19/05/2023
Web design by Will Woodgate