RAI Pubblicità Corporate Website — Custom WordPress Theme Development

Project Overview

Client: RAI Pubblicità S.p.A.
Project Type: Corporate Website
Development Period: February 2015
Platform: WordPress 4.1 (Italian)

RAI Pubblicità is the advertising sales house for RAI, Italy’s national public broadcasting company. This project involved developing a custom WordPress theme to showcase their advertising services across multiple media channels: television, radio, cinema, digital platforms, and sports broadcasting.

Project Scope and Objectives

Primary Goals

Create a modern, visually impactful corporate website
Showcase advertising opportunities across all RAI media channels
Provide an intuitive content management system for marketing teams
Ensure responsive design for desktop, tablet, and mobile devices
Implement multimedia content capabilities (video showreels, image galleries)

Target Audience

Media buyers and advertising agencies
Corporate marketing departments
Brand managers seeking advertising partnerships

Project Evolution

Development Timeline (Git History Analysis)

The project was developed over a concentrated 16-day period in February 2015, with 27 commits documenting the evolution:

Date	Phase	Key Activities
Feb 10, 2015	Initial Setup	First commit, base theme structure
Feb 10-12, 2015	Core Development	Various structural changes and refinements
Feb 13, 2015	Online Integration	Sync with production server
Feb 18, 2015	Major Sync	Theme package with Gaetano’s modifications
Feb 19, 2015	Section Completion	All page templates finalized via Bitbucket
Feb 19, 2015	Bug Fixes	Carousel interaction issues resolved
Feb 20, 2015	Cross-Device Fixes	iPad animation CSS corrections, iPhone viewport handling
Feb 26, 2015	Final Release	Last sync with completed theme modifications

Contributors

Kidel (15 commits) – Lead development
Lushano Perera (12 commits) – Remote edits via Bitbucket

Technology Stack

Core Platform

Component	Technology	Version
CMS	WordPress	4.1 (Italian)
Server	Apache	–
Language	PHP	5.x
Database	MySQL	–

Frontend Technologies

Technology	Purpose
HTML5	Semantic markup structure
CSS3	Styling, animations, responsive design
jQuery	DOM manipulation, interactions
Owl Carousel	Slider/carousel functionality
Modernizr 2.7.1	Feature detection for legacy browsers
Conditionizr 4.3.0	Browser/device conditional loading

WordPress Plugins

Plugin	Purpose
WP-Types	Custom fields and content types
Akismet	Spam protection
go-newrelic	Performance monitoring

Custom Assets

Asset	Description
MuseoSans	Primary typography (100-900 weights)
RaiPub Icon Font	Custom iconography
Open Sans	Secondary web font (Google Fonts)

Architecture

Theme Structure

The custom theme is based on the HTML5 Blank boilerplate by Todd Motto, extensively modified for RAI Pubblicità’s requirements.

wp-content/themes/rai-pubblicita/
├── css/
│   ├── normalize.min.css    # CSS reset
│   ├── main.css             # Core styles (511 lines)
│   ├── animation.css        # CSS3 animations
│   ├── carousel.css         # Owl Carousel styling
│   ├── responsive.css       # Tablet breakpoints
│   ├── mobile.css           # Mobile-specific styles
│   ├── fonts.css            # @font-face declarations
│   └── ieFix.css            # Internet Explorer fixes
├── js/
│   ├── main.js              # Core interactions
│   ├── lightbox.js          # Modal functionality
│   └── lib/
│       ├── owl.carousel.min.js
│       ├── modernizr-2.7.1.min.js
│       └── conditionizr-4.3.0.min.js
├── fonts/                   # Custom web fonts
├── images/                  # Theme images
├── functions.php            # Theme functions (480 lines)
├── header.php               # Global header
├── footer.php               # Global footer
├── slider.php               # Homepage focus slider
└── sottopagina-rai-*.php    # Section page templates

CSS Architecture

Stylesheets load in a dependency chain to ensure proper cascade:

normalize.min.css
    └── main.css
        └── style.css
            └── animation.css
                └── carousel.css
                    └── responsive.css
                        └── mobile.css

Design System

Color Palette:

/* Brand Colors */
--rai-blue:       #001d3b;  /* RGB 0, 29, 59 */
--rai-green:      #00ff96;  /* Accent color */
--rai-gray:       #7c8589;  /* Body text */
--rai-gray-dark:  #465054;  /* Headings */

Typography Scale:

body { font-family: "Open Sans", Arial; font-size: 14px; line-height: 20px; }
h2 { font-family: MuseoSans-900; font-size: 90px; line-height: 80px; }

Page Template System

Section Templates

Each media channel has a dedicated page template:

Template File	Section	Features
`sottopagina-rai-tivu.php`	Television	Video showreel, specials carousel
`sottopagina-rai-radio.php`	Radio	Audio content, program listings
`sottopagina-rai-cinema.php`	Cinema	Film advertising packages
`sottopagina-rai-digital.php`	Digital	Web/app advertising
`sottopagina-rai-sport.php`	Sports	Event sponsorships
`sottopagina-rai-iniziative.php`	Special Events	Top events, promotions
`sottopagina-rai-legal.php`	Legal	Terms, privacy policy

Template Structure Example

