Making Themes*

Work For You

* And well sites in general

Simon Pollard

Lead Web Developer at 

@smp303

https://slides.com/simonp303

Parent Theme

It can be a great idea to build a core theme that you can use for all your sites.

Keep all your core reusable functions in one place

Build a base CSS framework style so you immediately have a workable site from the start

Keep all your useful JS code in one place

Parent Theme - Tips

When adding a function be sure to wrap it like so:

if( !function_exists('my_parent_function') ) {
    function my_parent_function() {
        return 'do this';
    }
}

Checking the function exists allows you to override it in your child theme:

function my_parent_function() {
    return 'do that';
}

Parent Theme - Tips

Let's start by checking we are loading things correctly.

Enqueue Javascript and CSS in functions.php

Do not hard code into your header / footer

https://developer.wordpress.org/reference/functions/wp_enqueue_script/
 

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Child Themes

Everything from the parent theme is available.

Great way to manipulate an existing theme without touching that themes code.

Set up your base parent theme for project with all your core reused functions all ready to go.

Child Themes

/*
Theme Name: My Great Theme
Description: An amazing WordPress theme
Version: 0.0.1
Theme URI: http://www.mysite.com
Template: parent theme
Author: Simon Pollard
*/

Your theme will now inherit all the templates, functions, styles* and javascript*

of the parent theme

* or not, if we do things right (more later)

In your style.css file:

Child Themes - CSS and JS

If you were clever in your parent theme you wrapped your enqueue script in a function

So you can override this and load what you need:

Child Themes - CSS and JS

Be sure to use the correct paths:
get_template_directory_uri() for parent
get_stylesheet_directory_uri() for child

/**
 * Enqueue Scripts - override the function from the parent theme
 */
function shift_base_theme_scripts() {

  // Keep these scripts from the parent
  wp_register_script( 'aos_script', get_template_directory_uri() . '/dist/js/aos.js', null, null, true);
  wp_enqueue_script( 'aos_script' );

  // Load WorldPay script
  wp_register_script( 'worldpay_script', 'https://cdn.worldpay.com/v1/worldpay.js', array(), null, true);
  wp_enqueue_script( 'worldpay_script' );

  // Load script from child theme
  wp_register_script( 'child_theme_base_theme_script', get_stylesheet_directory_uri() . '/dist/js/app.js', 
array('jquery','aos_script','worldpay_script'), null, true);
  wp_enqueue_script( 'child_theme_base_theme_script' );

  // Now add our own style
  wp_register_style( 'child_theme_base_theme_style', get_stylesheet_directory_uri() . '/dist/css/main.css', 
array(), null);
  wp_enqueue_style( 'child_theme_base_theme_style' );

  // Dequeue this WordPress script for auto embeding of videos
  wp_deregister_script( 'wp-embed' );

}
add_action( 'wp_enqueue_scripts', 'shift_base_theme_scripts' );

Try using a compiler such as Gulp to compile your CSS and JavaScript.

Compression and Minification

Compress your multiple files into one file for CSS and one for JavaScript. If you can at the same time minify those files.

Use uncompressed for dev (easier to debug)

http://gulpjs.com/

Compression and Minification 2

What if you are loading in CSS and JavaScript from other sites? Well you can still enqueue them, and then you could try something like:

W3 Total Cache - yes that is a plugin!

Which has a great minify setting which will work for all CSS and JavaScript and...

https://en-gb.wordpress.org/plugins/w3-total-cache/

Caching

You really should be looking at caching your site if you need to speed it up.

This is made easy by using a plugin such as W3 Total Cache or Super Cache.

If you are running your server look at something like PHP Opcache for an extra level on top.

https://en-gb.wordpress.org/plugins/w3-total-cache/ https://en-gb.wordpress.org/plugins/wp-super-cache/
 

The Sneaky Speed Win

So you have done all this but things are still a bit sluggish and your server is not happy.

Enter the CDN - Content Delivery Network
let someone else take the load, literally

Try something like Max CDN or Key CDN

https://www.keycdn.com       https://www.maxcdn.com

Security

Do not let anyone other than you have admin access

Create fake "super admin ruler of all" accounts:
https://codex.wordpress.org/Function_Reference/add_role

Enhance password security:
https://github.com/roots/wp-password-bcrypt

Be careful what you add - plugins/js etc etc

Useful Code

/**
 * Make tinmyce paste as text button default to on
 */
  if( !function_exists('tinymce_paste_as_text') ) {
  function tinymce_paste_as_text( $init ) {
      $init['paste_as_text'] = true;
      return $init;
  }
  add_filter('tiny_mce_before_init', 'tinymce_paste_as_text');
}

/**
 * Disable theme switching
 */
function shift_lock_theme() {
  global $submenu, $userdata;
  wp_get_current_user();
  if ($userdata->ID != 1) {
    unset($submenu['themes.php'][5]);
    unset($submenu['themes.php'][15]);
  }
}
add_action('admin_init', 'shift_lock_theme');

/**
 * Removes "built with wordpress" 
 * and version number from meta data
 */
remove_action ('wp_head', 'wp_generator');

Useful Code...

/**
 * Change default image link to none
 */
if( !function_exists('wpb_imagelink_setup') ) {
  function wpb_imagelink_setup() {
    $image_set = get_option( 'image_default_link_type' );

    if ($image_set !== 'none') {
      update_option('image_default_link_type', 'none');
    }
  }
  add_action('admin_init', 'wpb_imagelink_setup', 10);
}

/**
 * Allow svg file type to be uploaded
 */
if( !function_exists('shift_mime_types') ) {
  function shift_mime_types($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
  }
  add_filter('upload_mimes', 'shift_mime_types');
}

Thanks!

Any questions or...

https://slides.com/simonp303/         @smp303