Wordpress & Web Development

Never Touch Code Again: Filament.io, For Non-Developers Everywhere

James Bruce 16-06-2014

If you’ve ever tried to manually paste a code snippet like Google Analytics tracking code to your website by digging into PHP template files, you’ll know how daunting it can be. Filament.io makes it as simple as dragging and dropping. At least, that’s the promise.


Getting Started

Head over to filament.io and hit the sign-up button. You’ll need to create a login, but Facebook and Google accounts can be used for quick one-button access. Next you’ll need to enter the domain you’ll be using it on – you can add more later.


If you’re running WordPress, this will be detected when it scans the site, and it’s suggested that you install the provided plugin as it allows you finer control over which type of pages have the filament functionality contained (such as only posts and not static pages).


On the next step, the Filament signup screen will give you a short JavaScript snippet – paste this into the plugin settings page. It might be the last bit of JavaScript code you’ll ever need! You can use Filament without the plugin, but you won’t have as many options to filter where scripts are displayed.


Adding Apps

The Filament screen tool a live preview of your site so you can design visually where you want apps to go. Start by adding a nice set of social buttons called Flare. In the site preview, navigate to a post.


From the sidebar, hit New to open up the Flare options. Flare is a delightful custom set of share buttons that look much nicer than the standard network-provided buttons that you probably see on the side of this article. A branded logo is included which can be removed by purchasing a premium licence for the plugin.

Save the settings, then drag and drop the new Flare module onto your site. An initial set of filtering options will then show up. Go ahead and add it to All My Posts.


You’ll then have another set of filters to customise; these are enabled by the WordPress plugin. As a developer I’m used to surrounding scripts in various PHP if clauses (Not sure what these are? Read our PHP Beginners Guide Learn To Build With PHP: A Crash Course PHP is the language that Facebook and Wikipedia use to serve billions of requests daily; the de-facto language used for teaching people web programming. It’s beautifully simple, but brilliantly powerful. Read More ), but I can really appreciate the power of these filters for those without the knowhow of WordPress page-type detection.


On a technical level, the WordPress plugin adds a set of meta tags to your page output which tell Filament what kind of page it is; the Filament Javascript initialiser then detects that, and injects the scripts you want on that particular page according to your established filters. It doesn’t manipulate the scripts in any other way – just injects them on to the page.


You’ll need to click Publish before changes are sent out to your site, and they may take a few minutes to appear, so don’t panic if it’s not immediately visible.

Click on the Dashboard link to add more apps, or you can create additional Flare units (if, for instance, you wanted a specific design or more buttons on the homepage).


At the time of writing, there are 6 apps in total available:

From the dashboard, click Launch. Notice the drop down to select sites – you can manage multiple websites from a single account.


Is It Any Good?

The visual layout tool is surprisingly effective, avoiding the hassle of trying to figure out exactly right positioning manually. If you’re not confident editing theme files, it’s a life saver. But it can only work within the confines of your existing theme. It automatically snaps to any elements it finds on the page, but it can’t for instance create a new column for a widget if your theme only has one column.


It also gets things wrong sometimes, as inevitably your page will also have dynamic elements such as sliders; or your theme CSS may interfere with the widget. You may need to play around – but for the most part, it works nicely.


Even as a web developer, I appreciate the ease of use and central script management. My footer files are usually full of code to output scripts only on a particular page – this makes that ridiculous easy, cleaning up theme files.

The selection of apps is rather limited currently, though of course you can always add your own simple code additions through the CodeDrop module – and there are more apps promised. I find myself wishing this functionality was included by default with WordPress – for all the advances in theme customization, we’re still left with the use of arcane PHP template editing to add JavaScript snippets. For now, Filament.io fills a badly needed hole in functionality that many of us never even knew existed. Have you given it a go? Tell us your thoughts.

Explore more about: JavaScript, Wordpress.

Whatsapp Pinterest

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Jason
    June 17, 2014 at 4:23 pm

    Thanks so much for the thorough overview, James! =) We're definitely working on expanding the selection of apps available on Filament, as well as a couple other major updates that will further help website owners make their websites better (*cough* Insights, *cough* ;)

    Post your suggestions here, they're welcomed! http://goo.gl/FXRWSQ