Extending the Ghost Default Theme with a Sidebar, Social Navigation Links, Disqus Comments & a Contact Form

The blogging platform I chose for my blog is the open source Ghost blogging platform. The main reasons I decided to go with it was it's super clean interface, that it has Markdown support... and because it's an up and coming blogging platform, with a strong community around it.

A Free Ghost Theme based on Casper

I really like the platform and the default Casper theme... but I was missing a few things from it, like having a sidebar on the left of the screen, or making links to my Twitter and Github account a bit more obvious. True to its open nature Ghost is really easy to extend... so that is what I did.

I created my custom theme and releasing this theme for free for anyone in the community to use. You can download the theme from GitHub.

This theme has a 6 features worth noting that make it easy to integrate and worthwile using.

1. Social Icons with no Coding

The theme recognizes social sites like GitHub, Linkedin, Twitter, Facebook and about 20 others.

social icons the Social Sidebar Casper Theme supports

Icons to navigation items are added automatically - as long as for the Label of the navigation item you specify the matching name for the site. More details on how to have the theme automatically add these icons can be found in the documentation

2. Profile Image in the Sidebar with no Coding

I find having an image of the blog author making reading a publication more personal. This theme uses the logo image in the Ghost blog to display the profile image in the sidebar. Just upload a photo of the blog's author (or logo) - and this will be picked up here automatically.

In case you want to change the behaviour and use an image different to the blog logo, it's easy to do this as well.

3. Disqus comments

By registering with Disqus and doing a small modification in the theme (uncommenting a few lines of code), the comments similar to this blog can be added really easlily.

4. Contact page

The theme comes with a contact page that can be used as a static page. To make sending emails work, you will have to do some backend coding, as sending emails from the client side is insecure. I've provided and example on a PHP file that does the sending of the email. The theme also comes with a Bootstrap powered validated contact form.

3. Mobile Optimized Theme

I've made sure the theme works beautifully both on desktop and on mobile.

On desktop (or any screen bigger then 880px) the sidebar is shown. On mobiles and screens smaller then this the sidebar is hidden, and instead a menu button is displayed, which reveals the navigation links.

I've also changed the mobile menu from Casper's roman numbered list to a more simple one - I found the original Casper theme not work as well for my site as this one.

4. Easy to Further Extend

On this website I've already further tweaked this theme, e.g. adding RSS and email subscription links. I've provided documentation on how to further extend the theme for various use cases, including:

  • Changing the profile image from the blog's logo to another picture
  • Adding a title under the sidebar profile image
  • Adding custom links / content under the navigation bar
  • Adding more social icons

Enjoy!

The theme is completely free to use and modify (its license is the standard Apache 2.0 license). Download it and make the most out of it!

comments powered by Disqus