Fabbrica della Pace — Technical Case Study

Project Overview

Client: Fondazione La Fabbrica della Pace
Type: Nonprofit Organization Website with E-commerce & Donation Platform
Developer: Lushano Perera for Arsenale23
Timeline: October 27, 2015 — December 16, 2015 (51 days)
Launch Date: November 13, 2015
Technology Stack: WordPress 4.4, WooCommerce, Compass/SASS, jQuery

The Challenge

Fondazione La Fabbrica della Pace, an Italian nonprofit organization, needed a complete digital presence to support their peace-building initiatives. The project required:

A visually compelling website reflecting the organization’s humanitarian mission
An integrated donation system with Italian bank payment gateway (BNL Positivity)
An e-commerce platform for fundraising merchandise
Media galleries for videos and images from field activities
Newsletter subscription and contact management
Performance optimization for fast page loads
Full Italian localization
GDPR-compliant cookie consent

Technical Architecture

Custom WordPress Theme

Built entirely from scratch, the fabbricadellapace theme implements a modular architecture:

wp-content/themes/fabbricadellapace/
├── functions.php          # Orchestrator loading all modules
├── inc/                   # PHP modules
│   ├── setup.php          # Theme features & image sizes
│   ├── styles-scripts.php # Asset management with defer loading
│   ├── woocommerce.php    # E-commerce customizations
│   ├── menus.php          # Navigation registration
│   ├── galleries.php      # Media gallery handlers
│   └── custom.php         # Helper functions
├── parts/                 # Reusable template parts
│   ├── critical-css.php   # Above-the-fold inline CSS
│   ├── latest-news.php    # News carousel component
│   ├── newsletter-signup.php
│   ├── photoswipe.php     # Lightbox gallery
│   └── social-share.php
├── sass/                  # SCSS architecture
│   ├── style.scss         # Main entry with Susy grid
│   ├── _main.scss         # Primary styles
│   ├── _woocommerce.scss  # Shop styling
│   └── [vendor partials]
└── js/
    ├── main.js            # Custom functionality
    └── vendor/            # Third-party libraries

Page Templates (tp_*.php Convention)

Custom page templates handle specialized content:

Template	Purpose
`tp_home.php`	Dynamic homepage with featured articles grid
`tp_donation.php`	Donation form with WooCommerce Quick Donation
`tp_shop.php`	Product carousel for merchandise
`tp_newsletter.php`	Email subscription landing page
`tp_5xmille.php`	Italian tax donation (5×1000) campaign
`tp_image-gallery.php`	PhotoSwipe-powered image galleries
`tp_video-gallery.php`	YouTube video archive

Key Features Implementation

1. Donation System

The donation platform integrates WooCommerce with the WooCommerce Quick Donation plugin, customized for Italian bank payments:

// tp_donation.php - Bypass caching for dynamic donation form
define( 'DONOTCACHEPAGE', true );
define( 'DONOTMINIFY', true );

// Render donation shortcode
echo do_shortcode( '[wc_quick_donation]' );

Custom checkout fields were added for Italian fiscal requirements:

// inc/woocommerce.php
function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_codicefiscale'] = array(
        'label'       => __( 'Codice fiscale', 'fabbricadellapace' ),
        'placeholder' => __( 'Codice fiscale', 'placeholder', 'fabbricadellapace' ),
        'required'    => true,
        'class'       => array( 'form-row-wide' ),
        'clear'       => true
    );
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'custom_override_checkout_fields' );

Payment Gateway: Custom BNL Positivity plugin (bnl_positivity) for Italian bank transactions.

2. Performance Optimization

Critical CSS Inlining

Above-the-fold CSS is inlined directly in <head> for faster first paint:

// header.php
<style type="text/css" media="screen">
<?php
    if( ( $_SERVER['SERVER_ADDR'] != '::1') &&
        ( $_SERVER['SERVER_ADDR'] != '127.0.0.1' ) ) {
        get_template_part( 'parts/critical-css' );
    }
?>
</style>

Deferred Script Loading

All JavaScript loads with defer attribute for non-blocking rendering:

// inc/styles-scripts.php
function script_tag_defer( $tag, $handle ) {
    if( is_admin() ) {
        return $tag;
    }
    if( strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 9.' ) !== false ) {
        return $tag;
    }
    return str_replace( ' src',' defer src', $tag );
}
add_filter( 'script_loader_tag', 'script_tag_defer', 10, 2 );

CSS Loading in Footer

Stylesheets load asynchronously in the footer:

function my_style_in_footer() {
    if( ! doing_action( 'wp_head' ) ) {
        return;
    }
    global $wp_styles;
    $queued_styles = $wp_styles->queue;
    $wp_styles->queue = array();
    $wp_styles->to_do = array();

    add_action( 'wp_footer', function() use( $queued_styles ) {
        global $wp_styles;
        $wp_styles->queue = $queued_styles;
        $wp_styles->to_do = $queued_styles;
    }, 0 );
}
add_action( 'wp_print_styles', 'my_style_in_footer', 0 );

Result: PageSpeed Insights score of 99-100/100.

3. Responsive Grid System

Built on Susy grid framework with 12-column layout:

// sass/style.scss
$susy: (
    columns: 12,
    gutters: 0,
    container: 75em,
    gutter-position: after,
    global-box-sizing: border-box
);

@include border-box-sizing;

4. Hero Splash Screen

Full-viewport splash with scroll-triggered header behavior:

