My First Mothership: A Front End Perspective

Look mom! I did it!

They say if you teach a man to fish, he will never go hungry. This is probably true (personally, I could never catch, kill and eat a fish), but sometimes I prefer to take more of a “jump into the deep end” approach. While I have built many Mothership sites in the past, our workflow in the early days saw the main structure of the site being implemented by a back end developer, with myself in the front end mainly making changes to our skeleton theme.

This time around, I decided to take the next step forward and build a site completely on my own. Well, not completely. I was first shown roughly where I could find the places to create new page types. Then I shooed the back end developer away and got my hands dirty.

It was a lot easier than I expected, to be honest. Yes, that’s right, this is my honest review of my first time building a site solo on Mothership. I’m not here to lie to you!

I’ve sat by as the back end developers have had complex-sounding conversations about classes, functions and field factories. It all sounded a bit over my head. However, once you get into it, it all starts making sense.

I’m not going to go into huge detail about the process, because that is what the wiki is for, but basically I worked in these three main areas:

First I added a new Page Type to the listing on the Services page (site > src > Bootstrap > Services.php). The skeleton theme comes with several standardized pages already installed, so I was able to see where I could add my new page type, and the format for doing so.

Second was the PageType folder (site > src > PageType). Here, I was able to create a page type based on one that had already been implemented. I changed the class name, filled in the rest of its identifying info, and then got to work creating fields. The Home page type in the skeleton for Mothership has a rather extensive group of different options. From looking at it, I was able to figure out how to make a repeatable group, text fields, text areas that support Markdown and even links within the site. Along the way, I created a page, and checked that each field I wanted was appearing as I wished, until I’d created a field for each area of content.

The third step is the fun part: getting the information from the admin side of things to the front end. I’ve created a lot of templates on many different platforms – WordPress, Drupal, and a whole host of rather questionable proprietary engines. Mothership is my favourite, and I’m not just saying that because of the obvious reasons.

Mothership uses Twig, which is a PHP templating engine. So, although it is similar in syntax to PHP, it reads in a much more 'human' way. So when I went to the page_type folder (site > resources > view > page_type) and picked an existing page type to model my new one after, it was pretty easy to see what went where.

{{ page.title }} ? Easy.

{% for promo in page.content.promos %} ? Perhaps a bit more complex, but still easy enough to work through.

With anything in the world of front end dev, I think that’s more than what we’re looking for when it comes to an easy way to bridge the gap between the back end and front end of our projects. I certainly didn’t sit down and write out my page from beginning to end without a few slip ups, but who does? The error reporting was more than enough to tell me where I might have made a misstep or two outputting more complicated data. I did get there, and without anything I would consider to be a struggle!

p { color: red }

In terms of learning curve, it’s not steep. Consider the nightmare that is building a template on Drupal or ExpressionEngine – it’s worlds away from that. Maybe even universes.

At the time of writing, I would put it about on par with WordPress. In fact, in some areas, Mothership is a lot clearer. While components of Mothership are a bit more spread out than the jumble of files one finds in a WordPress theme, they feel a lot more organized. Plus, there’s no pesky WordPress loop or queries to work with!

Aisling Brock, Front End Developer

Aisling is a poo head


  • Aisling

    June 23rd at 12:34pm

    Etiam ultricies nisi vel augue. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras varius. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.

  • Aisling

    June 23rd at 12:35pm

    Praesent nec nisl a purus blandit viverra. Curabitur ullamcorper ultricies nisi. Pellentesque posuere. Praesent egestas neque eu enim.

  • Bob Loblaw

    June 23rd at 12:36pm

    Curabitur nisi. Donec venenatis vulputate lorem. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros.

    Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.

    Phasellus consectetuer vestibulum elit. Mauris sollicitudin fermentum libero. Sed hendrerit.

  • Thomas Marchant

    October 6th at 4:13pm

    I disagree withthis blog post

Comment on this blog post