B

2020

Theme Development

Website Refresh | Custom WordPress Theme
Client: Siobhan Wolff Photography
URL: siobhanwolff.photography

Designs: Hayley Robinson
Web Development: Bartosz

Siobhan Wolff Photography

Fast, lightweight and responsive

This custom PHP development centres on a bespoke lightweight, minimalist WordPress theme that utilises Gutenberg block editor .

Siobhan Wolff Photography
Mobile view of Siobhan Wolff Photography
Siobhan Wolff Photography
Desktop view of Siobhan Wolff Photography
Siobhan Wolff Photography
Theme Options – custom input fields. Provides the client a no-code solution to editing business contact details on the fly.
Siobhan Wolff Photography
Custom admin panel – WordPress content editor guide and documentation.
// Excerpt from functions.php

function siobhan_setup() {
        add_theme_support( 'title-tag' );
        add_theme_support( 'post-thumbnails' );
        add_theme_support( 'automatic-feed-links' ); 
}
        
add_action( 'after_setup_theme', 'siobhan_setup' );

// Adding custom image sizes
if ( function_exists( 'add_theme_support' ) ) {
    add_image_size( 'entry-title-image', 1311, 616 );   
    add_image_size( 'first-archive-thumb', 864.5, 500.71 ); 
    add_image_size( 'archive-thumb', 641, 428 ); 
    add_image_size( 'featured-main', 417.5, 278.8 ); 
    add_image_size( 'blog-thumb-cut', 417, 235 ); 
}
// Proper enqueue of scripts - including GoogleFonts, AdobeTypeKit, and Custom CSS & JSS

function siobhan_script_enqueue() {
    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap', false );
    wp_enqueue_style('adobe-typekit', '//use.typekit.net/skl0srx.css', false );
    wp_enqueue_style('siobhanstyle', get_template_directory_uri() . '/css/siobhan.css', array(), false, 'all');
    wp_register_script( 'siobhanscript', get_template_directory_uri() . '/js/siobhan.js', array(), false, true );
    wp_enqueue_script( 'siobhanscript' );
}

add_action( 'wp_enqueue_scripts','siobhan_script_enqueue');

// Optimisation: Using JQuery from a faster loading CDN hosted by googleapis.com

 * Removes jQuery that comes with WordPress. Loads custom jQuery version - and adds cross-origin & integrity
 * original: //code.jquery.com/jquery-3.5.1.min.js
 *
 * Deregister included jQuery
 * Add custom jQuery with Crossorigin + Integrity
 */
function include_custom_jquery() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), null, true);
    wp_deregister_script( 'jquery-migrate' );
    wp_enqueue_script('jquery-migrate', '//code.jquery.com/jquery-migrate-3.3.0.min.js', array('jquery'), '3.3.0', false );
    
}
// Add integrity and cross origin attributes to the jQuery script.
function add_custom_jquery_script_attributes( $html, $handle ) {
    if ( $handle === 'jquery' ) {
        return str_replace( '></script>', ' integrity="sha256-9/xXx1Xx1x1XXx1x1/xXX1Xx1xX1xx1xX1x1x=" crossorigin="anonymous"></script>', $html );
    }
    return $html;
}
add_filter('script_loader_tag', 'add_custom_jquery_script_attributes', 10, 2);

// Add integrity and cross origin attributes to the jQuery migrate script.
function add_custom_jquerymigrate_script_attributes( $html, $handle ) {
    if ( $handle === 'jquery-migrate' ) {
        return str_replace( '></script>', ' integrity="sha256-xXX1Xx1xX1xx1xX1x1x1Xx1x1XXx1x1=" crossorigin="anonymous"></script>', $html );
    }
    return $html;
}
add_filter('script_loader_tag', 'add_custom_jquerymigrate_script_attributes', 10, 2);
add_action('wp_enqueue_scripts', 'include_custom_jquery');

// Adding Bootstrap & dependencies

/**
 * Load bootstrap from CDN
 * https://getbootstrap.com/
 */