// js/main.js
function topBarBehavior() {
    if (jQuery('#splash').visible(true, true, 'vertical')) {
        jQuery('body').removeClass('splash-not-visible');
    }
    else {
        jQuery('body').addClass('splash-not-visible');
    }
}

jQuery(window).scroll(function() {
    topBarBehavior();
});

// sass/_main.scss
.home #splash {
    position: relative;
    width: 100%;
    height: calc(100vh - 95px);
    background: url(../img/splash-image.jpg) no-repeat center center;
    background-size: cover;
}

.splash-not-visible #top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1499;
}

5. Image Galleries with PhotoSwipe

Lightbox galleries with touch/swipe support:

function init_photoswipe_gallery() {
    var $pswp = jQuery('.pswp')[0];

    jQuery('#main').each(function() {
        var $pic = jQuery(this),
            getItems = function() {
                var items = [];
                $pic.find('figure.gallery-item a').each(function() {
                    var $href   = jQuery(this).attr('href'),
                        $size   = jQuery(this).data('size').split('x'),
                        $width  = $size[0],
                        $height = $size[1];

                    items.push({
                        src: $href,
                        w: $width,
                        h: $height
                    });
                });
                return items;
            };

        jQuery('.gallery-item').click(function(event) {
            event.preventDefault();
            var $index = jQuery(this).attr('data-id').replace('gallery-item-','');

            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default,
                getItems(), { index: $index, bgOpacity: 0.7 });
            lightBox.init();
        });
    });
}

6. News Carousel with Flickity

Responsive touch-enabled carousel for latest articles:

jQuery('#latest-news').flickity({
    cellSelector: '.latest-news-item',
    cellAlign: 'left',
    contain: true
});

Custom cookie notice with localStorage persistence:

function setCookie(cookieName, cookieValue, nDays) {
    var today  = new Date();
    var expire = new Date();
    if (nDays === null || nDays === 0) nDays = 30;
    expire.setTime(today.getTime() + 3600000 * 24 * nDays);
    document.cookie = cookieName + "=" + escape(cookieValue) +
                      ";expires=" + expire.toGMTString();
}

jQuery(document).ready(function() {
    var activateBanner = getCookie('cookieNoticeOk');
    if (!activateBanner) {
        jQuery('#cookie-notice').show();
    }
    jQuery('#cookie-notice-ok').click(function(c) {
        c.preventDefault();
        setCookie('cookieNoticeOk', 'true', 1);
        jQuery('#cookie-notice').fadeOut();
    });
});

Development Workflow

CSS Build System (Compass/Ruby)

# config.rb
require "compass"
require "breakpoint"
require "normalize-scss"
require "font-awesome-sass"

http_path        = "/"
css_dir          = "css"
sass_dir         = "sass"
images_dir       = "img"
javascripts_dir  = "js"
fonts_dir        = "fonts"

output_style     = :compressed
relative_assets  = true

Build commands:

compass watch    # Development with live reload
compass compile  # Production build

Version Control

146 commits over 51 days
Single developer (Lushano Perera)
Conventional commit messages (new:, fix:, change:, update:, clean:)

Key Development Phases

Phase	Dates	Commits	Focus
Setup & Prototyping	Oct 27-29	20	HTML/CSS prototypes, Compass setup
WordPress Integration	Nov 2-5	15	Theme structure, plugin integration
WooCommerce & Donations	Nov 5-13	35	E-commerce, payment gateway
Production Launch	Nov 13	1	“rilascio sito”
Post-launch Optimization	Nov 14-19	25	Bug fixes, performance tuning
Maintenance	Nov 20 – Dec 16	20	Updates, minor features

Technology Stack

Core Platform

WordPress 4.4 (Italian localization)
WooCommerce 2.4.10 with Quick Donation extension
W3 Total Cache for page caching

Frontend Libraries

jQuery 1.11.2 (CDN with local fallback)
Flickity — Touch-responsive carousels
PhotoSwipe — Touch-friendly lightbox
Superfish — Dropdown menu enhancement
SelectFx — Custom select styling
Modernizr + Respond.js — Browser feature detection

CSS Framework

Compass with Breakpoint, Normalize, Susy
Font Awesome icon library
Geogrotesque custom webfont

Plugins

Plugin	Purpose
Types (Toolset)	Custom fields & post types
Contact Form 7	Contact & newsletter forms
CF7 to Database	Form submission storage
Yoast SEO	Search optimization
Postman SMTP	Email delivery
BNL Positivity	Italian bank payment gateway
Automatic Video Posts	YouTube import automation

Project Statistics

Metric	Value
Development Time	51 days
Total Commits	146
Theme Lines of Code	~25,000
Custom Templates	8 page templates
Reusable Parts	9 template parts
SCSS Partials	16 files
Custom Image Sizes	3 (box-full, box-half, fdp-product)

Lessons Learned

Critical CSS pays off — Inlining above-the-fold CSS achieved near-perfect PageSpeed scores
Defer everything — Non-blocking script loading dramatically improved perceived performance
Cache bypass for donations — Dynamic payment forms require cache exclusion constants
Custom payment gateways — Italian banking requirements demanded custom plugin development
Modular theme architecture — Separating concerns into inc/ modules simplified maintenance

Conclusion

The Fabbrica della Pace project demonstrates how a custom WordPress theme, built with modern frontend tooling and careful performance optimization, can deliver a compelling digital experience for nonprofit organizations. The integration of WooCommerce for both merchandise sales and donations, combined with Italian-specific payment processing, created a complete fundraising platform that continues to support the foundation’s peace-building mission.