I fell in love with the Koken CMS. I discovered it via Reddit, while performing my daily dose of procrastination on /r/web_design and on /r/photography. It’s a beautiful and free CMS designed for photographers, designers, and creative DIYs as they call it. And yeah, the power of this CMS lies in its powerful and elegant management of the media library.
The Koken CMS can be extended using plugins, which use hooks and filters. I tried to search some plugins on the Internet but couldn’t find any besides the GitHub repository for the inbuilt plugins. So, I tried to make my first Koken plugin: The Scroll To Top Plugin.
Installation and Usage:
After downloading the plugin, you will find a folder called rrikesh-scroll-to-top, you should upload this folder to your storage/plugins/ folder in your Koken Installation. You should then proceed to your Koken Dashboard → Settings → Plugins to activate the plugin.
The plugin is currently disabled. Click on the disabled button to enable the plugin(I don’t really like it that I should click on disabled to enable something). You should then get a message to set up the plugin.
The next step is to click on the setup button. and you’ll land on a page to configure that plugin.
Write the text you want to appear and hit Save plugin settings. You’re done. Go to your website and scroll down a bit, you should see a Scroll To Top button appearing at the bottom right of your screen. Note that the button will appear only when you have scrolled down.
Applying custom styles to the button
If you look back to the settings page of the plugin, you’ll notice another field called Custom CSS. You can add styles in that field if you want a different style applied on the button. For example, let’s add the following in the Custom CSS field:
background: none repeat scroll 0 0 #d4ceff; border: 1px solid #b0abd2; bottom: 10px; padding: 10px; position: fixed; right: 10px; z-index: 100; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Save the settings and reload your page, the Scroll To Top button will now become:
For those wanting to learn how to write plugins, I’ll write a post explaining the codes of the Scroll To Top plugin.