We’ve recently been engaged by Great Spirits (GSBC) to assist in website management. They have a corporate site (Great Spirits Baking Company) plus 5 product sites, which describe the individual product lines and products that are baked and sold on their sites (Baileys, Captain Morgan, Guinness, Jack Daniels, and Pallini). Their specialty is spirit-infused baked goods, and boy are they yummy!

Their sites were being hosted at their prior developer, so the first project was to move the sites to their Flywheel hosting account. We shortly discovered that it is a little too expensive to host six sites on Flywheel, so we began investigating how to merge the sites and still retain the styles of each site. In WordPress, this is pretty challenging, even though all the sites used the same theme (Enfold Child). The color schemes and menus are totally different, and even fonts are not the same. So we embarked on the task.

The first step was to provide conditional menus for each section. We left the main site (the corporate site) as the main menu, and installed two plug-ins to allow for the condition logic. The first is Conditional Menus by Themify; the second is Pages with category and tag by YAHMAN, which allows pages as well as posts to have a category. Since the Conditional Menu plugin selects the menu to display to be chosen by category, this provides all the functionality we need for sectional menus.

Now, we need to provide a way to apply different css files to build the theme for the product sections. Here is where the challenges start. We used a plug-in to allow development of functions (yet not modifying functions.php) to insert the appropriate css files containing font definitions, and other classes to maintain the uniqueness of the product site. We used My Custom Functions by Space X-Chimp to provide this logic.

A few other nots on the section pathing: we made the short code for each section reflective of the product, and the page name start with a keyword we can use to determine the footer to display in the document.ready function. So the product pages for Baileys always use the path of /baileys-cakes/baileys-{page name}. Our function code looks like this:

function replace_stylesheets() {
    $post = get_post();
	if ( $post ) {
		$post_slug = $post->post_name;
        if (strpos($post_slug, '-', 0) > 0)
        	{$post_slug = substr($post_slug, 0, strpos($post_slug, '-', 0));}
        switch ($post_slug) {
            case 'baileys':
                $post_id = 'baileys';
        	$uploaddir = home_url( '/' ).'wp-content/uploads/baileys-cakes/styles';
		$uploaddirjs = home_url( '/' ).'wp-content/uploads/baileys-cakes/js';
        	$custom_cssname = 'baileyscakes-custom.css';
                break;
            case 'captain':
                $post_id = 'captain';
                $uploaddir = home_url( '/' ).'wp-content/uploads/captainmorgan-cakes/styles';
		$uploaddirjs = home_url( '/' ).'wp-content/uploads/captainmorgan-cakes/js';
		$custom_cssname = 'captainmorgancakes-custom.css';
                break;
            default:
                $post_id = '';
                break;
        }
	}

    if ($post_id != '') {	//only register new scripts and css if it is not the corp site.
	wp_deregister_style( 'custom-fonts-'.$post_slug );
	wp_register_style( 'custom-fonts-'.$post_slug, $uploaddir.'/fonts.css'  );            
	wp_enqueue_style( 'custom-fonts-'.$post_slug );
         
        wp_deregister_style( 'custom_cs' );
	wp_register_style( 'custom_cs', $uploaddir.'/enfold-child/style.css'  );
	wp_enqueue_style( 'custom_cs' );    
        
	wp_deregister_style('avia-dynamic');
	wp_register_style( 'avia-dynamic', $uploaddir.'/dynamic_avia/enfold_child.css'  );
	wp_enqueue_style( 'avia-dynamic' );   
            
	wp_deregister_style( 'site-custom-'.$post_slug );
    	//echo $uploaddir.'/'.$custom_cssname;
	wp_register_style( 'site-custom-'.$post_slug, $uploaddir.'/'.$custom_cssname  );
	wp_enqueue_style( 'site-custom-'.$post_slug ); 
        
	wp_deregister_script( 'custom-footer-js-'.$post_slug );
	wp_register_script( 'custom-footer-js-'.$post_slug, $uploaddirjs . '/avia-footer-scripts.js', array('jquery'), '1.0.0', true );
	wp_enqueue_script( 'custom-footer-js-'.$post_slug );
	//
	//register the custom js scripts from old site
    }
add_action( 'wp_enqueue_scripts', 'replace_stylesheets', 40 );

function km_get_wordpress_uploads_directory_path() {
    $upload_dir = wp_upload_dir();
    return trailingslashit( $upload_dir['basedir'] );
}

Finally, we added the sections for the alternate footer to the main site’s footer, with a special class that can be enabled/disabled as needed. The menu icons were also replaced in the document.ready function. Here is our custom document.ready:

jQuery(document).ready(function( ){
	/** replace menu bar image if from a product site. get the path of the URL */
    hide_all_footers();
    var pathname = window.location.pathname.toLowerCase(); // Returns path only (/path/example.html)
  
    var pathname1 = pathname.replace('\/','');
    var pathname2 = pathname1.replace('\/','');
  	var dashpos = pathname2.indexOf("-", 8);
  
    if (dashpos==-1){
      dashpos = pathname2.length;
    }
    if (dashpos==0){
      pathname3 = '-';
    }
    else {
  	pathname3 = pathname2.substring(0, dashpos);
    }
    switch (pathname3)  {
      case 'baileys-cakes':

        jQuery('.footer_product').show();
        jQuery(".av_main_nav_header").height(100);
        jQuery(".av_main_nav_header").css('padding-top', '10px');
        jQuery('img[alt="GSBC"]').prop("src", "/wp-content/uploads/baileys-images/baileys-logo_top2.png");
		jQuery('img[alt="GSBC"]').width(300);
        jQuery('img[alt="GSBC"]').prop("height", "95");
        jQuery('img[alt="GSBC"]').css('margin-top', '5px');
        
        break;
      default:
        jQuery('.footer_gsbc').show();
        break;
    }