<?php /* Template Name: Pagina custom Tivu */ get_header(); ?>
    <?php get_template_part('menu-rai-page'); global $post; ?>

    <div id="bigVideo">
        <?php
        $pagina = get_posts(array(
            'showposts' => 1,
            'post_type' => 'page'
        ));

        foreach ($pagina as $raipagina) {
        ?>
        <div class="item">
            <div class="Player">
                <video id="video" controls preload="none">
                    <source type="video/mp4"
                        src="<?php echo get_post_meta($post->ID, 'wpcf-carica-il-video', true); ?>">
                </video>
            </div>
            <div class="container">
                <h2><?php the_title(); ?></h2>
                <h3>Showreel</h3>
                <a href="#" class="play">Guarda</a>
            </div>
        </div>
        <?php } ?>
    </div>

Custom Fields Integration

WP-Types Configuration

Content editors manage dynamic content through custom fields:

Field Key	Type	Usage
`wpcf-focus`	Boolean	Marks post for homepage slider
`wpcf-immagine-del-focus`	URL	Focus slider background image
`wpcf-carica-il-video`	URL	Video file path
`wpcf-video-poster`	URL	Video thumbnail image
`wpcf-listino`	WYSIWYG	Pricing/rate card HTML

Query Pattern for Dynamic Content

// Fetch posts marked for homepage focus slider
$slider = get_posts(array(
    'showposts' => -1,
    'post_type' => 'post',
    'meta_key'  => 'wpcf-focus',
    'meta_value' => 1
));

foreach ($slider as $sliderhome) {
    $image = get_post_meta($sliderhome->ID, 'wpcf-immagine-del-focus', true);
    $video = get_post_meta($sliderhome->ID, 'wpcf-carica-il-video', true);
    // Render slider item...
}

Taxonomy-Based Filtering

// Filter content by media type taxonomy
$getslug = $_SERVER['REQUEST_URI'];
$taxonomyname = trim($getslug, '/');

$speciali = get_posts(array(
    'showposts' => -1,
    'post_type' => 'post',
    'tax_query' => array(
        array(
            'taxonomy' => 'mezzi',
            'field'    => 'slug',
            'terms'    => array($taxonomyname)
        )
    )
));

Interactive Components

Homepage Focus Slider

Full-viewport hero carousel using Owl Carousel:

jQuery("#Focus").owlCarousel({
    nav: true,
    autoplay: true,
    loop: true,
    animateOut: 'fadeOut',
    items: 1,
    navSpeed: 1000,
    dotsSpeed: 1000
});

Custom modal implementation for video and image content:

$(".container").find(".more").click(function(){
    // Clone lightbox content to container
    $("#lightboxContainer").find(".lightbox").remove();
    $(this).parent(".container").find(".lightbox")
        .clone()
        .appendTo("#lightboxContainer");

    // Fade in animation
    $("#lightboxContainer").find(".lightbox, .lightbox div")
        .delay(200)
        .fadeIn(400);

    // Close handler
    $("#lightboxContainer .close").click(function(){
        $('#lightboxContainer').find(".lightbox, .lightbox div")
            .fadeOut(400, function(){
                $(this).remove();
            });
    });
});

Smooth Scroll Navigation

$('a[href*=#]:not([href=#])').click(function() {
    $('a[href*=#]:not([href=#])').removeClass("selected");
    $(this).addClass("selected");

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

Responsive Design

Breakpoint Strategy

Breakpoint	Target Devices	CSS File
1030px+	Desktop	`main.css`
1024px	Tablet landscape	`responsive.css`
640px	Mobile/iPhone	`mobile.css`

iPhone Viewport Handling

Special viewport meta tag injection for iPhone devices:

<?php
if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {
    echo '<meta name="viewport" content="width=640" />';
} else {
    echo '<meta name="viewport" content="width=900" />';
}
?>

Responsive Carousel Configuration

jQuery('#Slider.big').owlCarousel({
    nav: true,
    loop: true,
    margin: 20,
    slideBy: 2,
    items: 4,
    responsive: {
        0: { items: 2, slideBy: 2 },      // Mobile
        1024: { items: 2, slideBy: 2 },   // Tablet
        1030: { items: 4, slideBy: 2 }    // Desktop
    }
});

Performance Optimizations

Image Preloading

Focus slider images are preloaded in a hidden container:

<div id="preload" style="display: none; visibility: hidden">
    <?php
    $slider = get_posts(array(
        'showposts' => -1,
        'post_type' => 'post',
        'meta_key'  => 'wpcf-focus',
        'meta_value' => 1
    ));

    foreach ($slider as $sliderhome) {
        $image = get_post_meta($sliderhome->ID, 'wpcf-immagine-del-focus', true);
        if ($image) {
            echo '<img src="'. $image .'" width="1" height="1" alt="preload" />';
        }
    }
    ?>
</div>

WordPress Head Cleanup

Removal of unnecessary WordPress meta tags:

// Remove Actions
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

Project Metrics

Metric	Value
Theme PHP Files	34
CSS Files	11
JavaScript Files	8
Total CSS Lines	1,182
Development Commits	27
Development Period	16 days

Key Takeaways

Technical Achievements

Modular Template System – Clean separation of concerns with dedicated templates for each media section
Custom Fields Integration – Flexible content management through WP-Types
Responsive Architecture – Device-specific optimizations including iPhone viewport handling
Performance Focus – Image preloading, WordPress head cleanup, optimized asset loading
Interactive Experience – Smooth animations, video integration, custom lightbox

Challenges Addressed

Cross-browser compatibility (IE8+ support via conditional stylesheets)
iPad-specific animation rendering issues
Carousel interaction bugs on cloned items
Mobile viewport scaling for optimal content display