WordPress theme: MadridLovesRefugees.org

Posted on

This is ongoing, pro-bono work. The wordpress theme is not live on the site due to waiting for content to be delivered by the volunteers, who only have evenings and weekends to do their NGO work.


This WordPress theme was developed for the NGO ‘Madrid Loves Refugees’, which has since been re-named ‘Madrid for Refugees‘. The organisation started as a grass roots movement on facebook in response to the refugee crisis in Europe triggered by the Syrian civil war.  The NGO is made up of 6 teams of volunteers, each dedicated a different aspect of its organisation and running. The theme is not live on the site due to waiting for content.

Requirements Gathering

The organisation needed a means of advertising what they do to potential sponsors and partnerships; to give the public updated information on what they were doing to help refugees; post news updates from their liaising and keeping close contact with official bodies involved at the detention center, and directing what kind of donations were accepted (clothes, kitchen items, blankets) and what were not (money).

They were using different google sign up forms to manage volunteer sign ups and needed a way to consolidate this information across all groups. They also wanted to allow landlords willing to rent to refugees or room shares to sign up, and for potential employers to register their willingness to hire refugees. As the organisation evolved, it became apparent there would need to be a job seekers section for posting the details of candidates skills and getting in touch to hire that candidate.


When I started work on this project, the domain was bought and hosted on the personal web server of a volunteer, and she wasn’t sure how to set up individual FTP access for me, so the look and feel was designed as a custom WordPress theme which could be installed via admin panel, and which would then show future update alerts, and allow her to use the theme update button in the future just she would any free theme, thus sidestepping the need for FTP access. The different types of updates needed also made this a good fit for a WordPress project with custom category display logic to display the content.

I developed this theme as a child theme of the Genesis framework for it’s excellent security features and ability to add header and footer scripts on any page right out of the box. The child theme means the NGO can update the main Genesis framework without losing the customised theme.

Custom php was used to give the page a differently styled landing page to the other pages in the site, keep job listings and job seeker entries off the front page (so only the NGO updates, refugee news and other sections show), as well as change the layout of the genesis base theme layout itself.

Customised widget areas were created for editing the homepage intro and ‘what we do’ sections through the WordPress admin interface, so the volunteers can update all areas of the site themselves in the future. The hero image on the front page is editable on all pages though the visual ‘customize’ area in WordPress admin, so that blog posts can have different hero images if available, or a default hero image if none is available.

A logic based google form was created to integrate for all signup pages into one page, with the user being presented different form options depending on what they selected. The form was integrated into the website using the google form plugin, and all necessary teams were given access so could now share one set of data.

Jobseekers posts each have a contact form posted at the bottom of each page specific to that candidate. To minimise the (thankfully rare, but always unfortunate) occurrence of hate mail being directed at the volunteers, the forms only accept contact information, rather than text input.

The theme is fully responsive on all devices. The intro text on the home page develops a background color with opacity set one smaller screen sizes so that the text remains readable.

Future WordPress Theme updates

  1. “What we do” custom widget area will have a corresponding custom plugin so no HTML entry is necessary. The admins will simply enter lines of plain text and pick a font-awesome icon that corresponds to the column
  2. Theme and plugin license keys to be added.

Stay in touch

Get more informal notes, summaries, and screenshots, on the business of making digital products and running a calm creative business by signing up to my newsletter