function enqueue_load_bootstrap() {
    // Add bootstrap js
    wp_register_script( 'bootstrap-js', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js', ['jquery'], NULL, true );
    wp_enqueue_script( 'bootstrap-js' );

    // Add bootstrap CSS 
    wp_register_style( 'bootstrap-css', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css', false, NULL, 'all' );
    wp_enqueue_style( 'bootstrap-css' );

    // Add popper js
    wp_register_script( 'popper-js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js', ['jquery'], NULL, true );
    wp_enqueue_script( 'popper-js' );    
}

// Adding Bootstrap JS integrity and cross origin attributes
function add_bootstrap_script_attributes( $html, $handle ) {
    if ( $handle === 'bootstrap-js' ) {
        return str_replace( '></script>', ' integrity="sha384-xXX1Xx1xx11x1Xx1x1XXx1x1+xXX1Xx1xX1xx1x1XXx1x1" crossorigin="anonymous"></script>', $html );
    }
    return $html;
}
add_filter('script_loader_tag', 'add_bootstrap_script_attributes', 10, 2);

// Adding Bootstrap CSS integrity and cross origin attributes
function add_bootstrap_css_attributes( $html, $handle ) {
    if ( $handle === 'bootstrap-css' ) {
        return str_replace( '/>', 'integrity="sha384-xXX1Xx1xX1xx1xX1x1Xx1x1+xXX1Xx1xX" crossorigin="anonymous" />', $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_bootstrap_css_attributes', 10, 2 );

// Adding Bootstrap Popper JS integrity and cross origin attributes
function add_popper_script_attributes( $html, $handle ) {
    if ( $handle === 'popper-js' ) {
        return str_replace( '></script>', ' integrity="sha384-xXX1Xx1xX1xx1x+xXX1Xx1xX1xx1xX1x1x1Xx1x1XXx1x1xXX1Xx1xX1xx1xX1x1x1Xx1x1XXx1x1" crossorigin="anonymous"></script>', $html );
    }
    return $html;
}
add_filter('script_loader_tag', 'add_popper_script_attributes', 10, 2);

add_action( 'wp_enqueue_scripts', 'enqueue_load_bootstrap' );

// Optimisation: Remove dashicons unless admin logged in

function bs_dequeue_dashicons() {
    if ( ! is_user_logged_in() ) {
        wp_deregister_style( 'dashicons' );
    }
}
add_action( 'wp_enqueue_scripts', 'bs_dequeue_dashicons' );

// Add Bootstrap classes to WordPress menu 
 
function li_class_navitem($classes, $item, $args) {
  $classes[] = 'nav-item';
  return $classes;
}
add_filter('nav_menu_css_class','li_class_navitem',1,3);

function my_deregister_scripts(){
  wp_deregister_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );

// Add second menu for left and right desktop versions
function main_menu_split() {
  register_nav_menus(
    array(
      'menu-left' => __( 'menu-left' ),
      'menu-right' => __( 'menu-right' )
    )
  );
}
add_action( 'init', 'main_menu_split' );

// Post excerpt - change character length 
function new_excerpt_length($length) {
return 45;
}
add_filter('excerpt_length', 'new_excerpt_length');
 
///  Post excerpt - add '...' to the end of excerpt
function new_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

Highlights

This website build maximises the use of the WordPress framework with a minimalist code approach to custom theme development with efficient and accessible code practises in mind.

Custom PHP Theme with Bootstrap CSS, and content using Gutenberg blocks.

PHP page template development – custom blog archive and pages matching design concepts.

Custom admin panels: theme documentation and theme settings including quick editable fields for contact information.

//  Use of Theme Options input fields

<?php 
  // Phone Number 
  $foonum = siobhan_get_theme_option( 'phonenumber' );

  // Converting international phone format for button label
  $str = substr($foonum, 3);
  $foonumF = "0" .chunk_split($str, 3, ' ');

  //  Email and Address 
  $footeremail = siobhan_get_theme_option( 'emailadd' ); 
  $footeraddy = siobhan_get_theme_option( 'addyadd' );

?>
//  Call Button 
<a alt="Call Now" href="tel:<?php echo $foonum;?>">
  <?php echo $foonumF;?>
</a>
<?php
/*
 * Template Name: Bump to Baby
 * description: >-
  Page template for a service sub-page with unique design features.
 */

get_header(); ?>

<div class="mainbg"> </div>
<div id="bumptobaby">

// Adding the WordPress loop
<?php if (have_posts()): while (have_posts()) : the_post(); ?>

// Theme Options -  Feature image switches to different image URLs based on media sizes. Allows editors to adjust photography for optimal responsive display. 
<?php 
  $fisbbd = siobhan_get_theme_option( 'services_bumptobaby_desktop' );
  $fisbbt = siobhan_get_theme_option( 'services_bumptobaby_tablet' );
  $fisbbm = siobhan_get_theme_option( 'services_bumptobaby_mobile' );
?>
<div class="entry-container container p-md-0 z-5">
  <div class="wolff-flower">
    <div class="wp-block-image">
      <figure class="aligncenter size-full"><img src="/wp-content/uploads/2020/05/wolff_flower.svg" alt="Siobhan Wolff Photography" class="wp-image-247"></figure>
      </div>
    </div>
    <div class="entry-image ei-desktop" style="background-image: url('<?php echo $fisbbd; ?>');">
    <div class="entry-title">
      <a href=" <?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
      </a>
      <a href="/contact/"> <button class="lightbtn">Contact Us</button>
      </a>
    </div>
  </div>
  <div class="entry-image ei-tablet" style="background-image: url('<?php echo $fisbbt; ?>');">
      <div class="entry-title">
        <a href=" <?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
        </a>
      </div>
    </div>
    <div class="entry-image ei-mobile" style="background-image: url('<?php echo $fisbbm; ?>');">
      <div class="entry-title">
        <a href=" <?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
        </a>
    </div>
  </div>
</div>

// Visual elements displayed on >large desktop
<div class="side-flower-left">
  <div class="wp-block-image">
    <figure class="aligncenter size-full"><img src="/wp-content/uploads/2020/05/wolff_flower.svg" alt="Newborn Photography" class="wp-image-247"></figure>
  </div>
</div>
<div class="side-flower-right">
  <div class="wp-block-image">
    <figure class="aligncenter size-full"><img src="/wp-content/uploads/2020/05/wolff_flower.svg" alt="Baby Photography" class="wp-image-247"></figure>
  </div>
</div>

// Load in page content 
  <div class="content z-10 position-relative">
    <?php the_content(); ?>
  </div>
  <?php endwhile; ?>
  <?php endif; ?>
</div>

// Footer
<?php get_footer(); ?>